28221 sujets

CSS et mise en forme, CSS3

Positionnement CSS: les floats se baladent.

'jour za tous

J ai un tout chtit probleme....

J ai des liens qui passent en bold italic au survol. Ceux ci sont declares en Float, et ils se balladent partout quand on passe dessus.

regardez ce que ca donne quand on passe sur la deuxieme boite:
http://site.voila.fr/minh2

Mon code me smble pourtant simple... Mais pas si efficace que ca a priori!

Le HTML:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

	
<title>test numero 2</title>



<link REL='stylesheet' HREF='test2.css' TYPE='text/css'>


</head>

<body>


<div id="texte">

	<a href="lien">
	<dl>
	<dt>
	1
	</dt>
	<dd>
	blah blah blah blah blah blah blah blah blablablablablablah blah blah ablablablablah blablah blablablah
	</dd>
	</dl>
	</a>






	<a href="lien">
	<dl>
	<dt>
	2
	</dt>
	<dd>
	blah blah blah blah blah blah blah blah blablablablablablah blah blah ablablablablah blablah blablablah
	</dd>
	</dl>
	</a>





	<a href="lien">
	<dl>
	<dt>
	3
	</dt>
	<dd>
	blah blah blah blah blah blah blah blah blablablablablablah blah blah ablablablablah blablah blablablah
	</dd>
	</dl>
	</a>





	<a href="lien">
	<dl>
	<dt>
	4
	</dt>
	<dd>
	blah blah blah blah blah blah blah blah blablablablablablah blah blah ablablablablah blablah blablablah
	</dd>
	</dl>
	</a> 

		
</div>			
</body>
	
	
</html>


Et le CSS : [b]

a{
	color: #849063;
	text-decoration: none;
}


a:visited {
	color:#849063;
	}
	
a:active {
	color:#849063;
	}

a:hover {
	font-style: italic;
	font-weight: bold;
	cursor: hand;
	font-size : 14px;
	}


#texte{
	padding: 0px;
	margin: 0px;
	width: 485px;
	background-attachment: fixed;
	overflow: auto;
	}


a dl {
	width: 200px;
	text-align: center;
	margin: 10px;
	padding: 0px;
	float:left;
	background-color:#ff0000;
	}


a dt {
	text-align: center;
	padding-top: 20px;
	margin-top: 20px;
	background-color:#00ff00;
	}

a dd {
	text-align: center;
	margin: 0;
	padding: 10px;
	width: 180px;
	background-color:#0000ff;
	}

html>body a dl{
	margin-left: 20px;
	}


Smiley smile Merci de me donner une petite idee de comment resoudre cela... Smiley smile .


[/b]
Modifié par guiguisme (28 Feb 2005 - 09:55)
Bonjour,
En changeant le style de la police, tu changes sa taille, donc la taille du bloc, et donc cela rends les blocs mobiles. C'est un comportement tout à fait normal.

1. Retire tes hovers qui font changer la taille.

Ou

2. Uniformise les hauteurs de blocs avec un height

Voili voilou
Salut !

Ton code ne valide pas !

Ne t'attends pas à obtenir des résultats satisfaisants avec une telle soupe de balises. Tu mélanges les balises bloc et inline, tu mets de blocs de définition dans des liens, etc.

Un peu de lecture te fera le plus grand bien:

La spécification XHTML1.0 (c'est la DTD que tu écris, mais que tu utilises mal)
La structure des balises : bloc et en-ligne (Important à comprendre!)

Un bon conseil: corrige ton code, rends-le valide et reviens nous voir !

@+, HoPHP

P.S. Le but n'est pas de te décourager, bien au contraire. C'est plutôt de t'empêcher de partir dans la mauvaise direction.
Modifié par HoPHP (28 Feb 2005 - 10:26)
Sujet clos
Aller à