[Résolu] Infobulle en CSS

Question

Sensei_Panda

2 Oct 2008 à 20:27

Bonsoir,

Je débute en CSS et je suis en train de réaliser ce qui sera ma future page d'accueil sur mon serveur pour l'instant: http://panda.homelinux.net/test.

Comme vous voyez, mon texte de copyright en pied de page sort de son bloc et s'affiche sur deux lignes.

J'ai essayé plusieurs "bidouilles", mais ça ne faisait que désordonner d'avantage...
Modifié par Sensei_Panda (02 Oct 2008 - 21:32)

Sensei_Panda

2 Oct 2008 à 20:31

J'ai oublié de balancer le code Smiley lol

CSS

html { 

	background: #383838;

	color: transparent;
}

html a { 

	color: #a8a8a8;
	text-decoration: none;
	text-align: left;
}

html a:hover { 

	color: #ba9243;
}

#fond_de_page {
	width: 800px;
	min-height: 460px;
	margin: auto;
	margin-top: 30px;
	padding: 10px;
	background-color: #6b6b6b;
}

#en_tete {
	height: 90px;
	background: #525252;
	text-align: center;
	padding: 10px;
	margin-bottom: 10px;
}

#titre {
	height: 90px;
	width: 728px;
	margin-left: auto;
     	margin-right: auto;
	background: transparent url(/test/fichiers_index/titre.png);
	background-repeat: no-repeat;
}

#titre:hover {
	background: transparent url(/test/fichiers_index/titre_hover.png);
}

#boutons {
  	display: block;
	margin-left: auto;
     	margin-right: auto;
  	height: auto;
	width: 120px;
  	color: #a8a8a8;
  	background: #5e5e5e;
  	border: none;
  	text-decoration: none;
  	text-align: center;
	padding: 4px 8px;
}

#boutons:hover {
  	color: #000000;
  	background: #93bf4c;
}

/*--- Bloc haut en deux parties ---*/

#bloc_menu {
	text-align: center;
	padding: 40px;
	min-height: 29px;
	background-color: #525252;
}

#bloc_menu_central {
	width: 149px;
	margin-left: auto;
     	margin-right: auto;
	background-color: #a8a8a8;
	height: 29px;
	text-align: center;
}

/*--- Bloc central ---*/

#bloc_central { 
	text-align: center;
	padding: 20px;
	min-height: 460px;
	background-color: #525252;
}

/*--- Bloc pour le logo du site ---*/

#bloc_logo { 
	background: transparent url(/test/fichiers_index/logo_panda.png);
	background-repeat: no-repeat;
	display: block;
	text-align: center;
	height: 372px;
	width: 366px;
	margin-left: auto;
     	margin-right: auto;
}

#bloc_logo:hover { 
	background: transparent url(/test/fichiers_index/logo_panda_hover.png);
}

/*--- Pied de page en deux parties ---*/

.pied_de_page_gauche { 
	
	height: 15px;
	width: 400px;
	font-size: 14px;
	color: none;
	float: left;
	text-align : left;
	padding: 5px;
	margin-top: 10px;
	background-color: #525252;
}

#pied_de_page_droite { 
	height: 15px;
	margin-left: 400px;
	text-align : left;
	padding: 5px;
	margin-top: 10px;
	background-color: #525252;
}

#infobulle a span {
	display: none;
  	position: absolute;
  	left: 20px;
	top: 30px;
	color: #000000;
  	background-color: #93bf4c;
  	font-size: small;
  	text-decoration: none;
  	width: 25ex;
  	margin: 0;
	padding: 5px;
  	border: none;
  	z-index: 5;
}

#infobulle a:hover span {
	display: block;
}

/*--- Comportement des logos du pied de page ---*/

a.logo-linux {
	float: right;
	color: transparent;
	display: block;
	background:URL(/test/fichiers_index/linux.png);
	background-repeat: no-repeat;
	border: 0px;
	margin: 0px;
	padding: 0px;
	width: 85px;
}

a.logo-linux:hover {
	float: right;
	color: transparent;
	display: block;
	background:URL(/test/fichiers_index/linux_hover.png);
	background-repeat: no-repeat;
	border: 0px;
	margin: 0px;
	padding: 0px;
	width: 85px;
}

a.logo-xhtml {
	float: right;
	color: transparent;
	display: block;
	background:URL(/test/fichiers_index/xhtml.png);
	background-repeat: no-repeat;
	border: 0px;
	margin: 0px;
	padding: 0px;
	width: 85px;
}

a.logo-xhtml:hover {
	float: right;
	color: transparent;
	display: block;
	background:URL(/test/fichiers_index/xhtml_hover.png);
	background-repeat: no-repeat;
	border: 0px;
	margin: 0px;
	padding: 0px;
	width: 85px;
}

a.logo-css {
	float: right;
	color: transparent;
	display: block;
	background:URL(/test/fichiers_index/css.png);
	background-repeat: no-repeat;
	border: 0px;
	margin: 0px;
	padding: 0px;
	width: 80px;
}

a.logo-css:hover {
	float: right;
	color: transparent;
	display: block;
	background:URL(/test/fichiers_index/css_hover.png);
	background-repeat: no-repeat;
	border: 0px;
	margin: 0px;
	padding: 0px;
	width: 80px;
}

/*--- Comportement du menu déroulant ---*/

#menu_deroulant {
	position: absolute;
	width: 150px;
	list-style-type: none;
  	margin: 0;
  	padding: 0;
  	border: 0;
}

#menu_deroulant li {
  	float: none;
  	width: 149px;
  	margin: 0;
  	padding: 0;
  	border: 0;
}

#menu_deroulant .sous_menu {
  	display: none;
  	list-style-type: none;
  	margin: 0;
  	padding: 0;
  	border: 0;
}

#menu_deroulant .sous_menu li {
  	float: none;
  	margin: 0;
  	padding: 0;
  	border: 0;
  	width: 149px;
  	border-top: 1px solid transparent;
  	
}

#menu_deroulant li a:link, #menu_deroulant li a:visited {
  	display: block;
  	height: auto;
  	color: #000000;
  	background: #969696;
  	margin: 0;
  	border: 0;
  	padding: 4px 8px;
  	border: 1px solid transparent;
  	text-decoration: none;
  	text-align: center;
}

#menu_deroulant li a:hover { background-color: #93bf4c; }
#menu_deroulant li a:active { background-color: #5F879D; }
#menu_deroulant .sous_menu li a:link,
#menu_deroulant .sous_menu li a:visited {
  	display: block;
  	color: #a8a8a8;
  	margin: 0;
  	border: 0;
  	text-decoration: none;
  	background: #6b6b6b;
  	text-align: left;
}

#menu_deroulant .sous_menu li a:hover {
  	background-image: none;
	color: #000000;
  	background-color: #93bf4c;
}

#menu_deroulant li:hover > .sous_menu { 
	display: block; 
}

HTML

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

<head>
<meta http-equiv="content-type"
content="text/html; charset=UTF-8"/>
<title>[panda-tatau.net]</title>
<link type="text/css" href="/test/fichiers_index/style.css" rel="stylesheet"/>
</head>
<body>

<div id="fond_de_page">

<div id="en_tete">
<div id="titre">
</div>
</div>

<div id="bloc_menu">
<div id="bloc_menu_central">

<ul id="menu_deroulant">
<li>
<a href="#">Menu</a>
<ul class="sous_menu">
<li><a href="#" title="Entrée du site">Entrer</a></li>
<li><a href="#" title="Contacter le webmaster">Contact</a></li>
</ul></li>
</ul>

</div><!-- Fin de bloc_menu_central -->
</div><!-- Fin de bloc_menu -->

<div id="bloc_central">
<div id="bloc_logo">
</div><!-- Fin de bloc_logo -->
</div><!-- Fin de bloc_central -->

<div class="pied_de_page_gauche">
<ul id="infobulle">
<li><a href="#">Copyright © 2008 [panda-tatau.net] All rights reserved.
<span>Tous droits réservés. Sauf mention expresse contraire, le contenu de ce site web est soumis au droit d'auteur.</span></a></li>
</ul>
</div><!-- Fin de pied_de_page_gauche -->

<div id="pied_de_page_droite">
<a class="logo-css" href="http://jigsaw.w3.org/css-validator/" title="Valid CSS level 2.1" alt="Valid CSS level 2.1" 
onclick="window.open(this.href); return false;"> </a>
<a class="logo-xhtml" href="http://validator.w3.org/check?uri=referer" title="Valid XHTML 1.0 Strict" alt="Valid XHTML 1.0 Strict" 
onclick="window.open(this.href); return false;"> </a>
<a class="logo-linux" href="http://fr.wikipedia.org/wiki/Linux" title="Site réalisé sous GNU/Linux Debian" alt="Linux" 
onclick="window.open(this.href); return false;"> </a>
</div><!-- Fin de pied_de_page_droite -->

</div><!-- Fin de fond_de_page -->
</body>
</html>

Sensei_Panda

2 Oct 2008 à 21:31

Problème résolu grâce à ceci Smiley smile

Merci Alsacreations pour les ressources Smiley cligne

Sujet clos

CSS et mise en forme, CSS3

[Résolu] Infobulle en CSS