28173 sujets

CSS et mise en forme, CSS3

[Résolu] Hauteur blocs image et problème affichage IE 6

Bonjour,

J'ai cherché une solution à mon problème mais je n'ai pas trouvé.
J'ai un menu vertical de gauche composé d'images* (positionnées en "float:left;" et "clear:left;" pour la dernière) et une page centrale composée d'une image en filigrane sur laquelle viennent se poser les contenus.

Afin que la hauteur de la page centrale soit adaptée à la longueur de son contenu et afin que la hauteur du menu de gauche suive - et comme je suis débutante - j'ai dû bidouiller dans la css en créant différents niveaux de hauteur pour la dernière image du menu de gauche ("menufin") et pour la page centrale ("content").

Sur Firefox, Safari et IE 7 tout est nickel mais sur IE 6, le bas des menus de gauche est trop court. J'ai donc créé une css pour IE 6 et en ai rallongé les hauteurs mais cela reste encore trop court et même parfois devient trop long.

1) Ai-je fait une erreur dans ma css ?
2) N'y a-t-il pas un moyen plus simple et radical pour gérer les hauteurs de blocs images ? (sachant que la solution des blocs factices ne peut donc pas marcher ici).
J'ai essayé avec "background-repeat: repeat-y;" et avec "height:100%;" mais aucun changement (ni sur Firefox ni sur IE).

CSS menu de gauche :

#menu {
	float:left;
}

#menu-deb {
	background: url(img/nav/menus/general/menudeb.gif);
	width: 136px;
	height: 85px;
	clear:left;
}

#menu-coll-gen {
	width: 135px;
	height: 25px;
	clear:left;
}

#menu-coll-06 {
	width: 135px;
	height: 17px;
	clear:left;
}

#menu-coll-05 {
	width: 135px;
	height: 25px;
	clear:left;
}

#menu-coll-04 {
	width: 135px;
	height: 25px;
	clear:left;
}

#menu-coll-03 {
	width: 135px;
	height: 25px;
	clear:left;
}

#menu-access {
	width: 135px;
	height: 27px;
	clear:left;
}

#menu-events-gen {
	width: 135px;
	height: 25px;
	clear:left;
}

#menu-events-def {
	width: 135px;
	height: 23px;
	clear:left;
}

#menu-events-spect {
	width: 135px;
	height: 25px;
	clear:left;
}

#menu-events-expo {
	width: 135px;
	height: 27px;
	clear:left;
}

#menu-choi {
	width: 135px;
	height: 27px;
	clear:left;
}

#menu-contact {
	width: 135px;
	height: 25px;
	clear:left;
}

#menu-fin-gen {
	background: url(img/nav/menus/general/menufin-gen.gif);
	width: 136px;
	height: 361px;
	clear:left;
	border-bottom: 2px solid #DF224A;
}

#menu-fin-index {
	background: url(img/nav/menus/general/menufin-index.gif);
	width: 136px;
	height: 286px;
	clear:left;
	border-bottom: 2px solid #DF224A;
}

#menu-fin-coll {
	background: url(img/nav/menus/general/menufin-coll.gif);
	width: 136px;
	height: 269px;
	clear:left;
	border-bottom: 2px solid #DF224A;
}

#menu-fin-form {
	background: url(img/nav/menus/general/menufin-form.gif);
	width: 136px;
	height: 556px;
	clear:left;
	border-bottom: 2px solid #DF224A;
}


CSS page centrale :

#content {
	background-image: url(img/nav/filigrane.jpg);
	width: 661px;
	height: 575px;
	float: right;
	border-right: 1px solid #e4d6d6;
	border-bottom: 2px solid #DF224A;
}

#content-home {
	background-image: url(img/nav/filigrane.jpg);
	width: 661px;
	height: 500px;
	float: right;
	border-right: 1px solid #e4d6d6;
	border-bottom: 2px solid #DF224A;
}

#content-form {
	background-image: url(img/nav/filigrane.jpg);
	width: 661px;
	height: 770px;
	float: right;
	border-right: 1px solid #e4d6d6;
	border-bottom: 2px solid #DF224A;
}


Et une page html :


<body>
<div id="global">
<div id="header">
<div id="header-g"><a title="Aller à l'accueil" href="http://e.guerfi.free.fr/PREPROD/index2.html"><img alt="Logo Choï" src="http://e.guerfi.free.fr/PREPROD/img/nav/logo.gif"/></a></div>
<div id="header-d"></div>
</div>
<div id="menu">
<div id="menu-deb"></div>
<div id="menu-coll-gen">
<a title="Collections" href="http://e.guerfi.free.fr/PREPROD/collections/2006/galerie.html"><img alt="Collections" src="http://e.guerfi.free.fr/PREPROD/img/nav/menus/general/coll.gif"/></a>
</div>
<div id="menu-access">
<a title="Accessoires" href="http://e.guerfi.free.fr/PREPROD/accessoires/galerie.html"><img alt="Accessoires" src="http://e.guerfi.free.fr/PREPROD/img/nav/menus/general/access.gif" /></a>
</div>
<div id="menu-events-gen">
<a title="Ev&eacute;nements" href="http://e.guerfi.free.fr/PREPROD/evenements/spectacles/soiree-salsa.html"><img alt="Evénements" src="http://e.guerfi.free.fr/PREPROD/img/nav/menus/general/events.gif" /></a>
</div>
<div id="menu-choi">
<a title= "Qui est Cho&iuml; ?" href="http://e.guerfi.free.fr/PREPROD/choi/bio.html"><img alt="Qui est Choï ?" src="http://e.guerfi.free.fr/PREPROD/img/nav/menus/general/choi.gif" /></a>
</div>
<div id="menu-contact">
<a title= "Contact" href="http://e.guerfi.free.fr/PREPROD/contact.php"><img alt="Contacts" src="http://e.guerfi.free.fr/PREPROD/img/nav/menus/general/contact.gif" /></a></div>
<div id="menu-fin-gen">
</div>
</div>
<!-- InstanceBeginEditable name="content" -->
<div id="content">
<div id="fil-ariane">
<a href="http://e.guerfi.free.fr/PREPROD/index2.html">Accueil</a> > Plan du site
</div>
<div class="plan-site">
<h1><a href="http://e.guerfi.free.fr/PREPROD/collections/2006/galerie.html">Collections</a></h1>
<a href="http://e.guerfi.free.fr/PREPROD/collections/2006/galerie.html">> Collection 2006</a>
<br /><a href="http://e.guerfi.free.fr/PREPROD/collections/2005/galerie.html">> Collection 2005</a>
<br /><a href="http://e.guerfi.free.fr/PREPROD/collections/2004/galerie.html">> Collection 2004</a>
<br /><a href="http://e.guerfi.free.fr/PREPROD/collections/2003/galerie.html">> Collection 2003</a>
<br /><br />
<div class="filet"></div>
<h1><a href="http://e.guerfi.free.fr/PREPROD/accessoires/galerie.html">Accessoires</a></h1>
<div class="filet"></div>
<h1><a href="http://e.guerfi.free.fr/PREPROD/evenements/defiles/video-2005.html">Ev&eacute;nements</a></h1>
<a href="http://e.guerfi.free.fr/PREPROD/evenements/defiles/video-2005.html">> D&eacute;fil&eacute;s</a>
<br /><a href="http://e.guerfi.free.fr/PREPROD/evenements/spectacles/soiree-salsa.html">> Spectacles</a>
<br /><a href="http://e.guerfi.free.fr/PREPROD/evenements/expositions/expo12-2006.html">> Expositions</a>
<br /><br />
<div class="filet"></div>
<h1><a href="http://e.guerfi.free.fr/PREPROD/choi/bio.html">Qui est Cho&iuml; ?</a></h1>
<div class="filet"></div>
<h1><a href="http://e.guerfi.free.fr/PREPROD/contact.html">Contacts</a></h1>
<div class="filet"></div>
<h1><a href="http://e.guerfi.free.fr/PREPROD/liens-utiles.html">Liens</a></h1>
</div>
<!-- InstanceEndEditable -->
</div>
<div id="footer">
<ul>
<li>&copy; Cho&iuml; 2006 | </li>
<li><a href="http://e.guerfi.free.fr/PREPROD/liens-utiles.html">Liens</a> | </li>
<li><a href="http://e.guerfi.free.fr/PREPROD/plan-site.html">Plan du site</a> | </li>
<li><a href="http://validator.w3.org/check/referer">XHTML 1.0</a> | </li>
<li><a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a></li>
</ul>
</div>
</div>
</body>


Merci beaucoup.
Modifié par Pimiento (06 Jan 2007 - 16:38)
Bonjour Pimiento et bienvenue sur ce forum,

Tu n'aurais pas une page en ligne où l'on pourrait visualiser tout ça ? De plus, ça nous permettrait de te donner quelques conseils génériques qui pourraient t'être utiles.
Voici une page en ligne (en fait tout le site est en ligne), vous verrez ainsi les différences entre FF/Safari et IE) :

http://e.guerfi.free.fr/PREPROD/index2.html

Je suis preneuse de tous vos conseils !
Merci

PS : Dans FF/Safari, le bas du menu de gauche de la page "Evénements" est coupé > normal car j'ai supprimé 2 images de sous-menus et pas encore changé la hauteur de la dernière image du menu.
Ah et j'ai oublié de mentionner un autre problème : sur IE 6 le contenu (page centrale) de ma page d'accueil ( http://e.guerfi.free.fr/PREPROD/index2.html ) s'affiche à partir de la fin du menu de gauche.
En fait, l'image en filigrane se répète en largeur alors que je ne l'ai pas demandé dans la css.
Je ne sais pas si je me fais bien comprendre.
Vous avez peut-être une idée d'où vient le problème ?

Merci
La seule manière raisonnable de gérer un contenu d'importance variable (et tout contenu textuel, même figé, est d'importance variable : il dépendra de la taille de texte par défaut demandée par l'utilisateur), c'est d'avoir des conteneurs qui vont s'étendre en hauteur en fonction de leur contenu.

Dans le cas des pages présentées, je dirais qu'il y a deux choses à surveiller :
- faire attention à ce que les éléments flottants ne sortent pas du flux de leur conteneur. Voir à ce sujet : éléments flottants qui dépassent de l'élément parent (note : la FAQ en parle également, bien sûr) ;
- obtenir une hauteur égale pour le menu et pour le contenu principal, du moins visuellement : pour cela, on utilisera les colonnes factices (cf. une recherche sur « colonnes factices », sur le web et/ou sur le forum, la FAQ, etc).
Sujet clos
Aller à