spacer
 
Rechercher dans le sujet :
Forum
» CSS et mise en forme, CSS3
» <span> dans anchor - alignement vertical
Auteur
Willouu
#
spacer
4 Posts
 Bonjour !

Je fais appel l'aide de la communaut d'Alsacration, la rfrence du CSS spacer .

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="%; margin: 0 auto;" border="0" cellspacing="0" cellpadding="10" align="center">
	<tbody>
		<tr>
			<td style="%;" align="center" valign="top">
			
				<a class="#" title="Cession" id="ateliers-atelier1">
					<span class="ateliers-title">Cession/Reprise d'entreprise lorem ipsum dolor</span>
				</a>
			
			</td>
			<td style="%;" align="center" valign="top"></td>
			<td style="%;" align="center" valign="top"></td>
			<td style="%;" 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 fates, j'ai pas trouver d'autres moyens pour ce que je voulais faire : un bloc rectangulaire, avec un entte 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;
 		px;
 		px;
 		margin: 103px auto 0;
 		"img15.hostingpics.net/thumbs/mini_207291Capturede769cran20130212a768164616.png" />  
Modifi par Willouu (12 Feb 2013 - 16:53)
spacer
rodolpheb
#
spacer
If not now, when?
768 Posts
 Bonjour,

Willouu a crit :
Revenons mon problme : le line-px dans #ateliers-table a m'aligne une seule ligne verticalement au milieu, la deuxime ligne tant totalement dcale en dessous.
Dans le tutoriel, il est dit qu'il faut rajouter un line-.2 au span, ce que j'ai fait, mais a ne rsout pas mon problme. En effet, ce dernier paramtre replace la ligne en haut du bloc.

Il n'y a pas de line-height a votre span mais un height
spacer
Willouu
#
spacer
4 Posts
 Oui, je l'ai enlev car il n'arrangeait pas les choses ^^
Mais je peux vous assurer que j'ai tenter avec un line-.2 au span
spacer
rodolpheb
#
spacer
If not now, when?
768 Posts
 Ce qui est dit dans le tuto
a crit :
Certaines solutions exposes dans ce tuto ne fonctionnent pas avec un doctype Transitionnel. En effet, ce dernier dclenche 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="%; margin: 0 auto;" border="0" cellspacing="0" cellpadding="10">
  <tbody>
    <tr>
      <td style="%;" align="center" valign="top"><div class="ateliers-title">
        <p> <a class="#">Cession/Reprise d'entreprise lorem ipsum dolor</a></p></div></td>
      <td style="%;" align="center" valign="top"></td>
      <td style="%;" align="center" valign="top"></td>
      <td style="%;" align="center" valign="top"></td>
    </tr>
  </tbody>
</table>

.ateliers-title  {
	border:2px solid red;
    px;
	line-px;
	background: #00789b;
	text-align:center;
}
p{
	px;
	background-color:#999;
	line-.2;
    vertical-align:middle;
	display:inline-block;
	padding:15px 3px;
}
spacer

spacer
Willouu
#
spacer
4 Posts
 Merci de ta rponse.
J'ai fait les modifications et ce n'est pas le rsultat escompt.

Voici un screenshot du rsultat :
spacer

Edit : j'ai rajout un screenshot de ce que j'avais avant sur mon premier post.
Modifi par Willouu (12 Feb 2013 - 16:53)
spacer
rodolpheb
#
spacer
If not now, when?
768 Posts
 Repostez votre code car il y a un width qui est incorrect.
spacer
Willouu
#
spacer
4 Posts
 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;
 		px;
 		px;
 		margin: 103px auto 0;
 		"skins/alsacreations/p_up.gif" />
rodolpheb
#
spacer
If not now, when?
768 Posts
 
.ateliers-title  {
	border:2px solid red;
    px;
	line-px;
	background: #00789b;
	text-align:center;
}
.link{
	px;
	px;
	"smilies/confus.gif" />

spacer
Prvenir un modrateur
Rpondre au sujet
Aller
Related searches:
center eacute valign willouu vertical
gipoco.com is neither affiliated with the authors of this page nor responsible for its contents. This is a safe-cache copy of the original web site.