28220 sujets

CSS et mise en forme, CSS3

[résolu]Insertion d'un span dans une liste...

Bonjour,
Je cherche à inserer un code dans se genre trouver sur le net !
Le menu fonctionne très bien !
J'ai donc définis une class "chtouke" pour mon effet mes dans la listes avec déjà un premier changement d'images cette class ne fonctionne pas, le menu seul fonctionne http://creatif-web.be/port_folio/formation.php
pour la feuille de style :

/**************************************************__________________MENU  */
ul#menu
{
	position:absolute;
	top:374px;
	margin: 0;
	padding: 0;
	list-style-type: none;
	left: 20px;
	z-index:1
	
/* Suppression du margin, du padding et des puces du <ul> */
}
ul#menu li
{
	margin: 0 0 5px 0 ;
	padding: 0 ;
/* Suppression du padding du <li> et on définit une marge basse de 5px pour aérer le tout */
}

ul#menu li a
{
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 120px ;
	line-height: 28px ;
	color: #000 ;
	text-indent: 40px ; /* On décale le texte de 40px du bord gauche */
	text-decoration: none ;
	background: url(/port_folio/bouton2.gif) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
	border: 0;
}

ul#menu li a:hover
{
	background: url(/port_folio/bouton2.gif) no-repeat 0 -27px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
	border: 0 ;
	color:#999;
}
.couleur{                  /* ne fonctionne pas ???????????????????*/
color:#fff;
text-shadow:#00FF66;
}
/**************************************************__________________FIN_MENU____________________  */
/*__________________________________début de l'effet avec un span dans le menu_________________________*/
.chtouke{
	text-align:center;
	position: absolute;
	z-index: 100;
	line-height:22px;
	font-size: 100%;
	left: 295px;
	top: 237px;
	height: 24px;
	width: 67px;
	}
.chtouke a:link{
    color:#000;
    text-decoration:none;
}
.chtouke a:visited{
	text-decoration:none;
	padding: 2px 0px 2px 0px;
	color: #000;
}
.chtouke a:hover{
		margin-left:-6px;
	border: 1px inset #33ccff;
	color:#000;
	padding: 2px 10px 4px 15px;
	background-color:#33ccff;
	text-decoration:none;
}
a span { 
display: none;
}
a:hover span { 
display: inline;
position: absolute;
margin-top: -80px; 
margin-left: -60px;
width: 100px;
height: 90px;
text-align: center;
line-height:16px;
color:#000;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif,
}




<ul id="menu" class="chtouke">
	<li><a href="index.php">Acceuil</a></li>	
	<li><a href="ambition.php">Ambition</a></li>
	<li class="couleur"><a href="#">formation</a></li>	
	<li><a href="image.php">Images</a></li>
	<li><a href="illustration.php">Illustration</a></li>
	<li><a href="#" title="page d'accueil" target="_self">
accueil<span><br />Je retourne à mes crayons</span></a></li>
	<li><a href="#">#___#</a></li>	
	<li><a href="#">#___#</a></li>
</ul>

Merci d'avance de vos suggestion !
Modifié par derniersite (29 Dec 2005 - 23:11)
Bonsoir,

chtouke... Ahem.

C'est supposé faire quoi, plus précisément ? Positionner le menu ? Faire apparaître le span au survol ? A quel endroit ?

Smiley cligne
Ah, alors, dans ce cas, tu peux par exemple :
- appliquer une position relative au lien a
- supprimer les marges négatives du span
- fixer l'emplacement où il doit apparaître par rapport au lien à l'aide de top, left, right...
- lui mettre une couleur de background, histoire qu'on le voit un peu.

Et supprimer les propriétés du :hover qui font gigoter les liens au survol (padding supplémentaires, etc) Smiley cligne
En fait le la propriété, display:none ne fonctionne pas !

J'ai donc changé
a span { 
display: none;
}
a:hover span { 
display: inline;
position: relative;
background:#000;
top: 80px; 
left: 200px;
width: 100px;
height: 90px;
text-align: center;
line-height:16px;
color:#000;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif,
}


le code xhtml
<ul id="menu" class="chtouke">
	<li><a href="index.php">Acceuil</a></li>	
	<li><a href="ambition.php">Ambition</a></li>
	<li class="couleur"><a href="#">formation</a></li>	
	<li><a href="image.php">Images</a></li>
	<li><a href="illustration.php">Illustration</a></li>
	<li><a href="#" title="la chicote" target="_self">
chicote<span><br />Je retourne à mes crayons</span></a></li>
	<li><a href="#">#___#</a></li>	
	<li><a href="#">#___#</a></li>
</ul>

http://creatif-web.be/port_folio/formation.php
Modifié par derniersite (28 Dec 2005 - 20:00)
Bonjour derniersite. Smiley smile

Je vois que ce sujet est marqué résolu, ça serait bien que tu viennes porter la solution ici, ça pourrait en aider d'autres...

Merci.
En faite bizarrement j'en sais rien, j'ai mis de coté le problème puis en mettant du .js pour mon switch sa à résolu le bug aussi sec !
J'en demandais pas tant !
La class .chtouke ne sers à rien il suffit d'avoir le span pour avoir l'effet escompté, c'est tout !
Donc en gros il faut faire autre chose et quand on reviens c'est réparer, mdr
Modifié par derniersite (30 Dec 2005 - 19:44)
Sujet clos
Aller à