css boxmodell

[Rockyandre]

ich habe einen html code geschrieben in denen div boxen enthalten sind.

jetzt frage ich:
-wie kann ich die Boxen nebeneinander postionieren sodass ich eine navi links oder rechst erstellen kann und ich jeweils daneben den Inhalt der Webiste habe


Infos:
-die Box #navi ist von der größe nich definiert (Box #navi ist die Naviagationsbox die links neben dem inhalt haben möchte)

#navi {
       background-color:peru;
       border:3px saddlebrown;
       borderleft:2px black double; 
}

-Die Box mit dem Inhalt ist folgendermaße definiert

#inhalt {
            background-color:peru;
            width:1000px; [B](ist 1000 zu groß)[/B]
            padding: 10px;
            margin: 15px;
            border-top: 3px brown solid;
            border-right: 2px brown hidden;
            border-bottom: 2px black dashed;
            border-left: 12px black double;
}

Schonmal danke für die Antworten

MfG
Rockyandre

 

[Wustersoss]

Hallo,

Nutze für den Anfang ein getestetes Layout.
Du findest hier eine Auswahl. Du kannst die Einheit wählen und der Code ist frei verfügbar.
Spiel ein wenig herum und such dir aus was dir als Grundgerüst am besten gefällt.

The Left Menu 2 column Liquid Layout. Pixel widths. Cross-Browser. Equal Height Columns.

 

[struppi]

Das Boxmodell ist etwas anderes als du meinst, es beschreibt wie in CSS die Maße eines Blockelementes angewandt werden SELFHTML: Stylesheets / CSS-Formate definieren / Das CSS Box-Modell

ich habe einen html code geschrieben in denen div boxen enthalten sind.

Ein Blockelement ist immer eine Box. Für die Anordnung gibt es im Grunde zwei Möglichkeiten. Entweder du läßt die Boxen fliessen mit der CSS Eigenschaft float oder du positionierst sie mit position. Beide Möglichkeiten haben ihre Vor- und Nachteile und sind nicht immer einfach zu verstehen.

 

[w7]

Ein Blockelement ist immer eine Box. Für die Anordnung gibt es im Grunde zwei Möglichkeiten. Entweder du läßt die Boxen fliessen mit der CSS Eigenschaft float oder du positionierst sie mit position. Beide Möglichkeiten haben ihre Vor- und Nachteile und sind nicht immer einfach zu verstehen.

Im gegebenen Beispiel wäre es m. E. sinnvoll auf eine "float" Lösung zurückzugreifen. Wichtig wäre hierzu die Breite von #navi zu definieren und nach beiden Boxen ein Element mit der Eigenschaft "clear:both;" einzufügen. Zu deiner Frage bezüglich der Breite: Ich würde relative Größen nehmen (z.B. Abstand 5%, Navi 15%, 5% Abstand, 70% Inhalt, 5% Abstand v.l.n.r. o.ä.). Ansonsten hängt es v.a. von der Breite von #navi ab, ob 1000px zu breit sind. Generell würde ich 1024 noch als gängig aber Auslaufmodell sehen - 1280 und 1366 (Laptops!) als Standardbreiten.

 

[mermshaus]

Wobei die Bildschirmauflösung eben nicht die Viewport-Größe ist. 1000 Pixel als minimale Breite sind für meinen Geschmack viel zu wenig. Das wäre vielleicht eine geeignete Maximalbreite (max-width). Die Seite sollte aber auch bei kleineren Breiten noch halbwegs sinnvoll nutzbar sein. Generell ist es deshalb nicht schlecht, zumindest teilweise auf „relative“ Größenangaben zu setzen. „css fluid layout“ wäre vielleicht ein Suchbegriff.