18073 sujets

Questions générales et questions de débutants

Menu coupé

Bonsoir,

Ca fait deux jours que j'ai débuté la lecture du site, pour éliminer les tableaux de pages de html et il y a certaines choses que je n'arrive pas à réaliser. Smiley sweatdrop

J'ai suivi le tuto à propos du menu à gauche mais à l'inverse du tuto, mon menu est plus long que le texte central et se retrouve coupé (enfin uniquement sous firefox et conqueror).
http://cdzforum.free.fr/uploads/firefox.JPG

HTML :
<body>
<div class="bloc-principal">
 <div class="menu-gauche">
  .
  .
   <div class="menu-separation"></div>
 </div>

 <div class="centre">
 .
 .
 </div>

 <div class="separation"></div>
</div>


CSS:
BODY {
FONT-SIZE: 10px; FONT-FAMILY: Verdana,Helvetica; background-color: #8795C1; margin-top: 0px; padding: 0;
}

.bloc-principal {
margin-top: 12px; width: 900px; margin-left: auto; margin-right: auto; background-color: #f4f6fc; margin-bottom: 12px;
padding: 0x; 
}

.separation {
height: 12px;
}

.menu-gauche {
float: left; width: 154px; margin-left: 4px;
}

.centre {
position: relative; margin-right: 12px; margin-left: 170px;
}

.menu-separation {
height: 16px;
}


Second problème (maintenant sous ie) qui se pose, ce sont des marges à mettre à 0 mais j'avoue ne pas trop savoir où ?
Le problème en image:

http://cdzforum.free.fr/uploads/ie.JPG

Je sens que je vais me faire lincher avec mes questions de débutants Smiley decu
Modifié par Illidan (30 May 2005 - 22:06)
J'ai l'impression que ton problème est lié à cet autre problème posté en parallèle, et que j'ai rencontré récemment. Le sujet est là.

J'y ai mis un lien vers une page explicative que j'ai rédigée à l'arrache.

Il semblerait que ça soit lié à la gestion de float. Ton menu de gauche, qui est en float:left, se retrouve à cause de ça flottant au dessus du conteneur "bloc-principal", et du coup n'agrandit pas ce bloc principal mais le dépasse. Du coup c'est moche. Pas glop.

La solution consiste donc à forcer le bloc-principal à considérer ton menu comme étant partie intégrante de ce bloc (ce qu'il aurait pu comprendre tout seul le bougre, il suffit de lire le code html !). Le petit truc que j'ai trouvé, c'est de rajouter un élément de type bloc (div, p, n'importe quoi en display:block) à la suite de tes deux blocs (menu et centre), et de lui affecter l'attribut clear:both. Je ne sais pas pourquoi (et j'aimerais bien le savoir !) mais ça marche.

Dans mon exemple ce bloc rajouté est visible, pour aider à la démonstration, mais on peut aussi le laisser invisible et d'épaisseur 0px (un div vide fera l'affaire).

Reste que c'est du bricolage, je trouve, vu qu'on rajoute un élément vide.
Note: si tu as déjà un élément à la suite mais à l'intérieur de ton bloc-principal, pas besoin d'en créer un vide, applique clear:both à celui-là.

Ça corrige le pb sur Gecko (mozilla/firefox) et KHTML (Konqueror, peut-être Safari).
Avec les modif conseillées, ca fonctionne (youpie Smiley biggrin ).
En fait, pour que le cadre principal prenne en compte la longueur du menu, il faut remplacer le "float: left" par "position: relative" ... malheureusement, le cadre central se retrouve en dessous du cadre de menu.
Enfin, bref, je vais garder ce que tu m'as donné, tant que ca fonctionne.
Merci beaucoup Smiley smile

Au niveau du second problème de barre blanche, personne ne peut me dire ? Smiley confused
Sujet clos
Aller à