28173 sujets

CSS et mise en forme, CSS3

[résolu] Problème de clear:both avec un menu et une image flottantes

Bonjour,
Le titre du sujet introduit assez bien le problème en question, et pour commencer je vais tout d'abord donner mon code servant d'exemple au problème que j'ai rencontré :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>
<title>exemple</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
#conteneur {
margin: auto;
width: 1000px;}
#menu {
float: right;
width: 200px;
border: 1px solid red;}
#contenu {
padding: 10px;
margin: 0 200px 0 0;
border: 1px solid blue;}
.options {
clear: both;
border: 1px solid green;}
</style>

</head>

<body>

<div id="conteneur">

<div id="menu">
MENU<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>

<div id="contenu">
	<p><img src="http://www.google.fr/intl/fr_fr/images/logo.gif" alt="" style="float: right; border: 1px solid black;" />TEXTE TEXTE</p>
	<div class="options">options</div>
</div>

</div>

</body>
</html>


Vous pouvez voir le résultat ici.
Le problème est donc que le div .options se retrouve en dessous du menu de droite, alors que je voudrais qu'il ne soit qu'en dessous de l'image et que le menu de droite "reste flottant" pour ce div .options.
Pour les images en float:left il n'y a pas de problème si je ne met qu'un clear:left au div .options.
J'ai consulté la FAQ à ce sujet, en fait mon div .options correspond au div .spacer ou au hr de openweb, si ce n'est que le clear ne devrait pas concerner aussi le menu de droite.
Je n'arrive pas à me rendre compte si mon problème est très simple ou très dur à résoudre, en résumé je suis dans le flou Smiley lol merci d'essayer de m'éclairer Smiley cligne
Modifié par jumpy.stoo (30 Apr 2006 - 14:57)
Modérateur
bonjour,

pour que le menu de droite ne soit plus pris en compte il faut que lui enlevé le float Smiley smile .
Reste comme solution de le placer en absolute;
Pour qu'il reste dans le conteneur .. , il faut appliquer un position:relative; a #conteneur puis le "position:absolute;" au menu en precisant" right:0;".

Le probleme qui va maintenant surgir, Smiley smile , c'est que le conteneur ne vas plus s'etendre avec le menu .

Tu peut eventuellement indiqué une hauteur minimale au conteneur en estimant une hauteur de 1.2em par lien en admettant que ceci est la même police et taille d'affichage.

exemple :

#conteneur {
min-height:12em; /* si le menu a 12 liens */
_height:12em; /* ceci est pour IE */
}


si le conteneur doit rester transparent et sans bordure, ce n'est pas forcement necessaire.
++
Merci beaucoup, je testerai ça demain, mais ta solution me semble bonne vu que mon conteneur ne sert presqu'à rien, mon background est sur le body en fait. Il reste que j'ai déjà du flottant dans un menu horizontal au dessus de mon div contenu, mais je pense que ça ne devrait pas foutre le bazar ^^
Impeccable ! Ca marche très bien comme prévu, j'indique que mon problème est résolu tout de suite. Encore merci.
Sujet clos
Aller à