Bonjour à tous et à toutes,
Depuis peu, je m'initie au normes du W3C et de l'Accessibilité. Je suis conscient que la mise en page en tableau ne vaut pas grand chose et je cherche à améliorer ma façon de faire.
Mais bon, depuis, j'ai toujours le même problème. À chaque fois que j'ai une DIv aligner a gauche pour le menu et une a droite pour le texte, je tente de placer des LI ou UL dans la zone centrale et il se place plein de DIV avant et après mon UL/LI.
Voici un exemple de code :
et la feuille CSS
Finalement, un exemple du desagrement en question
Merci de m'aider à mieux comprendre!
Modifié par Tyrian (19 Jan 2006 - 04:12)
Depuis peu, je m'initie au normes du W3C et de l'Accessibilité. Je suis conscient que la mise en page en tableau ne vaut pas grand chose et je cherche à améliorer ma façon de faire.
Mais bon, depuis, j'ai toujours le même problème. À chaque fois que j'ai une DIv aligner a gauche pour le menu et une a droite pour le texte, je tente de placer des LI ou UL dans la zone centrale et il se place plein de DIV avant et après mon UL/LI.
Voici un exemple de code :
<html>
<head>
<title>mon site</title>
<link href="style/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="head1">head1
</div>
<div class="gauche"></div>
<div class="centre">
<h1>Mon site web</h1>
<h2>Mon site</h2>
<p>Lorem ipsum dolor sit amet,adipiscing elit. Suspendisse potenti. Cras leo nibh, aliquet nec, interdum
et, consequat sed, nulla. Praesent nec quam quis augue auctor pulvinar. Nunc
vehicula wisi et mi. Quisque ultricies volutpat metus. Nulla eu erat sed mauris
euismod tempor. Aliquam sit amet quam vitae massa dignissim fringilla. Nam
pharetra lobortis velit. Donec scelerisque, nisl a molestie vulputate, urna
lectus rhoncus ante, in congue lacus erat ac urna. Duis quam. Phasellus diam
eros, ullamcorper dictum, lacinia in, accumsan vel, felis. Ut at sapien. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
hymenaeos.</p>
<p>Sed gravida leo sed quam. Aenean vitae pede a felis semper vestibulum.
Mauris non ante. Pellentesque suscipit lectus at erat. Integer et risus id tortor
pellentesque tempus. Aliquam dui nulla, suscipit nec, consectetuer a, fringilla
sit amet, luctus at, purus. Integer nec arcu ac dui placerat rutrum. Maecenas
dignissim, justo nec rhoncus dignissim, nulla felis vehicula massa, in commodo
tempus nec, erat</p>
</div></body>
</html>
et la feuille CSS
body {
margin: 0;
font-family: verdana, arial, sans-serif;
font-size: 100%;
}
.head1 {
width: 770px;
height: 100px;
background-color: #00FF00;
}
.gauche {
position: absolute;
background-color: red;
width: 150px;
height: 300%;
}
.centre {
margin-left: 150px;
width: 600px;
}
.centre li ul{
font-size: 75%;
}
h1 {
font-size: 140%;
}
h2 {
font-size: 100%;
}
Finalement, un exemple du desagrement en question
<html>
<head>
<title>mon site</title>
<link href="style/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="head1">head1
</div>
<div class="gauche"></div>
<div class="centre">
<h1>Mon site web</h1>
<h2>Mon site</h2>
</div>
<ul>
<li>
<div class="centre">Lorem ipsum dolor sit amet,adipiscing elit. Suspendisse
potenti. Cras leo nibh, aliquet nec, interdum et, consequat sed, nulla.
Praesent nec quam quis augue auctor pulvinar. Nunc vehicula wisi et mi.
Quisque ultricies volutpat metus. Nulla eu erat sed mauris euismod tempor.
Aliquam sit amet quam vitae massa dignissim fringilla. Nam pharetra lobortis
velit. Donec scelerisque, nisl a molestie vulputate, urna lectus rhoncus
ante, in congue lacus erat ac urna. Duis quam. Phasellus diam eros, ullamcorper
dictum, lacinia in, accumsan vel, felis. Ut at sapien. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</div>
</li>
</ul>
<div class="centre">
<p>Sed gravida leo sed quam. Aenean vitae pede a felis semper vestibulum. Mauris
non ante. Pellentesque suscipit lectus at erat. Integer et risus id tortor
pellentesque tempus. Aliquam dui nulla, suscipit nec, consectetuer a, fringilla
sit amet, luctus at, purus. Integer nec arcu ac dui placerat rutrum. Maecenas
dignissim, justo nec rhoncus dignissim, nulla felis vehicula massa, in commodo
tempus nec, erat</p>
</div>
</body>
</html>
Merci de m'aider à mieux comprendre!

Modifié par Tyrian (19 Jan 2006 - 04:12)