Avoir le comportement d'une table en css

Bonsoir,
Je cherche à avoir le comportement d'une table en css :

J'aimerai pouvoir obtenir ca en css
___________________________________________________________
|___________Menu 1 _______________________|_____Menu 2 _____|

// bloc qui englobe
<div> // ce div prend tous la largeur de l'ecran
<div>Menu 1</div>
<div>Menu 2</div> // ce div prendra la largeur qui reste
</div>

J'aimerai éviter de specifié un width pour les div.

Merci d'avance

Bonjour,

Déjà les tables servent à représenter des données, pourquoi veux tu les remplacer par des divs lorsqu'elles sont enfin utiles ?

Bon mis à part ça, je pense (mais je suis pas un gourou) que tu dois de toutes façon spécifier une width quelque part, si tu veux obtenir deux blocs de largeur différente. Et là avec 2 colonnes ça va encore, mais si tu souhaites en gérer 10, ça va devenir très lourd, et tu ferais mieux d'utiliser une table.

Désolé mais je peux pas te dire mieux

Salut,

Je me dois de te rappeler ce point : http://forum.alsacreations.com/help.php#regle16

Nous essayons ici d'avoir une méthode d'apprentissage plutôt que de fast-food où on livre les réponses toutes faites.
Le but est que les membres viennent ici pour échanger des points de vue, apprendre des techniques et découvrent des méthodes de travail qui peuvent leur servir par la suite.
En livrant des réponses ou des codes tout faits, le demandeur n'a rien appris. Pire, il risque de ne pas pouvoir adapter le code à des besoins différents, etc.

Un proverbe dit : "Si un collègue a faim, tu peux lui offrir un poisson; mais tu peux aussi lui apprendre à pêcher ainsi il ne sera plus dépendant"

As tu pensé à faire un tour dans les modèles de mises en page en CSS et la galerie de menus en CSS, qui sont susceptibles de correspondre à une majorité cas possibles.

Mikachu ->
Je ne demande pas de réaliser un travail ou quoi que ce soit. Je demande si il y'a une solution à mon problème et si il y'a, de donner des pistes pour arriver à résoudre le problème. Je demande si c'est possible, si certains ont rencontré ce problème.
Ou ai-je fait une erreur, je ne comprends pas.

Lideln ->

a écrit :

Déjà les tables servent à représenter des données, pourquoi veux tu les remplacer par des divs lorsqu'elles sont enfin utiles ?

Justement ce ne sont pas des données non ?
Voilà mon code :

<div id="menu">

<!-- Menu 1 //-->
<div id="menu1">
<ul>
        <li><a href="#"><span>menu 1</span></a></li>
        <li><a href="#"><span>menu 2</span></a></li>
</ul>
</div>

Cette partie est differente du menu 1 graphiquement
<!-- Menu 2 //-->
<div id="menu2">
<ul>
        <li><a href="#"><span>accueil</span></a></li>
        <li><a href="#"><span>ajouter aux favoris</span></a></li>
</ul>
</div>

</div>

J'ai essayé avec un float: left; mais le menu 2 j'aimerais qu'il a un width à 100% mais si je mets un with à 100% pour le div du menu2 il occupe alors toute la largeur de l'écran.

Merci
Modifié par alien7 (05 Nov 2007 - 16:11)

Alors si ce n'est pas pour représenter des données, dans ce cas il s'agit de mise en page, et Mikachu t'a donné de bons indices pour continuer

Si tu as 2 divs et que tu veux que le 2nd prenne la place restante, si je ne m'abuse un width:auto devrait faire l'affaire (si tu mets 100% en effet il prend toute la place disponible dans le conteneur)

bonjour

la piste du float est la bonne , seule les li que tu veut dimensionner doivent etre flottant et mis en avant dans le flux .
<edit> l'autre occuperas alors l'espace restant , le width:auto est la valeur par defaut </>

Un min-width sur ul ou le div conteneur éventuellement pour éviter un retour de ligne intempestif.

GC
Modifié par gcyrillus (05 Nov 2007 - 15:35)

Sauf que min-width ne marche pas sur IE, si ?
Ptet que je confonds...

Oui le width: auto ne marche pas j'avais déjà essayé. Pour l'instant ce que j'ai fait est du bricolage, mais je trouve que c'est pas propre, de plu sje suis obligé de tricher avec IE.

#menu2 {position: absolute; right: 0; padding: 5px 30px 0 0;
}

gcyrillus ->
Pourquoi les li ? Je ne comprends pas, je dois plutot manipuler les 2 div non (menu1 et menu2) ?
Modifié par alien7 (05 Nov 2007 - 16:12)

oui en effet , je me suis attaché au li ..

Ceci dit 2 élément cote a cote avec 1 en largeur déterminé et l'autre prenant tout le reste , se résout en generale en plaçant l'un des 2 en flottant.

grossomodo :

#menu1  {float:left;width:200px;}
#menu2 {padding-left:200px;}
#menu div {border:1px solid}
ul {list-style-type:none;}
a {padding-left:1em}

Ensuite , pour les fonds , la technique des colonnes factices est interessante.

Sans layout ou overflow, le second menu s'affiche aussi sous le menu1.

Pour le min-width , seul IE6 ne comprends pas , et a l'aide d'un commentaire conditionnel on lui sert un js :
http://forum.alsacreations.com/faq/faq-81-Min-width-max-width-min-height-et-max-height-sur-Internet-Explorer.html


gc