28172 sujets

CSS et mise en forme, CSS3

Menu à coins arrondis

Bonjour,

J'aimerais savoir comment obtenir un beau menu à coins arrondis.

Le plus proche que j'ai pu obtenir est ceci :

<html>
 <head>
  <title>Test de chiasse</title></head>
  <style>
* {
	padding: 0;
	margin: 0;
}

body {
	padding: 10px;
	background-color: #EEE;
}

h2 {
	padding: 10px;
}

ul {
	background-color: #FFF;
	border: thin solid #000;
	-moz-border-radius: 10px;
}

ul li h2 {
	padding: 10px;
	font-size: 17px;
	font-weight: 100;
}

ul li {
	text-align: left;
	list-style: none;
}

ul li ul {
	border: 1px solid #000;
	padding-left: -10px;
	background-color: #FFF;
	border: 0px;
}

ul li ul li {
	border-top: thin solid #000;
	padding: 10px;
	font-size: 17px;
	font-weight: bold;
}
  </style>
 </head>

 <body>
  <div id="menu">
   <ul>
    <li>
     <ul>
      <li>
       <a href="">Menu 1</a>
      </li>
      <li>
       <a href="">Menu 2</a>
      </li>
     </ul>
    </li>
   </ul>
  </div>
 </body>
</html>


Mais malheureusement, il y a un trait bien laid en haut du menu...

Sachant que mes <li> sont générés automatiquement, je ne peux différencier le 1er ou le dernier <li> avec un class="noborder" par exemple pour ne pas afficher le border-top Smiley cligne

Il y a forcément une solution qui existe, non ?

Une idée ?
Bonjour,

Bon ben on va pas travailler comme ça parce que c'est un peu... pas terrible, on va dire pour être gentil.

On utilisera donc:
- une page avec un Doctype en bonne et due forme, histoire de ne pas s'arracher les cheveux pour rien;
- autre chose que des listes imbriquées (sauf si le contenu le nécessite, mais pas d'imbrication de listes pour faire de la mise en forme);
- l'une ou l'autre des diverses méthodes existantes, ça va dépendre de ton design à vrai dire.

Donc, pour rebondir sur ce dernier point: quel est le design visé?

PS: les coins arrondis c'est has been. Smiley ravi
A part le fait que je n'ai pas précisé le doctype, je ne vois pas en quoi ma manière de travailler n'est pas terrible ?

1. Je n'ai pas précisé le doctype par souci de clarté dans le code et pour se concentrer sur le CSS. Mais s'il fallait en choisir un, je dirais du html 4.01 transitionnel...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

2. comme je l'ai dit, l'imbrication des listes n'est pas de mon ressort, je n'ai pas le choix, c'est ma fonction php qui génère ce code.
3. le design recherché ? bah un menu a coins arrondis, mais sans trait horizontal qui vient tout gâcher...

ps: les coins arrondis sont peut etre "has been", mais moi je les trouve jolis ! Smiley cligne
Sujet clos
Aller à