Version complète: sur le forum Webmaster Hub : Gérer une liste
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
NorSeb
jeudi 29 décembre 2005 à 11:02
Bonjour,

Mon titre est un peu pompeux... hypocrite.gif

Mon apprentissage des CSS est très long, je ne fait pas que ca malheureusement. Pour le moment, je suis sur une liste dont j'aimerais que chaque ligne ne soit pas à la suite de la précédente mais à la ligne justement.

Pour me faire mieux comprendre voici un bout de code :

- La liste en question (J'y colle le CSS associé, ne vous formalisez pas sur la présentation)
CODE


<div id="navigation">
<h3>Navigation rapide</h3>
<ul>
<li><a href="">Dernière réunion</a></li>
<li><a href="">Forum</a></li>
<li><a href="">Annuaire</a></li>
<li><a href="">Actualité</a></li>
</ul>
</div> <!-- Fin #navigation //-->


********************************
Le CSS
********************************
#identification, #navigation {
background: #E2E2E2;
margin: 1px 0 10px 0;
padding:2px 10px 2px 10px;
float: left;
width: 220px;
font-weight:normal;
font-size:0.8em;
}

#identification h3, #navigation h3 {
margin:0;
width:100%;
height:18px;
font-weight:bold;
font-size:1.5em;
color:#FFFFFF;
border: 1px solid #b9a773;
padding-top:2px;
text-align:center;
background: #3f5a80 url(../images/puce.gif) no-repeat 4px;
}


#identification fieldset, #identification form {
border:0;
}

#identification label {
float:left;
width:9em;
text-align:right;
clear : both;
}

#navigation ul {
list-style-type:square;
list-style-position:inside;
}


Comment faire pour que mes liens soient les uns sous les autres ? Avec un <br /> ??
sarc
jeudi 29 décembre 2005 à 11:13
Salut wink.gif

Tu m'inquiètes... Par défaut, chaque <li> passe à la ligne, c'est en modifiant un peu le CSS qu'on peut avoir une liste sur la même ligne... et je ne vois pas dans ton CSS ce qui pourrait faire ça ! Tu as l'url en question ?

Sinon, ce que je fais quand j'ai une erreur de positionnement, j'utilise ma webdevelopper et je supprime une moitié du CSS... Si ça marche mieux, c'est que l'erreur se trouve dans cette moitié, donc je supprime un quart, etc... A la fin, je situe l'erreur, et je peux donc chercher à comprendre pourquoi elle se trouve là : c'est ce que tu devrais faire !

Mais par contre, j'ai beau regarder ton CSS, rien ne devrait mettre les li les uns à la suite des autres IMSTP6.gif unsure.gif
NorSeb
jeudi 29 décembre 2005 à 11:17
CITATION(sarc @ jeudi 29 décembre 2005, 11h13)
Mais par contre, j'ai beau regarder ton CSS, rien ne devrait mettre les li les uns à la suite des autres  IMSTP6.gif  unsure.gif
*

C'est marrant parce qu'en 5 minutes je suis passé par le doute : "ma question n'est pas complètement stupide" à "tiens non il ne semble pas" biggrin.gif

Je vérifie tout de suite le reste de ma feuille de style...

[edit]Le site est en local... Je n'ai pas la possibilité de le mettre en ligne pour le moment IMSTP5.gif [/edit]
sarc
jeudi 29 décembre 2005 à 11:21
A ma connaissance, le CSS qui peut mettre des li en lignes est :
- float:right ou float:left
ou
- display:inline

Si tu as ça quelque part dans ton CSS, c'est gagné.. sinon, pas encore tongue.gif
NorSeb
jeudi 29 décembre 2005 à 11:24
J'ai effectivement un float:left; dans le style de la div (#navigation)... Ca peut venir de la ?

PS : pour tester j'ai ajouté un <br/> après </li> et il y a bien un retour à la ligne mais sur la même ligne IMSTP6.gif
sarc
jeudi 29 décembre 2005 à 11:29
non le float sur ta div n'influera pas sur ta liste, c'est pas possible...
Tu as testé un peu ta webdeveloper barre ? biggrin.gif
Ne rajoute pas de <br />, malheureux, la sémantique alors ! tongue.gif
Non sérieusement, si tu trouves pas, mets ton CSS en entier, ainsi que ton html si possible et je vais tester chez moi... wink.gif
NorSeb
jeudi 29 décembre 2005 à 11:35
CITATION(sarc @ jeudi 29 décembre 2005, 11h29)
non le float sur ta div n'influera pas sur ta liste, c'est pas possible...
Tu as testé un peu ta webdeveloper barre ? biggrin.gif

Je me disais aussi...
webdeveloper barre : Késako ? blink.gif

CITATION
Non sérieusement, si tu trouves pas, mets ton CSS en entier, ainsi que ton html si possible et je vais tester chez moi... wink.gif
*

Tes désires sont des ordres...

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TITRE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css/css.css" />
</head>
<body id="top">
<div id="conteneur">
<div id="header">
<a href="index.php">Groupe des utilisateurs</a>
</div>
<ul id=menu>
<li><a href="index.php">Accueil</a></li>
<li><a href="">Présentation</a></li>
<li><a href="">Actualité</a></li>
<li><a href="">Accès membres</a></li>
<li><a href="">Contact</a></li>
</ul>

<div id="contenu">
<p>
partie avec du contenu occupant le reste de la largeur
partie avec du contenu occupant le reste de la largeur
partie avec du contenu occupant le reste de la largeur
partie avec du contenu occupant le reste de la largeur
partie avec du contenu occupant le reste de la largeur
partie avec du contenu occupant le reste de la largeur
partie avec du contenu occupant le reste de la largeur
partie avec du contenu occupant le reste de la largeur
partie avec du contenu occupant le reste de la largeur
partie avec du contenu occupant le reste de la largeur
partie avec du contenu occupant le reste de la largeur
partie avec du contenu occupant le reste de la largeur
</p><p>partie avec du contenu occupant le reste de la largeur
partie avec du contenu occupant le reste de la largeur
partie avec du contenu occupant le reste de la largeur
partie avec du contenu occupant le reste de la largeur
partie avec du contenu occupant le reste de la largeur
partie avec du contenu occupant le reste de la largeur
partie avec du contenu occupant le reste de la largeur
partie avec du contenu occupant le reste de la largeur
partie avec du contenu occupant le reste de la largeur
partie avec du contenu occupant le reste de la largeur
partie avec du contenu occupant le reste de la largeur
partie avec du contenu occupant le reste de la largeur
partie avec du contenu occupant le reste de la largeur
</p>
</div>
<div id="identification">
<h3>Identification</h3>
<form action="" method=post>
<fieldset>
<label for="login">Login : </label><input type="text" name="login" size=15 /><br/>
<label>Mot de passe : </label><input type="text" name="password" size=15 value=""/><br/>
<label>&nbsp;</label>
<input type="submit" value="Se connecter">
</fieldset>
</form>
</div>
<div id="navigation">
<h3>Navigation rapide</h3>
<ul>
<li><a href="">Dernière réunion</a></li><br/>
<li><a href="">Forum</a></li><br/>
<li><a href="">Annuaire</a></li><br/>
<li><a href="">Actualité</a></li><br/>
</ul>
</div> <!-- Fin #navigation //-->
</body>
</html>

Et le CSS :
CODE

/* MENU */

#menu {

list-style-type: none;
margin-left:165px;
margin-top:-20px;
padding:0;
width: 586px;
height:30px;
}
li {float: left;}

#menu a {
width: 112px;
height: 17px;
float: left;
display: block;
text-align: center;
border: 1px solid gray;
margin:0;
margin-right:1px;
padding-top:3px;
text-decoration: none;
color: #000000;
background: #B9A773;
font-size:1em;
font-weight:bold;
}

#menu a:hover {
background: #3f5a80;
border: 1px solid gray;
color: #B9A773;
}


/* -------------------- */
/* SITE */
/* -------------------- */
#top {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;
}

#conteneur {
border: 1px solid #000000;
width: 760px;
margin: 8px auto;
padding: 0;
text-align: left;
line-height: 150%;
}


/* -------------------- */
/* ENTETE */
/* -------------------- */
#header {
width:760px;
height: 120px;
background: #FFF url(../images/titre/titre.gif) no-repeat;
}
#header a {
display: block;
text-indent: -9000px;
}
/*
.titre1 { float:left }
.titre2 { float:left}
*/

/* -------------------- */
/* CENTRE */
/* -------------------- */
#contenu {
float: right;
width: 510px;
margin-top: 0px;
font-weight:normal;
font-size:1em;
text-align:justify;
}

/* -------------------- */
/* MENU */
/* -------------------- */

#identification, #navigation {
background: #E2E2E2;
margin: 1px 0 10px 0;
padding:2px 10px 2px 10px;
float: left;
width: 220px;
font-weight:normal;
font-size:0.8em;
}

#identification h3, #navigation h3 {
margin:0;
width:100%;
height:18px;
font-weight:bold;
font-size:1.5em;
color:#FFFFFF;
border: 1px solid #b9a773;
padding-top:2px;
text-align:center;
background: #3f5a80 url(../images/puce.gif) no-repeat 4px;
}


#identification fieldset, #identification form {
border:0;
}

#identification label {
float:left;
width:9em;
text-align:right;
clear : both;
}

#navigation ul {
list-style-type:square;
}

a {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
color:#3f5a80;
text-decoration:underline;
}
a:hover {
text-decoration:underline overline;
}



input {
background-color:#b9a773;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight:bold;
margin-bottom:2px;
}

NorSeb
jeudi 29 décembre 2005 à 11:36
J'oublais : ca passe sous firefox mais sous IE (screugneugneu !)
sarc
jeudi 29 décembre 2005 à 11:45
CODE
li {float: left;}

Et bah alors, je t'avais pas demandé de chercher ça ? tongue.gif

CODE
#menu li {float: left;}

Avec ça, seul le li qui est contenu dans la div menu sera affecté, et donc ton autre liste marchera mieux wink.gif

Tu n'as pas le plugin firefox pour les développeurs ? Essentiel pourtant pour ceux qui veulent toucher au net tongue.gif
Il y en a une pour IE, mais j'ai toujours pas compris comment modifier correctement le CSS avec, donc bon... :/
NorSeb
jeudi 29 décembre 2005 à 11:47
Je n'ai qu'une seule chose à dire : BRAVO ! [edit]Et MERCI[/edit]

C'était évident en plus. IMSTP6.gif

Je vais tester la barre de ce pas ! biggrin.gif
sarc
jeudi 29 décembre 2005 à 11:50
Pas de problèmes, je suis là pour ça biggrin.gif
Pour la barre, tu verras, tu ne pourras pas être déçu, tu peux modifier ton CSS en temps réel, et donc trouver en 5 secondes la ligne qui merde tongue.gif
NorSeb
jeudi 29 décembre 2005 à 11:52
Excellent ! tongue.gif
Par contre, la version traduite ne semble pas compatible Firefox 1.5...Pas grave...
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.