28173 sujets

CSS et mise en forme, CSS3

Positionner des div sur la même hauteur (résolu)

Bonsoir,

j'ai un petit problème avec mes <div>, j'essaye de faire une methode pour legender les liens hypertext, mais les div conteneur du lien + légende, ne veulent pas tenir sur la même ligne. Et il me faut utiliser des div pour positionner verticalement et horizontalement la legende.

J'ai essayer plusieurs chose, mais rien ne veut :'/ si quelqu'un y arrive ... (:
Voila le css/html

body {
	background-color: black;
	margin: 0px;
}

#undiv {
	background-color: white;
	margin: 50px auto ;
	padding: 5px;
	text-align: center;
	width: 790px;
}


#undiv .lien .legende{
	background-color: #f0f5ff;
	border: 1px solid black;
	display: none;
	font-size: .9em;
	margin-left: 40px;
	margin-top: -45px;
	padding: 2px;
	position: absolute;
	opacity: 0.6;
}

#undiv .lien:hover .legende{
	display: block;
}

.lien {
	width: 100px;
}




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head><link href="style.css" rel="stylesheet" type="text/css" /></head>
<body>



	<div id="undiv">

		<div class="lien">
			<a href="" title="" >lien</a>
			<div class="legende">une legende dans un div</div>
		</div>

		<div class="lien">
			<a href="" title="" >lien</a>
			<div class="legende">une legende dans un div</div>
		</div>

	</div>



</body>
</html>

Modifié par pepito (19 Feb 2006 - 11:05)
avec la methode des liste ul et li et le tout en display: inline ne serait pas mieux?

tant que je suis la, tu as ceci
#undiv .lien:hover .legende{

	display: block;

}


un lien:hover ne fonctionnera pas sur IE qui ne reconnait que a:hover
donc a modifier
De plus dans ce code tu mets un display: block ce qui a pour incidence de dire que tous tes .legende sont transformé en bock a part entiere donc vu comme est code le css du .legende au dessus, il est normal que tes liens se retrouvent les uns en dessous des autres. Il faudrait dans ton cas dire que les .legende sont en float: left; par exemple et non pas positionné en fonction de marge fixes.
Modifié par Philippe (18 Feb 2006 - 19:22)
non pas de ul/il :þ

Pour IE je sais qu'il reconnait seulement les a:hover, ben tant pis pour lui.

Et pour les .legende en float j'ai deja testé, même en mettant du float a foisson, mais rien ne veut.
Sujet clos
Aller à