CSS et boutons alignés horizontalement

Répondre

Consultez la formation au référencement naturel Google de WebRankInfo / Ranking Metrics

davidtennis
Nouveau WRInaute
 
Messages: 46
Inscription: Jeu Avr 05, 2007 22:15

CSS et boutons alignés horizontalement

Message le Mer Mai 09, 2007 5:02

Bonjour,

J'ai une bête question sur le CSS
Si on considère bêtement le code ci-dessous. celui ci affiche 3 boutons alignés verticalement.
Comment peut-on le modifier pour qu'il affiche les boutons horizontalement les uns à côté des autres ?

Merci

Code: Tout sélectionner
<html>
<head>

<style type="text/css">
div#menu {
    height: auto;
    width: 150px;
}
div#menu li {
    height: 30px;
    width: 125px;
    margin: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    text-align: center;
    line-height: 200%;
    list-style-type: none;
    background-image: url(testup.jpg);
    background-repeat: no-repeat;
}
div#menu li a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}
div#menu li a:link {
    color: blue:
}
div#menu li a:visited {
    color: #900;
}
div#menu li a:hover {
    font-weight: bold;
    color: red;
}
div#menu li a:active {
    font-weight: bold;
    color: red;
    background-image: url(testdown.jpg);
    background-repeat: no-repeat;
}
</style>
</head>


<body>

<div id="menu">
<ul>
<li><a href="link1.html">Lien1</a></li>
<li><a href="link2.html ">Lien2</a></li>
<li><a href="link3.html ">Lien3</a></li>
</ul>
</div>

</body>
</html>


[Edit HawkEye: [ code] & [ /code] :)]
Haut

keroin
WRInaute accro
WRInaute accro
 
Messages: 2299
Inscription: Sam Avr 29, 2006 16:33

Message le Mer Mai 09, 2007 5:14

=> http://css.alsacreations.com/Bases-et-i ... ses-en-CSS
Le 4e exemple peut être ? :wink:
Un float left et des magin et ça devrait faire l'affaire pour un affichage horizontale ...
Haut

SuperCureuil
WRInaute passionné
WRInaute passionné
 
Messages: 662
Inscription: Ven Mar 09, 2007 9:44

Message le Mer Mai 09, 2007 6:42

Hello,

Essaie un display:inline pour l'élément div#menu li a.

Au pire, si ça ne fonctionne pas, place ce display:inline sur div#menu li, ça devrait aller.

@++
Haut
davidtennis
Nouveau WRInaute
 
Messages: 46
Inscription: Jeu Avr 05, 2007 22:15

Message le Mer Mai 09, 2007 7:22

J'avais essayé de rajouter un
display: inline; dans l'un et l'autre puis dans les deux. Mais çe ne marche dans aucun cas...
Je ne vois pas pourquoi
Haut

CashAttitude
WRInaute discret
WRInaute discret
 
Messages: 52
Inscription: Jeu Mar 08, 2007 19:27

Message le Mer Mai 09, 2007 8:03

display:inline sur div#menu li, ca devrait marcher :)
Haut
davidtennis
Nouveau WRInaute
 
Messages: 46
Inscription: Jeu Avr 05, 2007 22:15

Message le Mer Mai 09, 2007 19:51

avec display:inline dans le div#menu li,
seul le "Lien1" est visible, et encore sans l'image de fond. Bref c'est loin d'être bon...
Haut

SuperCureuil
WRInaute passionné
WRInaute passionné
 
Messages: 662
Inscription: Ven Mar 09, 2007 9:44

Message le Mer Mai 09, 2007 20:02

Bête truc mais quand tu fais le display:inline sur le div#menu li, essaye de modifier aussi la largeur de ton conteneur, car 125 px c'est sans doute trop court pour tout afficher.
Haut
Répondre

Formation recommandée sur ce thème :

Formation Référencement naturel Google : apprenez une méthode efficace pour optimiser à fond le référencement naturel dans Google de façon durable... Formation animée par Olivier Duffez et Fabien Facériès, experts en référencement naturel.

Tous les détails sur le site Ranking Metrics : programme, prix, dates et lieux, inscription en ligne.

Lectures recommandées sur ce thème :

Consultez la description détaillée des produits ou services de Google suivants : Google Toolbar API



Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 0 invités

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group , traduction par phpBB-fr.com, mod SEO par phpbb-seo.com