28173 sujets

CSS et mise en forme, CSS3

[CSS] Problème div qui dépasse

Salut !
Voici mon site :
http://www.passionsport.fr/Portail/

J'ai mi des bordure expret !
Sous IE6 sa va mais sous Mozilla les div des menu dépasse du cadre fixe (width en px)
Les bloc menu sont en width:100%


#gauche {
	width: 310px;
	margin-top:9px;
	margin-bottom:9px;
	float:left;
	border:1px solid;
}

#droite {
	margin-left: 320px;
	margin-top:9px;
    width:600px;
	border:1px solid;
}
/*Pour les blocs menu*/


.moduletable h3{
	font-size:1.3em;
	font-family:Arial, Helvetica, sans-serif;
	margin:-9px;
	margin-bottom:5px;
	padding: 5px;
	background-image:url('../images/index_11.jpg');
	border-bottom: 1px solid #C5E0E9;

}
.moduletable{
	border:1px solid #C5E0E9;
	padding:9px;
	margin-bottom:10px;
	width:100%;
}


merci d'avance
Salut!

Ton problème vient d'un mauvais calcul de largeur. Tu as donné une largeur de 310px à ta colonne de gauche. Mais à l'intérieur de celle-ci, tu places des éléments avec une largeur de 310px également, plus des marges ou padding.

Il faut savoir que ces marges & padding viennent s'ajouter à la largeur définie par "width". Il est donc normal que ça déborde un peu partout de ta colonne.

A propos des dimensions de boîtes en CSS

Dans ton cas, il suffit de supprimer les largeurs imposées à l'intérieur de la colonne : si tu veux que les titres & tables occupent toute la largeur, tu n'as rien à indiquer, c'est ce qu'ils font naturellement Smiley cligne
Salut !
merci j'avais déjà tester sans les width:100% mais sa donne ca :
http://passionsport.fr/Portail/

sous IE6 c'est catastrophique


#gauche {
	width: 310px;
	margin-top:9px;
	margin-bottom:9px;
	float:left;
}

#droite {
	margin-left: 320px;
	margin-top:9px;
    width:625px;
}

/*BLOC Bleu*/

.moduletable h3{
	font-size:1.3em;
	font-family:Arial, Helvetica, sans-serif;
	margin:-9px;
	margin-bottom:5px;
	padding: 5px;
	background-image:url('../images/index_11.jpg');
	border-bottom: 1px solid #C5E0E9;

}
.moduletable{
	border:1px solid #C5E0E9;
	padding:9px;
	margin-bottom:10px;
}

/*BLOC orange*/


.moduletableorange h3{
	color:#EE8D00;
	font-size:1.3em;
	font-family:Arial, Helvetica, sans-serif;
	margin:-9px;
	margin-bottom:5px;
	padding: 5px;
	background-image:url('../images/index_17.jpg');
	border-bottom: 1px solid #FFCC8A;
}

.moduletableorange{
	border:1px solid #FFCC8A;
	padding:9px;
	margin-bottom:10px;
	color:#EE8D00;
}

.moduletableorange a, .moduletableorange form, .moduletableorange td, .moduletableorange tr {
	color:#EE8D00;
}

Modifié par xpack (14 Jan 2007 - 10:37)
Au passage, le prologue XML fera passer IE6 en mode Quirks, ce qui n'est pas vraiment une bonne chose...
De plus, il n'est pas très pertinent dans le cas d'un document servi en text/html. Donc autant le virer.

xpack a écrit :
sous IE6 c'est catastrophique

À voir avec un rendu en mode Strict dans IE (donc en virant le prologue XML, etc.)
Modifié par Florent V. (14 Jan 2007 - 10:44)
Sujet clos
Aller à