probleme de décalage (CSS)

par **HanX** » 06 juil. 2006, 12:56

ok merci je vais voir comment ça marche... sinon pour ajouter un em c'est quoi la commande ?

J'ai un peu de mal avec css de positionnement... je trouve pas de bonnes docs sur le net

par **nimpor** » 06 juil. 2006, 11:40

ton probleme viens de :

#rightcol{
width:30%;
float:right;
position:relative;
padding:1em;
background-color:#3946D6;
}

#maincol{
background-color: #6689D6;
float: left;
display:inline;
position: relative;
width:70%;
padding:1em;
}

tu ajoute 1em à droite et a gauche de tes deux div au 70%+30% définit.
enlève les padding et ton menu se positionnera bien a droite.

d'autre part ca n'a pas de sens de faire un "display:inline" et un "float: left", ca montre que ton ne comprend pas a quoi ils servent tous les deux.

transformer un élément de type bloc et type inline sert a ce que ton élément ai la même taille que sont contenu (lui définnir en plus un width n'a pas de sens)

dans le cas present le display inline ne sert a rien vu que tu fait flotter tes élements...

par **Invité** » 05 juil. 2006, 18:19

c'est parceque ton menu est trop large par rapport à la colonne centrale, il ne peut pas passer dessus... et le header aussi est trop large

par **HanX** » 04 juil. 2006, 23:54

en fait en bas à droite tu verras que ça marque menu... alors je veux qu'il soit aligné horzontalement

genre

[haut ]
[centre][menu]

alors qu'actuellement ça fait (je remplace les espaces par des _)
[haut ]
[centre]_____
______[menu]

Provisoirement je l'ai mis ICI > http://hanx.free.fr

par **jojolapine** » 04 juil. 2006, 19:19

j'ai pas tester, mais un margin: 0px; dans ta colonne de droite, ça ferait pas l'affaire?
ceci dit tu ne précises pas où est le décalage, je sais pas trop moi

par **HanX** » 02 juil. 2006, 16:33

Bon voilà, après des années de dévellopement avec des tableaux... je me suis dis qu'il fallait se mettre aux div... mais c'est un gros bordel

Bon j'ai généré vite fait un script sur csscreator.com (que j'ai un peu bidouillé) mais là je m'arrache les cheveux depuis 2 heures car il y a un ptit décalage que j'arrive pas à enlever au niveau du menu. Je pense que ça vient des "padding" mais j'ai pas trouvé de solution.

le fichier html

Code : Tout sélectionner

<html>
<head>
<LINK REL=stylesheet TYPE="text/css" HREF="pos.css">
<title>site/title>
</head>
<body>
<div id="pagewidth" >
	<div id="header"> Site du papier-cul !</div>
		<div id="twocols" class="clearfix"> 
			<div id="maincol" ><? include "center.php"; ?></div>
			<div id="rightcol" > MENU </div>
		</div> 
	</div>
</div>
</body>
</html>

mon fichier css :

Code : Tout sélectionner

/* generated by csscreator.com */ 
html, body{ 
 margin:0; 
 padding:0; 
 text-align:center; 
 background-color:#0066FF;
} 
 
#pagewidth{ 
 width:80%; 
 text-align:left;  
 margin-left:auto; 
 margin-right:auto;  
} 
 
#header{
 position:relative; 
 padding:1em;
 text-align:center;
 background-color:#CCFCA6; 
 width:100%;
 border: 1px solid #000000;
} 
 
#twocols{
 width:100%; 
 position:relative; 
 border-left:1px solid #000000;
 border-bottom:1px solid #000000;
 border-right:1px solid #000000;
 }
 
#rightcol{
 width:30%; 
 float:right; 
 position:relative;
 padding:1em;
 background-color:#3946D6;
 }
 
#maincol{
 background-color: #6689D6;  
 float: left; 
 display:inline; 
 position: relative; 
 width:70%;
 padding:1em;
 }
 

 
 /* *** Float containers fix:
 http://www.csscreator.com/attributes/containedfloat.php *** */ 

.clearfix:after {
 content: "."; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden;
 }
 
.clearfix{display: inline-table;}

/* Hides from IE-mac \*/
 html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */  


 
 /*printer styles*/ 
@media print{ 

/*hide the right column when printing*/ 
#rightcol{display:none;} 
#twocols, #maincol{width:100%; float:none;}
}

NB :
le fichier center.php, me fait un echo "Salut<br>"; en boucle pour tester le remplissage...

Merci d'avance

probleme de décalage (CSS)

Répondre

Étendre la vue Revue du sujet : probleme de décalage (CSS)

probleme de décalage (CSS)