probléme en css

Eléphant du PHP | 62 Messages

11 juin 2012, 15:52

bonjour
je suis entrain de développer un site internet ou on peut ajouter des liens, les éditer et les supprimer
mon site est découpé de la façon suivante
Image
Mon problème est le suivant:
quand j'ajoute un lien dans la div "navigation", bah l’espace qui est entre "navigation" et la div "tertiare" disparait, et puis les deux div sont superposé l'une sur l'autre
j'ai essayer les "margin-bottom", des "pading" ça n'a rien changé, et mon but c'est de laisser toujours un espace entre ces deux div quelque soit le nombre de liens dans la div "navigation".
je vous donne mon code css
/* Navigation */
#navigation {

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;   
}
#div2 {
	
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;   
}

#div3 {
	
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;   
}




/* Contenu principal */
#principal {
	
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
	border-radius: 10px;   
}

#menu{
padding: 12px 15px;
padding: 12px 15px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
#menu ul {
	width: 100%; /* -> 2 */
	overflow: hidden; /* -> 2 */
	margin: 0;
	padding: 0;
	list-style: none;
}
#menu li.gauche {
	float: left; /* -> 3 */
	margin-right: 10px;
	font-size: 1.4em;
	font-style: italic;
}

#menu a {
	padding: 6px;
	line-height: 1.5;
	font-size: .9em;
	text-decoration: none;
}

#tertiare {
	-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
     border-radius: 10px
}
#pied {
	-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
     border-radius: 10px;
     /*----width : 707px;----*/		 
}



/* --- POSITIONNEMENT --- */

/* Page */
body {
	padding: 20px 30px;
}

/* En-tête */
#entete {
	padding: 20px 0;
	-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
     border-radius: 10px;
    		 
}
#entete h1 {
	margin: 0;
	text-align: center;

}
#entete h1 img {
	float: left;
	padding: 0 15px 10px;
	border-radius: 10px; 
	
}

/* Bloc central */
#centre {
	position: relative; /* Voir -> Note 1 */
	width: 100%;
}

/* Menu de navigation */
#navigation {

	position: absolute; 
	/* -> 1 */
	top: 0;
	left: 0;
	width: 180px;
}
#navigation ul {
	margin: 0;
	padding: 20px 10px 20px 10px;
	list-style: none;
}
#navigation a {
	display: block;
	height: 1%;
	padding: 6px 10px 6px 10px;
	line-height: 1.5;
	font-size: .9em;
	text-decoration: none;
}
#div2 {

	position: absolute; /* -> 1 */
	top: 0;
	right: 0;
	width: 180px;
	padding: 12px 20px;
	/*padding: 0px 0px 20px 0px;*/

}
#div2 ul {
	margin: 0;
	padding: 20px 10px 20px 10px;
	list-style: none;
}
#div2 a {
	display: block;
	height: 1%;
	padding: 6px 10px 6px 10px;
	line-height: 1.5;
	font-size: .9em;
	text-decoration: none;
}
#div3 {

	position: absolute; /* -> 1 */
	top: 150px;
	right: 0;
	width: 180px;
	padding: 12px 20px;
	margin-top:170px;
}
#div3 ul {
	margin: 0;
	padding: 20px 10px 20px 10px;
	list-style: none;
}
#div3 a {
	display: block;
	height: 1%;
	padding: 6px 10px 6px 10px;
	line-height: 1.5;
	font-size: .9em;
	text-decoration: none;
}
/* Contenu principal */
#principal {
	margin-left: 200px; /* -> 2 */
	margin-right: 240px; /* -> 2 */
	padding: 10px 20px;
}
#principal > :first-child {
	margin-top: 10px;
}
#principal p, #principal li {
	line-height: 1.5;
}



#tertiare {
	position: absolute; 
	margin-top:560px;
	/* -> 1 */
	top: 0;
	left: 0;
	width: 180px;
	text-align: center;
	/*padding: 0px 0px 20px 0px;*/
}


/* Mention de copyright */
#copyright {
	margin: 20px 0;
	font-size: .85em;
	text-align: left;
}
/* Pied de page */
#pied {
    
	position: relative; /* Voir -> Note 1 */
	
	margin-left: 200px; /* -> 2 */
	margin-right: 240px; /* -> 2 */
	
}
#pied p {
	margin: .5em 0;
}
#copyright {
	text-align: center;
	font-size: 1em;
}

quelq'un peut m'aider à résoudre ce probléme??
merci d'avance.

ViPHP
ViPHP | 1996 Messages

11 juin 2012, 19:26

Je crois me rapeller que les "margin" ne peuvent pas être utiliser en position : absolute;
(pas sûr)
#tertiare {
        position: absolute;
        margin-top:560px;
        /* -> 1 */
        top: 0;
        left: 0;
        width: 180px;
        text-align: center;
It is nice to be important but it is more important to be nice
http://www.aureuswebfactory.fr

Eléphant du PHP | 62 Messages

13 juin 2012, 09:41

et c'est qiuoi la solution selon vous???
vraiment je suis en galére je n'arrive pas à résoudre ce probléme

ViPHP
ViPHP | 1996 Messages

16 juin 2012, 11:26

Donne le code HTML d'une page type utilisant ton CSS
It is nice to be important but it is more important to be nice
http://www.aureuswebfactory.fr