28220 sujets

CSS et mise en forme, CSS3

Cadre personnalisé

Tout d'abord, il s'agit de mon premier message alors j'en profite pour féliciter Raphaël pour son bouquin que j'ai dévoré en une nuit (j'ai dit "dévoré" pas "assimilé" en 1 nuit hein Smiley cligne )
Merci à lui !

Mon souci maintenant, je tente de personaliser une boite à coins arrondis.
Pour des raison graphiques, mon chapeau sera divisé en 3 images horizontales. Juste en dessous il y aura une autre image qui fera tout le long et qui est un raccord. Puis en dessous viendra le contenu.
Un petit visuel ICI
(Note : c'est un exemple, ne pas se fier aux couleurs unis bien sûr et je n'ai pas mis le fond de la boite)
Je ne comprends pas pourquoi l'image "à la ligne" ne colle pas aux autres ?
il y a ce petit espace énervant ! Pourriez-vous m'aider ?

Code CSS :
html {
	margin: 0;
	padding: 0;
}
body {
	margin: 10px;
	text-align: center;
}
#cadretop {
	text-align: left;
	height: 94px;
	width: 499px;
	margin-right: auto;
	margin-left: auto;
}
#cadretop ul {
	margin: 0;
	padding :0;
	list-style-type: none;
}
#cadretop li {
	float: left;
}
#cadretop img {
	margin: 0;
	padding: 0;
}



Code de la page :
div id="cadretop">
  <ul>
    <li><img src="images/top1.gif" width="125" height="44" /></li>
	<li><img src="images/top2.gif" width="233" height="44" /></li>
	<li><img src="images/top3.gif" width="141" height="44" /></li>
  </ul>
  <img src="images/centre.gif" width="499" height="50" />
  </div>



Merci à vous.
Bonjour Fissunix, et bienvenue sur ce forum,

Par défaut, les images sont alignées sur la ligne de base du texte (vertical-align: baseline). Il reste donc un espace en dessous : celui des jambages inférieurs des lettres comme p, j, etc.

Pour corriger et supprimer cet espace, modifier l'alignement vertical des images :

#cadretop img {
	[b]vertical-align: middle;[/b]
}

Modifié par Laurent Denis (03 Oct 2005 - 07:16)
Administrateur
Hello,

Tu as effectivement lu tout ça un peu vite, puisque des solutions sont proposées : dans le livre, j'applique un font-size:1px sur l'élément image pour corriger ces problèmes de jambages.

Une autre solution aurait pu être trouvée si tu avais pris le temps, comme nous essayons de le demander, de lire la FAQ du forum :
http://forum.alsacreations.com/faq/#item58
Administrateur
Hello,

Tu as effectivement lu tout ça un peu vite, puisque des solutions sont proposées : dans le livre, j'applique un font-size:1px sur l'élément image ppour corriger ces problèmes d'embages.

Une autre solution aurait pu être trouvée si tu avais pris le temps, comme nous essayons de le demander, de lire la FAQ du forum :
http://forum.alsacreations.com/faq/#item58
bonjour, merci pour vos réponses.
Laurent, je viens d'essayer le vertical-align, ça marche nickel dans Forefox mais dans IE il reste un espace de 1 pixel !
Le résultat en question ICI

Désolé, j'avais loupé la FAQ sur ce coup là.

J'ai appliqué un font-size 1 au div contenant l'image, ça marche.
appliquer block à l'image fonctionne aussi.

Ai-je mal fait quelque chose pour que le vertical-align ne fonctionne pas ?
Sujet clos
Aller à