28172 sujets

CSS et mise en forme, CSS3

Menu déroulant qui décale le contenu

Bonjour à tous,

J'aimerais intégrer un menu déroulant à ma page.

Mais voila, quand on déroule le sous-menu tout le contenu qui se trouve dessous est décaler vers le bas.

Qu'est-ce qui manque pour corriger se probléme ?

<!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>Hello!</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <style type="text/css">

* {
  margin:0; padding:0;
}
body {
	background: transparent repeat scroll none 0 0 #fff;
	color: #000000;
	font-family: "Trebuchet MS",Verdana,Geneva,Arial,Helvetica,sans-serif;
	font-size: 11px;
}


ul {
  list-style-position: outside;
  list-style-type:none;
}

#wrapper {
  width : 980px;
  min-height: 100%;
  margin : auto;
  padding:0;
}

#top {
  height : 25px;
  margin: 0;
  padding : 2px;
  
}

#menu {
height:22px;
 position:relative;
}
#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
#menu li {
float:left;
margin:auto;
padding:0;
background-color:black;
}
#menu li a {
display:block;
width:100px;
color:white;
text-decoration:none;
padding:5px;
}
#menu li a:hover {
color:#FFD700;
}
#menu ul li ul {
display:none;
}
#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
float:none;
}

<!--[if !IE]>
	
	#menu li ul {
		position:absolute;
	}

<![endif]-->

#main {
  padding : 0px;
}
#content {
  margin-left : 205px;
  margin-right:205px;
  padding : 5px;
  background-color:#aaa;
}
#leftside {
  margin : 0 2px 0 0;
  padding : 2px;
  width : 200px;
  float : left;
  background-color:#ccc;
}
#rightside {
  margin : 0 0 0 2px;
  padding : 2px;
  width : 200px;
  float : right;
  background-color:#bbb;
}
.spacer {
  clear : both;
}
#footer {
  text-align: center;
  height:80px;
  margin :10px 0 5px 0;
  padding : 3px;
  background-color:#1ff;
}
</style>
</head>

<body>

<div id="wrapper">
<!-- TOP -->
    <div id="top">
        top
    </div>
<!-- /TOP-->
<!-- HEADER -->
    <div id="header">
        <img src="pages/equipe_fichiers/banerredesocial.jpg" width="161" height="82" alt="logo" />
    </div>
<!-- /HEADER -->
<!-- NAVBAR-->
    
	<div id="menu">
		<ul>
			<li><a href="#">Item 1</a></li>
			<li><a href="#">Item 2</a>
				<ul>
					<li><a href="#">Sous-item 1</a></li>
					<li><a href="#">Sous-item 2</a></li>
					<li><a href="#">Sous-item 3</a></li>
				</ul>
			</li>
			<li><a href="#">Item 3</a></li>
		</ul>
	</div>


<!-- /NAVBAR-->
	<div class="spacer"></div>
<!-- /header.php-->

<!-- MAIN -->
    <div id="main">
        <div class="breakingnews"></div> 
<!-- Leftside-->
        <div id="leftside">LeftSide</div>
<!-- /Leftside -->
<!-- Rightside -->
        <div id="rightside">RightSide</div>
<!-- /Rightside-->
<!-- CONTENT -->
        <div id="content">CONTENT</div>
<!-- /CONTENT -->

    </div>
<!-- /MAIN-->
<!-- footer.php-->
<!-- FOOTER -->
    <div id="footer">Copyright</div>
<!-- /FOOTER -->
</div>

</body>

</html>


Merci Smiley smile
jb_gfx a écrit :

#menu { 
height:22px; 
 position:relative; 
}


Remplace relative par absolute.


Quand j'ai fait cela, le #content à remonter un peu et s'est glissé au dessous de #menu !!!!
bonjour,

Il y a dans ta feuille de styles des commentaires conditionnels. Ils ne peuvent pas etre mis a cet endroit.

Retire les en laissant la regle dans la feuille de style. reteste ta page voir si ça bug toujours Smiley smile .

GC
Bonjour gc-nomade,

J'ai ajouter des lignes pour le positionnement et ca marche :

#menu li { 
float:left; 
margin:auto; 
padding:0; 
background-color:black; 
position:relative;/*ICI*/
}


et

#menu ul li ul { 
display:none; 
position:absolute;/*ICI*/


Sans retirer les commentaires conditionnels Smiley biggrin
Modifié par apt (21 May 2011 - 19:10)
apt a écrit :


Sans retirer les commentaires conditionnels Smiley biggrin


Soit Smiley smile , mais tes commentaire dans la feuille de style risque surtout de te créer des problèmes dans un ou plusieurs navigateur qui va mal interpreter et corriger cette erreur ...
genre page blanche ou suite des styles non pris en compte ou je ne sais quel autre truc.(je ne vais pas m'amuser a tester ta page dans x navigateur pour le demontrer ... )

Je pense que c'est l'occasion pour toi d'apprendre a quoi et comment ils servent.

Bon apprentissage,
Cordialement,
GC
gc-nomade a écrit :


Je pense que c'est l'occasion pour toi d'apprendre a quoi et comment ils servent.

Bon apprentissage,
Cordialement,
GC


a écrit :
Rappel: un commentaire conditionnel ne peut être inséré que dans un document (X)HTML, et ne peut contenir que des instructions (X)HTML et non CSS.


Smiley lol merci ....

La syntaxe s'écrit comme ca :

<!--[if IE]>
	<link type="text/css" rel="stylesheet" href="styles-ie.css" />
<![endif]-->


Mais comment adapter mon code à cette règle :

<!--[if !IE]>
#menu li ul {
	position:absolute;
}
<![endif]-->
apt a écrit :




La syntaxe s'écrit comme ca :

<!--[if IE]>
	<link type="text/css" rel="stylesheet" href="styles-ie.css" />
<![endif]-->


Mais comment adapter mon code à cette règle :

<!--[if IE]>
#menu li ul {
	position:static;
}
<![endif]-->


Bonsoir,
en laissant :
#menu li ul {
	position:absolute;
}

dans les fichiers styles communs
et par exemple en mettant :
#menu li ul {
	position:static;
}


dans le fichier style-ie.css
ou
<!--[if IE]>
<style>
#menu li ul {
	position:static;
}
</style>
<![endif]-->

et en plaçant les commentaire conditionnel dans l'entete aprés les styles communs (en dernier).

Cordialement Smiley cligne

p.s.
Q - Pourquoi un commentaire positif plutôt que négatif ?
R - Parcequ'il est fort probable que tu ais d'autre correction a faire pour IE ...
Modifié par gc-nomade (22 May 2011 - 01:15)
Bonjour,

J'ai ajouté ceci :

<!--[if IE]> 
<link type="text/css" rel="stylesheet" href="styles-ie.css" /> 
<![endif]-->


et dans style-ie.css :

#menu li ul { 
    position:static; 
}


Testé dans IE7 et Firefox 3.6.

Smiley smile
Sujet clos
Aller à