Menus positionnés en absolu

Maxim · 14 Novembre 2004

Bonjour

Sur le site dont je m'occupe, j'ai deux colones de menus encadrant un contenu.

Ils sont positionnés de manière absolue de façon à ne pas avoir de problèmes avec du float et clear dans le contenu.

Mais, quandd le contenu est plus petit en hauteur que les menus, ils depassent par dessous la barre du bas.

J'ai une solution expliquée dans la page, mais c'est du cas par cas.

J'ai fait une page specialement pour vous :

http://www.adnpc.net/_page_test.php

Comment faire !

(Une fois ce problème reglé, je vais pouvoir enlever le marquee et à moi la validité w3c !)

Maxim · 14 Novembre 2004

tiens au passage, je me demande quand est-ce que seront ajoutés au css (si jamais le groupe de reflexion compte l'ajouter) les propriétés relatives ?

j'invente 2 exemples :

#page {
min-height: #menu.height + 20;
}

ou

#page {
height: #menuhaut.margin-top;
}

(pour min-height, j'invente, je sais pas si ça existe...)

ElMoustiko · 14 Novembre 2004

Les inventions que tu donnes sont ce à quoi beaucoup aspire, mais malheureusement ça ne fonctionne pas :S

Pour le min-height ça existe bel et bien, mais plus ou moins bien implémenté par IE (des solutions existent)

Mais pour ta page, les flottant sont justement tout à fait adapté

Tu met menu1, contenu, menu2 en float: left; et tu met clear: both; à ton pied de page est ça roule... je ne vois pas pourquoi tu ne voulais pas les utiliser.

Maxim · 14 Novembre 2004

mais si je doit placer un float left dans le contenu, je ne pourrais pas utiliser de clear: left sous peine de le voir en dessous du menu.

cruel dilemne !

(note : ce serai bien qu'ils implementent une sorte de clear: left 1; qui ferait un clear sur un niveau par exemple)

Peut-etre qq1 a t il une solution pour l'absolu. :?:

ElMoustiko · 14 Novembre 2004

Je dois écrire avec de l'encre invisible en fait, ça doit être ça...

Le clear (comme je le disais plus haut), c'est clear: both; que tu met sur le PIED DE PAGE, et là ça fonctionne. Et tu met tes 3 "colones" en float: left ;

Maxim · 14 Novembre 2004

J'ai bien lu et compris ce que tu as ecrit.

Mais je disais qu'en cas de clear: left right ou both dans le contenu, ça aurait l'effet de celui qui serait dans le pied de page, propulsant le reste du contenu en dessous du dernier menu.

A moins que clear soit intelligent.

Donc, j'ai bien noté ta solution mais qui me pose le problème (si il existe) que j'ai di ci-dessus.

C'est pour ça que j'aimerai une solution à ce problème avec le choix de positionnement absolu (si il y en a une).

;-)

ElMoustiko · 14 Novembre 2004

Ton problème c'est que le pied de page se superpose sur les menus quand ils sont plus haut que le contenu, on est d'accord ??

Donc avec la solution que je te propose, ça règle le problème, tu n'a qu'a tester cette page :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
  <title>Titre, 3 colones, pied de page</title>

  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <meta http-equiv="Content-Language" content="fr" />
  
  <style type="text/css">
  * { margin: 0; padding: 0; }
  
  body
  {
 	 text-align: center;
  }
  
  div#conteneur
  {
 	 width: 770px;
 	 margin: 0 auto;
 	 text-align: left;
  }
  
  h1#header
  {
 	 height: 120px;
 	 background: #333;
 	 color: #eee;
  }
  
  ul#menu1
  {
 	 float: left;
 	 width: 120px;
 	 list-style-type: none;
 	 background: #ccc;
  }
  
  ul#menu2
  {
 	 float: left;
 	 width: 120px;
 	 list-style-type: none;
 	 background: #ccc;
  }
  
  div#contenu
  {
 	 float: left;
 	 width: 530px;
  }
  
  p#footer
  {
 	 clear: both;
 	 background: #333;
 	 color: #eee;
  }
  </style>
	</head>

	<body>
	<div id="conteneur">
  <h1 id="header">Titre</h1>
  
  <ul id="menu1">
 	 <li>item1</li>
 	 <li>item2</li>
 	 <li>item3</li>
 	 <li>item4</li>
 	 <li>item5</li>
 	 <li>item6</li>
 	 <li>item7</li>
 	 <li>item8</li>
 	 <li>item9</li>
 	 <li>item10</li>
 	 <li>item11</li>
 	 <li>item12</li>
  </ul>
  
  <div id="contenu">
 	 <h2>contenu</h2>
 	 <p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
  </div>
  
  <ul id="menu2">
 	 <li>item1</li>
 	 <li>item2</li>
 	 <li>item3</li>
 	 <li>item4</li>
 	 <li>item5</li>
 	 <li>item6</li>
 	 <li>item7</li>
 	 <li>item8</li>
 	 <li>item9</li>
 	 <li>item10</li>
 	 <li>item11</li>
 	 <li>item12</li>
  </ul>
  
  <p id="footer">pied de page</p>
	</body>
</html>

Sinon, je n'ai pas compris ton problème.

Si tu veux une solution avec le positionement absolu :

http://www.alsacreations.com/articles/modeles/g_d_fixe.htm

Mais si tes menus sont trop long, ça fera pareil qu'ici, ça se chevauchera.

ElMoustiko · 14 Novembre 2004

J'ai peut être compris ce que tu voulais dire... En fait c'est si tu as un élément flottant dans un autre élément lui même flottant, tu penses que ça va poser problème (enfin tu le dis même, tu sembles avoir testé) si tu met un clear sur cet élément. Mais pourquoi tu appliques un clear à ton élément ???

J'ai testé avec la mise en page que je te donne plus haut, j'ai ajouté

<div style="float: left; background: #eee; width: 150px; height: 150px; border: 1px solid #333; clear: both">Test de float interne</div>
 	 <p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>

A la suite du premier <p>bla bla bla bla</p> et ça ne semble pas clocher, j'ai mis clear: both/left/right; mais dans aucun cas ça n'a d'effet...

Et si je rajoute un autre élément flottant à coté, le clear fait son effet (sauf le right) et pas de problème non plus.

Connexion

Menus positionnés en absolu

Sujets conseillés

Maxim

Maxim

ElMoustiko

Maxim

ElMoustiko

Maxim

ElMoustiko

ElMoustiko

Veuillez vous connecter pour commenter

Parcourir

Activité