28172 sujets

CSS et mise en forme, CSS3

[Résolu] -Menu déroulant, un peu déroutant.

Bonsoir à tous, je suis en train de réaliser un petit site personnelle, le truc c'est que je bute sur un point.

Mon menu horizontal est déroulant, jusque là rien de bien extraordinaire.
Le truc c'est que mon menu horizontal fait des siennes, en effet je remarque un décalage entre mes différentes partie du menu principale.

Je veux que mes menus du haut, donc visible tout le temps, ai une largeur constante.

Voici l'effet que je souhaite avoir:
http://novavision.studio.free.fr/board/effect.jpg

Voici ce que j'ai comme effet:
http://novavision.studio.free.fr/board/noeffect.jpg

Pour le code source de la page:

Voici le code HTML:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" media="screen" type="text/css" title="main.css" href="header.css" />
<link rel="stylesheet" media="screen" type="text/css" title="body.css" href="body.css" />
<link rel="stylesheet" media="screen" type="text/css" title="footer.css" href="footer.css" />
<title>NV-Systems</title>
</head>

<body>

<!-- Header Section -->
<div id="Banner"></div>
<div id="Logo"></div>
<div id="MenuBar" class="MenuBarFX">
	<ul>
		<li><a href=#>Home</a></li>
		<li><a href=#>Technologies</a>
		  <ul>
				<li><a href=#>Paladin OS</a></li>
				<li><a href=#>Paladin Servers</a></li>
				<li><a href=#>Paladin Eyes</a></li>
			</ul>
		</li>
        
		<li><a href=#>Support</a>
		  <ul>
				<li><a href=#>Online Technical Support</a></li>
				<li><a href=#>Documentations</a></li>
				<li><a href=#>Order a licence</a></li>
				<li><a href=#>Ask a question</a></li>
			</ul>
		</li>
        	
		<li><a href=#>Communities</a>
		  <ul>
				<li><a href=#>Forums</a></li>
				<li><a href=#>Cool Stuff</a></li>
				<li><a href=#>Make a suggestion</a></li>
			</ul>
		</li>
        	
		<li><a href=#>Contact</a></li>
  </ul>
</div>

<!--News and Ads Section-->

<div id="newscont" class="">
	<div
</div>

</body>
</html>


Et le CSS:
@charset "utf-8";
/* Fichier CSS pour la page d'acceuil */

body {
	background-image:url(images/NVS_Background.png);
	background-color:#ffffff;
	background-position:top;
	background-repeat:repeat-x;
}

/* CSS Header parts */

div#Banner {
	min-width:640px;
	width:100%;
	height:96px;
	top:0px;
	left:0px;
	background-color:#303338;
	background-position:top;
	background-repeat:repeat-x;
	position:absolute;
	z-index:0;
}

div#Logo {
	width:239px;
	height:61px;
	top:8px;
	left:24px;
	background-image:url(images/NVS_Logo.png);
	background-position:top;
	background-repeat:no-repeat;
	position:absolute;
	z-index:1;
}

div#MenuBar {
	background-color:#42464d;
	background-repeat:repeat-x;
	min-width:640px;
	width:100%;
	height:24px;
	top:72px;
	left:0px;
	position:absolute;
	z-index:2;
}

/* Header Menu Bar Special Effects */

.MenuBarFX {
	text-align:center;
	text-decoration:none;
	font-weight:bold;
	font-family:Arial;
	font-color:#e5e5e5;
}

.MenuBarFX ul { /*Parametrage des style de puces, ici masquer les puces + Parametrage du bandeau principal*/
 	margin:0px;
 	padding:0px;
	list-style-type:none;
	text-align:left;
	font:Arial;
	font-size:12px;
	font-weight:normal;
 }
 
.MenuBarFX ul li { /*Parametrage des sous menu*/
	line-height:24px;
	width:auto;
	float:left;
	padding:0px;
	margin-left:4px;
	color:#e5e5e5;
}


.MenuBarFX ul li a { /*Parametrage des sous menu hyperlien*/
	margin:0px;
	padding:0px;
	line-height:24px;
	display:block;
	text-decoration:none;
	color:#e5e5e5;
}

.MenuBarFX ul li a:hover { /*Parametrage des sous menu hyperlien souris survol*/
	line-height:24px;
	width:auto;
	color:#4289ff;
	background-color:none;
}

.MenuBarFX ul li ul { /*Masquage des sous menu*/
	display:none;
}

.MenuBarFX ul li ul {
	width:auto;
	float:none;
	border:0px;
    -moz-box-shadow: 1px 3px 6px #999; 
    -webkit-box-shadow: 1px 3px 6px #999; 
    box-shadow: 1px 3px 6px #999;
	background-color:rgba(66, 70, 77, 0.8);
}

.MenuBarFX ul li:hover ul{
	display:block;
	width:auto;
	float:none;
	margin:0px;
	padding:0px;
	color:#4289ff;
}

.MenuBarFX ul li a:hover ul{
	display:block;
	width:auto;
}

.MenuBarFX ul li ul li{
	display:block;
	float:none;
}

.MenuBarFX ul li ul li a{
	line-height:18px;
	display:block;
	float:none;
	width:auto;
	padding:2px;
	color:#e5e5e5;
}

.MenuBarFX ul li ul li a:hover{
	line-height:18px;
	display:block;
	float:none;
	width:auto;
	padding:2px;
	color:#4289ff;
}


J'espère que ce que je souhaite de faire est faisable.
Modifié par DR I (13 Mar 2010 - 13:31)
Bonsoir,
Avec ces petites modifications dans le code :
.MenuBarFX ul {
   position: relative;
   /* le reste des instructions */
}
.MenuBarFX ul li ul {
   position: absolute;
   /* le reste des instructions */
}

On obtient un rendu comme la troisième vue en bas :

upload/579-menu.jpg

PS. attention, vers le bas une div est mal fermée :
<div id="newscont" class=""> 
    <div 
</div>

Modifié par Aureance (13 Mar 2010 - 03:52)
Hello, Ouah, on peux dire que c'est du rapide ici Smiley cligne

Merci pour les positionnement je m'en vais mettre ça en place tout de suite.

Pour ce qui est du DIv pas fermé je sais, je suis en train de réfléchir à comment faire mon menu des news dynamique.

Par contre, j'ai toujours un peu de mal avec les positionnement, je ne comprend pas pourquoi le fait de mettre relative à <ul>, nous permet de lui laisser uniquement l'espace de sa largeur??

Par contre pour le absolute je comprend qu'il vas ce positionner hors du flux donc c'est normal qu'il n'interagisse plus avec les autres balises.
Modifié par DR I (13 Mar 2010 - 13:33)
DR I a écrit :
Par contre, j'ai toujours un peu de mal avec les positionnement, je ne comprend pas pourquoi le fait de mettre relative à <ul>, nous permet de lui laisser uniquement l'espace de sa largeur ??

Par contre pour le absolute je comprend qu'il vas ce positionner hors du flux donc c'est normal qu'il n'interagisse plus avec les autres balises.


Dans le cas de ce menu : ce n'est pas parce qu'on met le premier ul en relative qu'il garde sa largeur mais c'est bien parce qu'on le met en positionnement relative qu'on peut à sa suite placer ul ul en position absolute… Ce qui fait que ça ne dérange plus la mise en page.

C'est vrai, dans ton cas on pourrait se passer de mettre le premier UL en position relative puisque, plus haut, un parent éloigné est déjà placé en absolute (div#MenuBar). Le principe est qu'on place un second élément par rapport à un premier qui est lui même positionné… j'ai choisi le plus proche parent car ul > ul ul forme un lien de parenté plus compact que div > ul ul où l'on saute par dessus un élément… je trouve cette méthode plus facile à gérer voir moins risquée…

Note : Je trouve le mot « positionner » vraiment horrible à voir et à entendre !
OK merci de cette explication, mais dans ce cas à quoi sert le position relative? Smiley biggol

Autant Absolute et fixed OK pas de souci pour la compréhension autant relative Oo?, quel est le point de référence de relative??
Salut,

DR I a écrit :
dans ce cas à quoi sert le position relative?
Le positionnement absolu est effectué par rapport au dernier ancêtre positionné ce qui est correspond dans le cas présent à l'élément qui est en position:relative.

(Re)lire le Guide de survie du positionnement CSS.
Modifié par Heyoan (14 Mar 2010 - 16:59)
Heyoan a écrit :
Salut,

Le positionnement absolu est effectué par rapport au dernier ancêtre positionné ce qui est correspond dans le cas présent à l'élément qui est en position:relative.

(Re)lire le Guide de survie du positionnement CSS.


OK mais en fait la question ne portée pas sur l'absolute mais le relative, je me suis mal exprimé.

Le relative, quel est son poing de référence? le haut de l'écran? l'objet parent? le dernier objet inscrit?

Merci pour vos liens, je vais aller tranquillement me regarder tout ceci.
DR I a écrit :
Le relative, quel est son poing de référence?
Le point de référence est la position naturelle de l'élément dans le flux. Ce positionnement ne sert qu'à la décaler légèrement... et également à "positionner" un élément pour qu'il serve de référence à ses éléments descendants positionnés en absolu.

DR I a écrit :
je vais aller tranquillement me regarder tout ceci.
Yep ! C'est ce qu'il faut faire. Smiley smile
Modifié par Heyoan (15 Mar 2010 - 19:31)
Sujet clos
Aller à