Gérer une liste

NorSeb · 29 Décembre 2005

Bonjour,

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

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)



<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 · 29 Décembre 2005

Salut

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 :fou: :unsure:

NorSeb · 29 Décembre 2005

Mais par contre, j'ai beau regarder ton CSS, rien ne devrait mettre les li les uns à la suite des autres

<{POST_SNAPBACK}>

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"

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 :boude: [/edit]

Sarc · 29 Décembre 2005

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

NorSeb · 29 Décembre 2005

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 :fou:

Sarc · 29 Décembre 2005

non le float sur ta div n'influera pas sur ta liste, c'est pas possible...

Tu as testé un peu ta webdeveloper barre ?

Ne rajoute pas de <br />, malheureux, la sémantique alors !

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

NorSeb · 29 Décembre 2005

non le float sur ta div n'influera pas sur ta liste, c'est pas possible...
Tu as testé un peu ta webdeveloper barre ?

Je me disais aussi...

webdeveloper barre : Késako ? :blink:

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

<{POST_SNAPBACK}>

Tes désires sont des ordres...


<!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> </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 :


/* 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 · 29 Décembre 2005

J'oublais : ca passe sous firefox mais sous IE (screugneugneu !)

Sarc · 29 Décembre 2005

li {float: left;}

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

#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

Tu n'as pas le plugin firefox pour les développeurs ? Essentiel pourtant pour ceux qui veulent toucher au net

Il y en a une pour IE, mais j'ai toujours pas compris comment modifier correctement le CSS avec, donc bon... :/

NorSeb · 29 Décembre 2005

Je n'ai qu'une seule chose à dire : BRAVO ! [edit]Et MERCI[/edit]

C'était évident en plus. :fou:

Je vais tester la barre de ce pas !

Sarc · 29 Décembre 2005

Pas de problèmes, je suis là pour ça

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

NorSeb · 29 Décembre 2005

Excellent !

Par contre, la version traduite ne semble pas compatible Firefox 1.5...Pas grave...

Connexion

Gérer une liste

Sujets conseillés

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Veuillez vous connecter pour commenter