28220 sujets

CSS et mise en forme, CSS3

bonsoir,

dans le cas ou la zone de texte soit plus petite qu'un menu de gauche âr exemple, comment faire pour que le pied de page soit en dessous du menu et non en dessous de la zone de texte.
exemple dans mon site test : http://cdt.erea.hostgratos.net/essai

ci dessous mon css
body {
font-family: Verdana, Arial, Helcetica, sans-serif;
font-size: 11px;
margin: 0;
padding: 0;
background-color: #000000;
}
/*bandeau*/
#head {
height: 100px;
background-image: url('design/head2.gif');
}
/*zone de texte*/
#centre {
background-color:#9999CC;
margin-left: 160px;
margin-right: 160px;
}
/*espace membre*/
#membre {
background-color:#FF3333; /*voir pour mettre une image*/
height: 32px;
}
/*menu de gauche*/
#gauche {
position: absolute;
left: 0px;
width: 160px;
background-color:#3399FF;/*mettre la couleur de fond*/
}
/*menu de droite*/
#droite {
position: absolute;
right: 0px;
width: 160px;
background-color:#3399FF;/*mettre la couleur de fond*/
}
/*position des cadres de titre de menu*/
#cadre {
position: relative;
left: 0px;
width: 160px;
text-align: center;
background-image: url('design/cadretitre.gif');
}
/*pied de page*/
#pied {
height: 30px;
text-align: center;
background-image: url('design/pied.gif');
}
/*titre de page*/
#titre {
margin-left: 160px;
margin-right: 160px;
height: 20;
background-color:#45536C;/*voir pour mettre une image*/
}
/*composition du menu de gauche*/
.menu {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
margin-bottom: 5px;
}
.menu a {
margin:10px;
color: #000000;
text-decoration: none;
}
.menu a:hover {
text-decoration: none;
}
/*composition du menu de droite*/
.menud {
list-style-type: none;
margin: 0;
padding: 0;
}
.menud li {
margin-bottom: 5px;
}
.menud a {
margin: 10px;
color: #000000;
text-decoration: none;
}
.menud a:hover {
text-decoration: none;
}
.titre {
margin: 0px;
font-weight: bold;
color: #FFFFFF;
}
/*logo*/
.logo {
float: left;
margin-left: 20px;
margin-top: 10px;
border: 2;
}
/*pub - bannière*/
.pub {
float: center;
margin-left: 500px;
margin-top: 20px;
border: 0;
}


j'ai également un probleme au niveau de la banniere de pub. elle ne s'affiche pas. Et en plus je souhaiterais qu'elle s'affiche au centre de l'écran.

D'avance merci pour votre aide

édit par Igor (balise code redondante)
Modifié par ganou66 (22 Mar 2005 - 20:25)
déjà c'était une mauvaise idée d'utiliser le positionnement absolue... utilises plutôt la méthode des blocs flottantes.
je suis aller consulter les tuto sur les blocs flottant. Eh ben.... je pige pas grand chose par rapport a mon probleme

Mais, merci quand meme Smiley lol