28221 sujets

CSS et mise en forme, CSS3

Remarque sur un tuto alsacreations

Bonjour tout le monde Smiley smile

Voila, je viens de reprendre les codes sources d'un tuto de alsacreations.
Mes modifications par rapport au code originel du css sont uniquement:
- rajout de fonds aux differents div pour mettre en évidence
les dimensions des differents calques
- suppression de images des fonds

=> http://www.beatrice-d.com/alsacreations/alsa.php

Suite à cette manip' rapide, je me pose une question :

- Sous IE 6, Opera 7.54 : les calques sont tres bien alignés
- Sous Firefox 1.0 et Netscape 7.02 : le div qui contient le charabiat en gris clair montre un decallage en bas, par rapport à la limite inferieur
du div contenant le menu. Il semble plus grand en hauteur; pourtant
ces deux div font la meme hauteur :


.gauche
{
position: absolute;
left:0;
background-color: #808080;
width: 181px;
[b]height: 337px;[/b]
}
.centre
{
background-color: #eeeeee;
margin-left: 181px;
width: 586px;
[b]height: 337px;[/b]
padding-top: 10px;
}



Comment expliquez vous ce decallage ?

Merci pour vos réponses Smiley smile
Et ENORME merci au webmaster de ce site fort instructif Smiley smile

Amicalement
Fred.

( Ma config : WinXP sp2 IE6 )
Modifié le 17 Nov 2004 - 12:15
Administrateur
Bon, il va vraiment falloir que je revoie ce tuto, il y'a effectivement plein de petites bizarreries dont celle-ci.

height: 337px;
padding-top: 10px;


En fait, IE et les autres navigateurs ont une interprétation différente du modèle de boîte.

Tu as des explications détaillées ici :
http://www.openweb.eu.org/articles/dimensions_boites_css/
http://www.alsacreations.com/articles/compatibilite/

De plus, la balise <h1> a des marges hautes qui décalent aussi la partie centre.

Dans tous les cas, le mieux est de ne pas spécifier de hauteur... car de toute façon cette partie est censée être fluide selon le contenu
Hello !

Merci pour ces renseignements Smiley smile Je viens de finir un petit test :
http://www.beatrice-d.com/alsacreations/toto.php

Voici le source de ma page html


<div id="conteneur">

	<div id="entete">
		...
		<ul id="onglets">
		  <li><a class="menu" href="#">item 1</a></li>
		  <li><a class="menu" href="#">item 2</a></li>
		  <li><a class="menu" href="#">item 3</a></li>
		</ul>
	</div>

	<div id="centre">
		<div id="gauche">
			div gauche<br><br>
			...
		</div>
		<div id="droite">
			...
		</div>
	</div>

	<div id="pied">
		...
	</div>

</div>



Et voici le source du css associé


body
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;

	margin: 0;
	padding: 0;

	background-color: #000000;
	color: #ffffff;
}

div#conteneur
{
	position: absolute;
	width: 717px;
	left: 50%;

	margin-top: 0;
	margin-bottom: 0;
	margin-left: -358px;
	margin-right: 0;
	
	padding: 0;	

	height: 800px;	
	background-color: #c0c0c0;
}


div#entete
{
	position: relative;
	width: 717px;
	height: 104px;
	margin: 0;
	padding: 0;
	background-color: #808080;
}

div#centre
{
	position: relative;
	width: 667px;
	left: 23px;

	margin: 0;
	padding: 0;

	background-color: #ffffff;

	height: 500px;	

}

div#gauche
{
	position: absolute;
	width: 182px;
	left:10px;
	margin: 0;

	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	text-align:left;
	background-color: #444444;
	
}

div#droite
{
	position: absolute;
	width: 460px;
	left:197px;
	
	margin: 0;

	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;

	background-color: #666666;
	text-align:left;
}

div#pied
{
	position: relative;
	width: 667px;
	height: 26px;
	left: 23px;

	margin: 0;
	padding: 0;

	background-color: #777777;
	
}


/****************** onglets menu ******************/

ul#onglets
{
	position: absolute;
	list-style-type: none;

	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;

	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	top:83px;
	left:311px;

}
 
#onglets li 
{
	float: left;
	width: 121px;
	height: 21px;
	
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 3px;
	
	padding-top: 3px;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;

	background-color: #9A9A9A;
	
	text-align: center;
}



( remarque : j'ai specifié des hauteurs aux div juste pour bien montrer le découpage de la page... je sais qu'en temps normal il faut éviter Smiley cligne )


J'ai eu quelques difficultés à positionner en bas du div "entete" le menu. En effet, au début j'avais mis : le "UL" contenant le menu en -> position: relative;
mais une fois ajoutée un margin-top ou padding-top à ce "UL" ca decallait tout sous mozilla Smiley decu Pour résoudre le problème j 'ai mis le "UL" qui defini le menu en -> position: absolute;
et là j'ai pu le positionner en bas du div "entete" avec top et left.

Est ce que la méthode est correcte ? J'ai l'impression que pour éviter les problèmes
il faudrait trouver à chaque fois une alternive aux marges... Suis-je dans le vrai ?

Pour finir, voici les résultats :

Sous IE 6, Opera 7.54, Firefox 1.0 et Netscape 7.02 : OK

http://www.beatrice-d.com/alsacreations/toto.gif

Est-ce que qq un sous Mac OS avec Safari et IE 5 pourrait
me dire si le resultat est bon ?
http://www.beatrice-d.com/alsacreations/toto.php

Merci pour votre aide
Fred.
Bonsoir Igor

Merci pour ton aide.
Je connais les deux premiers liens de ta liste mais leur systeme
est surchargé depuis plusieurs jours.... ca marche tres rarement

Je test le 3ieme lien

Merci Smiley smile
Sujet clos
Aller à