18100 sujets

Questions générales et questions de débutants

Les DIV et les ul/li

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 :


<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! Smiley ravi
Modifié par Tyrian (19 Jan 2006 - 04:12)
a écrit :
et il se place plein de DIV avant et après mon UL/LI.


Pas très français tous ça. Que veux tu dire par là?
En fait, c'est assez simple. Dans ma balise <div class="centre">, je me sert de mon Dreamweaver pour construire mes pages. Aussitôt que, lorsque je suis à l'intérieur de cette balise, je veux faire des puces, il s'inscrit automatiqueement une fin de DIV avant et après cette puce, sans compter qu'il s'en créer une pour la puce ce qui va alors briser mon design.

Pour mieux comprendre, vous devez regarder mon troisième exemple de codes ou l'on voit très bien ce que je veux dire.

Merci!
Tyrian a écrit :
En fait, c'est assez simple. Dans ma balise <div class="centre">, je me sert de mon Dreamweaver pour construire mes pages. Aussitôt que, lorsque je suis à l'intérieur de cette balise, je veux faire des puces, il s'inscrit automatiqueement une fin de DIV avant et après cette puce, sans compter qu'il s'en créer une pour la puce ce qui va alors briser mon design.

Pour mieux comprendre, vous devez regarder mon troisième exemple de codes ou l'on voit très bien ce que je veux dire.

Merci!


Pourquoi ne pas ajouter ta liste à puces directement dans le code Smiley ohwell ? DreamWeaver serait bien obligé de s'y plier!
Tout simplement parce que ce site Web n'est pas pour moi mais pour une personne qui ne si connait guère en codage HTML et qui doit justement utiliser un WYSIWYG pour entretenir son site.

De tout façon, j'aimerais bien savoir pourquoi ce phénomène se produit car je ne crois pas qu'il soit normal. Ainsi, quelqu'un peut-il me répondre sur les causes et les solutions.

Merci encore! Smiley lol
Modifié par Tyrian (19 Jan 2006 - 15:45)
Bonsoir

La personne dont tu parles utilse l'insertion de div en WYSIWYG par l'intermédiaire de l'onglet "commun" de la fenêtre insertion.

Cette personne devrait utiliser l'onglet texte dans lequel se trouve les balises dont il est question.

La meilleure méthode est de travailler en mode "fractionner" dans DreamWeaver.

Sinon quelques bons bouquins existent Smiley cligne

@+
Modifié par Michel (19 Jan 2006 - 23:47)
Bonjour à tous,

Je cherche toujours une réponse à mon interrogation.

En fait, soit je ne suis pas clair, soit vous ne comprenez pas ce que je veux dire.

Lorsque je me trouve dans une <DIV>, je tape du texte, peu importe de quoi il s'agit. Or, il vient un moment ou je veux faire une liste à puce. Je sais très bien que je peux entrer manuellement dans le code <ul> et <li> etc. Cependant, j'aimerais pouvoir faire un liste à puce SANS les taper une à une.

Comme je le disais précédemment, lorsque je me sert de l'outil de Dreamweaver pour faire des puces, il se créer alors automatique une <DIV> supplémentaire ce que je ne souhaite pas, je veux faire des puces dans la même <DIV>, je ne comprend donc pas pourquoi ce qui fait que je suis ici.

Mise au point :

a écrit :

Pourquoi ne pas ajouter ta liste à puces directement dans le code ? DreamWeaver serait bien obligé de s'y plier!


Parce que je veux comprendre et aussi, je dois donner ce site à quelqu'un ensuite qui ne connait pas le HTML, je veux lui faciliter la vie, mais j'aimerais aussi comprendre pour mon bénéfice personnel.

a écrit :

La personne dont tu parles utilse l'insertion de div en WYSIWYG par l'intermédiaire de l'onglet "commun" de la fenêtre insertion.

Cette personne devrait utiliser l'onglet texte dans lequel se trouve les balises dont il est question.

La meilleure méthode est de travailler en mode "fractionner" dans DreamWeaver.

Sinon quelques bons bouquins existent

@+


Je travaille avec Dreamweaver en mode fractionné et mes <DIV> ont été faites manuellement, sans l'intermédiaire de l'onglet "commun" de la fenêtre insertion.

Alors voilà!

Je vous invite à regarder mon code pour mieux comprendre!

Merci!
Sujet clos
Aller à