[Résolu] Menu horizontal qui passe sur deux lignes

Question

Tali

26 Aug 2010 à 08:50

Bonjour,

J'ai fait une page web avec CSS mais mon menu passe sur deux lorsque je diminue la fenetre de mon navigateur.
Voici mon code:

CSS:


/***** MENU HORIZONTAL ***/
ul#topnav {
        
	margin: 0 72px;
        padding: 0;
        list-style: none;
	font-size: 1.1em;
	clear: both;
	float: left;
	
       
      
}
ul#topnav li{
	margin: 0;
	padding: 0;
	overflow: hidden;
	float: left;
	height:40px; 
}
ul#topnav a, ul#topnav span {
	padding: 10px 20px;
	float: left;
	text-decoration: none;
	color: #fff;
	text-transform: uppercase;
	clear: both;
	height: 20px;
	line-height: 20px;
	background: #2e2826;
     
        
        
}
ul#topnav a {	color: #fff; background-color:#ff8300;}
ul#topnav span {
	display: none;
}

Html:

<div style="height:40px; width:100%; background-color:#2e2826;">
  

  <ul id="topnav">
      <nobr><li><a href="#">Accueil</a></li></nobr>
      <nobr><li><a href="#">Accueil</a></li></nobr>
      <nobr><li><a href="#">Accueil</a></li></nobr>
  </ul>
  
  </div>

Les balises <nobr> ni font rien.

Merci de votre aide.
Modifié par Tali (26 Aug 2010 - 14:05)

Heyoan

26 Aug 2010 à 09:00

Salut,

pour commencer ton code php ne sert à rien pour une question css et nous empêche de faire un simple copier / coller pour tester ton code. Ce serait bien mieux de nous donner le code html généré Smiley cligne

Ensuite l'élément NOBR n'a jamais été standardisé et ne devrait donc pas être utilisé (l'équivalent CSS qui va bien est white-space: nowrap) et encore moins avant un élément LI qui n'accepte comme élément parent que UL ou OL.

Edit: je me suis permis de supprimer le code php en question car il avait la fâcheuse conséquence de planter le script JS chili de coloration du code. Smiley murf

Modifié par Heyoan (26 Aug 2010 - 09:07)

Tali

26 Aug 2010 à 09:08

ah mince..vraiment désolé pr le code php!

vous me conseillez de mettre le white-space: nowrap dans mon ul#topnav ?

Heyoan

26 Aug 2010 à 09:13

Tali a écrit :
vous me conseillez de mettre le white-space: nowrap dans mon ul#topnav ?

Non : je t'invite d'abord à mettre le code html actuellement généré pour que l'on puisse tester ton code et comprendre le problème.

Tali

26 Aug 2010 à 09:21

Voici le début de ma page:

j'espère que ça suffira..

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta name="google-site-verification" content="mZQNcH82wgs6-bZw1tAOP2XDtHSME8Iy_oBC3ukJQ7Q" />
<meta name="google-site-verification" content="JicRxJA1iHuqGalB4-QJfbz8wqtv-5zz88EpNFv2OfA" />
<meta name="verify-v1" content="s8dZqwaCRk0E+glXHuinaW6RTEYQhknyoRNU1Vmuuw8=" />
<title>Emploi avec Portail Interim : offres d'emploi, cv en ligne.</title>
</head>
<body id="homepage" class="page1" onload="new ElementMaxHeight();">
	<div class="tall_box">
	</div>
  <div class="site_center">
<div id="global" class="main">
	<!-- [start] header -->
        
	
<div id="header">
  <div class="row_1" onclick="location='/monsite.com/trunk/Sources/';" onmouseover="this.style.cursor='pointer';">

  <div class="indent">
    <div id="nav_bar" class="search_box">
    <div class="inner">
      <h1 style="text-align: center"><img alt="127.0.0.1" href="http://127.0.0.1/monsite.com/trunk/Sources/public/skin/default//images/header_bgd2.png" /><img alt="Pages Intï¿½rim" src="/monsite.com/trunk/Sources/public/images/logos/pi.png"/></a></h1>
      <!--<a href="http://cwl.fr" title="Le site de CWL" target="_blank"><img width="120" src="/monsite.com/trunk/Sources/public/images/logos/logocwl.jpg" alt="Logo CWL" /></a>
      <a href="http://www.pldiffusion.fr" title="Le site de PLDiffusion" target="_blank"><img width="120" src="/monsite.com/trunk/Sources/public/images/logos/logopld.jpg" alt="Logo PLDiffusion" /></a>-->
        <ul>
          <li><a href="/monsite.com/trunk/Sources/candidats/">Inscription Candidat&nbsp;&nbsp;<img src="http://127.0.0.1/monsite.com/trunk/Sources/public/skin/default/images/puce_arrow_orange.png" /></a> |</li> 
          <li><a href="/monsite.com/trunk/Sources/recruteurs">Espace Recruteur&nbsp;&nbsp;<img src="http://127.0.0.1/monsite.com/trunk/Sources/public/skin/default/images/puce_arrow_orange.png" /></a> |</li> 
          <!--<li><div class="dropdown" id="headerlogin">
	<a href="javascript:void(0);" class="ddswitcher"><span>Connectez-vous</span></a>
	<div class="ddcontent">
		<div class="ddinside">
			<form action="#login_candidat_action" method="post" onsubmit="return false;" id="header_login_candidat_form">
				<div id="errorLogin"></div>
				<p><label for="loginCandidat">Identifiant</label>		<input type="text" name="loginCandidat" id="loginCandidat" value="" /></p>
				<p><label for="passwordCandidat">Mot de passe</label>	<input type="password" name="passwordCandidat" id="passwordCandidat" value="" /></p>
				<a href="http://127.0.0.1/monsite.com/trunk/Sources/candidats/auth/lost">Mot de passe oublié ?</a>
				<div id="login-submit-btn"><input type="submit" value="" id="login-submit"/></div>
			</form>
		</div>
		<div class="clear"></div>
	</div>
</div></li>-->

        </ul>
      </div>
    </div>
    </div>
  </div>
  <div class="row_2" onclick="location='/monsite.com/trunk/Sources/';" onmouseover="this.style.cursor='pointer';">
  </div>
<!----------------------------------MENU--------------------------------------->
  
  <div style="height:40px; width:100%; background-color:#2e2826;">

  

  <ul id="topnav">
      <li><a href="/monsite.com/trunk/Sources">Accueil</a></li>
      <li><a style="cursor:pointer" onclick="restoreDivContent('col1n2');if (!isIE) {col1n2=document.getElementById('col1n2')};col1n2.style.background='transparent';restoreDivContent('candArea');pushDivContent2div('loginCand','recruArea','no','loginCandidat');">Espace candidat</a></li>
      <li><a style="cursor:pointer" onclick="restoreDivContent('col1n2');if (!isIE) {col1n2=document.getElementById('col1n2')};col1n2.style.background='transparent';restoreDivContent('recruArea');pushDivContent2div('loginRecru','candArea','no','login');">Espace E.T.T.</a></li>
      <li><a style="cursor:pointer" onclick="restoreDivContent('col1n2');if (!isIE) {col1n2=document.getElementById('col1n2')};col1n2.style.background='transparent';restoreDivContent('recruArea');pushDivContent2div('call','candArea','no','intitule');pushDivContent2div('callpix','recruArea');$.get('/monsite.com/trunk/Sources/?link=call&norender=1');">Proposer une mission</a></li>
      <li><a href="/monsite.com/trunk/Sources/misc/tarifs">Nos tarifs</a></li>

      <li><a style="cursor:pointer" onclick="pushDivContent2div('contact','col1n2');$.get('/monsite.com/trunk/Sources/?link=contact&norender=1');">Nous contacter</a></li>
      <li><a style="cursor:pointer" onclick="pushDivContent2div('about','col1n2');$.get('/monsite.com/trunk/Sources/?link=about&norender=1');">A propos de nous</a></li>
	</ul>
  
  </div>
<!----------------------------------END OF MENU--------------------------------------->
<!----------------------------------FILE D'ARIANNE--------------------------------------->
<div class="arianneHolder module">
                <div class="arianne">
                    <!--<//?php echo $this->navigation()->menu(); ?>-->

                    &nbsp;&nbsp;&nbsp;Vous &ecirc;tes ici :  &nbsp;&nbsp;&nbsp;Accueil<br />
                </div>
</div>
<!----------------------------------END FILE D'ARIANNE--------------------------------------->

Heyoan

26 Aug 2010 à 09:56

Eh bien je ne comprends pas bien ta question : en fonction de la résolution d'écran de ton visiteur et avec les valeurs que tu as données à font-size et au padding des liens c'est normal qu'il n'y ait pas la place et que les LI flottants passent à la ligne. Smiley rolleyes

C'est d'ailleurs une bonne chose puisque ton menu va s'adapter (même si tu aurais pu partir sur une largeur de page plus réduite et diminuer tout ça). Par contre le DIV contenant la liste est inutile et tu aurais pu styler directement l'élément UL.

Un point bien plus gênant est d'avoir certains lien sans href mais avec un onclick car dans le cas de JavaScript désactivé ils sont inaccessibles. Il aurait mieux valu partir sur un code HTML accessible et se contenter de rajouter une surcouche JS qui aurait modifié le DOM par la suite.

Tali

26 Aug 2010 à 10:03

oui le menu s'adapte mais pas comme je le voudrai..je voudrai qu'il reste figé sur une ligne...comment faire?

Sur safari, ça déborde à droite.
Modifié par Tali (26 Aug 2010 - 14:05)

Heyoan

26 Aug 2010 à 10:11

Tali a écrit :
oui le menu s'adapte mais pas comme je le voudrai..je voudrai qu'il reste figé sur une ligne...comment faire?

Heyoan a écrit :
avec les valeurs que tu as données à font-size et au padding des liens c'est normal qu'il n'y ait pas la place

Tali

26 Aug 2010 à 10:23

oui ça y est...c'est bon merci!!!
ca marche nikel!! Smiley lol

Heyoan

26 Aug 2010 à 10:28

De rien

!

Si tu considères que ce sujet est [Résolu] merci de l'indiquer en éditant ton premier post et en modifiant le titre. Smiley cligne

Tali

26 Aug 2010 à 10:46

oups...j'ai encore un petit soucis...
quand je réduis la page j'ai un ascenseur horizontal qui s'ajoute et un fond à droite en plus
voir l'image:

Voilà les lignes que j'ai modifié:

Fichier html:

<div style="height:35px; width:100%; background-color:#2e2826;">

Fichier css:

ul#topnav {
        
	margin: 0 72px;
        padding: 0;
        list-style: none;
	font-size: 1em; /* 1.1em; */
	clear: both;
	float: left;
     
       
      
}
ul#topnav li{
	margin: 0;
	padding: 0;
	overflow: hidden;
	float: left;
	height:35px; /*40px;*/
}
ul#topnav a, ul#topnav span {
	padding: 8px 11px; /* 10px 20px; */
	float: left;
	text-decoration: none;
	color: #fff;
	text-transform: uppercase;
	clear: both;
	height: 20px;
	line-height: 20px;
	background: #2e2826;
        
        
        
}

C'est mon background-color:#2e2826; qui fait ça?
Modifié par Tali (26 Aug 2010 - 14:04)

Tali

26 Aug 2010 à 14:04

J'ai mis un

style="overflow-x: hidden;"

dans le body ça a l'air de fonctionner!

Encore merci!

Sujet clos

CSS et mise en forme, CSS3

[Résolu] Menu horizontal qui passe sur deux lignes