[CSS- liste à puce - boutons ]

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...)

21 août 2006, 23:10

(j'ai bani IE...)

Très mauvaise idée : c'est pénible, mais ça représente encore pas loin de 80% des internautes lambda qui utilisent IE sans même savoir que ça s'appelle un navigateur, et l'internaute lambda se fout comme d'une guigne que tu programme dans n'importe quel langage, si le site est illisible parce que la mise en page n'a ni queue ni tête, il quittera ton site.

Ceci dit, tu devrais jeter un coup d'oeil ici, ça déborder un peu de ta demande, mais le sujet de base est dans le livre.

22 août 2006, 01:17

(j'ai bani IE...)
Très mauvaise idée : c'est pénible, mais ça représente encore pas loin de 80% des internautes

mon site WEB interne

Un intranet... donc si la boite est sous FF pas de problèmes majeur

(encore faut mettre tout le monde d'accord

)

22 août 2006, 09:03

Bonjour à vous deux,

Comme je suis le commercial et le service informatique au complet (petite boîte oblige) et que je en veux pas m'amuser à vérifier tel ou telle compatibilité avec IE ou FF, j'ai pris à mes yeux (et sutout grâce à la nombreuse doc sur le net) le browser le plus compatible avec les standards CSS. Ceci afin de commencer ensuite je migrerai peut-être sauf si crosoft adopte les standards...

22 août 2006, 09:08

Note avant : j'ai pas trouver [citer] alors j'ai fais un copier coller:

Bonjour Cyrano,

tu as écris : "Ceci dit, tu devrais jeter un coup d'oeil ici, ça déborder un peu de ta demande, mais le sujet de base est dans le livre.". J'ai été sur ce lien, ca m'a l'air pas mal. Je vais essayer ou vous tiens au couran. Merci encore.

22 août 2006, 20:58

Pour [citer], le bouton [Quote] est là pour ça

[CSS- liste à puce - boutons ]

Qui est en ligne