Page 1 sur 1

probléme en css

Posté : 11 juin 2012, 15:52
par sidomed
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.

Re: probléme en css

Posté : 11 juin 2012, 19:26
par Aureusms
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;

Re: probléme en css

Posté : 13 juin 2012, 09:41
par sidomed
et c'est qiuoi la solution selon vous???
vraiment je suis en galére je n'arrive pas à résoudre ce probléme

Re: probléme en css

Posté : 16 juin 2012, 11:26
par Aureusms
Donne le code HTML d'une page type utilisant ton CSS