28172 sujets

CSS et mise en forme, CSS3

Menu contextuel assez complexe

Bonjour,

Déjà je tiens à préciser que le "assez complexe" dans le titre du topic est pour moi, vu mon niveau au CSS au ras des pâquerettes lol.
Donc en faite, je vous explique le topo, je suis en train de profiter de mes vacances pour m'exercer au css xhtml et là je voudrais faire un menu avec onglets assez dur pour moi donc j'ai fait un schéma avec fireworks animé pour faire voir ce que je voudrais.
Déjà ma première question toute bête, est de savoir si c'est possible de le réaliser en CSS ??
Ensuite si quelqu'un aurait l'aimabilité de pouvoir m'aider a le faire.
C'est un petit delire pour moi car j'arrive à le faire en flash mais je voudrais devenir meilleur en css.
Un grand merci a vous !
PS :
Voici le menu :
http://images1.hiboox.com/images/4308/b2b95969f4b321c3d5f1bdc3566255b7.gif

Bonne soirée à vous tous les gens !
Bonjour,

L'effet que tu montres doit pouvoir être réalisé au survol des onglets, ou bien lorsqu'on clique sur un onglet (avec donc chargement d'une nouvelle page)?

Dans le premier cas, tu peux éventuellement utiliser la pseudo-classe :hover en CSS pour réaliser cet effet. Bien que pour qu'il soit compatible avec tous les navigateurs (dont IE6) -- et tant qu'à faire accessible au clavier -- mieux vaut utiliser JavaScript également. Là, ça commence à devenir quelque peu compliqué. Smiley cligne

Ceci dit, je me garderais bien de réaliser ce genre de menu avec un effet au survol. Ce serait un désastre ergonomique. (Allez sur lemonde.fr, et choisissez «Références > Dossier» dans leur menu de navigation. Vous avez au moins une chance sur deux de ne pas y arriver du premier coup, et 100% de chances de vous planter si vous ne prêtez pas attention au fonctionnement du menu.)
Ok ok donc si j'enlève la barre en bas pour éviter le désastre ergonomique mais si je veux faire des onglets de différentes couleurs.. Comment je peux faire ? pour le hover différent sur chaque page??
MErci a tous en tout cas Smiley cligne
bisous bisous les gens
thomas91 a écrit :
Ok ok donc si j'enlève la barre en bas pour éviter le désastre ergonomique

Tu n'es pas obligé de l'enlever. Tu peux juste afficher le contenu de deuxième ligne qui va bien en fonction de la page ou rubrique en cours. Faire un menu de second niveau, quoi, tout simplement. Smiley smile

thomas91 a écrit :
mais si je veux faire des onglets de différentes couleurs..

Tu utilises des classes différentes pour les différents liens (ou éléments LI si tu structures ton menu en liste non ordonnée, par exemple)?

thomas91 a écrit :
pour le hover différent sur chaque page??

Un hover différent pour chaque page ou pour chaque lien? C'est pas pareil...
Rebonjour tout le monde !

Donc voila j'essaie de progresser en css là je teste le menu tout simple avec un soulèvement pour suivre un tutoriel mais j'ai un probleme au niveau du css puisque mon menu ne se lève pas, pourtant j'ai bien mis le background position en bottom.
Je n'arrive pas à trouver mon erreur donc je fais appel à vous, j'ai voulu suivre ce tutoriel :

voici le code :
http://www.crea-web.fr/xhtml_css/menu_horizontal_onglets_images.html

css : 

@charset "utf-8";
/* CSS Document */

body{
	font-family: tahoma;
	font-size:12px;
	line-height:17px;
}
.ul{
	float: left;
	margin-left: 1px
	list-style:none;
}
.ul li{
	display: block;
	width:143px;
	height:26px;
	background:url(img/bg_bleu.png) no-repeat top center;
	line-height:26px;
	font-family:comic sans ms;
	color:#CC3399;
	text-decoration:none;
	text-align:center;
	font-size: 11px;
	font-weight: bold
}
.ul li a:hover {
	background-position: bottom;
	line-height:20px;
}


HTML : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bonjour à tous ! </title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<ul class="ul">
  <li><a href="text.php">Menu 1</a></li>
</ul>
<ul class="ul">
  <li><a href="menu2.php">Menu 2</a></li>
</ul>
<ul class="ul">
  <li><a href="menu3.php">Menu 3</a></li>
</ul>
<ul class="ul">
  <li><a href="menu4.php">Menu 4</a></li>
</ul>
</body>
</html>


Merci encore a vous a bientôt !
++
Modifié par thomas91 (27 Oct 2008 - 16:24)
thomas91 a écrit :
je teste le menu tout simple avec un soulèvement

Heu... on ne parlera pas de «soulèvement», mais éventuellement d'effet au survol, ou encore de rollover.

thomas91 a écrit :
Je n'arrive pas à trouver mon erreur

Quel est l'élément sur lequel tu affiches l'image de fond (état normal)?
Quel est l'élément dont tu modifies la position de l'image de fond lors du survol?
S'il ne s'agit pas du même élément, le problème est là.
Alors en faite j'affiche l'élément de fond sur ma liste et tout ça marche.
Et c'est toujours ce même élément qui doit bouger pour faire un effet de survol..
Mais cette étape ne fonctionne pas et impossible à comprendre pourquoi Smiley decu
J'ai bien mon élément de background, mais pas cet effet de roll over..
MErci à toi en tout cas Smiley smile
++
thomas91 a écrit :
Alors en faite j'affiche l'élément de fond sur ma liste

Non, tu l'affiche sur les items de liste (éléments LI), pas sur la liste (UL).

Par ailleurs, je n'avais pas vu mais ton code HTML est faux. Au lieu d'avoir une liste de quatre éléments, tu as quatre listes d'un élément. Une révision (ou un apprentissage...) de HTML serait peut-être à l'ordre du jour?

thomas91 a écrit :
Et c'est toujours ce même élément qui doit bouger pour faire un effet de survol..

Ce n'est pas l'élément qui doit bouger mais son image de fond.

thomas91 a écrit :
Mais cette étape ne fonctionne pas et impossible à comprendre pourquoi Smiley decu

L'image de fond est sur les LI. Tu ne t'occupes pas des styles au survol des éléments LI de ton menu, si j'en crois ton code CSS.

J'ai l'impression que tu fais un peu (voire carrément Smiley cligne ) du copier-coller sans comprendre ce que tu copies. Me trompè-je?
*Lent, lent, lent... Smiley sweatdrop

Bonsoir thomas91,

Ta lecture du tutoriel a été semble t-il un peu rapide ou pas assez studieuse...

Lorsque Florent te pose ces questions :
a écrit :

Quel est l'élément sur lequel tu affiches l'image de fond (état normal)?
Quel est l'élément dont tu modifies la position de l'image de fond lors du survol?

Et te donne cette précision :
a écrit :
S'il ne s'agit pas du même élément, le problème est là.

Ce n'est sans doute pas anodin...

Voici ton code :
[b]ul li[/b]{
	display: block;
	width:143px;
	height:26px;
	background:url(img/bg_bleu.png) no-repeat top center;
	line-height:26px;
	font-family:comic sans ms;
	color:#CC3399;
	text-decoration:none;
	text-align:center;
	font-size: 11px;
	font-weight: bold
}
[b].ul li a:hover [/b]{
	background-position: bottom;
	line-height:20px;
}

Tu ne cibles visiblement pas les mêmes éléments...
Et on ne parles pas des autres erreurs...

Le mieux serait peut-être de reprendre du début. Un petit tour sur cet article : Comment débuter et trouver l'information, ainsi que dans les Tutoriels et dans la FAQ devrait déjà bien t'informer sur les standards du web et la manière de faire un site conforme.

L'idéal lorsque l'on tente de suivre un tutoriel, le plus logique à mon sens lorsque l'on ne maitrise pas totalement le sujet, c'est de suivre rigoureusement ce tutoriel, et de tenter de comprendre comment cela fonctionne, en faisant des tests, des modifications, et se documentant sur les notions "obscures"...

Voici le code du tutoriel, modifies l'adresse des images uniquement ou copie provisoirement celles du site en question , testes le résultat dans ton navigateur...

<ul>
	<li><a href="#">Onglet 1</a></li>
	<li><a href="#">Onglet 2</a></li>
	<li><a href="#">Onglet 3</a></li>
	<li><a href="#">Onglet 4</a></li>
</ul>

ul {
	padding: 0;
	margin: 10px 0 0 0;
	list-style: none
}

ul li {
	float: left;
	margin-left: 1px
}

ul li a {
	float: left;
	display: block;
	height: 41px;
	text-align: center;
	background: url('http://www.crea-web.fr/images/onglet.gif') repeat-x top;
	color: #fff;
	font-size: 11px;
	padding: 5px 20px 0 20px;
	font-weight: bold
}

ul li a:hover {
	background-position: bottom
}


Compare ensuite avec ce que tu as écris, et tu y verras beaucoup plus clair Smiley cligne

Bon courage,
Cordialement,
Sylvain
Modifié par 6l20 (27 Oct 2008 - 19:10)
Sujet clos
Aller à