2 listes différentes sur une feuille de style

Développement, conception de sites web, PHP, (X)HTML, ASP, Ajax, CSS, Javascript, Flash, MySQL, et autres ont leurs entrées dans cette section. On peut aussi parler d'hébergement, de maintenance, de sécurité...

Modérateur: Modérateurs

2 listes différentes sur une feuille de style

Messagepar Renard » 19 Juin 2011 16:37

Bonjour !
Je suis en train de mettre à jour mon site personnel et j'essaye d'utiliser une feuille de style. Tout se passe bien, mais au moment de vouloir insérer deux listes différentes sur une même page, ça coinçe !

Une liste "horizontale" entre en conflit avec une liste "verticale"

Voilà le code de la feuille de css qui fâche:

ul{list-style-type:none;
text-decoration:none;
text-align:center;
}

li {display:inline;
margin: 20px;
font-size:15px;
}



:arrow: Sans ce code mes listes se présentent comme une liste à puce standards, aussi celle du haut !

:arrow: Avec ce code, j'obtiens bien comme je veux une liste agencée horizontalement, mais malheureusement la liste qui suit en dessous est aussi horizontale, ce que je ne veux pas...

ça fait tout l'après-midi que je me bagarre avec ça mais je ne trouve pas. J'ai l'impression que je pourrais utiliser une class, mais je ne vois pas trop comment !
Quelqu'un pourrait-il m'aider ?
Bien amicalement,
Renard
Avatar de l’utilisateur
Renard
Super Libellulien
Super Libellulien
 
Messages: 2508
Inscription: 18 Juin 2005 15:31
Localisation: Lausanne

Re: 2 listes différentes sur une feuille de style

Messagepar Falkra » 19 Juin 2011 16:42

UL espace accolade ?
Avatar de l’utilisateur
Falkra
Admin libellules.ch
Admin libellules.ch
 
Messages: 25882
Inscription: 30 Jan 2005 13:44
Localisation: 127.0.0.1

Re: 2 listes différentes sur une feuille de style

Messagepar Renard » 19 Juin 2011 16:47

Merci pour ta promte réaction.
J'ai donc remis l'espace accolade
Mais ça n'a pas apporté de solution ...
Bien amicalement,
Renard
Avatar de l’utilisateur
Renard
Super Libellulien
Super Libellulien
 
Messages: 2508
Inscription: 18 Juin 2005 15:31
Localisation: Lausanne

Re: 2 listes différentes sur une feuille de style

Messagepar Falkra » 19 Juin 2011 16:51

Tu as fait CTRL+F5 ? ^^

Si le site ou la page est en ligne poste l'url stp. :)
Avatar de l’utilisateur
Falkra
Admin libellules.ch
Admin libellules.ch
 
Messages: 25882
Inscription: 30 Jan 2005 13:44
Localisation: 127.0.0.1

Re: 2 listes différentes sur une feuille de style

Messagepar Renard » 19 Juin 2011 17:04

Je vais essayer de mettre en ligne ce qui est prêt et même la page que je n'arrive pas à régler... patience et merci
Bien amicalement,
Renard
Avatar de l’utilisateur
Renard
Super Libellulien
Super Libellulien
 
Messages: 2508
Inscription: 18 Juin 2005 15:31
Localisation: Lausanne

Re: 2 listes différentes sur une feuille de style

Messagepar Renard » 19 Juin 2011 17:10

Voilà tout est en ligne
La page qui déconne c'est : CV (une liste horizontale, une liste verticale normale)

Merci !
Bien amicalement,
Renard
Avatar de l’utilisateur
Renard
Super Libellulien
Super Libellulien
 
Messages: 2508
Inscription: 18 Juin 2005 15:31
Localisation: Lausanne

Re: 2 listes différentes sur une feuille de style

Messagepar Falkra » 19 Juin 2011 17:26

Bon, en horizontal moi, je n'aime pas, mais question de goûts, et les UL ont text-align:center; alors ça fait bizarre, surtout que les points forts ne sont pas dans le même style (liste à puces), du coup ça fait une différence, une fois c'est centré, une fois non, etc. J'harmoniserais plutôt tout ça, pour un CV.

Avec ce code, j'obtiens bien comme je veux une liste agencée horizontalement, mais malheureusement la liste qui suit en dessous est aussi horizontale, ce que je ne veux pas...
Ok, j'ai pigé là en voyant. La liste en dessous doit être comment ?

Si tu fais ton code CSS pour UL et LI ça l'affecte à chaque UL et LI de toute la page. Tu n'es pas obligé d'utiliser UL et LI partout par contre. ;)
Avatar de l’utilisateur
Falkra
Admin libellules.ch
Admin libellules.ch
 
Messages: 25882
Inscription: 30 Jan 2005 13:44
Localisation: 127.0.0.1

Re: 2 listes différentes sur une feuille de style

Messagepar Renard » 21 Juin 2011 10:33

Cher Falkra !

http://www.patricecharles.ch/CV.htm

Voici enfin un CV à peu près comme je le veux. J'ai finalement opté pour le présenter sous la forme d'un tableau car la gestion de deux listes avec des styles différents m'a parut plus ou moins impossible dans une seule feuille CSS. Mais je suis sur qu'avec une "class" quelque part ça devrait jouer.

Reste encore à régler: la largeur des colonnes ainsi que peut être la couleur de fond !

A part ça, pour l'instant, je pense garder ma navigation comme je l'ai présentée, horizontalement, en fait parce qu'elle est plutôt simple. Peut-être qu'une fois je changerai ça !

A+
Bien amicalement,
Renard
Avatar de l’utilisateur
Renard
Super Libellulien
Super Libellulien
 
Messages: 2508
Inscription: 18 Juin 2005 15:31
Localisation: Lausanne

Re: 2 listes différentes sur une feuille de style

Messagepar Falkra » 22 Juin 2011 10:12

Je trouve ça carrément plus pro(pre). :super:

Pour les classes, tu peux affecter à une div précise des UL et LI différents, au lieu d'agir sur tous.

Ici tu agis sur tout :

Code: Tout sélectionner
ul{list-style-type:none;
text-decoration:none;
text-align:center;
}

li {display:inline;
margin: 20px;
font-size:15px;
}


Si tu fais par exemple :
Code: Tout sélectionner
div ul{list-style-type:none;
text-decoration:none;
text-align:center;
}

div li {display:inline;
margin: 20px;
font-size:15px;
}
Seules les balises LI et UL dans une DIV seront affectées. ;)
Et ce n'est pas forcément une div, tu peux nommer ce que tu veux, par exemple au lieu de DIV tu mets "maliste".

Code: Tout sélectionner
maliste ul{list-style-type:none;
text-decoration:none;
text-align:center;
}

maliste li {display:inline;
margin: 20px;
font-size:15px;
}


et dans ton code HTML au lieu de <DIV></DIV> tu encadres ta liste avec

Code: Tout sélectionner
<div class="maliste">
<ul>
<li> point 1</li>
<li> point 2</li>
</ul>
</div>
Avatar de l’utilisateur
Falkra
Admin libellules.ch
Admin libellules.ch
 
Messages: 25882
Inscription: 30 Jan 2005 13:44
Localisation: 127.0.0.1

Re: 2 listes différentes sur une feuille de style

Messagepar Renard » 22 Juin 2011 10:31

Merci beaucoup !

Je garde tes codes sous le coude au cas où j'en aurai besoin plus tard. Pour l'instant je garde mon tableau !
Bien amicalement,
Renard
Avatar de l’utilisateur
Renard
Super Libellulien
Super Libellulien
 
Messages: 2508
Inscription: 18 Juin 2005 15:31
Localisation: Lausanne


Retourner vers Développement, conception de sites web

Qui est en ligne

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