Float et image de fond

Bonjour,
question de débutant mais bon...
Voilà le pb :
Je voudrais un bloc "page" avec une image de fond. Et à l'intérieur de ce div, un div "navigation" à gauche et un div "contenu" à droite. Tres classique.

<div id="corps">
debut de la page
<div id="navigation_gauche">
<la je vais mettre mlon menu>
</div>
fin page
</div>

mon css :

#corps {
         margin: 0;
	padding: 0;
        background: url(../squelettes/mes_img/fond_page);
        font-size: 10px;
	width: 980px;
	text-align: center;
	margin-top: 0px;
}

#corps #navigation_gauche {
	float: left;
        width: 222px;
	margin: 0;
	padding: 0;

}

mais...
mes deux blocs "corps" et "navigation_gauche" ne sont pas imbriqués au final : j'obtiens un bloc avec mon image de fond et il est écrit à la suite "debut de la page fin page" puis en dessous j'ai mon bloc menu.

ça fait pas ça quand j'enlève le float. pourtant il faut bien que je mette ce float à gauche si je veux mettre un autre bloc à droite de mon menu, non ?
je sais que le float sort du flux, mais comment on fait alors pour que le conteneur ait une image de fond ?
merci de votre aide
Modifié par quizz (26 Mar 2007 - 21:02)

Bonjour et bienvenue parmi nous

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation

Bonjour
ça devrait aller avec :

#navigation_gauche {
        position: absolute;
        
	float: left;

        width: 222px;

	margin: 0;

	padding: 0;



}

Cela dit tu as pas du beaucoup chercher

la valeur absolute positionne ton élément ,par rapport à son conteneur, dans le coin haut gauche (par défaut) ce que tu peux corriger avec les marges...
Modifié par heaven (26 Mar 2007 - 22:58)

heaven a écrit :
ça devrait aller avec :

#navigation_gauche {
        position: absolute;        
	float: left;
        width: 222px;
	margin: 0;
	padding: 0;
}

Heu... là c'est un peu n'importe quoi.

heaven a écrit :
la valeur absolute positionne ton élément ,par rapport à son conteneur, dans le coin haut gauche (par défaut) ce que tu peux corriger avec les marges...

Je ne sais pas si tu t'exprimes mal, mais il me semble que tu n'as pas bien saisi le fonctionnement du positionnement absolu.

La petite révision sur le positionnement qui va bien :
Initiation au positionnement CSS sur Openweb :
1. flux et position relative
2. position float
3. position absolue et fixe


Pour revenir au problème de quizz, le positionnement absolu n'est pas nécessaire ici. Au contraire, il pourrait être très gênant. Travailler avec des flottants devrait permettre d'arriver à un résultat correct.

Il faudra juste éviter quelques problèmes de dépassement de flottants. Cf. Éléments flottants qui dépassent de l'élément parent.


Au passage, si l'élément qui porte l'identifiant "navigation_gauche" est un div, les propriétés margin: 0 et padding: 0 sont superflues. Les divs n'ont pas de marges ou de padding par défaut.

heaven a écrit :
Bonjour
ça devrait aller avec :

#navigation_gauche {
        position: absolute;
        
	float: left;

        width: 222px;

	margin: 0;

	padding: 0;



}

Cela dit tu as pas du beaucoup chercher

la valeur absolute positionne ton élément ,par rapport à son conteneur, dans le coin haut gauche (par défaut) ce que tu peux corriger avec les marges...

Ce n'est pas ça qui solutionnera son problème mais il me semble qu'entre absolute et float, il y en a un de trop ... A la limite

position: absolute;  right: 0; 

oui mais pas pour ce qu'il cherche à faire, pour cela, je pense qu'il vaut mieux revoir les bases dans les tutoriels sur le positionnement, tu devrais y jeter un oeil peut être aussi

Merci pour vos conseils, je vais etudier la question grace à vos liens.
Je ne saisis pas encore trop la nuance (voire la base...) des positionnements, le float, le "position"...,
j'avais cru comprendre en parcourant le site qu'il vallais mieux eviter les position : absolute/relative, je ne sais plus pourquoi (pb de compatibilité navigateurs ?), mais j'avais retenu ça...
merci en tout cas.

Ce n'est pas vraiment une question de compatibilité mais plus de maitrise. Le positionnement absolu et relatif (qui n'ont pas grand chose à voir) sont des notions assez complexe et si elles peuvent être très utiles, elles ne doivent pas être utiliser à outrance (comme le font souvent les débutants).