28172 sujets

CSS et mise en forme, CSS3

[RESOLU] Menu horizontal décalé sous Firefox (double problème)

Ce post, qui concerne la mise en page d'une barre de navigation horiztonale, est en deux parties.

1. Problème d'affichage sous Firefox

http://img19.imageshack.us/img19/3343/fi3.jpg
(voir ci-dessous)

2. Barre décorative décalée à droite du menu

http://img209.imageshack.us/img209/3130/nav01.gif
(voir ici)
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
Première partie



Bonjour à tous,

Après avoir ingurgité une bonne partie des bases théoriques posées dans vos très complets articles (vous en remerciant au passage Smiley biggrin ) j'ai décidé de passer de la pratique à la théorie - non sans difficultés comme il se doit.

Le problème que je rencontre est le suivant: ma barre de menu s'affiche correctement sour IE (en version 7), et pas sur Firefox (en version 3). C'est le monde à l'envers!

Capture sous IE
http://img19.imageshack.us/img19/2569/ie7.jpg

Capture sous Firefox
http://img19.imageshack.us/img19/3343/fi3.jpg

Ca ressemble à un problème de marges, et pourtant j'ai bien spécifié "marge:0px" pour l'ID liste. Voici à quoi ressemble mon CSS:



#page {
	margin-right: auto;
	margin-left: auto;
	width: 750px;
}

#nav {
	margin: 0px;
	list-style-type: none;
	background-image: url(../images/nav.gif);
}


#nav li {
	float: left;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.4em;
	line-height: 70px;
	margin: 0px;

	}

#nav a {
	display: block;
	height: 70px;
	width: 150px;
	text-align: center;
	background-image: url(../images/nav.gif);
	background-position: center top;
	margin-top: 0px;
	margin-bottom: 0px;
	border: none;
	color:#000000;
	}
	
#nav li a:hover, #navigation li a:focus, #navigation li a:active {
	background-image: url(../images/nav.gif);
	background-position: center bottom;
	}

#titre {
	margin-left: 100px;
}

html, body {
	height: 100%;
	margin: 0;
	background-color: #FFCC99;
}

div#page {
	width: 750px;
	margin-top: 10px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	overflow: auto;
	border: 1px solid #666666;
	background-color: #FFFFFF;
}


/* CONTENU CENTRAL*/


#gauche {
	float: left;
	width: 195px;
	padding: 10px;
	clear: left;
	margin: 10px;
	text-align: justify;
}
#droite {
	float: right;
	width: 485px;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 0px;
	padding: 10px;
}


Merci d'avance pour votre aide, j'ai hâte de comprendre ce qui ne fonctionne pas!
Modifié par Neossir (26 Mar 2009 - 23:21)
Très fort Agylus, tu as résolu mon problème en 6 mots.

Mon "ul" comporte l'id #NAV. Je ne lui avais pas attribué de padding... ceci explique cela.

La réponse aux questions que l'on se pose est toujours plus simple que ce que l'on pense!

Merci pour ton aide, rapide et efficace.
Deuxième partie
(pour revenir au premier problème)

De retour avec un problème similaire!

J'avance peu à peu dans ma compréhension du positionnement avec les CSS, mais rien ne vaut la pratique pour appliquer tous les bons conseils trouvés sur alsacréations.

Tout allait bien avec ma barre de navigation lorsque j'ai décidé de rajouter aux deux extrémités deux petites barres pour créer un effet de box arrondie. Celle de gauche se cale bien, mais étrangement celle de droite passe à la ligne (et pourtant j'ai réservé les 10px de largeur formés par l'image).

Voici ma barre de navigation telle qu'elle apparait actuellement.

http://img209.imageshack.us/img209/3130/nav01.gif

Et la voici telle que je l'aimerais:

http://img216.imageshack.us/img216/5594/nav02.gif

Le code HTML:

<div id="page">
  <div id="header">
    <div id="titre">
      <h1>Titre</h1>
      <h2>sous-titre</h2>
    </div>
      <div id="gauche"> </div>
      <ul id="nav">
        <li><a href="accueil.html">accueil</a></li>
        <li><a href="cv.html">présentation</a></li>
        <li><a href="videos.html">vidéos</a></li>
        <li><a href="photos.html">photographies</a></li>
        <li><a href="mailto:">me contacter</a></li>
      </ul>
      <div id="droite"> </div>
  </div>


Le code CSS:

/* PAGE COMPLETE */

#page {
	width:900px;
	margin:0 auto;
	background-color: #00FF00;
}

/* HEADER */

#titre {
	margin-left: 100px;
}

/* NAVIGATION */

#gauche {
	background-image:url(../images/nav_gauche.png);
	background-position: left center;
	float: left;
	width: 10px;
	height: 70px;
	margin: 0;
	padding: 0;
	}
	
#droite {
	background-image: url(../images/nav_droit.png);
	background-position: right center;
	width: 10px;
	height: 70px;
	margin: 0;
	padding: 0;
}


#nav {
	margin: 0px;
	list-style-type: none;
	background-image: url(../images/nav_gris.png);
	padding:0px;
	margin-bottom: 20px;
	width: 880px;
	height: 70px;
	text-align: center;
	margin-left: 10px;
}

#nav li {
	float: left;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.4em;
	line-height: 70px;
	margin: 0px;
	margin-bottom: 20px;
}

#nav a {
	display: block;
	height: 70px;
	width: 176px;
	text-align: center;
	margin-top: 0px;
	margin-bottom: 0px;
	color:#CCCCCC;
	text-decoration:none;
	}
	
#nav li a:hover, #navigation li a:focus, #navigation li a:active {
	background-image: url(../images/nav_gris.png);
	background-position: center bottom;
	}


La résolution du problème est probablement aussi simple que la dernière fois, mais j'ai beau eu cherché, je ne vois pas comment le résoudre.

Une fois de plus merci d'avance pour votre aide - pauvre débutant que je suis, la longue route de l'apprentissage des CSS est semée d'embuches!
Modifié par Neossir (26 Mar 2009 - 23:22)
Malheureusement j'ai essayé toutes les alternatives possibles de float et de clear sur la div #droite, aucune ne fonctionne.
Mets un float left sur le div #droite.
Enlève le margin-left sur le div #nav.
Mets un float left sur le div #nav.
Ca fonctionne Agylus, merci!

J'imagine que la succession de float ne fonctionne que si et seulement si chacun des éléments est un float déclaré...

Tout ça devient peu à peu moins obscur pour moi, mais ce n'est pas simple.

Merci pour ton aide précieuse et rapide!
Sujet clos
Aller à