[CSS] propriété nécessaire ?

Marsh Posté le 24-09-2005 à 14:55:33

Hi all,

je regardais les listes pré-concues de maxdesign et il y a certaines choses que je ne saisis pas bien.

par exemple dans le cas de cette liste : http://css.maxdesign.com.au/listamatic/vertical10.htm

je ne comprends pas pourquoi cette ligne

Citation :

html>body #navcontainer li a { width: auto; }

est nécessaire (et elle est apparemment nécessaire, si on l'enlève, il y a une marge qui se rajoute à droite).

Quelqu'un peut-il m'expliquer pourquoi c'est comme ça, si c'est pour éviter un bug ou bien une subtilité du CSS que je n'ai pas saisie ?

Thanks

Message édité par wannamaker le 24-09-2005 à 14:56:14

Reply

Marsh Posté le 24-09-2005 à 14:55:33

Reply

Marsh Posté le 24-09-2005 à 18:10:30

Bon, j'ai fais une page intégrant la liste citée ci dessus et je fais face à quelques petits problèmes.

La page en question:

Citation :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>
<title>Test CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">

body {
background: rgb(154,168,182);
text-align: center;
padding: 0px;
margin: 0px;
}

.conteneur {
width: 100%;
}

#main {
margin: 10px auto;
width: 80%;
border: 1px black solid;
}

h1,h2,h3 {
margin: 0px;
padding: 1em;
border: 1px black none;
border-bottom-style: solid;
}

h1 {
background: rgb(200,200,200);
font: normal 25px sans-serif;
}

h2 {
background: rgb(190,190,190);
font: normal 16px sans-serif;
}

h3 {
background: rgb(200,200,200);
font: normal 16px sans-serif;
}

p {
margin: 0px;
padding: 1em;
}

/* Liste */

#navcontainer {
float: left;
width: 20%;
border: 1px black solid;
border-left: none;
padding: 0px;
margin-top: 20px;
font: bold 12px sans-serif;
}

#navcontainer ul {
list-style: none;
border: none;
margin: 0px;
padding: 0px;
}

#navcontainer li {
margin: 0px;
text-indent: 15px;
text-align: left;
}

#navcontainer li a {
display: block;
line-height: 32px;
vertical-align: middle;
border-left: 15px solid rgb(38,75,113);
background-color: rgb(230,230,230);
color: rgb(140,140,140);
text-decoration: none;
width: 100%;
}

html>body #navcontainer li a {
width: auto;
}

#navcontainer li a:hover {
border-left: 15px rgb(245,153,14) solid;
background-color: rgb(210,210,210);
color: black;
}

</style>

</head>
<body>

<div class="conteneur">
<div id="main">
<h1>Titre de la page</h1>
<h2>page de code</h2>
<h3>hop</h3>
<div id="navcontainer">
<ul>
<li><a href="#">Menu truc 1</a></li>
<li><a href="#">Menu truc 2</a></li>
<li><a href="#">Menu truc 3</a></li>
<li><a href="#">Menu truc 4</a></li>
<li><a href="#">Menu truc 5</a></li>
</ul>
</div>
<p>plop</p>
<p>plop</p>
<p>plop</p>
<p>plop</p>
</div>
</div>

</body>
</html>

Pour faire simple:

J'ai viré les bordures d'espacement entre les <li> (ça ne fonctionnait pas sous IE). Actuellement j'arrive à quelque chose de potable sous presque tous les navigateurs, sauf IE qui m'affiche une marge d'un pixel entre le cadre du navcontainer et le premier <li>.

Un grand merci à celui qui saura m'aider à résoudre ça

(soyez indulgents, je me suis mis récemment au codage 'clean')

Reply

Marsh Posté le 24-09-2005 à 22:09:33

personne ne sait m'aider ?

Reply

Marsh Posté le 24-09-2005 à 22:27:11

Rassure toi, le problème ne vient pas de toi, mais d'IE. Essaye d'ajouter
height: 32px; dans #navcontainer li.

Reply

Marsh Posté le 24-09-2005 à 22:35:41

ça marche :love: !

Peut-être que quand j'aurai codé pas mal en CSS j'apprendrai à amadouer IE (et dire que c'est le navigateur le + utilisé, c'est désolant )

Reply

Marsh Posté le 25-09-2005 à 09:27:20

C'est pareil pour les OS, windows n'est pas forcément le plus stable :whistle:

PS : Attention, j'ai pas dit que macOS ou linuix étaient plus simple hein !

---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be

Reply

[CSS] propriété nécessaire ?

Sujets relatifs:

Leave a Replay