Webmaster Hub > Positionnement des div

Version complète: sur le forum Webmaster Hub : Positionnement des div

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

Perrine

jeudi 21 octobre 2004 à 21:29

Bonsoir,

Depuis ce matin, j'ai beau lire et relire l'openweb et ce post ci, je n'arrive pas à faire une page avec un header + menu à gauche + contenu.

Ma page est à l'adresse suivante : http://www.lesgrognards.com/www/index.php

La page est structurée de la manière suivante :

1- un div "page" pour entourer le tout
2- un div "header" qui contient le ... header

3- un div "haut" dans lequel est compris un div pour afficher la date, et un div pour le menu horizontal
4- un div en float:right pour le bas de la roue
5- un div "menu_global" qui comprent 3 div pour découper l'image du menu
6- un div "contenu" pour le contenu du site
7- un div "footer" pour le footer

Voilà donc comment est constitué le code HTML :

CODE

<body>
<div id="page">

<div id="header"></div>
<div id="haut">
<div id="date">Mardi 19 Octobre 2004</div>
<div id="nav_haut"><a href="index.php" class="nav_haut" rel="index">accueil</a> | <a href="#" class="nav_haut" title="Utilisez MAJ+Click pour ouvrir le forum HistWar dans une nouvelle fenetre">forum</a> | <a href="#" class="nav_haut">chat</a> | <a href="#" class="nav_haut">contact</a></div>
</div>
<div id="roue"></div> 

<div id="menu_global">
<div id="langue"><a href="index.php" hreflang="fr"><img src="images/flag-french.jpg" alt="Version française" title="Version française" /></a>  <a href="index.php" hreflang="en"><img src="images/flag-english.jpg" alt="English version" title="English version" /></a></div>
<div id="menu">
Actualité
<ul>
<li>· <a href="#" class="menu">Récentes</a></li>
<li> · <a href="#" class="menu">Archives</a></li>
<li>· <a href="#" class="menu">Newsletter</a></li>
<li>· <a href="dossier_presse.php" class="menu">Dossier Presse</a></li>
<li>· <a href="#" class="menu">Médaille d'Honneur</a></li>
</ul>
HW - Les Grognards
<ul>
<li>· <a href="#" class="menu">Présentation</a></li>
<li>· <a href="#" class="menu">Screenshots</a></li>
<li>· <a href="#" class="menu">Téléchargements</a></li>
</ul>
Autres Jeux
<ul>
<li>· <a href="#" class="menu">1806</a></li>
<li>· <a href="#" class="menu">La Grande Armée</a></li>
<li>· <a href="#" class="menu">Téléchargements</a></li>
</ul>
Ressources
<ul>
<li>· <a href="#" class="menu">Liens</a></li>
<li>· <a href="#" class="menu">Récits Historiques</a></li>
<li>· <a href="#" class="menu">Merveilleuses</a></li>
</ul>
</div>
<div id="boudinB"></div>
<div id="w3c"><a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" /></a></div>
</div> 

<div id="contenu">
<h1>Le jeu HistWar se présente ...</h1>
<p>bla bla bla bla</p>
</div>

<div id="footer">2001 - 2004 © JMM et son équipe - <a href="#">Copyright</a> | <a href="#">Mentions Légales</a> | <a href="#">Plan du Site</a> | <a href="#">Contact</a></div> 
</div>
</body>

En ce qui concerne la CSS, en voici un extrait :

CODE

/* div contenant le menu vertical (choix langue + parchemin + bas du parchemin */
#menu_global{
width:155px;
background-color:#000000;
position:absolute;
}

#langue{
width:155px;
height:21px;
text-align:center;
padding:12px 0px 0px 0px;
background-image:url(../images/parchemin_haut.jpg);
background-repeat:no-repeat;
background-position:bottom;
}

#menu{
color:#8A0909;
font-size:0.7em;
font-style:italic;
font-weight:bold;
line-height:1.65;
padding:6px 0px 6px 8px;
background-image:url(../images/menu.jpg);
background-repeat:repeat-y;
}

#menu ul {
list-style-type: none;
margin-top:3px;
margin-bottom:10px;
}

#menu li {
list-style-type: none;
margin-left:-42px;
}

#boudinB{
height:27px;
padding:0px 0px 25px 0px;
background-image:url(../images/boudinB.jpg);
background-repeat:no-repeat;
}

#w3c{
text-align:center;
}

/* div contenant le contenu */
#contenu{
width:615px;
padding:25px 20px 30px 0px;
position:relative;
left:165px;
}

/* footer */
#footer{
width:570px;
font-size:0.7em;
text-align:center;
margin-left:auto;
margin-right:auto;
background-color:#2C0606;
padding:4px 5px 5px 10px;
}

Comme vous pouvez le voir sur la page index.php, le menu de gauche (menu_global) recouvre le footer. Or, vous l'aurez bien compris, je souhaiterai que le footer se mette en dessous du menu_global quand ce dernier est plus long que le contenu ou en dessous du contenu quand ce dernier est plus long que le menu_global.

Pour l'instant donc, le menu étant en position:absolute, le div "page" n'en tient pas compte pour se fixer sa longueur. Je suppose donc que c'est pour ça que le menu recouvre le footer.

J'ai essayé une autre possibilité :

Mettre le menu en position:relative et le contenu en position:absolute, mais du coup, le footer ne tient pas compte de la longueur du contenu pour se placer. En gros, c'est le même problème qu'au dessus sauf qu'au lieu que ce soit le menu qui pose souci, c'est le contenu.

Donc, dans une logique implacable, je tente de placer les 2 div en position:relative ... mais là, le div contenu se place en dessous du div menu_global. Même en donnant des positions grâce aux attributs left et top, rien à faire. Normal me direz vous ?? oui ... mais je débute, alors j'ai encore du mal à comprendre toutes les subtilités.

Et donc voilà ... et je bidouille à droite à gauche mais à force, je sens que je perds toute logique et j'ai bien peur de faire difficile alors que c'est tout simple.

Il y a surement un truc qui m'échappe au niveau de la logique des positionnements des div mais je ne vois pas où. La nuit porte conseil dit-on ? Le hub aussi j'espère ! :yoot:

Sylvain Trovalet

jeudi 21 octobre 2004 à 22:44

rajoute clear: both; dans ton footer

LaurentDenis

vendredi 22 octobre 2004 à 04:11

CITATION(Sylvain Trovalet @ 21 Oct 2004, 23:44)

rajoute clear: both; dans ton footer

Non : le menu (#menu_global) étant en position absolue, cela n'aura aucun effet. La propriété clear permet d'empêcher un bloc d'être adjacent à un autre bloc flottant.

En fait, la solution des positions absolues est presque toujours la mauvaise lorsqu'on cherche à faire plusieurs colonnes et un pied de page sur toute la largeur disponible : la colonne en position absolue n'a plus aucune interaction avec les autres éléments de la page (elle est totalement retirée du flux), et les chevauchements sont alors tout à fait logiques

Ce type de mise en page n'est possible avec la position absolue que lorsque l'on est sûr que la colonne positionnée sera plus "courte" que la colonne en flux. Cette dernière maintient alors le pied en page en bonne place.

Pour que des colonnes de hauteur imprévisible "repoussent" toujours un pied de page plus bas que la plus grande, il faut que chaque colonne puisse encore interagir avec ce pied de page. D'où la combinaison classique:
- colonne de contenu flottant
- colonne de menu en flux
- pied de page avec clear:both

Le pied de page en flux :
- sera forcément plus bas que le menu en flux
- sera forcément plus bas que le contenu flottant grâce à sa propriété clear.

Remarque: le fait de faire flotter le contenu et non le menu permet de respecter un ordre plus logique et accessible dans le code html: le contenu avant le menu.

Perrine

vendredi 22 octobre 2004 à 10:37

Bonjour,

Ok, merci pour tous ces compléments d'info. Je ne savais pas trop comment utiliser la propriété clear.

LaurentDenis, j'ai suivi vos conseils.
J'en ai aussi profité pour faire remonter le contenu avant le menu.
Voici les id modifiés dans la feuille de style :

CODE

#menu_global{
width:155px;
background-color:#000000;
}

#contenu{
width:610px;
padding:35px 10px 25px 0px;
float:right;
}

#footer{
width:570px;
font-size:0.7em;
text-align:center;
margin-left:auto;
margin-right:auto;
background-color:#2C0606;
padding:4px 5px 5px 10px;
}

Bizarrement, ou pas, je n'ai pas besoin de mettre clear:both dans le footer pour que ça fonctionne.

Sur cette page : http://www.lesgrognards.com/www/ le menu repousse le footer
Sur celle-ci : http://www.lesgrognards.com/www/dossier_presse.php le contenu repousse le footer.

Tout serait donc parfait s'il n'y avait pas l'id roue. Rappelez-vous, c'est le bas de la roue qui venait habiller le coin haut droit du contenu, en dessous du soldat à droite.

A l'origine ce div était placé en float:right ce qui le poussait complètement à droite et le calait parfaitement.
Maintenant, à cause du float:right du contenu, la mise en page est faussée puisque le contenu ne semble pas pouvoir recouvrir le div roue. Du coup, une fois le div roue placée à droite, le div contenu placé à sa gauche, le menu n'a plus de place et vient se mettre en bas de page.

Je crois qu'il existe une propriété z-index qui permet de gérer la superposition des div. Mais je n'arrive pas à l'utiliser.
Si j'ai bien compris, il faut que les 2 div avec la propriété z-index soit dans le même conteneur pour que cela fonctionne. C'est mon cas, puisque que #roue et #contenu ont comme conteneur #page. Or, je ne vois aucune différence quand j'attribue z-index:1 et z-index:2 à l'un ou à l'autre. Peut-être que cette propriété ne fonctionne pas avec le float ?

J'essaie donc de définir #roue de la façon suivante :

CODE

#roue{
width:99px;
height:148px;
padding:0px 0px 0px 0px;;
background-image:url(../images/roue.jpg);
background-repeat:no-repeat;
position:absolute;
right:0px;
}

Mais là, le div #roue cache une partie du contenu puisqu'il se superpose à lui. Je tente alors à nouveau les z-index ... sans résultat.

Est ce que vous avez une idée ?
Et pourquoi le footer ne nécessite pas le clear:both pour être décalé ?

Merci d'avance

Perrine

vendredi 22 octobre 2004 à 15:57

Autant pour moi ... le clear:both est nécessaire. Juste que j'avais testé cette nouvelle CSS uniquement dans IE. Une question réglée !

Perrine

vendredi 22 octobre 2004 à 17:17

Je détaille un peu mon post du dessus. Je me doute que c'est pas facile de réfléchir sur des pages HTML et des feuilles de style qu'on n'a pas écrites soi-même donc je vous refais la même en image

1- Le truc initial, proposé par LaurentDenis, est le suivant :

#menu_global dans le flux normal
#contenu en position float
#footer avec un clear:both.

Dans cette config, le footer se place bien en dessous du menu et du contenu mais on n'a pas pris en compte le div #roue (qui est juste un div permettant de compléter le graphisme du header)

Le screen est là

2- Pour prendre en compte le div #roue, je l'avais initialement mis en float:right (en gardant la config proposée par LaurentDenis)

Voici ce que ça donne avec 2 float:right

On voit que le div #roue se place en premier, puis le #div contenu à sa gauche puis le div #menu_global mais comme il n'y a plus de place, il se met en dessous.

3- Je tente donc de mettre le #roue en position:absolute; right:0px; mais du coup, il cache une partie du contenu en se mettant au dessus de lui :

Contenu en partie recouvert

(Vous voyez qu'il manque un bout de "commander vos" ?)

4- Donc, je me dis que ce problème de superposition peut être réglé avec la propriété z-index mais soit ça ne fait rien, soit je ne sais pas l'utiliser.

(pas de screen puisque ça ne change rien

)

5- Je vais dans ma cuisine me servir un bon thé histoire de me vider la tête et revenir sur de bonnes bases

6- Peut-être que la façon dont est écrit mon code HTML est pas bonne. Rappelez-vous, #roue est dans le parent #page. Et si je le mettais dans #contenu pour le positionner dans ce dernier ? Sauf que #page n'est pas positionné puisqu'il est en float ... enfin je crois ... je tente quand même ...

Un float:right dans un float:right

Oh ! c'est presque ça ! Cette fois ci, les div ne se marchent plus dessus et se laissent la place l'un l'autre. Sur la page d'accueil, c'est pas génant esthétiquement parlant. Après "chefs d'armée et de" on va à la ligne plutot que continuer encore un peu ... passons.

En revanche, ça l'est plus dans la page dossier_presse.php où nous avons un <h2> avec un fond de couleur

Screen avec le <h2> qui va à la ligne trop tôt à cause de la roue

(On note aussi un léger décalage de la roue. Ce décalage apparait que dans IE et pas dans Firefox ...)

Voilà où j'en suis ...

LaurentDenis

samedi 23 octobre 2004 à 05:11

Plutôt que de mettre cette roue dans ton contenu HTML, il sera beaucoup plus facile d'en faire une image d'arrière-plan CSS, à l'aide de la propriété background.

Cela donnera quelque-chose comme:

CODE

#contenu {
background: #000 url("...") top right no-repeat;
}

Perrine

samedi 23 octobre 2004 à 09:09

Merci :yoot:

C'était effectivement une des pistes que j'avais suivie mais je ne savais pas qu'on pouvait définir le background comme ça.

J'en étais restée à la forme suivante :

CODE

background-image:url(image.jpg);
background-repeat:no-repeat;
background-position:top;

Et donc, j'étais coincée avec les positions puisque je devais choisir entre top et right

Encore merci

LaurentDenis

samedi 23 octobre 2004 à 11:43

J'en profite pour rappeler le réflexe immédiat à avoir lorsqu'on a un problème de syntaxe sur une propriété CSS : aller dans l'index des propriétés de la spécification CSS2 (en français), et suivre le lien sur la propriété en question, ou sur une propriété qui vous inspire tout à coup davantage

Les spécifications ne mordent pas si fort ! Lisez-les

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.