28173 sujets

CSS et mise en forme, CSS3

Decalage de <DIV> ( RESOLU )

bonjour a tous je suis nouveau sur ce forum, merci a toute la comunauté pour son soutien au language informatique Smiley biggrin

voila, apres avoire parcouru une bonne 10aine de TUto et cours sur la mise en page des tableau en CSS je n'arive toujours pas a resoudre mon probleme. je m'explique :

g fait une page index.php et une feuille de styll css dont voici le lien :

http://coucouilleland.free.fr/briva/testing/index.php

cette page comporte plusieur tableau dans lesquelles son imbriqué d'autre tableau , voici la source de mon

index.php



<html>

<head>
<link rel="stylesheet" type="text/css" href="styll.css">
</head>


<body>


<div id="global">
	
	<div class="principal">
		
		<div class="secondaire">
		
			<div class="tertiaire"></div>
			
				<div class="quatrieme">
		
				<div class="quatrieme_01">
				</div>
		
				<div class="quatrieme_02">
				</div>
		
				<div class="quatrieme_03">
			</div>
		
				<div class="quatrieme_04">
				</div>
		

			</div>
			
		</div>		
				
	</div>
	
</div>



</body>

</html>


et maintenant le

styll.css


#global {
		position:absolute;
		left:50%;
		top:0px;
		width:810px;
		height:100%;
		margin-left: -405px;
		}
		
.principal {
			width:810px;
			height:100%;
			background-image:url(ressource/contour.gif);
			}
.secondaire {
			margin-left:10;
			margin-left:10;
			width:790px;
			height:100%;
			background-color:#ffffff;
			}
.tertiaire {
			width:100%;
			height:250px;
			background-color:red;
			}
.quatrieme {
			width:790px;
			height:50px;
			background-color:blue;
			}
.quatrieme_01{		
			background-color:yellow;
			margin-left:117px;
			height:25px;
			width:80px;
			float:left;
			}
.quatrieme_02{
			background-color:yellow;
			margin-left:78.3px;
			height:25px;
			width:80px;
			float:left;
			}
.quatrieme_03{
			background-color:yellow;
			margin-left:78.3px;
			height:25px;
			width:80px;
			float:left;
			}
.quatrieme_04{
			background-color:yellow;
			margin-left:78.3px;
			height:25px;
			width:80px;
			float:left;
			}


j'explique mon probleme ( meme si il est flagrant a premiere vu sous les different navigateur IE - opera - FF )

tous simplement les cases Jaune son bien aligner sous Opera et FF mais ne le sont pas sous IE ( sacré microsoft Smiley biggol )

comme dit en debut de message g parcouru beaucoup de forum et de tuto et aussi de cours en trouvant la solution et je n'arive pas a l'apliquer (enfin je croi !! boulet Smiley bawling ) ca fait maintenant plus de 10 jour que je suis bloqué

si vous pouvez m'aider lol Smiley confused

merci beaucoup
Modifié par helium (23 Sep 2006 - 13:13)
Salut.

Je n'ai pas testé, mais on dirait que la marge de gauche de ton premier bloc jaune est doublée sous IE, ce qui est un bug connu avec les flottants.

Si c'est bien ce problème, tu peux le résoudre simplement en ajoutant 
display: inline;
dans le style du premier élément. Cette propriété étant à réserver à IE via les commentaires conditionnels.

Quelques remarques générales en passant :

* où sont tes tableaux imbriqués ? je ne vois que des <div> ... et je ne m'en plaidrai pas Smiley cligne Ne pas confondre les tableaux et les divisions, ça ne sert pas du tout à la même chose.
* tu utilises des classes pour repérer des éléments uniques sur ta page : .quatrieme_01, etc. Les classes sont là pour repérer un groupe d'éléments, dans ce cas-ci il est plus correct d'utiliser des identifiants.
* quel est la raison de l'imbriquation de tes div ? Pourquoi ne pas simplement laisser se suivre dans le code les différentes parties ? 
<body>
   <div id="global">
      <div id="header">...</div>
      <div id="menu">
         <div id="item1">Menu1</div>
         <div id="item2">Menu2</div>
         <div id="item3">Menu3</div>
      </div>
   </div>
</body>
Cette structure de page serait plus claire, à mon avis.
* Enfin, pour réaliser un menu, on utilise plus volontiers une liste non ordonnée <ul> que des div. Pour des raisons de sémantique (menu = liste de liens) et parce que celà permet de regrouper les différents items du menu dans une même entité. Un petit tour par les tutoriels sur les menus de Raphael est fortement recommandé, pour en savoir plus à ce sujet.
ohohoh !!!

merci beaucoup c resolu.

pour les differente remarque que tu a faite je v en prendre compte.

pour se qui es des tableau imbriqué, c normale qu'il apparaissent pas , j'ai reduit au strict minimum mon code source pour que les lecteur puisse se rendre vite compte du petit bug ( j'evite de mettre des <table> <tr> <td> dans mes page je trouve ca depasser Smiley biggrin mais bon c mn point de vu Smiley langue ).

enfaite la structure de mon site sera tres siple au point de vue graphique , une baniere en flash tres legere , 4 bouton et une parti central ou mes bouton von directement taper grace a la function include (); de php.

c un site pour une presentation toute simple. Smiley biggrin
Sujet clos
Aller à