28234 sujets

CSS et mise en forme, CSS3

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

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)
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)
ah mince..vraiment désolé pr le code php!

vous me conseillez de mettre le white-space: nowrap dans mon ul#topnav ?
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.
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--------------------------------------->
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.
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)
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
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)
J'ai mis un 
style="overflow-x: hidden;"
dans le body ça a l'air de fonctionner!

Encore merci!
Sujet clos
Aller à