par
sidomed » 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
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.
