28234 sujets

CSS et mise en forme, CSS3

Différence horizontal/vertical dans les menus d'alsacréations

bonsoir à tous

juste une petite question... je n'arrive pas à trouver quel est le code css qui fait que dans un cas le menu s'affiche horizontalement et dans l'autre verticalement...

si quelqu'un peut m'aider à comprendre...

merci beaucoup
A mon avis tu parles des menus fait grâce a des listes ul

et bien il suffit de rajouter dans 


li{
float: left;
}


dans le bon id ou la bonne classe !

tu peux mettre le lien ou directement le code, ce serait mieux !
Modifié le 14 Dec 2004 - 19:34
oui c'est bien ça... désolé pour le lien ou le code oublié...

en fait je souhaiterai pouvoir utiliser le code :

<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
ul#menu li ul{
  display:none;
}

ul#menu li:hover>ul{
  display:block;
}

ul#menu{
  float:left;
}

ul#menu,
ul#menu ul{
  background:#FFCCCC;
  border:1px solid #990000;
  list-style:none;
  margin:0px;
  padding:0px;
  width:148px;
  _width:150px;
}

ul#menu ul{
  position:absolute;
  top:-1px;
  left:148px;
}

ul#menu li{
  position:relative;
  margin:0px;
  padding:0px;
  _display:inline;
}

ul#menu a{
  display:block;
  width:100%;
  color:#000000;
  text-decoration:none
}

ul#menu a:hover{
  background:#000000;
  color:#FFFFFF;
}

p{
  margin-left:170px;
}
</style>
<script type="text/javascript">
function hover(obj){
  if(document.all){
    UL = obj.getElementsByTagName('ul');
    if(UL.length > 0){
      sousMenu = UL[0].style;
      if(sousMenu.display == 'none' || sousMenu.display == ''){
        sousMenu.display = 'block';
      }else{
        sousMenu.display = 'none';
      }
    }
  }
}

function setHover(){
  LI = document.getElementById('menu').getElementsByTagName('li');
  nLI = LI.length;
  for(i=0; i < nLI; i++){
    LI[i].onmouseover = function(){
      hover(this);
    }
    LI[i].onmouseout = function(){
      hover(this);
    }
  }
}
</script>
</head>
<body onload="setHover()">
<ul id="menu">
  <li>
    <a href="#">Articles</a>
    <ul>
     <li><a href="#">CSS</a></li>
     <li><a href="#">JavaScript</a></li>
     <li><a href="#">PHP</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Téléchargement</a>
    <ul>
     <li><a href="#">Logiciels</a></li>
     <li><a href="#">Musique</a></li>
     <li><a href="#">Films</a></li>
    </ul>
  </li>
</ul>
</body>
</html>

que j'ai trouvé sur le site http://www.ibilab.net/webdev/articles/CSS/creer-menus-cascade-simple-4.htm

mais je n'arrive pas à trouver où positionner le fameux 
float:left;
pour que j'obtienne un menu horizontal...
et j'ai essayé de comparer sur le site alsacreations les 2 scripts de menu horizontal et vertical qui sont proposés... en vain...

quelqu'un voit-il ce que je dois modifier pour adapter le code pour obtenir le menu horizontal?


merci à tous[/i][/i]

ul#menu li{
  float: left;
  position:relative;
  margin:0px;
  padding:0px;
  display:inline;
}


ici à première vue ! et il faut retirer "_" devant "display", a mon avis, jen ne l'ai jaimais utilisé dans une CSS devant les déclarations de propriétés Smiley cligne
Mais bon, là, ya des gens qui ici qui savent peut être si c'est utilisé, en tout cas je ne vois pas l'utilité et je pense que ça créé une erreur !
DarkNeo a écrit :
ici à première vue ! et il faut retirer "_" devant "display", a mon avis, jen ne l'ai jaimais utilisé dans une CSS devant les déclarations de propriétés Smiley cligne
Mais bon, là, ya des gens qui ici qui savent peut être si c'est utilisé, en tout cas je ne vois pas l'utilité et je pense que ça créé une erreur !

C'est un hack. Plus d'explications sur cette page:
http://wellstyled.com/css-underscore-hack.html (via Fastclemmy)
Et dans ce post:
http://forum.alsacreations.com/topic.php?fid=4&tid=453&p=1
malheureusement ça ne marche pas ...

est ce qu'il n'y a a pas dans ce code une partie de code css qui annule le fait de mettre le float;meft???

<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
ul#menu li ul{
  display:none;
}

ul#menu li:hover>ul{
  display:block;
}

ul#menu{
  float:left;
}

ul#menu,
ul#menu ul{
  background:#FFCCCC;
  border:1px solid #990000;
  list-style:none;
  margin:0px;
  padding:0px;
  width:148px;
  _width:150px;
}

ul#menu ul{
  position:absolute;
  top:-1px;
  left:148px;
}

ul#menu li{
  float:left;
  position:relative;
  margin:0px;
  padding:0px;
  _display:inline;
}

ul#menu a{
  display:block;
  width:100%;
  color:#000000;
  text-decoration:none
}

ul#menu a:hover{
  background:#000000;
  color:#FFFFFF;
}

p{
  margin-left:170px;
}
</style>
<script type="text/javascript">
function hover(obj){
  if(document.all){
    UL = obj.getElementsByTagName('ul');
    if(UL.length > 0){
      sousMenu = UL[0].style;
      if(sousMenu.display == 'none' || sousMenu.display == ''){
        sousMenu.display = 'block';
      }else{
        sousMenu.display = 'none';
      }
    }
  }
}

function setHover(){
  LI = document.getElementById('menu').getElementsByTagName('li');
  nLI = LI.length;
  for(i=0; i < nLI; i++){
    LI[i].onmouseover = function(){
      hover(this);
    }
    LI[i].onmouseout = function(){
      hover(this);
    }
  }
}
</script>
</head>
<body onload="setHover()">
<ul id="menu">
  <li><a href="#">Accueil</a></li>
  <li><a href="#">Articles</a>
    <ul>
     <li><a href="#">CSS</a></li>
     <li><a href="#">JavaScript</a></li>
     <li><a href="#">PHP</a></li>
    </ul>
  </li>
  <li><a href="#">Téléchargement</a>
    <ul>
     <li><a href="#">Logiciels</a></li>
     <li><a href="#">Musique</a></li>
     <li><a href="#">Films</a></li>
    </ul>
  </li>
</ul>
</body>
</html>
[/i][/i]
Stephan a écrit :
Pour présenter une liste horizontalement, il me semble logique d'utiliser :

li { 
   display: inline; 
}

Si on utilise des float, il faut quand même savoir pourquoi :
http://css.maxdesign.com.au/floatutorial/

[ Édité par Stephan (liens problématiques en fin de citation) ]


Oui, mais alors là on ne peut plus mettre de dimensions aux listes ce qui peut être utile dans certains cas, non!
Modifié le 14 Dec 2004 - 20:29
DarkNeo a écrit :

Oui, mais alors là on ne peut plus mettre de dimensions aux listes ce qui peut être utile dans certains cas, non!

Dans "certains" cas. Est-ce le cas ici ?
Sujet clos
Aller à