18081 sujets

Questions générales et questions de débutants

[Abandonné] Tableau en CSS

Bonjour,

après quelques séances d'arrachage de cheveux, j'ai enfin réussi à faire une structure de tableau en CSS.

Il utilise 3 niveaux d'imbrication qui fonctionnent.
Le 3e niveau est dynamique, c'est à dire qu'à son survol, un texte apparait.
Mon problème est que ce texte apparait en bas du niveau 3, alors que je souhaiterais le faire apparaître à droite.
Je suis sur qu'il manque un truc dans ma feuille de style, mais je n'arrive pas à trouver.

Voici le contenu de la page :


<!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" xml:lang="fr">




	<head>
		<title>Site Industrie EAT</title>
	
		<meta http-equiv="Content-Language" content="fr">
    	<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />

	    <meta http-equiv="Content-style-type" content="text/css" />

<style type="text/css">


<!--
a {
text-decoration: none; /* définition du lien qui affichera le "calque" */
}
a:hover {
background: none; /* correction d'un bug IE */
}
a span { /* définition de la balise <span> inclue dans <a> */
display: none;
}
a:hover span { /* définition de la balise <span> au survol */
display: block;
top: 0px; /* positions et dimensions du calque, que vous pouvez changer à loisir */
left: 0px;
background: blue;
text-align: center;
color: white;
}

.conteneur {
  padding-top: 10px;
  padding-left: 100px;
	
}

.conteneur2 {
  padding-left: 100px;
}


.bloc1 {
	background-color: blue;
	width: 100px;
	text-align:center;
}

.bloc2 {
	background-color: green;
	width: 100px;
	text-align: center;
	float:left;

}

.bloc3 {
	width: 100px;
	text-align: left;
	margin-left: 20px;
}


-->
</style>


	</head>


<body>


<div class="bloc1">Niveau 1</div>

<div class="conteneur">
	<div class="bloc2">1er Niveau 2</div>
	<div class="bloc3">
		<a href="#">Niveau 3
			<span>Texte et images</ br>Texte 2</ br>Texte 3</ br></span>
		</a>
	</div>
</div>



<div class="conteneur">
	<div class="bloc2">2e Niveau 2</div>
	<div class="bloc3">
		<a href="#">Niveau 3
			<span>Texte et images</span>
		</a>
	</div>
</div>

<div class="bloc1">2e Niveau 1</div>

</body>

</html>


Quelqu'un a une idée ?

Merci d'avance.
Modifié par barthoose (13 Sep 2005 - 16:00)
J'ai réussi, il fallait rajouter des positions : absolute ;


<!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" xml:lang="fr">




	<head>
		<title>Site Industrie EAT</title>
	
		<meta http-equiv="Content-Language" content="fr">
    	<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />

	    <meta http-equiv="Content-style-type" content="text/css" />

<style type="text/css">


<!--
a {
text-decoration: none; /* définition du lien qui affichera le "calque" */
}
a:hover {
background: none; /* correction d'un bug IE */
}
a span { /* définition de la balise <span> inclue dans <a> */
display: none;
}

a:hover span { /* définition de la balise <span> au survol */
position:absolute;
display: block;
width: 100px;
height: 60px;
background:green;
text-align: center;
color: white;
float:right;
}

.conteneur {

  padding-top: 10px;
  padding-left: 100px;
	
}

.conteneur2 {
  position:absolute;
  padding-left: 100px;
}


.bloc1 {
	background-color: blue;
	width: 100px;
	text-align:center;
}

.bloc2 {
	background-color: green;
	width: 100px;
	text-align: center;
	float:left;

}

.bloc3 {
	width: 100px;
	text-align: left;
	margin-left: 20px;
}


-->
</style>


	</head>


<body>


<div class="bloc1">Niveau 1</div>

<div class="conteneur">
	<div class="bloc2">1er Niveau 2</div>
		<div class="bloc3">

			<a href="#"><img src="test.jpg"/>
				<span>Texte et images<br />Texte 2<br />Texte 3<br /></span>
			</a>
		</div>

</div>



<div class="conteneur">
	<div class="bloc2">2e Niveau 2</div>
	<div class="bloc3">
		<a href="#"><img src="test.jpg"/>
			<span>Texte et images</span>
		</a>
	</div>
</div>


<div class="bloc1">2e Niveau 1</div>

</body>

</html>
barthoose a écrit :
J'ai réussi, il fallait rajouter des positions : absolute ;

Bravo. Si tu as réussi il faudrait mettre ton post en résolu. La marche à suivre est indiquée dans la faq. Et indiqué dans ton premier post de quel tutoriel il s'agit avec un lien par exemple. Smiley cligne
Modifié par Igor (12 Sep 2005 - 19:35)
Ok, sauf que j'ai parlé trop vite, sous firefox le texte qui apparait lors du survol de l'image est en dessous de l'image...
J'y comprends plus rien !
HELP
Modifié par barthoose (12 Sep 2005 - 22:14)
Je vais résumer mon problème :

Le tableau que j'ai fait fonctionne très bien sous IE :

http://www.nicoco.free.fr/temp/ie.bmp

Au survol de test, le texte s'affiche à droite de "Test"

Sous firefox :

http://www.nicoco.free.fr/temp/firefox.bmp

Là, ca change car "test" se trouve en dessous des niveaux 2, et le texte au survol se trouve aussi en dessous de "test".

Je pense que les deux points cités proviennent du meme probleme, mais je n'arrive pas à le résoudre...

Help !!

Voici la page :
http://www.nicoco.free.fr/temp/test.htm
Modifié par barthoose (12 Sep 2005 - 23:22)
Sujet clos
Aller à