par
Aureusms » 21 août 2006, 18:39
Bonjour à toute la communauté,
Je viens souvent m'instruire ici de temps en temps mais la je pèche... J'ai créé une liste à puce sur mon site WEB interne pour pouvoir crée des boutons horizontaux. (idée glanée dans un bouquin que j'ai acheté : CSS2). Voici le code :
Code : Tout sélectionner
<div class="nav">
<ul id="bouton_navigation">
<li class="rubriques">
<a href="index.php?" class="first-rub" title="Accueil">Accueil</a>
</li>
<li class="rubriques">
<a href="" class="first-rub" title="Se déconnecter">Racoon : Se deconnecter</a>
</li>
<li class="rubriques">
<a href="" class="first-rub" title="Voir mon Profil">Mon profil</a>
</li><li class="rubriques">
<a href="" class="first-rub" title="News : Visualiser les news">Nouveautés</a>
</li><li class="rubriques">
<a href="" class="first-rub" title="Fichiers : Visualier les fichiers">Téléchargement</a>
</li><li class="rubriques">
<a href="" class="first-rub" title="FAQ : Visualiser les FAQs">FAQ</a>
</li><li class="rubriques">
<a href="" class="first-rub" title="Photos : Visualiser les photos">Photothèque</a>
</li><li class="rubriques">
<a href="" class="first-rub" title="Forum : Visualiser le forum">Forum libre</a>
</li>
</ul>
</div>
J'ai allégé un peu le code pour que vous puissiez me comprendre.
Ce code a été récupéré du net et je l'ai intégré déjà comprendre comment cela fonctione... Il est lié à ces CSS :
Code : Tout sélectionner
.nav
{
BORDER-TOP: #1266BE 0px solid;
BORDER-BOTTOM: #1266BE 1px solid;
BORDER-LEFT: #1266BE 1px solid;
BORDER-RIGHT: #1266BE 1px solid;
HEIGHT: 25px;
BACKGROUND-image: url(haut_nav.gif);
}
.nav ul
{
padding: 0em ;
margin : 0;
list-style-type: none;
/*background-color: #036; */
color: #FFF;
width: 100%;
font: normal 80% arial, helvetica, sans-serif;
text-align: center;
}
.nav li {
display:inline;
}
.nav li a
{
text-decoration: none;
background-color: silver;
color: #000;
padding: 0em 1em;
border: 1px solid #000;
vertical-align:middle;
}
.nav li a:hover
{
background-color: #369;
color: #fff;
}
Comme je vous indiqué que le code est intégré et venant du net, mes questions (il y en a deux) sont (à mon avis pour vous) très simple :
Est ce que les classes et id "rubriques", "First_rub", "boutons navigation" ,...servent à quelque chose (à mon avis juste à augmenter la taille en ko)?
Lorsque l'utilisateur réduit son horizontal d'écran, les boutons se scindent lorqu'ils sont à plusieurs mots séparés d'espaces (ex "Forum libre"). Peux - t - on réduire cet effet ?
J'ai pensé à déclarer les "li a" en mode display : block mais cela n'a pas d'effet.
Note importante : j'ai 3 mois de CSS dans les doigts et tous le monde travaillent sous FF. (j'ai bani IE...)