28172 sujets

CSS et mise en forme, CSS3

<span> dans anchor - alignement vertical

Bonjour !

Je fais appel à l'aide de la communauté d'Alsacréation, la référence du CSS Smiley biggrin .

Habituellement, je m'en sors avec les tutoriels de ce site. Or, aujourd'hui, je bloque sur un alignement vertical au milieu ! Le tutoriel suivi est celui-ci.

Je vous explique ma situation :

	<table id="ateliers-table" style="width: 95%; margin: 0 auto;" border="0" cellspacing="0" cellpadding="10" align="center">
	<tbody>
		<tr>
			<td style="width: 25%;" align="center" valign="top">
			
				<a href="#" title="Cession" id="ateliers-atelier1">
					<span class="ateliers-title">Cession/Reprise d'entreprise lorem ipsum dolor</span>
				</a>
			
			</td>
			<td style="width: 25%;" align="center" valign="top"></td>
			<td style="width: 25%;" align="center" valign="top"></td>
			<td style="width: 25%;" align="center" valign="top"></td>
		</tr>
	</tbody>
	</table>


Alors voilà, je souhaitais aligner le texte contenu dans le span de class "ateliers-title" verticalement. Je sais, vous allez me dire que c'est inutile mon span dans un anchor. En faîtes, j'ai pas trouver d'autres moyens pour ce que je voulais faire : un bloc rectangulaire, avec un entête de fond de couleur uniforme, et un bloc en dessous avec une image en fond.
Voici mon CSS pour faire ceci :

 	#ateliers-table a
 	{
 		display: block;
 		position: relative;
 		width: 214px;
 		height: 325px;
 		margin: 103px auto 0;
 		background: url('ateliers.png');
 		line-height: 103px;
 	}
 	.ateliers-title
 	{
 		position: absolute;
 		width: 214px;
 		height: 103px;
 		top: -102px;
 		left: 0;
 		background: #00789b;
 	}
 	#ateliers-table a:hover .ateliers-title
 	{
 		background: #3393AF;
 	}
 	
 	#ateliers-table a#ateliers-atelier1
 	{
 		background-position: 0 0;
 	}
 	#ateliers-table a#ateliers-atelier1:hover
 	{
 		background-position: 0 100%;
 	}


Revenons à mon problème : le line-height: 103px dans #ateliers-table a m'aligne une seule ligne verticalement au milieu, la deuxième ligne étant totalement décalée en dessous.
Dans le tutoriel, il est dit qu'il faut rajouter un line-height: 1.2 au span, ce que j'ai fait, mais ça ne résout pas mon problème. En effet, ce dernier paramètre replace la ligne en haut du bloc.

Si vous avez besoin d'informations complémentaires, n'hésitez pas ^^
Merci d'avance !

Edit : Voici un screenshot de ce que j'ai actuellement
http://img15.hostingpics.net/thumbs/mini_207291Capturede769cran20130212a768164616.png
Modifié par Willouu (12 Feb 2013 - 16:53)
Bonjour,

Willouu a écrit :
Revenons à mon problème : le line-height: 103px dans #ateliers-table a m'aligne une seule ligne verticalement au milieu, la deuxième ligne étant totalement décalée en dessous.
Dans le tutoriel, il est dit qu'il faut rajouter un line-height: 1.2 au span, ce que j'ai fait, mais ça ne résout pas mon problème. En effet, ce dernier paramètre replace la ligne en haut du bloc.

Il n'y a pas de line-height a votre span mais un height
Oui, je l'ai enlevé car il n'arrangeait pas les choses ^^
Mais je peux vous assurer que j'ai tenter avec un line-height: 1.2 au span
Ce qui est dit dans le tuto
a écrit :
Certaines solutions exposées dans ce tuto ne fonctionnent pas avec un doctype Transitionnel. En effet, ce dernier déclenche le mode "presque standard" qui provoque des comportements bizarres avec les images. Si possible, utilisez donc une DTD Strict.


Le code revu
<table id="ateliers-table" style="width: 95%; margin: 0 auto;" border="0" cellspacing="0" cellpadding="10">
  <tbody>
    <tr>
      <td style="width: 25%;" align="center" valign="top"><div class="ateliers-title">
        <p> <a href="#">Cession/Reprise d'entreprise lorem ipsum dolor</a></p></div></td>
      <td style="width: 25%;" align="center" valign="top"></td>
      <td style="width: 25%;" align="center" valign="top"></td>
      <td style="width: 25%;" align="center" valign="top"></td>
    </tr>
  </tbody>
</table>

.ateliers-title  {
	border:2px solid red;
    height: 625px;
	line-height: 625px;
	background: #00789b;
	text-align:center;
}
p{
	width: 184px;
	background-color:#999;
	line-height:1.2;
    vertical-align:middle;
	display:inline-block;
	padding:15px 3px;
}
Smiley smile
Merci de ta réponse.
J'ai fait les modifications et ce n'est pas le résultat escompté.

Voici un screenshot du résultat :
upload/48287-Capturede7.png

Edit : j'ai rajouté un screenshot de ce que j'avais avant sur mon premier post.
Modifié par Willouu (12 Feb 2013 - 16:53)
J'ai trouvé une solution mais les puristes me cracheront dessus ^^

J'ai rajouté un span en dessous du span actuel.
Du coup, le premier span prend le line-height de 103px et le suivant prend le line-height 1.2.

Sinon, par rapport au code :

CSS :
 	#ateliers-table
 	{
 		border: 1px solid black;
 		border-collapse: collapse;
 	}
 	#ateliers-table td
 	{
 		border: 1px solid black;
 	}
 	
 	#ateliers-table a
 	{
 		display: block;
 		position: relative;
 		width: 214px;
 		height: 325px;
 		margin: 103px auto 0;
 		background: url('ateliers.png');
 		line-height: 103px;
 	}
 	.ateliers-title
 	{
 		border:2px solid red;
		height: 625px;
		line-height: 625px;
		background: #00789b;
		text-align:center;
 	}
 	p
 	{
		width: 184px;
		background-color:#999;
		line-height:1.2;
    	vertical-align:middle;
		display:inline-block;
		padding:15px 3px;
	}
 	#ateliers-table a:hover .ateliers-title
 	{
 		background: #3393AF;
 	}
 	
 	#ateliers-table a#ateliers-atelier1
 	{
 		background-position: 0 0;
 	}
 	#ateliers-table a#ateliers-atelier1:hover
 	{
 		background-position: 0 100%;
 	}


HTML :
	<table id="ateliers-table" style="width: 95%; margin: 0 auto;" border="0" cellspacing="0" cellpadding="10" align="center">
	<tbody>
		<tr>
			<td style="width: 25%;" align="center" valign="top"><div class="ateliers-title">
        <p> <a href="#">Cession/Reprise d'entreprise lorem ipsum dolor</a></p></div></td>
			<td style="width: 25%;" align="center" valign="top"></td>
			<td style="width: 25%;" align="center" valign="top"></td>
			<td style="width: 25%;" align="center" valign="top"></td>
		</tr>
	</tbody>
	</table>
.ateliers-title  {
	border:2px solid red;
    height: 625px;
	line-height: 625px;
	background: #00789b;
	text-align:center;
}
.link{
	width: 214px;
	height:165px;
	background:url("http://lorempixel.com/50/50");
	line-height:165px;
    vertical-align:middle;
	display:inline-block;
}
a {
	text-decoration:none;
	color:white;
}
p{
	vertical-align:middle;
	display:inline-block;
	color:red;
	line-height:1.2;
}


<table id="ateliers-table" style="width: 95%; margin: 0 auto;" border="0" cellspacing="0" cellpadding="10" align="center">
	<tbody>
		<tr>
			<td style="width: 25%;" align="center" valign="top"><div class="ateliers-title"><div class="link">
        <p> <a href="#">Cession/Reprise d'entreprise lorem ipsum dolor</a></p></div></div></td>
			<td style="width: 25%;" align="center" valign="top"></td>
			<td style="width: 25%;" align="center" valign="top"></td>
			<td style="width: 25%;" align="center" valign="top"></td>
		</tr>
	</tbody>
	</table>


une imbrication de vertical-align Smiley confus
Sujet clos
Aller à