Aller au contenu

Menus positionnés en absolu

Maxim

Par Maxim
dans (X)HTML et CSS

 Partager

Sujets conseillés

Maxim

Maxim

Posté
Posté

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 !)

Lien vers le commentaire
Partager sur d’autres sites
Maxim

Maxim

Posté
  • Auteur
Posté

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...)

Lien vers le commentaire
Partager sur d’autres sites
ElMoustiko

ElMoustiko

Posté
Posté

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.

Lien vers le commentaire
Partager sur d’autres sites
Maxim

Maxim

Posté
  • Auteur
Posté

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. :?:

Lien vers le commentaire
Partager sur d’autres sites
Maxim

Maxim

Posté
  • Auteur
Posté

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).

;-)

Lien vers le commentaire
Partager sur d’autres sites
ElMoustiko

ElMoustiko

Posté
Posté

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.

Lien vers le commentaire
Partager sur d’autres sites
ElMoustiko

ElMoustiko

Posté
Posté

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.

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...