Besoin d'aide pour créer une mise en page avec DIVs

Question

Voici ce que je veux ma page pour ressembler à:

Mockup http://img64.imageshack.us/img64/5974/pagedh.jpg

Je ne suis pas encore tout à fait. Voici où je suis: http://labs.pieterdedecker.be/test/test.htm

Je suis tout à fait nouveau à l'utilisation <div> s (par opposition à <table> s) pour créer la mise en page de mes pages. Comment puis-je faire le travail?

Answer 1

Vous pouvez fixer le menu en ajoutant simplement deux règles de style CSS:

.menu { overflow: hidden; } 
.menu ul { margin: 0; } 

Le débordement laissera un menu plus grand en raison de la valeur par défaut du navigateur <ul> marge, juste nettoyer ce avec le second style , ce qui va faire tomber la marge.

Answer 2

ajouter simplement le code ci-dessous:

<div style="clear:both; margin-left:20px;"> 

après la ligne:

<div id="body"> 

C'est:

<div id="body"> 
<div style="clear:both;"> 

Plus d'informations sur la propriété clear.

En outre, un coup d'oeil à bon tutoriel:

Div based layout with CSS

Answer 3

le problème que je vois maintenant est que vos boîtes « item » bleu ne regarde pas droit. Je pense que la raison en est que la div contenant les cases 'item' devrait être contenue dans la boîte 'body' principale. c'est en fait la toute première chose à l'intérieur du div "body". Pour vous faciliter la tâche, vous devez créer un div à l'intérieur du div 'body', avec width: 100% et background: blue (ou quelle que soit la couleur). Ensuite, à l'intérieur de ce div, vous pouvez créer votre liste d'éléments. La manière évidente de placer les «articles» à l'intérieur de la «barre d'article» serait de float:left tous les articles dans leurs propres divs vous devrez alors définir une hauteur statique pour la "barre d'élément" elle-même (comme height: 2em), car une div contenant uniquement des éléments flottants n'a pas de hauteur.

Answer 4

essayez d'effacer: les deux dans le corps div.

<div id="body" style="clear: both"> 
    <p>This is my body</p> 
    </div> 

bonne chance! ;-)