28172 sujets

CSS et mise en forme, CSS3

[Résolu] Espacement vertical automatique

Bonjour,

J'ai cherché une solution à mon problème sur le forum mais n'ai trouvé aucune réponse permettant de le résoudre.
Le principe est simple, je souhaite réaliser un menu vertical composé d'une succession d'images. Je cherche à faire en sorte que l'espacement vertical entre ces images augmente automatiquement en fonction de la hauteur de la fenêtre ; plus la hauteur de la fenêtre augmente, plus l'espacement entre les images augmente.

J'ai essayé en mettant la valeur "auto" aux attributs "margin" et "padding" mais ça ne fonctionne pas.

J'arrive à un résultat proche de celui escompté en utilisant un javascript qui change la feuille de style en fonction de la hauteur de la fenêtre du navigateur (ajout d'un padding fixe sous chaque image dès que la fenêtre dépasse 800px de haut), mais j'aimerai une solution plus élégante utilisant les CSS et n'imposant pas une valeur fixe pour le padding.

Voici le code html du menu :

<div id="menu">
    <a href="virility/index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Virility','','img/men-virility-o.gif',1)"><img src="img/men-virility.gif" alt="Virility" name="Virility" border="0" id="Virility" /></a>
    <a href="gilles/index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('GillesMarini','','img/men-gilles-marini-o.gif',1)"><img src="img/men-gilles-marini.gif" alt="Gilles Marini" name="GillesMarini" border="0" id="GillesMarini" /></a>
    <a href="body/index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Body','','img/men-body-o.gif',1)"><img src="img/men-body.gif" alt="Body" name="Body" border="0" id="Body" /></a>
    <a href="underwear/index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Underwear','','img/men-underwear-o.gif',1)"><img src="img/men-underwear.gif" alt="Underwear" name="Underwear" border="0" id="Underwear" /></a>
    <a href="classic/index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Classic','','img/men-classic-o.gif',1)"><img src="img/men-classic.gif" alt="Classic" name="Classic" border="0" id="Classic" /></a>
    <a href="losangeles/index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('LosAngeles','','img/men-los-angeles-o.gif',1)"><img src="img/men-los-angeles.gif" alt="Los Angeles" name="LosAngeles" border="0" id="LosAngeles" /></a>
    <a href="jump/index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Jump','','img/men-jump-o.gif',1)"><img src="img/men-jump.gif" alt="Jump" name="Jump" border="0" id="Jump" /></a>
    <a href="sport/index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Sport','','img/men-sport-o.gif',1)"><img src="img/men-sport.gif" alt="Sport" name="Sport" border="0" id="Sport" /></a>
    <a href="ocean/index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('OceanIndien','','img/men-ocean-indien-o.gif',1)"><img src="img/men-ocean-indien.gif" alt="Ocean Indien" name="OceanIndien" border="0" id="OceanIndien" /></a>
    <a href="portraits/index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Portraits','','img/men-portraits-o.gif',1)"><img src="img/men-portraits.gif" alt="Portraits" name="Portraits"  border="0" id="Portraits" /></a>
    <a href="lieux/index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Lieux','','img/men-lieux-o.gif',1)"><img src="img/men-lieux.gif" alt="Lieux" name="Lieux" border="0" id="Lieux" /></a>
    <a href="dieux/index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Dieuxdustade','','img/men-dieux-du-stade-o.gif',1)"><img src="img/men-dieux-du-stade.gif" alt="Dieux du stade" name="Dieuxdustade"  border="0" id="Dieuxdustade" /></a>
    <a href="sunday/index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('SundayMorning','','img/men-sunday-morning-o.gif',1)"><img src="img/men-sunday-morning.gif" alt="Sunday Morning" name="SundayMorning"  border="0" id="SundayMorning" /></a>
    <a href="aqua/index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Aqua','','img/men-aqua-o.gif',1)"><img src="img/men-aqua.gif" alt="Aqua" name="Aqua" border="0" id="Aqua" /></a>
    <a href="bed/index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Bedtimestories','','img/men-bedtime-stories-o.gif',1)"><img src="img/men-bedtime-stories.gif" alt="Bed time stories" name="Bedtimestories" border="0" id="Bedtimestories" /></a>
    <a href="press/index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Press','','img/men-presse-o.gif',1)"><img src="img/men-presse.gif" alt="Press" name="Press" border="0" id="Press" /></a>
    <a href="buy-on-amazon.html"><img src="img/men-buy-on-amazon.gif" alt="Buy on Amazon" /></a>
    <a href="contact.html"><img src="img/men-contact.gif" alt="Contact" /></a>
    <a href="models-search.html"><img src="img/men-model-search.gif" alt="Model search" /></a>
    <a href="biography.html"><img src="img/men-biography.gif" alt="Biography" /></a>
    <a href="arts-print.html"><img src="img/men-art-prints.gif" alt="Art prints" /></a>
    <a href="legal-terms.html"><img src="img/men-legal-terms.gif" alt="Legal terms" /></a>
    <a href="http://www.just4id.com"><img src="img/men-site-just4id.gif" alt="Site by JUST4iD" /></a>
</div>


Le style correspondant par défaut :

#menu{
min-height:510px;
width:150px;
margin-left:50px;
padding-top:50px;}

#menu a img{
display:block;
margin:auto;}


Le style redéfini par le javascript :

#menu a img{
display:block;
padding-bottom:10px;}


Le tout est visible à cette adresse : http://www.fredgoudon.com/test/

Quelqu'un a-t-il déjà réalisé quelque chose de semblable ? Est-ce réalisable ?
Merci d'avance pour vos réponses ; tous commentaires sur le code HTML et les CSS sont les bienvenus Smiley smile
Modifié par gacss (23 Jun 2008 - 10:08)
Salut,

Une petite base d'idée Smiley cligne 

*{margin: 0; padding: 0;}

body, html{
height: 100%;
}

ul{
height: 100%;
}

li{
width: 100px;
height: 25%;
}

.image{
width: 100px;
height: 50px;
background: lime;
}

<body>
	<ul>
		<li><div class="image"></div></li>
		<li><div class="image"></div></li>
		<li><div class="image"></div></li>
		<li><div class="image"></div></li>
	</ul>
</body>
Bonjour,

Merci pour cette piste, il semble que ce soit la solution parfaite pour des images ayant toutes la même hauteur.
Seulement toutes les images que j'utilise ont une hauteur différente, ce qui aboutit à des chevauchements. Je vais continuer dans cette voie mais si quelqu'un a une autre idée ou des précisions à apporter... Smiley biggrin
Salut,

Non, pour le test j'ai utilisé un div coloré mais si tu remplaces 
<li><div class="image"></div></li>
par 
<li><img src="mon_image.jpg" alt="texte qui va bien" /></li>

Ce ne doit pas poser de problème particulier de chevauchement, il restera a styler les images si elle sont incluses dans les liens... C'est le height des <li> qui commande l'espacement et non le contenu (sauf sur ie6 pour des images volumineuse peut être)
Merci pour cette précision ghost Smiley cligne
Donc, si je suis bien ton exemple, mon menu étant constitué de 25 images, il faut que le height des <li> soit de 4%, c'est bien ça ?
Pourtant, j'ai bien des images qui se chevauchent... et sous IE le résultat est loin d'être celui attendu Smiley decu
http://www.fredgoudon.com/test/ul/
Ca vient peut être du fait que je n'ai pas "stylé" ces images qui sont incluses dans les liens ? Si c'est bien le cas je ne vois pas trop sur quels attributs jouer Smiley ohwell

En attendant, je me suis orienté vers une solution mettant en oeuvre un tableau, ce qui donne l'effet souhaité.
http://www.fredgoudon.com/test/table/

J'attends d'éventuelles remarques sur ce choix avant de marquer ce sujet comme résolu.
Oups!

Je n'avais pas détaillé ton code et les 25 images Smiley biggol
Dans ton cas effectivement la solution en table reste la plus solide et simple à moins de monter une "usine à gaz" qui ara un rendu plus ou moins aléatoire...
Sujet clos
Aller à