@anonyme : C'est pas une solution ça.


Merci Victor mais j'ai finalement fais autrement (ta solution ne me plaisait pas non plus). J'ai utilisé les portes-coulissantes pour arrivée à mes fins :).

en cherchant sur le net, j'ai vu que quelqu'un a resolu ton probleme en supprimant les retours charriot entre les balises li

Bravo, le code est simplifié. Mais reste à supprimer cet espace entre les balises [color=darkred][i]li[/i][/color].
Je m'attaque à ça ce soir :), mais merci déjà pour l'amélioration. On est sur la bonne piste :).

Essayons ceci :
Code XHTML
[code]<div id="le-div">
<ul>
<li>Menu 1 - </li>
<li>Menu 2 - </li>
<li>Menu 3</li>
</ul>
</div>[/code]
CSS principal
[code]#le-div {
color: black;
background: blue;
}
#le-div ul {
color: black;
background: orange;
/* ou #FFA500 si tu ne codes pas en CSS 2.1 */
list-style: none;
padding: 0 0.25em 0 0;
margin: 0 0 0 0.25em;
}
#le-div li {
color: black;
background: white;
display: inline;
padding: 0;
margin: 0;
}[/code]
Pour les angles arrondis, il faut savoir si tes deux blocs sont étirables en largeur, en hauteur, les deux à fois ou pas du tout. En fonction de cela, plusieurs solutions se présentent, que je ne détaillerai pas ici, aucune n'étant idéale. Bref, vivement le jour où la propriété CSS 3 border-radius commencera à être implémentée ! :roll: À moins que tu ne veuilles ne pas contenter le validateur CSS du W3C en recourant à -moz-border-radius, -khtml-border-radius et à -webkit-border-radius (histoire de satisfaire les utilisateurs de Firefox, de Safari et de tous les navigateurs utilisant Gecko, KHTML ou WebKit comme moteur de rendu).

Merci, mais je savais déjà tout ça :) (même les liens en plus, ils sont dans mes marques-pages, bon élève hein ;-)).

Ce que je cherche à avoir comme comportement, et que je n'ai pas avec ton code (tu le remarqueras), c'est pouvoir gérer 2 marges à gauche et à droite de ma liste. On les a bien avec mon code ou le tien, mais le mien gère 2 fonds différents, représenter par les couleurs.
Avec mon code : la marge gauche est bleue, et la droite est orangée. Avec ton code, les deux sont bleues, [i]i.e.[/i] le fond de [color=darkred][i]ul[/i][/color] n'apparaît pas.
Et je cherche même à faire sans commentaire conditionnel, mais bon, là je commence à douter que ce soit faisable pour la suite. Mais on oublie ça pour l'instant.

Comprends-tu le problème actuel ?

Un petit schéma explicatif :
[code] 1 +---------------------------+ <------- DIV
2 | +--------------------+ <------- UL
3 | | __ __ __ ||
4 | | |LI| |LI| |LI| ||
5 | A | -- -- -- A ||
6 | | +-----------------|--+|
7 +--|--------------------|---+
8 | |
9 | |
10 (1) (2)
11
12 (1) : la marge gauche de DIV, a le fond bleu
13 (2) : le fond de UL est orange
14 et le fond des LIs est blanc, donc on voit apparaître la marge droite de UL (en orange).
15
16 on peut alors mettre une image à gauche, une image à droite,
17 et une image au centre.
18
19 Le but est de faire un menu avec les bords gauche et droit arrondis,
20 sans utiliser de classes /first/ ou /last/.
[/code]

[quote="HyWaN"]Le code qui nous intéresse dans l'immédiat[/quote]
Soit dit en passant, le code HTML tel quel peut être simplifié, comme suit.
[code]<ul id="menu">
<li>Weblog</li>
<li>Galerie</li>
<li>À propos</li>
</ul>[/code]
Dans ce cas, ta feuille de style ressemblera à ça :
[code]#menu {
margin: 0;
padding: 0 1em 0 0;
list-style: none;
background: #ba802a;
}
#menu li {
display: inline;
border: 1px solid black;
padding: 0;
margin: 0;
background: white;
}[/code]
Avec display: inline, tu ne peux pas utiliser de marges et la bordure "collera" donc au texte en même temps qu'aux autres bordures.

Pour avoir quelque chose de plus joli :
[code]#menu {
margin: 0;
padding: 0 1em 0 0;
list-style: none;
background: #ba802a;
}
#menu li {
float: left;
border: 1px solid black;
padding: 0.3em 1em;
margin: 0 0.3em;
background: white;
}[/code]
Et si tu utilises des liens, tu pourras appliquer la propriété display: block à #menu a, de façon à bien styler les liens.

Si ton div initial doit être rempli :
[code]<div id="menu">
<ul>
<li>Weblog</li>
<li>Galerie</li>
<li>À propos</li>
</ul>
<h2>Titre</h2>
<p>Lorem ipsum dolor sit amet...</p>
</div>[/code]
[code]#menu {
overflow: hidden;
padding-left: 1em;
border: 1px solid black;
background: #2f80ba;
}
#menu ul {
margin: 0;
padding: 0 1em 0 0;
list-style: none;
background: #ba802a;
}
#menu li {
float: left;
border: 1px solid black;
padding: 0.3em 1em;
margin: 0 0.3em;
background: white;
}
#menu h2 {
clear: left;
}[/code]
Et pour IE 6 et versions antérieures, une feuille de style distincte, appelée après la feuille de style principale au moyen d'un [url=http://www.blog-and-blues.org/articles/Les_syntaxes_de_commentaires_conditionnels_pour_IE_Windows]commentaire conditionnel[/url] (c'est mieux que les hacks et ça ne pollue pas une feuille de style conçue avant tout pour les navigateurs respectueux des standards et pour IE quand il joue le jeu) :
[code]#menu {
/* On donne du "layout" pour corriger le bug qui empêche l'étirement du div */
height: 1%;
}[/code]
Et dans l'élément head on aura :
[code]<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<!--[if lte IE 6]>
<link href="style-ie6.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->[/code]
Quelques lectures sur les [url=http://www.blog-and-blues.org/articles/Float%2C_clear_et_contextes_de_formatage]contextes de formatage[/url] et le [url=http://www.test.blog-and-blues.org/haslayout/trad_temp.html]concept de hasLayout sous IE[/url].

Bonsoir,

je m'amuse à faire un bon script en CSS (quelle intro' merdique :(). Je m'explique.
Pour des mises en page un brin compliqué, on est forcément obligé de faire des hacks IE en CSS à tout bout de champs. Ou alors, on ajoute des div et des span dans tous les sens. Mon but ici, est d'aller au plus simple possible. Ça demande pas mal d'études des bugs des différents navigateurs, et surtout de trouver des alternatives simples. Comme par exemple utiliser [color=darkred][i]display: inline-block[/i][/color] à la place d'[color=darkred][i]overflow: auto/hidden[/i][/color] pour IE dans certains cas (car la compréhension de cette attribut est partielle pour IE, oui partielle, mais allé en savoir plus ;-)).
Bref, je me passe le temps avant les fêtes ;-) (les examens sont finis, je me vide la tête un peu).

Mais voilà que j'ai un problème très étrange.
Pour afficher une liste horizontalement, rien ne vaut un [color=darkred][i]display: inline[/i][/color] (oui [color=darkred][i]float: left[/i] et [i]right[/i][/color] pose des problèmes sous IE, je rappelle que l'on va au plus simple). Malheureusement, [color=darkred][i]display: inline[/i][/color] sur [color=darkred][i]ul li[/i][/color] m'affiche un espace entre les éléments de la liste ([i]items[/i]). Je peux contrer ce défaut avec une marge négative mais le résultat n'est pas le même sur Safari, Opera, Firefox et IE (qui lui n'affiche pas d'espaces, un comble).
Un exemple du code se trouve ici : http://hoa-project.net/AndroidBay/ ; où Index.html est la page de test, et Css/Layout.css la feuille de style qui nous intéresse. On notera l'utilisation de Css/Reset.css un sample CSS du W3C modifié qui fait office de Reset.
Le code qui nous intéresse dans l'immédiat :
[code]div#menu {
overflow: hidden; /* for div#menu ul li display */
float: right;
padding: 0 0 0 1em;
border:1px #000 solid;
background: #2f80ba;
}

div#menu ul {
margin: 0;
padding: 0 1em 0 0;
list-style-type: none;
background: #ba802a;
}

div#menu ul li {
display: inline;
border: 1px #000 solid;
padding:.3em 1em;
background: #fff;
}[/code]
[code]<div id="menu">
<ul>
<li>Weblog</li>
<li>Galerie</li>
<li>À propos</li>
</ul>
</div>[/code]

Merci :).