[Résolu] Float Me Tender & Clear Me Sweet !

Hello !

En vacances en ce moment je me suis dit que j'allais me lancer dans la découverte approfondie des CSS. Seulement voilà, les CSS ne sont pas sympa avec moi (rendez-moi mon PHP !).

Après avoir lu plusieurs articles (très agréables à lire) de ce site, je me suis dit que j'allais tester un design un poil plus élaboré, sans pour autant faire dans le compliqué.

Voici donc en gros ce que je souhaitais arriver à faire, histoire de voir si je pouvais déjà m'en sortir avec ceci :


Je résume :
- Deux grandes DIV : la bannière et le reste
- Le reste (la DIV générale donc) est sub-divisé en deux autres parties : la DIV contenu et la DIV menu
- Pour faire encore plus tordu, la DIV contenu est elle aussi sub-divisée en deux autres DIV (haut et bas).

Je me suis donc lancé là-dedans avec du texte générique, le minimum syndical de paramètres. Le but étant ici d'arriver à placer le tout correctement.

Tout se passait dans le meilleur des mondes jusqu'à ce que je commence à écrire la partie "menu".
Pris dans un élan de facilité (ouais en fait c'est super trop simple quoi !), je me suis dit, un petit coup de "float: left" pour le contenu (intégrant haut et bas) et un petit coup de "float: right" pour le "menu" et "roulez jeunesse" !

Eh bien non Ce brave "menu" se rebiffe et décide de se mettre à droite, certes, mais en dessous de "bas" ou devrais-je peut-être dire, en dessous de "contenu". Forcément c'est tout de suite moins drôle.
Alors j'ai repris la lecture, fouiné sur divers sites, rencontré l'ami "clear", fais divers tests mais rien n'y fait, le "menu" est toujours plus fort que moi

Voilà, rien de particulier dans le code, je suis sur à 163% de mon imbrication de DIV. La seule particularité réside dans le fait que je n'ai pas donné de "width" fixes. A savoir que "contenu" devait remplir 80% et "menu" les 20% restants (avec des marges pour que ca paraisse un peu aéré !), dans le simple but de pouvoir adapter l'affichage sur diverses résolutions.

Donc je cherche en vain où se trouve(n) mon(mes) erreur(s) ou mes oublis. Dois-je mettre ET "float: left" ET "float: right" ou seulement l'un des deux ? Dois-je le(s) placer ailleurs que dans "contenu" et "menu" ? Quant au "clear: xxx", sa force n'est pas avec moi...

Merci de votre aide !
Modifié par MrChampignon (07 Feb 2008 - 22:07)

Bonsoir,

Cette maquette ne demande à priori qu'un seul extrait du flux, et c'est au niveau de ta division "contenu" que cela va se faire.
Il ne te suffit que de faire flotter à gauche ce dernier, lui préciser une largeur adéquate et attribuer au menu une marge à gauche au moins aussi importante que la valeur donnée pour spécifier la taille de ton contenu.

MrChampignon a écrit :
Dois-je mettre ET "float: left" ET "float: right" ou seulement l'un des deux ?

Seulement l'un des deux (float:left pour div#contenu ou float:right pour div#menu... dans le deuxième cas, div#menu devra être placé avant div#contenu dans le code HTML).
Pour information: tu peux aussi faire flotter les deux, mais ça n'est pas utile et ça risque de te poser des problèmes donc autant éviter...

MrChampignon a écrit :
Dois-je le(s) placer ailleurs que dans "contenu" et "menu" ?

Non.

MrChampignon a écrit :
Quant au "clear: xxx", sa force n'est pas avec moi...

C'est surtout qu'il n'a rien à faire là (sur div#contenu ou div#menu), et que par contre il peut empêcher ta mise en page à base de flottants de fonctionner correctement.

Sinon, si ces informations ne te suffisent pas et que tu bloques: indique-nous une page en ligne pour qu'on puisse voir ça directement, avoir accès au code, etc.

Benjamin D.C. a écrit :
Bonsoir,

Cette maquette ne demande à priori qu'un seul extrait du flux, et c'est au niveau de ta division "contenu" que cela va se faire.
Il ne te suffit que de faire flotter à gauche ce dernier, lui préciser une largeur adéquate et attribuer au menu une marge à gauche au moins aussi importante que la valeur donnée pour spécifier la taille de ton contenu.

Si je résume, je place mon "menu" avec une marge suffisament grande pour pouvoir placer le "contenu" en float à gauche.

Ce qui doit me donner :

div#contenu {
     float: left ;
     width: 79% ;
}

et

div#menu {
     border: thin solid #000000 ;
     margin-left: 80% ;
     width: 20% ;
}

Ce qui dans un premier temps n'a donné aucun résultat pour la simple et bonne raison que j'ai bêtement pensé que "haut" et "bas", imbriqués dans "contenu", hériteraient logiquement de la largeur de "contenu". Ce qui bien évidemment n'est pas le cas.
J'ai donc, dans la foulée, rajouté un paramètre "width" à "haut" et bas, identique à celui de "contenu".

Mais même si c'est cette fois "contenu" et "menu" pourraient s'imbriquer, ce dernier n'est toujours pas décidé à se placer au même niveau que "contenu"

Merci bien de ta réponse en tout cas !

Florent V. a écrit :

Seulement l'un des deux (float:left pour div#contenu ou float:right pour div#menu... dans le deuxième cas, div#menu devra être placé avant div#contenu dans le code HTML).
Pour information: tu peux aussi faire flotter les deux, mais ça n'est pas utile et ça risque de te poser des problèmes donc autant éviter...

Hmm donc je dois systématiquement, dans mon code HTML, placer le DIV en float avant celui qui ne l'est pas ? C'est bon à savoir

Je recopie mon imbrication de DIVs et j'édite ce poste !

Voilà pour l'HTML :

<div id="banniere">
</div>

<div id="generale">

        <div id="contenu">

                <div id="haut">
                </div>
				
                <div id="bas">
                </div>
	
        </div>
			
        <div id="menu">
        </div>
			
</div>

Je n'y vois rien d'anormal, je copie les CSS de suite.
Les voilà :

<style type="text/css">

div#banniere {
     text-align: center ;
     max-height: 133px ;
     border: thin solid #000000 ;
}

#banniere img {
     width: 400px ;
     height: 133px ;
}

div#contenu {
     float: left ;
     width: 79% ;
}

div#haut {
     width: 79% ;
     background-color: white ;
     border: thin solid #000000 ;
     margin-top: 10px ;
}

div#bas {
     width: 79% ;
     border: thin solid #000000 ;
     margin-top: 10px ;
}

div#menu {
     border: thin solid #000000 ;
     margin-left: 80% ;
     width: 20% ;
}
			
</style>

C'est grave docteur ?
Modifié par MrChampignon (07 Feb 2008 - 21:23)

Bon,

1. supprimer les width: 79% de div#haut et div#bas, car ils sont inutiles (ou plutôt erronés);
2. supprimer le width: 20%, qui n'est pas erroné mais inutile.

Ce qui nous donne donc:

div#contenu {
	float: left;
	width: 79%;
	padding: 1px 0;
}
div#haut, div#bas {
	border: thin solid black;
	margin-top: 10px;
}
div#haut {
	background: white;
}
div#menu {
	margin-left: 80%;
	border: thin solid black;
}

Par exemple.
Modifié par Florent V. (07 Feb 2008 - 21:45)

Florent V. a écrit :
Bon,

1. supprimer les width: 79% de div#haut et div#bas, car ils sont inutiles (ou plutôt erronés);
2. supprimer le width: 20%, qui n'est pas erroné mais inutile.

Ce qui nous donne donc:

div#contenu {
	float: left;
	width: 79%;
	padding: 1px 0;
}
div#haut, div#bas {
	border: thin solid black;
	margin-top: 10px;
}
div#haut {
	background: white;
}
div#menu {
	margin-left: 80%;
	border: thin solid black;
}

Par exemple.

Et en tout état de cause cela marche très bien, après avoir effacé tous les styles superflus que j'avais ajoutés (j'avais testé quelques styles sur divers balises) !
Mais je n'aurais pas pensé que cela aurait pu perturber l'affichage général des DIVs...

J'aurais du commencer par créer le squelette et compléter au fur et à mesure

En tout cas, merci bien pour l'aide !