[résolu]Problème d'alignement HTML

[Invité Diana]

Bonsoir,

 

Voilà, comme je suis assez pointilleuse, j'aime bien aligner les choses (dans tous les sens du terme )

 

voici l'url:

 

http://isis.no-ip.info/www/dossiers_isis

 

le problème c'est le texte du bas " Page réalisée par Diana " j'aimerais quil soit centrer verticalement sur mes images de validation.

 

voici mon code :

 

in CSS:

 

#pieds {
clear:both;
height: 30px;margin-top:20px;padding-top:0px;
background-color: #E6E9FF;padding-left:300px;background:url("trame2.png") repeat-x center;
}

 

In HTML:

 

<div id="pied">
	<p>Page réalisée par <span style="color:red;font-weight:bold;">Diana</span>
		<a href="http://validator.w3.org/check?uri=referer">
		 	 <img  src="http://www.w3.org/Icons/valid-html401"
	alt="Valid HTML 4.01 Transitional" height="31" width="88" border=0"></a>
   <a href="http://jigsaw.w3.org/css-validator/">
			 <img style="border:0;width:88px;height:31px"
   src="http://jigsaw.w3.org/css-validator/images/vcss"
   alt="Valid CSS!" /> </a>
  </p>
  </div>

 

Alors j'avais rajouté dans la CSS Vertical-align: middle mais ça ne marche pas

 

Une petite idée peut être, merci

Modifié le 1 mars 2007 par Diana

[tangui]

Salut!

il faut jouer avec le padding...

Comme ton bloc fait 30px de hauteur, il faut que tu écrives avec un padding top ou bottom de 15px;

 

#pied {
clear:both;
height: 30px;
margin-top:20px;
padding-bottom:15px;
background-color: #E6E9FF;
padding-left:300px;
background:url("trame2.png") repeat-x center;
}

Par contre tes images W3C vont déborder

[Invité Diana]

Salut!

il faut jouer avec le padding...

Comme ton bloc fait 30px de hauteur, il faut que tu écrives avec un padding top ou bottom de 15px;

 

#pied {
clear:both;
height: 30px;
margin-top:20px;
padding-bottom:15px;
background-color: #E6E9FF;
padding-left:300px;
background:url("trame2.png") repeat-x center;
}

Par contre tes images W3C vont déborder

 

Salut Tangui,

 

oui ça marche, mais effectivement mes images débordes. La seul solution: les changées de flux.

 

Merci

[Dylav]

Pour corriger le coup, il faudrait appliquer aux images un padding négatif de la même valeur pour annuler, en ce qui les concerne, le padding général : ça devrait fonctionner, puisque ça marche bien avec les marges, le négatif ?

 

#pied a img {padding-bottom: -15px;}

[Invité Diana]

Et je voulais aussi :

 

A mon body, j'ai rajouté la propriété overflow:hidden;. C'est sympa, plus jolie et ça ne coupe pas mon image du haut.

Le seul hic c que la page ne défile plus ! Ya pas un moyen que cela défile sans ascenceur ?

 

merci

[Dylav]

Désolé, Diana, là tu demandes le beurre et l'argent du beurre...

 

L'ascenseur invisble, ça n'existe pas encore !

[Invité Diana]

Pour corriger le coup, il faudrait appliquer aux images un padding négatif de la même valeur pour annuler, en ce qui les concerne, le padding général : ça devrait fonctionner, puisque ça marche bien avec les marges, le négatif ?

 

#pied a img {padding-bottom: -15px;}

 

#pied {
clear:both;
height: 30px;margin-top:20px;padding-top:0px;padding-bottom:20px;
background-color: #E6E9FF;padding-left:300px;background:url("trame2.png") repeat-x center;
}
#pied a img {padding-bottom: -20px;
}

 

C'était une bonne idée, mais ça fonctionne pas

C'est même bizarre dailleurs.

 

merci

[Dylav]

Bizarre, peut-être... mais surtout dommage !

[Invité Diana]

Re-bonsoir,

 

Je viens de remarquer que j'ai un soucis avec mon menu : le over ne fonctionne pas sous IE.

 

#menugauche a {
color: #000000;
text-decoration: none;
}
#menugauche li {
margin: 10px 10px;
padding: 12px 0px;
background: url("trame.png") no-repeat;
}
#menugauche li:hover {
padding: 12px 0px;
background: url("trame2.png") no-repeat;
text-decoration: underline;
color: red;
font-weight: bold;
}

 

Comment cela ce fait il ? http://isis.no-ip.info/www/dossiers_isis/

 

merci

Modifié le 26 février 2007 par Diana

[Dylav]

Oui, encore une bizarrerie de IE...

Mais essaie de placer le :hover plutôt sur le <a>

 

#menugauche a {
background: url("trame.png") no-repeat;
text-decoration: none;
color: #000000;
}
#menugauche a:hover {
background: url("trame2.png") no-repeat;
text-decoration: underline;
color: red;
font-weight: bold;
}
#menugauche li {
margin: 10px 10px;
padding: 12px 0px;
}

ou peut-être plutôt #menugauche li a et #menugauche li a:hover