28220 sujets

CSS et mise en forme, CSS3

Problème bloc contenu avant menu

Bonjour a tous Smiley smile

J'ai un petit soucis de positionnement dans mon gabarit et j’aimerais avoir votre, j’espère que vous allez bien comprendre mon problème Smiley smile , je vous explique le topo:
Mon gabarit est composé d'un header, d'une colonne à gauche (menu) et d'une autre a droite (contenu) et d'un footer.

Ca donne ça : http://sooat.com/divers/maquette.gif
Rien de très compliqué en somme.

Sauf que j'aurais aimé que dans le code html le contenu soit positionné avant le menu. Quand je déplace ma div contenu pour la mettre avant le menu, ça beug dans tous les sens, j'ai essayé plusieurs méthodes mais ça ne marche pas, au finale je suis obligé de mettre le menu en absolute, j'aurais préféré en relative pour que le clear:both du footer soit effectif, mais ça me met une sorte de margin énorme en haut du menu :| et IE n’en parlons pas !!
Mon code actuellement donne ça :

#contenu{
  margin: 5px 10px 45px 182px;
  color: #515151;
}
#menu {
  position: absolute;
  top: 205px;
  margin: 0 0 0 5px;
  padding: 0;
  width: 162px;
  float: left;
  z-index:1;
  }


Et dans mon HTML #contenu est positionné avant #menu, je voudrais savoir si vous avez pas une astuce pour placer dans un gabarit de type : http://css.alsacreations.com/modeles/modele3.htm , le contenu avant le menu sans faire appel à du absolute ?...tout en faisant en sorte que le contenu pousse vers le bas Smiley sweatdrop
Merci d’avance de votre aide, je ne suis pas sûr d’avoir bien formulé les choses
Smiley confused
Modifié par funk_unit (26 Jun 2005 - 23:28)
Pourquoi n'essaies-tu pas de faire flotter à droite ? ça a pour effet d'inverser l'ordre d'affichage vu qu'on va placer le plus à droite le premier élément.

UN truc du genre
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>

<head>
<title>test</title>
<style type="text/css">
body,div {
    padding : 0;
    margin : 0;
}
#page {
    margin : auto;
    width : 600px;
}
#banniere {
    width : 100%;
    height : 30px;
    background : red;
}
#contenu {
    float : right;
    background : blue;
    width : 438px;
    overflow : auto;
}
#menu {
    float : right;
    background : green;
    width : 162px;
    overflow : auto;
}
#footer {
    width : 100%;
    background : yellow;
}
</style>
</head>

<body>
    <div id="page">
        <div id="banniere">Bannière</div>
        <div id="contenu">Contenu</div>
        <div id="menu">Menu</div>
        <div id="footer">Pied de page</div>
    </div>
</body>

</html>
ton site a écrit :
#contenu {
float : right;
background : blue;
margin
width : 438px;
}

Il y a une erreur de syntaxe dans ta règle (margin sans rien derrière). Du coup il arrète là l'analyse du style #contenu, et ne tient pas compte de la largueur imposé.
Oui !!
Effectivement je n'avais pas vu (il était tard aussi), maintenant ça marche impécable, c'est exactement ce que je souhaitais, merci beaucoups naholyr pour ton aide Smiley smile
Sujet clos
Aller à