28220 sujets

CSS et mise en forme, CSS3

Problème avec mon design

Bonjour,
j'ai un problème de graphisme j'ai un trou dans mon menu à droite:
voici une image :
http://www.sc4cool.com/index.php
je comprend pas ce trou, si j'aggrandis la hauteur du menu ça me fait le meme problème mais cette fois dans la partie droite.
Voici la source 
body {
background-color: #006699;
font-family:arial;
font-size:10pt;
}
#haut_gauche {
float:left;
width: 575px;
height: 166px;

background-image: url(images/haut_gauche.gif);
background-repeat:no-repeat;
}
#haut_droit {
float:left;
width : 425px;
height: 123px;
margin-top: -166px;
margin-left: 575px;
background-image: url(images/haut_droit.gif);
background-repeat:no-repeat;
}
#haut_lien {

float:left;
margin-top: -43px;
margin-left: 575px;
background-image:url(images/haut_lien.gif);
width : 387px;
height: 43px;
padding-left: 23px;

}

#contenu
{
    float:left;
	margin-top: -4px;
    background-image:url(images/contenu.gif);
    background-repeat:repeat-y;
	padding-top: 20px;
	padding-left:30px;
    width: 750px;
}
#menu {
    margin-top: 164px;
    margin-left: 769px;
	position: absolute;
    background-image: url('images/menu.gif');
    background-repeat: repeat-y;
    width: 200px;
    padding:40px;
   
    /*overflow: hidden;*/
}
.titre
{
font-size:24px;
color:#993333;
background-image:url(images/titre.gif);
background-repeat: no-repeat;
height: 42px;
margin-left: -40px;
padding-top: 10px;
padding-left: 20px;
}
#bas {
float: left;
margin-left: auto;
width: 1000px;
height: 123px;
background-image:url(images/bas.gif);
background-repeat:no-repeat;

}

Attention ce design n'est pas compatible avec IE, alors si quelqu'un serait capable aussi de le rendre compatible sous IE ça me fairait grand plaisir.
Merci de votre aide
Julien.
Modifié par julieng02 (16 Oct 2005 - 16:08)
bonjour,

en regardant ton site, on peut voir que le menu est une entité independante du reste du design. ( comme beaucoup d'elements d'ailleur)
il parait donc normal ce qui t'arrive.

En regle generale, on applique un clear: both au footer pour permettre l'etirement du contenu et du menu. Dans ton cas, ce n'est pas possible.

En plus le design du menu, s'applique au contenu du menu. Donc dans l'absolu, si ton menu est plus long que ton contenu, il va depacer de ton design.

Pour résoudre ton probleme, tu devrais deja inclure ton menu dans ton contenu en le position en float: right. ( actuellement le menu et le contenu sont 2 entité independantes dont la largeur des deux est egales a la largeur du footer )

Donc, du boulot en perspective Smiley cligne
Sujet clos
Aller à