28173 sujets

CSS et mise en forme, CSS3

[résolu] Un calque dans l'autre

Bonjour.

Pour mon site j'ai créé un header d'une certaine longueur dont le div s'appelle header.
Dans ce même header j'aimerai créer un second calque que je nomme login.

<div id="header"><img src="images/cashtel.jpg" alt="ppppppp" width="409" height="80" />
<div id="login"></div><!--fin div login-->
</div><!--fin div header-->


Et voici mon CSS
#header {
height:89px;
background:  url(images/fond_header.jpg) repeat-x;
}

#login {
background:  url(images/login.jpg) no-repeat;
float:right;
height:62px;
width:309px;
}


Cependant le calque login est bien a droite mais en dessous du calque header et non à l'intérieur comment faire?

Cordialement
Modifié par marseille (14 Oct 2006 - 18:22)
Salut,

ne parles pas de calques tu vas te faire tapper sur les doigts ! !!
C'est Dreamweaver qui appel ça comme ça mais c'est "mal", en résumé.

... je viens de comprendre :

L'élément qui floatte à droite doit etre insérré en premier, avant l'élément duquel il se trouvera visuellement à droite : c'est la "procédure".


<div id="header">
<div id="login"></div>
<img src="images/cashtel.jpg" alt="ppppppp" width="409px" height="80px" />
</div>


Sinon, en effet, souvent il se retrouve en dessous.
Modifié par Hum (14 Oct 2006 - 17:25)
Administrateur
Ah oui...

Je crois qu'il y'a une mauvaise compréhension du positionnement flottant :

a écrit :
* L'élément est d'abord placé normallement dans le flux. Donc si un autre élement bloc est placé avant lui, l'élément flottant se positionnera en dessous; et si un élément bloc le suit, ce dernier sera placé dessous. Bref, le comportement classique du positionnement en flux
* Ensuite l'élément qui a reçu la propriété float est "poussé" à gauche ou à droite de son conteneur.
* Les éléments qui le suivent au sein du conteneur se placent alors autour de lui.


--> Positionnement des éléments
Modifié par Raphael (14 Oct 2006 - 17:32)
Administrateur
marseille a écrit :
Merci à tous et merci à hum pour la réponse.

De rien, mais est-ce [Résolu] ?
Sujet clos
Aller à