18073 sujets

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

Mise en page avec des DIV

Salut,

Je suis en train de faire un site sur le modèle du toto "Un site en cinq étapes"
que j'aio trouvé sur ce site.

Le site en question: http://www.maluaviation.com/nouveau/ .

J'ai appris que c'était pas necessaire de mettre à chaque fois de div par exemple pour le menu où à la place d'un div, je peux tout simplement mettre un ul et lui donner une valeur dans ma feuille de style cela permettant d'avoir le moins de div possible.

Mais j'ai une difficulté; je voudrai ajouter d'autres pages alors que le design lui même ne propose que 5 options pour le menu. Comment faire?

Deuxième difficulté, je voudrai dans mon div contenu avoir deux parties (div); une avec le texte et une autre pour une photo et un texte d’un autre type ou même une autre page en inclusion.
Modifié par Olivier (01 Aug 2005 - 15:36)
Salut, ton menu est constitué d'une liste non ordonnée (<ul>) et de plusieurs éléments de liste (<li>). Pour rajouter une section, rajoute simplement un <li>... comma ça :

<ul id="menu">
			<li><a href="index.html">Accueil</a></li>
			<li><a href="historique.html">Historique</a></li>
			<li><a href="etape3.html">Etape n°3</a></li>
			<li><a href="etape4.html">Etape n°4</a></li>
			<li><a href="etape5.html">Etape n°5</a></li>
			<li><a href="nouvelle page">Element supplémentaire</a></li>
		</ul>

Après, il faut voir si tu as la place d'avoir 6 éléments sur la même ligne, à toi de jouer avec les tailles de typos et les marges pour faire rentrer tout ce petit monde dans ta largeur de page prévue.

Pour le reste, rappèle toi que la <div> est en fait une balise de type bloc qui peut contenir d'autres balises. C'est pareil pour les <p> par exemple.
Donc dans ton <div> central, tu peux ajouter des paragraphes (<p>), des images... sans forcément rajouter de balises <div>. Smiley cligne
Modifié par cktoon (01 Aug 2005 - 15:37)
Merci bien pour cette reponse qui m'aide beaucoup.

Pour ajouter par exemple un bloc pour y ajouter du texte sans créer un div, je donne un exemple concret de mon site:

[code]
<!-- début du div conteneur qui contient tout -->
<div id="conteneur">

<h1 id="header"><a href="etape1.html" title="Colored Design - Accueil"><span>Colored Design</span></a></h1>
<ul id="menu">
<li><a href="index.html">Accueil</a></li>
<li><a href="historique.html">Historique</a></li>
<li><a href="etape3.html">Etape n°3</a></li>
<li><a href="etape4.html">Etape n°4</a></li>
<li><a href="etape5.html">Etape n°5</a></li>
</ul>

<!-- Rappel : le div contenu commence ici -->
<div id="contenu">
<h2>Accueil</h2>
<p>
Nous sommes une médiathèque destinée à un public composé d'étudiants, de professeurs et de chercheurs.


Un centre de formation continue pour la remise à niveau permanente du personnel et de professionnels de la ville de Kinshasa, du pays et de la sous région.
</p>
</div>
<!-- Fin du div contenu-->

<p id="footer">copyright © 2002 - 2005 Malu Aviation. Tous droits réservés. création : Kalonji Cédric </p>

</div>
<!-- Fin du div conteneur qui contient tout -->


Je veux ajouter un nouveau bloc à droite, à l'intérieur du div contenu qui contiendrait du texte et une autre page en include.

Je fais comment?
Le vrai problème qui se pose pour moi c'est que je n'arrive pas à gérer les div.

Mon code html se présente comme suit:


<div id="corps">


<div id="gauche">


</div>


<div id="droite">


</div>


</div>


ce que je voudrai c'est que le div droite et gauche soient tous les deux placés côte à côte dans le div corps.

J'essaie de faire dans ma feuille de style un float:left pour le div gauche et right pour le div droite mais ça ne marche pas. Les deux div gauche et droite ne se retrouvent pas dans le div corps.
ajoute un overflow:auto sur ton div id="corps".

si cela ne suffit pas pour IE, c'est qu'il faut ajouter une largeur ou une hauteur fictive pour ce div id="corps", mais uniquement pour IE. Par exemple avec :
a écrit :

#corps {
overflow: auto;
height: auto !important; /* navigateurs normaux */
height: 1%; /* IE */
}


Le mieux étant cependant d'éviter ce type de hack et de réserver cette hauteur à IE en la mettant en commentaires conditionnels...
Modifié par Laurent Denis (03 Aug 2005 - 17:33)
Les éléments en flux ayant des enfants flottants et une valeur d'overflow différente de "visible" doivent s'étendre en hauteur jusqu'à englober ces flottants. (Voir la FAQ du forum°
Merci beaucoup pour l'aide. j'ai pu trouver ce qui clochait et vous pouvez voir ce que ça donne ici.

Ce que j'aimerai faire maintenant, c'est ajouter un menu horizontal juste avant mon div contenu. Mon plus grand défi c'est que pour certaines options, j'aurai besoin d'un menu deroulant.

J'ai opté pour celui qui se trouve ici

Comment ferais-je pour l'ajouter ici?
Sujet clos
Aller à