28172 sujets

CSS et mise en forme, CSS3

Css3 : avis sur un menu

Salutations,

Au cours de la mise à jour de mes maigres connaissances techniques j'ai entrepris de travailler sur les sélecteurs css que je n'utilisai jamais, préférant un id ou une classe.

Si il est très facilement possible de sélectionner l'élément suivant via css, est-il également possible de sélectionner l'élément précédent ?
Je n'ai pas trouvé ce sélecteur.

En continuant de chercher, je me suis faite une raison car j'ai bien l'impression que cela n'est pas possible. Je me suis donc rabattue sur une autre solution consistant à inclure 2 balises flottantes span pour encadrer le contenu à mettre en forme.

Que pensez-vous de ce menu (.css3) ?


<ul id="navigation">
	<li><a href="#"><span>&nbsp;</span>Menu 1<span>&nbsp;</span></a></li>
	<li><a href="#"><span>&nbsp;</span>Menu 2<span>&nbsp;</span></a></li>
	<li><a href="#"><span>&nbsp;</span>Menu 3<span>&nbsp;</span></a></li>
	<li><a href="#"><span>&nbsp;</span>Menu 4<span>&nbsp;</span></a></li>
	<li><a href="#"><span>&nbsp;</span>Menu 5<span>&nbsp;</span></a></li>
	<li><a href="#"><span>&nbsp;</span>Menu 6<span>&nbsp;</span></a></li>	
</ul>



html, body
{
	font-family: "Trebuchet MS",Verdana,"Lucida Grande",Tahoma,Helvetica,Sans-Serif;
}
ul
{
	margin: 0; padding: 0 0 0 20px;
	list-style-type: none;
	height: 40px;
	background: #333;
	position: relative;
}
ul li
{
	float: left;
	height: 40px;
}
ul li a
{
	text-decoration: none;
}

ul#navigation li ul
{
	position: absolute;
	left: 0;
	top: 40px;
	min-width: 100%;
	display: none;
}

ul#navigation li a
{
	display: block;
	font-weight: bold;
	padding: 0;
	height: 20px;
	line-height: 40px;
	color: #FFF;
}
ul#navigation li a span
{
	display: block;
	margin: 0; padding: 0; 
	height: 40px;
	width: 10px;
}
ul#navigation li a span:first-child
{
	float: left;
	margin-right: 10px;
}
ul#navigation li a span:last-child
{
	float: right;
	margin-left: 10px;
}

ul#navigation li:hover
{
	background-color: #ae73e5;
}
ul#navigation li:hover a
{
	background-color: #904fd8;
}
ul#navigation li:hover a span:first-child
{
	background-color: #333;
	-moz-border-radius: 0 0 10px 0;
	-webkit-border-bottom-right-radius: 10px;
}
ul#navigation li:hover a span:last-child
{
	background-color: #333;
	-moz-border-radius: 0 0 0 10px;
	-webkit-border-bottom-left-radius: 10px;
}


_Edit_
- modification du titre : ancien titre - Sélecteur css : élément précédent
- ajout code & question sur test de navigation
- ajout des déclarations border-radius pour webkit
Modifié par maosalia (25 Jan 2010 - 11:37)
Re',

effectivement même les sélecteurs CSS3 ne permettent pas de cibler un élément parent.

Pour ce qui est de ton menu, et ça n'engage que moi Smiley cligne , j'aurais tout simplement utilisé une image de fond ce qui aurait rendu ton menu utilisable dans tous les navigateurs et aurait évité de rajouter tous ces éléments SPAN de pure mise en forme.

Dit autrement je pense que le CSS 3 ne devrait être utilisé que pour permettre de se simplifier la vie tout en permettant un rendu "un peu plus zoli" que dans les autres navigateurs...
Modifié par Heyoan (25 Jan 2010 - 13:04)
J'avoue que je joue un peu avec css3 actuellement,
surtout pour l'apprendre et être ainsi prête quand il sera la norme.

C'est aussi pour éviter d'apprendre des bêtises que je recherche en ce moment fréquemment l'avis de la communauté (je vais devoir demander aux administrateurs de me restreindre en nombre de questions / jour partie comme je le suis ^^)

Mais il est vrai que dans ce cas une image serait surement indiquée tout en simplifiant & les choses & la compatibilité.
Hello,

Plutôt sympa. Ma version, sans SPAN en plus:
<!doctype html>
<html lang="fr">
<head>
  <title>Houbibi?</title>
  <style>
  body {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  }
  #navigation {
    display: table;
    margin: 0 auto;
    padding: 0 15px;
    list-style: none;
    background: #333;
  }
  #navigation > li {
    float: left;
    position: relative;
  }
  #navigation > li > a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
    color: white;
  }
  #navigation > li > a:before,
  #navigation > li > a:after {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10px;
    background: #333;
  }
  #navigation > li > a:before {
    content: "";
    left: 0;
    -moz-border-radius: 0 0 10px 0;
    -webkit-border-radius: 0 0 10px 0;
    -o-border-radius: 0 0 10px 0;
    border-radius: 0 0 10px 0;
  }
  #navigation > li > a:after {
    content: "";
    right: 0;
    -moz-border-radius: 0 0 0 10px;
    -webkit-border-radius: 0 0 0 10px;
    -o-border-radius: 0 0 0 10px;
    border-radius: 0 0 0 10px;
  }
  #navigation > li > a:hover {
    background: #AE73E5;
    background: -moz-linear-gradient(center bottom, #AE73E5 50%, #904FD8 50%);
    background:  -webkit-gradient(linear, left top, left bottom,
      color-stop(0.50, #904FD8), color-stop(0.50, #AE73E5));
  }
  </style>
</head>
<body>
<ul id="navigation">
    <li><a href="#">Menu Houba</a></li>
    <li><a href="#">Menu Houbi</a></li>
    <li><a href="#">Menu Houba</a></li>
    <li><a href="#">Menu Hop</a></li>
</ul>
</body>
</html>


Testé dans Firefox 3.6 (ok), Safari 4.0 (manque l'arrondi sur les éléments générés).
Modifié par Florent V. (26 Jan 2010 - 12:11)
Le truc pas drôle c'est que dans Firefox 3.6 et Safari 4.0, je peux positionner en absolu un :before, mais absolument pas un :after. Smiley ohwell
Ah ouais, sympa Smiley smile

Florent V. a écrit :
Le truc pas drôle c'est que dans Firefox 3.6 et Safari 4.0, je peux positionner en absolu un :before, mais absolument pas un :after. Smiley ohwell

Ben pourquoi pas? Exemple simple:
<!doctype html>
<meta charset="utf-8">
<title>Example</title>
<style>
  p {
    position:relative;
    width:300px;
    margin:0 auto;
    background:#ffff00;
    text-align:center;
  }
  p:before, p:after {
    content:"";
    position:absolute;
    width:10px;
    height:10px;
    background:red;
  }
  p:after {
    right:0;
  }
  /* For stupid FF */
  p:before {
    left:0;
  }
</style>
<p>Hello world!

Modifié par Benjamin D.C. (26 Jan 2010 - 09:48)
Ah ben ça marche. Je devais avoir un sélecteur CSS foireux dans mon code sans m'en être aperçu, ou un truc du genre.
Du coup j'ai mis mon exemple à jour pour:
- effet de survol sur le lien plutôt que sur le LI;
- utilisation de :before et :after du lien;
- couleur par défaut pour le survol du lien (dégradation gracieuse et tout).
Ça en deviendrait presque utilisable en production. Smiley lol
Je note une petite erreur ceci dit dans les déclarations de border-radius.

Pour webkit il faudrait écrire :
-webkit-border-bottom-right-radius: 10px;

au lieu de 
-webkit-border-radius: 0 0 10px 0;


Pour Opera, les arrondis & dégradé n'apparaissent pas.
Pourtant sur le site d'Opera ils signalent que ceci devrait être opérationnel depuis la 10.5,
et je dispose de la 10.10 d'installé.

A moins que je n'ai pas compris quelque chose ^^

edit : bon 10.5 et pas 10.05 ^^ normal en ce cas que cela ne fonctionne pas pour l'instant avec Opera, je n'ai rien dit.
Modifié par maosalia (26 Jan 2010 - 15:03)
maosalia a écrit :
Pour webkit il faudrait écrire :
-webkit-border-bottom-right-radius: 10px;

au lieu de 
-webkit-border-radius: 0 0 10px 0;

Ah ouais. Ou bien -webkit-border-radius: 0 0 0 0 10px 10px 0 0; je crois.
Un peu de lecture: http://www.css3.info/border-radius-apple-vs-mozilla/
(Le dernier paragraphe contient une erreur ou n'est plus d'actualité, je crois.)

maosalia a écrit :
Pourtant sur le site d'Opera ils signalent que ceci devrait être opérationnel depuis la 10.5, et je dispose de la 10.10 d'installé.

Bah en fait la 10.5 (pré-alpha Smiley cligne ) est une 10.50. Il y a eu des version 10.0, 10.01, 10.02, 10.10, et là ils préparent la 10.5, qui n'est pas une 10.05. Oué, ils sont un peu fêlés chez Opera, mais on a vu pire (Chrome...).
Sujet clos
Aller à