18041 sujets

Questions générales et questions de débutants

Galère de positionnement lors de réduction de la fenêtre

Bonjour à tous, aujourd'hui une nouvelle galère lorsque je réduis ma fenêtre j'aimerais que ma liste verticale sous "Politique" arrive toujours exactement dessous... déja que j'ai pas trouvé de solutions stables en plein écran je n'ose pas imaginer en fenetre réduite... (fin si mais je vous préviens c'est laid)..

voila merci de votre fidèle aide Smiley cligne

HTML: 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
		<link rel="stylesheet" href="style.css" />
        <title>Le Nouveau Journal</title>
    </head>
    <body style="background-color: rgb(238, 238, 238); z-index: 1">
	<p class="Titre" style="text-align: center">Le Nouveau Journal</p>
	<div id="conteneur">
      <div id="menu">
        <ul class="navmenu">
          <li class="tt"><a href="#">Politique</a>
           <ul class="ttd">
		    <li class="ttt"><a href="#">Présidence</a></li>
			<li class="ttt"><a href="#">Présidence</a></li>
			<li class="ttt"><a href="#">Présidence</a></li>
		   </ul>
		  </li>
          <li class="tt"><a href="#">Économie</a></li>
          <li class="tt"><a href="#">Insolite</a></li>
          <li class="tt"><a href="#">Sport</a></li>
          <li class="tt"><a href="#">Technologie</a></li>
          <li class="tt"><a href="#">Société</a></li>
          <li class="tt"><a href="#">International</a></li>
          <li class="tt"><a href="#">Sciences</a></li>
          <li class="tt"><a href="#">Dossier</a></li>
        </ul>
      </div>
<p>ppppppp<br />ppppp</p>
<p>ppppppp<br />ppppp</p>
<p>ppppppp<br />ppppp</p>
<p>ppppppp<br />ppppp</p>
<p>ppppppp<br />ppppp</p>
<p>ppppppp<br />ppppp</p>
<p>ppppppp<br />ppppp</p>
<p>ppppppp<br />ppppp</p>
<p>ppppppp<br />ppppp</p>
<p>ppppppp<br />ppppp</p>
<p>ppppppp<br />ppppp</p>
<p>ppppppp<br />ppppp</p>
<p>ppppppp<br />ppppp</p>
<p>ppppppp<br />ppppp</p>
<p>ppppppp<br />ppppp</p>
<p>ppppppp<br />ppppp</p>
<p>ppppppp<br />ppppp</p>
<p>ppppppp<br />ppppp</p>
<p>ppppppp<br />ppppp</p>
<p>ppppppp<br />ppppp</p>
<p>ppppppp<br />ppppp</p>
<p>ppppppp<br />ppppp</p>
<p>ppppppp<br />ppppp</p>
<p>ppppppp<br />ppppp</p>
<p>ppppppp<br />ppppp</p>
<p>ppppppp<br />ppppp</p>
<p>ppppppp<br />ppppp</p>
<p>ppppppp<br />ppppp</p>
<p>ppppppp<br />ppppp</p>
<p>ppppppp<br />ppppp</p>
<p>ppppppp<br />ppppp</p>
<p>ppppppp<br />ppppp</p>
<p>ppppppp<br />ppppp</p>
<p>ppppppp<br />ppppp</p>
<p>ppppppp<br />ppppp</p>
</div>
	</body>
</html>


.tout{z-index: 5;
overflow: scroll;
visibility: visible;}
body {
  font-family: sans-serif;
}

.navmenu {
  list-type: none;
  margin-left: auto;
  margin-right: auto;
  position: fixed;
  width: 100vw;
  top: 5vh;
}
.navmenu > .tt {
    display: inline-block;
    background: #efefef;
    border-top: 2vh solid transparent;
    transition: all 200ms ease-in-out;
	margin-right: -2vw;
	padding: 2vw;
}

.navmenu > .tt > a {
float: left;
    display: block;
    height: 3vh;
    color: #333;
    text-decoration: none;
}

.navmenu > .tt:hover {
    border-color: #b01f47;
    background: #dddddd;
}
 #menu ul li ul {
 display:none;
 position: absolute;
 top: 1vh;
 }
 #menu ul li:hover ul {
 display:inline-block;
 }
#menu li:hover ul li {
 float:none;
 }
 #menu li ul {
 position:absolute;
 top: 2vh;
 }
Bonjour Xjames56X,

A première vue, vous devez avoir un sacré casse-tête : vous utilisez différents pointeurs... pour pointer les mêmes choses Smiley langue

Ces pointeurs...
.navmenu > .tt {
    /*  ... */
}
#menu ul li:hover ul {
    /*  ... */
}

...peuvent être respectivement...
.navmenu .tt {
    /*  ... */
}
.navmenu .tt:hover .ttd {
    /*  ... */
}

... ou ...
.navmenu > li {
    /*  ... */
}
.navmenu > li:hover > ul {
    /*  ... */
}

... ou encore ...
#menu > ul > li {
    /*  ... */
}
#menu > ul > li:hover > ul {
    /*  ... */
}


Vous vous retrouvez aussi avec...
 #menu ul li ul {
    display:none;
    position: absolute;
    top: 1vh;
 }

/* ... et plus loin ... */

#menu li ul {
    position:absolute;
    top: 2vh;
 }

Du coup #menu ul li ul prévaut sur #menu li ul :
top: 1vh; écrasera toujours top: 2vh; (même si ce dernier est écrit après).

Essayez de garder une cohérence et une philosophie commune dans vos pointeurs, il sera beaucoup plus facile pour vous de maintenir votre code, et de repérer les "télescopages".

Dernier point : attention aux unités vw, vh, vmin et vmax avec iOS ( http://caniuse.com/viewport-units ).

En l'attente de vos tests.
Bon code...
Administrateur
Bonjour,

HS : c'est la 2e fois que je te vois utiliser comme contenu fictif "ppppppppppp<br>ppppppppppp" et çaÿmal. Enfin pas optimal du tout : aucun vrai contenu ne ressemble à ça et tu risques de te prendre la tête sur des "erreurs" CSS qui n'existeront jamais parce que ce genre de mot n'existe pas Smiley cligne
C'est pour ça qu'on recommande d'utiliser lorem ipsum (ou du vrai texte en français, débat d'expert je passe Smiley smile ) ou mieux du schnapsum. Smiley lol
Le seul cas qu'on peut rencontrer, ce sont les URL à rallonge qui vont bien faire dépasser le texte du bloc où il se trouve. Perso je suis assez fan de word-wrap: break-word pour régler ça
Sujet clos
Aller à