28221 sujets

CSS et mise en forme, CSS3

Problème de menu

salut

je voudrais que les textes (menu) soit aligné verticallement sur cette page
http://pages.videotron.com/borland/rtu/rtu.htm

avec konqueror ça fonctionne bien mais avec firefox ils sont aligné de façon vertical

voici mon css - http://pages.videotron.com/borland/rtu/screen.css

body {
    margin: 5px; 
    padding: 5px; 
    font: 14px Verdana, sans-serif;
}

.conteneur{
    background: #EFEFEF;
}
        
h1{
    text-align:center;
}
ul {
    list-style-type: none; /* on supprime les puces, inutiles */
    width: 90%; /* précision pour Opera */
}

li {    
    float: left;
} /* on aligne les listes sur la gauche */

#menu  {
    background: #27408B;
    border: 1px solid #ffffff;
    width: 96%;
    margin-left: 2%;
}

#menu .logo{
    float: left; /* alignement du logo à droite */
    margin-left: 1%;
    width: 10%;
    margin-top:.5ex;
}
     
#menu .right a {
    float:right;
    width: 130px; /* on définit la taille du bouton de menu */
    height: 25px; /* on définit la hauteur du bouton de menu */
    display: block;
    text-align: center;
    text-decoration: none;
    margin: 1em;
    color: #ffffff;
    border: 1px solid white;
}
  
#menu .pied{
    clear:both;
} 
            
#menu .right a:hover {
    background: #ccc;
    border: 1px solid white; 
    color: #000000; 
}


voici mon html


       <div class="conteneur">
            <div id="menu">
                <div class="logo"><img src="logo.jpg" alt="logo goodyear"/></div>
                <ul class="right">
                    <li><a href="vue1t.htm">Vue1</a></li>
                    <li><a href="vue2t.htm">Vu2</a></a></li>
                    <li><a href="iotoolt.htm">IOTool</a></li>
                    <li><a href="doct.htm">Documentation</a></li>
                </ul>
                <div class="pied"></div>
            </div>
            ...
       </div>


une idée?
Modifié le 04 Dec 2004 - 18:44
Salut collinm et bienvenue sur le Forum Alsacréations ! Smiley lol

Premièrement, pour fonctionner, les liens doivent être à l'intérieur du BBCode :
[ url=http://pages.videotron.com/borland/rtu/rtu.htm]Le nom du lien ici[/url ]

Et non :
[ url=]http://pages.videotron.com/borland/rtu/rtu.htm[/url ]

Mais si tu ne veux pas donner un nom au lien, le BBCode n'est pas nécessaire :
h ttp://pages.videotron.com/borland/rtu/rtu.htm (sans l'espace dans le http)

C'est pratique de nommer un lien, surtout quand il est très long !

Deuxièmement, le lien vers ton site (dans ton profil et non dans ta signature) doit être précédé de h ttp:// (sans l'espace) pour fonctionner correctement.
Modifié le 04 Dec 2004 - 06:52
collinm a écrit :

je voudrais que les textes (menu) soit aligné verticallement sur cette page...

...avec konqueror ça fonctionne bien mais avec firefox ils sont aligné de façon vertical

Tu peux préciser ?

Ici ça me semble curieux : 

li { 
   [#red][b]float: left;[/b] [/#]
} /* on aligne les listes sur la gauche */
 
#menu .right a { 
   [#red][b]float: right;[/b] [/#]
   width: 130px; /* on définit la taille du bouton de menu */
   height: 25px; /* on définit la hauteur du bouton de menu */
   display: block; 
   text-align: center; 
   text-decoration: none; 
   margin: 1em; 
   color: #ffffff; 
   border: 1px solid white; 
}


Ici aussi : 

#menu .logo { 
   [#red][b]float: left; /* alignement du logo à droite */[/b] [/#] 
   margin-left: 1%; 
   width: 10%; 
   margin-top:.5ex; 
}

Suggestion de lecture :
Savoir utiliser et positionner les éléments en CSS
Modifié le 04 Dec 2004 - 07:17
pour les précisions une image vaut mille mots:
avec firefox, mozilla...
http://pages.videotron.com/borland/rtu/footermoz.png

avec konqueror:
http://pages.videotron.com/borland/rtu/footerkonqueror.png


j'ai pris ça sur le site ici:

http://www.alsacreations.com/articles/commentaires/


je vais essayer de mettre d'aligner le texte vers la gauche pour voir si ça résoudrait le problème


en mettant les float à left, le problème est réglé
Modifié le 05 Dec 2004 - 00:47
Sujet clos
Aller à