18041 sujets

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

Probleme %

Bonjour j'ai quasiment tout mis en % au niveau des largeurs mais quand je réduis ma taille de fenêtre la barre disparaît un peu sur la droite ;-/

Et aussi quand je passe au dessus des cases en grises si vous regardez bien il y a un trait vert qui apparaît sur la droite de ladite case et pourtant si on zoome puis dé-zoome sur la page, le trait latéral droit disparaît !
j'en deviens fou et j'imagine que je vais devoir concevoir ma barre... voici mon code:

<html>
<head>
 <meta charset="utf-8" />
		<link rel="stylesheet" href="barre.css" />
<link rel="stylesheet" href="mobilebarre.css" media="@media all and (max-width:1080px)"/>
</head>
<body>
<div id="menu">
<ul>
<li style="width:5%"><a href="#">home</a></li>
  <li><a href="#">Politique</a>
  <ul>
      <li><a href="#">Présidence</a></li>
      <li><a href="#">Assemblée</a></li>
      <li><a href="#">Sénat</a></li>
	  <li><a href="#">Ministère</a></li>
	  <li><a href="#">Départemental</a></li>
	  <li><a href="#">Régional</a></li>
	  <li><a href="#">International</a></li>
    </ul></li>
  <li><a href="#">???</a>
    <ul>
      <li><a href="#">International</a></li>
      <li><a href="#">France</a></li>
      <li><a href="#">Europe</a></li>
	  <li><a href="#">Bourses</a></li>
	  <li><a href="#">Entreprises</a></li>
    </ul>
  </li>
  <li><a href="#">Technologie</a>
  <ul>
      <li><a href="#">Bons plans</a></li>
	  <li><a href="#">High-Tech</a></li>
      <li><a href="#">Smartphones</a></li>
      <li><a href="#">Tablettes</a></li>
	  <li><a href="#">Ordinateurs</a></li>
	  <li><a href="#">Audio-Visuel</a></li>
    </ul></li>
  <li><a href="#">Société</a>
    <ul>
      <li><a href="#">Musique</a></li>
      <li><a href="#">Mode</a></li>
      <li><a href="#">People</a></li>
	  <li><a href="#">Courants</a></li>
	  <li><a href="#">éducation</a></li>
    </ul onfocus="z-index='18'";></li>
  <li><a href="#">Sciences</a>
  <ul onfocus="z-index='18'";>
      <li><a href="#">Futur</a></li>
      <li><a href="#">Découvertes</a></li>
      <li><a href="#">Travaux</a></li>
	  <li><a href="#">études</a></li>
    </ul></li>
  <li><a href="#">Santé</a>
  <ul>
      <li><a href="#">Maladies</a></li>
      <li><a href="#">Découvertes</a></li>
	  <li><a href="#">études</a></li>
    </ul></li>
  <li><a href="#">Sport</a>
  <ul>
      <li><a href="#">Football</a></li>
      <li><a href="#">Tennis</a></li>
      <li><a href="#">Rugby</a></li>
	  <li><a href="#">Natation</a></li>
	  <li><a href="#">Athlétisme</a></li>
	  <li><a href="#">Handball</a></li>
      <li><a href="#">Basket</a></li>
      <li><a href="#">Cyclisme</a></li>
	  <li><a href="#">Nautiques</a></li>
	  <li><a href="#">Auto/Moto</a></li>
    </ul></li>
  <li><a href="#">Culture</a>
  <ul>
      <li><a href="#">Films</a></li>
      <li><a href="#">Livres/BD</a></li>
      <li><a href="#">Auteurs</a></li>
	  <li><a href="#">Cinéastes</a></li>
	  <li><a href="#">Avis</a></li>
	  <li><a href="#">Jeux</a></li>
      <li><a href="#">Sorties</a></li>
      <li><a href="#">Cinéma</a></li>
	  <li><a href="#">Gastronomie</a></li>
    </ul></li>
	<li><a href="#">Dossiers</a></li>
  </ul>
  <form action="" class="formulaire">
               <input class="champ" type="text" value="Search..." onfocus="if(this.value == this.defaultValue) this.value = ''" onblur="if(this.value == '') this.value == this.defaultValue"style="border:0px" style="background-color:transparent"/>

                    <input class="bouton" type="button" value=" " />
  
					
					

 </form>
  <br />
<br />
</div>

</body>
<html>


et CSS:
#menu ul {
 list-style-type:none;
 text-align:center;
 display: block;
 padding: 0;
 width: 90%;

 }
#menu > ul >li { width: 10%; }
#menu li {
 float:left;
 padding:0;
 }
#menu>ul>li { background-color: rgb(50, 210, 180);}
#menu li a {
 display:block;
 color:white;
 text-decoration:none;
 padding:5px;
 text-align: center;
 overflow: hidden;
 line-height: herit;
  vertical-align: middle;
 }
 #menu >ul>li>ul>li> a {
 display:block;
 color:white;
 text-decoration:none;
 padding:0px;
 text-align: center;
 overflow: hidden;
 line-height: 35px;
  vertical-align: middle;
  position: relative;
  padding-top: -30%;
 }
#menu li a:hover {
 background-color: rgb(50, 180, 210);
 width: herit;
 }
 #menu ul li ul {
 display:none;
 }
 #menu ul li:hover ul {
 display:block;
 }
#menu li:hover ul li {
 float:none;
 }
 #menu{
 width: 100%;
 position: fixed;
 top : -16px;
 left : 0px;
}
#menu li li {
   max-height:34px;
   transition: all .5s;
   border-radius:0;
   width: 110.5%;
   background-image : url(flou.png);
   box-shadow: none;
   border:none;
   margin:0;
   top: 0%;
   overflow: hidden;
   background-color: inherit;
   background-color: grey;
}
#menu {
font-family: 'Oswald', sans-serif;
}
#menu #searchbar{width: 21%;  display: block;
 padding: 0;}
#searchbar {font-family: 'Oswald', sans-serif;}
.formulaire{display: block-inline;}
.formulaire .champ { height:32.15px; margin-left:0px; width:11%;}
.formulaire .bouton { background-image: url(searchbarfinal.png);height: 31.6px;border: none;padding-top: 0px;width: 3%;margin-left: -3px;}
.formulaire .bouton:hover { background-image : url(searchbarfinalhover.png) }
.formulaire .champ:focus{ outline:none; }
.formulaire .bouton:focus{ outline:none;}


Merci d'avance <3
Sujet clos
Aller à