28173 sujets

CSS et mise en forme, CSS3

[Resolu ]Block et propriété text-decoration sous IE ... et alignement

Bonjour,

J'ai créé un menu avec des liens.
J'ai mis la propriete text-decoration sur underline quand on passe sur le lien mais il ne se passe rien quand on survole le lien. On dirait même que le texte contenu dans le bloc se transforme en image.

Ma css fonctionne quand il n'y a pas de bloc autour, est-ce normal?

Voici mon code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Document sans nom</title>
<style type="text/css">
div#bloc1{
	width:130px;
	height:35px;
	line-height:10px;
	text-transform:uppercase;
	font-size:0.6em;
	font-weight:bold;
	letter-spacing:-1px;
	margin-left:54px;
	background-color:#FF3300;
	}


.textmenuprod span{
	text-decoration:underline overline;
	color:#000000;
	}
			
.textmenuprod a{
	text-decoration:none;
	color:#00FF00;
	}
			
.textmenuprod a:hover{
	text-decoration:underline;
	}

</style>
</head>

<body>
<div id="menuproduit">
	<div id="bloc1" class="textmenuprod"><span>Nous &eacute;crire</span></div>
	<div id="bloc1" class="textmenuprod"><a href="#">Commerciaux</a></div>				
	<div id="bloc1" class="textmenuprod"><a href="#">Coordonn&eacute;es</a></div>
	<div id="bloc1" class="textmenuprod"><a href="#">Plan d'acc&egrave;s</a></div>
</div>
</body>
</html>


Pouvez-vous testez chez vous sous IE si ça fonctionne?

D'avance merci
Modifié par selinav (18 Jul 2007 - 14:50)
L'attribut id ne peut être utilisé qu'une seule fois. Là tu l'as 4 fois, ça risque de bugger grave. Aussi, sémantiquement t'as l'air d'avoir une liste, donc mieux utiliser :
<ul id="menuproduit">
  <li><a href="..">..</a></li>
  <li><a href="..">..</a></li>
  <li><a href="..">..</a></li>
</ul>


Et du coup pas besoin de 20 000 classes :
#menuproduit a:hover {
  text-decoration: underline;
}
Bonjour,

Pourquoi cumule tu la définition de style de l'identifiant et de la classe ?
EDIT : oui en plus un id est unique.
Modifié par Furious-Candy (18 Jul 2007 - 14:10)
merci, c'est vrai, je débute en css, faut pas que j'oublie qu'un seul id!!
J'ai une facheuse tendance à l'oublier.
bonjour,

Moi j'ai modifier un peu, et j'ai bien le soulignement lors du passage de la souris


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Document sans nom</title>

<style type="text/css">

div#menuproduit{

	width: 130px;
	
	line-height:10px;

	text-transform:uppercase;

	font-size:0.6em;

	font-weight:bold;

	letter-spacing:-1px;

	margin-left:54px;

	background-color:#FF3300;

	}





div#menuproduit span{

	text-decoration:underline overline;

	color:#000000;

	}

			

div#menuproduit a{

	text-decoration:none;

	color:#00FF00;

	}

			

div#menuproduit a:hover{

	text-decoration:underline;

	}



</style>

</head>



<body>

<div id="menuproduit">

	<p><span>Nous &eacute;crire</span></p>

	<p><a href="#">Commerciaux</a></p>				

	<p><a href="#">Coordonn&eacute;es</a></p>

	<p><a href="#">Plan d'acc&egrave;s</a></p>

</div>

</body>

</html>


ps: j'ai enleve les truc qui me sembler inutile Smiley sweatdrop
Halindel, j'ai essayé ton truc qui paraît effectivement beaucoup plus logique.

Ce qui est bizarre, c'est que ça ne fonctionne pas pour le dernier lien qui ne se souligne pas.
Et le premier lien, on a pas le overline.


Pour la version avec les listes, j'avais essayé au début, mais lorsque je mets une puce (une de mes images)devant ça déconne complètement au niveau de l'alignement.

Le truc qui est étrange aussi, c'est que mon code fonctionne quand je mets ça dans le html

<div id="menuproduit">
	<div id="bloc1" class="textmenuprod"><img class="epigauche" src="../images/css/epi_lambert.gif" /><a href="#">Mecanique <br />des pates</a></div>
	<div id="bloc1" class="textmenuprod"><img class="epigauche"src="../images/css/epi_hengel.gif" /><a href="#">Surgelation<br />fermentation</a></div>
		
	<div id="bloc1" class="textmenuprod"><img class="epigauche"src="../images/css/epi_tibiletti.gif" /><a href="#">cuisson</a></div>
</div>

comment ça se fait?
pour le dernier lien souligner et le 1er c'est parce que le bloc doit pas etre assez haut modifie la hauteur de celui ci en rajoutant un padding je pense.

Il fonctionne comme ca ? avec ton css ?
Modifié par Halindel (18 Jul 2007 - 14:32)
je comprends rien, normalement mon code devrait être plus propre ainsi mais ça fonctionne toujours pas sous IE


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Document sans nom</title>
<style type="text/css">
ul#menuproduit{
				width: 130px;
				line-height:10px;
				text-transform:uppercase;
				font-size:0.6em;
				font-weight:bold;
				letter-spacing:-1px;
				margin-left:54px;
			}
			


ul#menuproduit li{
				width:130px;
				height:35px;
				line-height:10px;
				text-transform:uppercase;
				font-size:1em;
				font-weight:bold;
				letter-spacing:-1px;
				margin-left:54px;
				background-color:#FF3300;
				list-style-type:none;
			}


			ul#menuproduit li span{
				text-decoration:underline overline;
				color:#000000;
				}
			
			ul#menuproduit li a{
				text-decoration:none;
				color:#00FF00;
			}
			
			ul#menuproduit li a:hover{
				text-decoration:underline;
			}
			
			.epigauche{
				float:left;
				margin-left:10px;
				margin-right:20px;
			}


</style>
</head>

<body>
<ul id="menuproduit">
	<li><span>Nous &eacute;crire</span></li>
	<li><a href="#">Commerciaux</a></li>				
	<li><a href="#">Coordonn&eacute;es</a></li>
	<li><a href="#">Plan d'acc&egrave;s</a></li>
</ul>
</body>
</html>


je ne comprends pas d'où vient mon erreur.
Eclairez ma lanterne, svp.
du coup maintenant j'ai un problème d'alignement sur la gauche, et j'ai pas de margin ni de padding, et mon bloc est quand meme decalé du conteneur


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Document sans nom</title>
<style type="text/css">
body{
	margin: 10px 0 ;
	padding: 0 ;
	text-align: center ;
	background: #fdf9f2 ;
	font-family:Arial, Helvetica, sans-serif;
	}
			
			
div#conteneur{
	width: 770px ;
	height:600px;
	margin: 0 auto ;
	text-align: left ;
	border: 2px solid #e4d25a ;
	background: #fff ;
	}

ul#menuproduit{
	width: 130px;
	height:200px;
	line-height:15px;
	text-transform:uppercase;
	font-size:0.6em;
	font-weight:bold;
	letter-spacing:-1px;
	float:left;
	}
			

ul#menuproduit li{
	width:130px;
	height:35px;
	line-height:15px;
	text-transform:uppercase;
	font-size:1em;
	font-weight:bold;
	letter-spacing:-1px;
	background-color:#FF3300;
	list-style-type:none;
	}

ul#menuproduit li span{
	text-decoration:underline overline;
	color:#000000;
	}
			
ul#menuproduit li a{
	text-decoration:none;
	color:#00FF00;
	}
			
ul#menuproduit li a:hover{
	text-decoration:underline;
	}
			
.epigauche{
	float:left;
	margin-left:10px;
	margin-right:20px;
	}


</style>
</head>

<body>
<div id="conteneur">
<ul id="menuproduit">
	<li><img class="epigauche" src="../images/css/epi_lambert.gif" /><span>Nous &eacute;crire</span></li>
	<li><img class="epigauche" src="../images/css/epi_lambert.gif" /><a href="#">Commerciaux</a></li>				
	<li><img class="epigauche" src="../images/css/epi_lambert.gif" /><a href="#">Coordonn&eacute;es</a></li>
	<li><img class="epigauche" src="../images/css/epi_lambert.gif" /><a href="#">Plan d'acc&egrave;s</a></li>
</ul>
</div>
</body>
</html>


en fait je veux que mon bloc soit collé au bord mais que le contenu soit décalé de 10px (classe epigauche).

je pense que c'est possible, mais dès que je mets des valeurs de margin ça me décale l'ensemble du bloc...

LES MARGIN ET PADDING A 0...
Modifié par selinav (18 Jul 2007 - 15:16)
Sujet clos
Aller à