28173 sujets

CSS et mise en forme, CSS3

[résolu] DIV principal qui merdoie

Bonjour à tous,

encore moi.
Pour centrer mes sites j'utilise une DIV principal avec un margin left et right auto. Seulement problème, passés mes premières divs elle ne "s'allonge" plus. Un exemple criant sur cette page :

http://www.kimlico.com/EBD/index1.html

J'ai mis une couleur de back ground blanche qui me permette de bien voir le souci. Et il est bel et bien là.

Mon code CSS du layout :


@import url("polices.css");
/* CSS LAYOUT */


/* --------- BODY ------------ */

body {
background-color:#CCCCCC;
padding: 0;
margin:0;
border: 0;
}

img   {
border: 0;
}


/* PRINCIPAL*/

#principal {
width: 800px;
margin-left:auto;
margin-right:auto;
padding-left: 10px;
padding-right:10px;
padding-top:10px;
padding-bottom:10px;
background-color:#FFFFFF;
}

/*NAVIGATION*/

#menu {
position:relative;
z-index:1;
width:780px;
height:180px;
padding:0;
margin-left:auto;
margin-right:auto;
margin-bottom:0;
margin-top:0;
border:0;
background-image:url(layout/menu/fonds/biblio.gif);
background-repeat:no-repeat;
background-position:top;

}

#ebd {
position:relative;
float:right;
margin-top:155px;
margin-right:15px;
z-index:100;
}

/* ACCEUIL */

/*------------- livres -------------- */

#actu_livre{
float:left;
width:355px;
margin-top:10px;
padding:0;
}

#actu_livre_HT{
background:url(layout/accueil/encadre_livre/livre_HT.png) no-repeat;
width:355px;
height:49px;
}

#actu_livre_ML{
background:url(layout/accueil/encadre_livre/livre_ML.png) repeat-y;
width:355px;
}

#actu_livre_BS{
background:url(layout/accueil/encadre_livre/livre_BAS.png) no-repeat;
width:355px;
height:22px;
}

#actu_livre_contenu{
margin-left:10px;
margin-right:10px;
width:320px;
text-align:justify;
}

#actu_livre_couv{
position:relative;
float:right;
margin:0 0 0 10px;
}


et mon code HTML disponible sur la page en question Smiley cligne

Quelqu'un a une idée ??? J'ai viré mes commentaires... mais ça ne change rien... Je ne vois pas Smiley confus .

Merci encore de votre aide à tous,
Aurélia.
Modifié par Fugugirl (22 Nov 2006 - 00:11)
Yop deja dans ton conteneur principal il manque un text-align: left; qui sert pour éviter un bug sous ie.

Ensuite je comprend pas bien la question :s
Ma couleur de fond de la div principal est blanche. Normalement elle devrait englober ma div "actu Livre" mais elle ne le fait (pas de couleur blanche en tout cas car le positionnement est le bon.

Quel bug est évité par cet ajout de text-align ??

Merci de ton aide quoiqu'il en soit, tu es le plus rapide à répondre Smiley smile
Je comprends pas bien pourquoi tu mets tes blocs en position relative ? Je pense que c'est ça qui le fait paniquer. essaye soit :
1/ virer les position relative
2/ ajouter un <div style="clear: both"></div> avant ton div final pour aider le navigateur à comprendre ou se termine les floats...
Tu es mon sauveur !!!

Je ne sais pas moi-même pourquoi je mets des positions relative partout... Je pensais que ça aidait à prendre en compte la div dans laquelle on est comme point d'ancrage... mais il faut maintenant à apprendre à l'utiliser intelligemment (le plus dur toujours).

MERCIIIIIIIIIIIII Smiley biggrin
Sujet clos
Aller à