Quelle est la meilleure façon de positionner un div en css?

Question

Je suis en train de placer ce menu:

<div class="left-menu" style="left: 123px; top: 355px"> 
    <ul> 
     <li> Categories </li> 
     <li> Weapons </li> 
     <li> Armor </li> 
     <li> Manuals </li> 
     <li> Sustenance </li> 
     <li> Test </li> 
    </ul> 
</div> 

Sur le côté gauche de la page. Le problème est que si j'utilise des valeurs absolues ou fixes.
Différentes tailles d'écran rendront la barre de navigation différente. J'ai aussi une deuxième div qui contient tout le contenu principal qui doit également être déplacé vers la droite, jusqu'à présent j'utilise des valeurs relatives qui semblent fonctionner quelle que soit la taille de l'écran.

Answer 1

float est en effet la bonne propriété pour y parvenir. Cependant, l'exemple donné par bmatthews68 peut être amélioré. La chose la plus importante à propos des boîtes flottantes est qu'elles doivent spécifier une largeur explicite. Cela peut être plutôt gênant mais c'est ainsi que fonctionne CSS. Cependant, notez que px est une unité de mesure qui n'a pas sa place dans le monde HTML/CSS, du moins pas pour spécifier les largeurs.

Toujours recourir à des mesures qui fonctionneront avec différentes tailles de police, c'est-à-dire utiliser em ou %. Maintenant, si le menu est implémenté comme un corps flottant, cela signifie que le contenu principal flotte autour de lui. Si le contenu principal est plus élevé que le menu, cela pourrait ne pas être ce que vous voulez:

float1 http://page.mi.fu-berlin.de/krudolph/stuff/float1.png

<div style="width: 10em; float: left;">Left</div> 
<div>Right, spanning<br/> multiple lines</div> 

Vous pouvez corriger ce problème en donnant le contenu principal d'une margin-left égale à la largeur du menu:

float2 http://page.mi.fu-berlin.de/krudolph/stuff/float2.png

<div style="width: 10em; float: left;">Left</div> 
<div style="margin-left: 10em;">Right, spanning<br/> multiple lines</div> 

Dans la plupart des cas, vous voulez aussi donner le contenu principal d'une padding-left donc il ne colle pas trop au menu. Par ailleurs, il est trivial de changer ce qui précède pour que le menu soit sur le côté droit au lieu de gauche: il suffit de changer chaque occurrence du mot "gauche" à "droite".

Ah, une dernière chose. Si le contenu du menu est plus élevé que le contenu principal, il rendra étrangement parce que float fait des choses étranges. Dans ce cas, vous devrez effacer la case située sous le corps flottant, comme dans l'exemple de bmatthews68.

/EDIT: Merde, HTML ne fonctionne pas comme l'a montré l'aperçu. Eh bien, j'ai inclus des images à la place.

Answer 2

Je pense que vous êtes censé utiliser la propriété float pour positionner des choses comme ça. You can read about it here.

Answer 3

Vous devez utiliser les attributs CSS float et clear pour obtenir l'effet souhaité.

D'abord j'ai défini les styles pour les deux colonnes appelées à gauche et à droite dans ma mise en page et un style appelé clearer utilisé pour réinitialiser le flux de la page.

 
<style type="text/css"> 
.left { 
    float: left; 
    width: 200px; 
} 
.right { 
    float: right; 
    width: 800px; 
} 
.clear { 
    clear: both; 
    height: 1px; 
} 
</style> 

Ensuite, je les utilise pour mettre en page ma page.

 
<div> 
<div class="left"> 
    <ul> 
    <li>Categories</li> 
    <li>Weapons</li> 
    <li>Armor</li> 
    <li>Manuals</li> 
    <li>Sustenance</li> 
    <li>Test</li> 
    </ul> 
</div> 
<div class="right"> 
    Blah Blah Blah.... 
</div> 
</div> 
<div class="clear" /> 

Answer 4

Toutes les réponses disant d'utiliser des flottants (avec des largeurs explicites) sont correctes. Mais pour répondre à la question initiale, quelle est la meilleure façon de positionner un <div>? Ça dépend.

CSS est hautement contextuel et le flux d'une page dépend de la structure de votre code HTML. Le flux normal est la manière dont les éléments, et leurs enfants, vont se placer de haut en bas (pour les éléments de bloc) et de gauche à droite (pour les éléments en ligne) dans leur bloc conteneur (généralement le parent). C'est ainsi que la majorité de votre mise en page devrait fonctionner. Vous aurez tendance à compter sur width, margin, et padding pour définir l'espacement et la disposition des éléments aux autres éléments qui l'entourent (qu'ils soient <div>, <ul>, <p>, ou sinon, HTML est principalement sémantique à ce stade). L'utilisation de styles tels que float ou absolute ou relative positionnement peut vous aider à atteindre des objectifs très précis de votre mise en page, mais il est important de savoir comment les utiliser. Comme cela a été expliqué, float est généralement utilisé pour placer les éléments de bloc l'un à côté de l'autre, et c'est vraiment bon pour les dispositions à plusieurs colonnes.

Je ne vais pas entrer dans les détails ici, mais vous pourriez vouloir vérifier les éléments suivants:

• SitePoint CSS References - probablement la référence CSS le plus simple et complet que j'ai trouvé en ligne.
• W3C CSS2.1 Visual Formatting Model - Oui, c'est une lecture difficile, mais ça explique tout.

Answer 5

vous pouvez utiliser float

<div class="left-menu"> 
<ul> 
<li> Categories </li> 
<li> Weapons </li> 
<li> Armor </li> 
<li> Manuals </li> 
<li> Sustenance </li> 
<li> Test </li> 
</ul> 
</div> 

dans le fichier css

.left-menu{float:left;width:200px;}