28220 sujets

CSS et mise en forme, CSS3

[Résolu]Padding qui foire la mise en page...

Bonjour,

Je suis en train de refaire la mise en page de mon site en virrant tous ces tableaux pas beau, au profit d'une mise en page via CSS.
J'ai fait la mise en page générale mais qd je rajoute un padding sur une <div>, cela fait déborder la <div> sous Firefox.
Voici le code CSS: 
div#entier {
	position:absolute;
    left: 50%; 
    top: 25px;
    width: 750px;
	height: 650px;
    margin-left: -375px; /* moitié de la largeur */
	background-color: #FFFFFF ;
	border-bottom: 3px solid black;
	border-top: 3px solid black;
    }


div#bann {
	position: absolute;
	width: 750px;
	height:100px;
	top: 0px;
	left:0px;
    background-color:#E0E0E0;
}

div#gauche {
	position: absolute;
	left: 0px;
	top: 100px;
	width: 150px;
	height: 550px;
}
	
div#login {
	position: absolute;
	top: 100px;
	left: 150px; 
	width: 600px;
	height: 25px;
	background-color:#808080;
	}
		
div#main {
	position:absolute;
	left: 150px;
	top: 125px;
	width: 600px;
	height: 525px;
	background-color:#E0E0E0;
	padding: 10px;
	text-align:left;
}


Et le code HTML :
<body>
		<div id="entier">
			<div id="bann">Banniére</div>
			<div id="gauche">Menu</div>
			<div id="login">Login</div>
			<div id="main">News</div>
		</div>
	</body>


Si quelqu'un pourrait m'éclairer, ca serait cool Smiley smile
Modifié par AnTiX (07 Apr 2005 - 15:39)
Administrateur
Bonjour Antix,

Il s'agit du problème classique de "Modèle de boite" : IE calcule les dimensions différemment des autres navigateurs.

Tu as dans la FAQ un lien vers une méthodologie qui va t'aider si tu prends le temps de la suivre Smiley cligne

Bonne chance Smiley smile
En effet, il falait rajouter 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">


Pour qu'internet explorer n'utilise pas son sytéme de boite perso Smiley smile
Attention ceci est vrai pour tous les navigateurs qui peuvent basculer entre boîte Microsoft et boîte standard mais il y a des exceptions (deux à ma connaissance peut-être plus...):

1. Internet Explorer version 5._ ne connait que la boîte Microsoft.

2. Si un prologue XML est rajouté en tête de ton fichier html Internet Explorer 6 utilisera le modèle de boîte Microsoft même si tu as utilisé le DTD HTML.

c'est pourquoi il vaut mieux utiliser le box model hack de Tantek Celik _ (la traduction fr)
Modifié par alex_br (07 Apr 2005 - 16:38)
Merci

J'ai suivi tes conseils, j'espére donc que mon site sera le même sous tous les navigateurs Smiley smile
Sujet clos
Aller à