28173 sujets

CSS et mise en forme, CSS3

[Résolu] Impossibilité de mettre un menu et un fond d'écran

Bonjour,
j'ai un problème incompréhensible (pour moi) puisque j'aimerais juste mettre un fond d'écran tout simple et par dessus un menu horizontal en CSS.
Alors, j'arrive aisément à placer le fond d'écran. J'arrive aisément à placer le menu. Mais les deux sur la même page, je n'arrive pas. Smiley biggol

Ce n'est pourtant pas la mer à boire mais je n'y arrive pas. Il doit y avoir des choses que je ne vois pas.

Voila le code :
<html>
<head>
<title>Evad'Toi</title>
<style type="text/css">
<!--
body,td,th {
	font-family: Garamond;
	color: #000000;
}
body {
	background-color: #FFCC00;
	background-repeat: no-repeat;
	background-position: 50% 10px;
	background-attachment: fixed;
	background-image:url(../fond_ecran.jpg);
}
a{
	text-decoration: none; overline; color: black;
}
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eee;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray; 
}
-->
</style>

<body>
<div id="menu">
	<dl>
		<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>

	</dl>
	
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
			<dd id="smenu1">
				<ul>
					<li><a href="#">Sous-Menu 1.1</a></li>

					<li><a href="#">Sous-Menu 1.2</a></li>
					<li><a href="#">Sous-Menu 1.3</a></li>
					<li><a href="#">Sous-Menu 1.4</a></li>

					<li><a href="#">Sous-Menu 1.5</a></li>
					<li><a href="#">Sous-Menu 1.6</a></li>
				</ul>

			</dd>
	</dl>
	
	
	<dl>	
		<dt onmouseover="javascript:montre();"><a href="">Menu 2</a></dt>
	</dl>

	
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
			<dd id="smenu3">
				<ul>
					<li><a href="#">Sous-Menu 3.1</a></li>

					<li><a href="#">Sous-Menu 3.2</a></li>
					<li><a href="#">Sous-Menu 3.3</a></li>
					<li><a href="#">Sous-Menu 3.4</a></li>

					<li><a href="#">Sous-Menu 3.5</a></li>
				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>

			<dd id="smenu4">
				<ul>
					<li><a href="#">Sous-Menu 4.1</a></li>
					<li><a href="#">Sous-Menu 4.2</a></li>

					<li><a href="#">Sous-Menu 4.3</a></li>
				</ul>
			</dd>
	</dl>
	

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



Merci d'avance

P.S. : Et désolé pour le code Smiley decu
Modifié par lofo7 (26 Apr 2007 - 11:40)
Administrateur
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Bonjour,

Tout bloc positionné en absolu sort du flux de son conteneur. Par conséquent, certains navigateurs comprendront de ton code que body n'a pas de contenu à prendre en compte, et fait donc 0px de haut.

(Note : si on donne une couleur de fond à body, par contre, elle s'appliquera au canevas, c'est à dire à toute la zone d'affichage, quelle que soit la hauteur de body).

Solution : ne pas positionner le menu en absolu, ou s'arranger pour que la page ait un contenu par ailleurs.
inverse les 2 block body et ca s'affiche chez moi

edit: par contre tu defini 2 fois la couleur de background...y en a une qui sert a rien. et l'explication au-dessus explique pourquoi inverser ca change le tout....moi j'agis...je reflechis apres lool
Modifié par CPascal (26 Apr 2007 - 11:33)
Hello,

Je commence à lire ton code et là que vois-je ? 3 fois la balise "body" dans ton CSS... De plus, ton code est largement optimisable :


background-color: #FFCC00;
background-repeat: no-repeat;
background-position: 50% 10px;
background-attachment: fixed;
background-image:url(../fond_ecran.jpg);

=

background:#FFCC00 url(../fond_ecran.jpg) no-repeat fixed 50% 10px;

Si l'envie te prends d'alléger ton code : CSS Tweak
Modifié par BeliG (26 Apr 2007 - 11:42)
Salut,

Toujours les vieux démon....je parie qu'on va me sortir un add firefox.....y a pas une verison locale de la chose BeliG?

Pascal.
En inversant les block BODY, cela fonctionne en effet.

Effectivement il est sûrement optimisable ce code mais je ne suis qu'un débutant. Smiley cligne J'ai beaucoup à apprendre

Je vais aller voir CSS Tweak.

Merci beaucoup à tous
Sujet clos
Aller à