<div> design oder "Wie man sich die Zähne ausbeisst"

[Michel]

Hallo!

Ich versuche nun seit ein paar Tagen in folgendes Layout eine[b] 3. Kolumne [/b]reinzubekommen. Aber ich kapiere die Sache mit Befehlen wie "float" etc einfach nicht. Ich sehe die Logik dahinter noch nicht und dabei möchte ich nur aus einem [b]2 Kolumnenlayout ein 3 Kolumnenlayout machen.[/b]

Also bisher ists so:

[b]Content | Sidebar[/b]

Jetzt möchte ich aber

[b][u]rightsidebar[/u] |content |sidebar [/b]

Was muss man beim CSS verändern/einfügen und wo muss ich den HTML Code korrekt eingeben?

Es spielt keine Rolle wie breit die neue Kolumne ist (welche aber ganz rechts sein Muss von den drei Kolumnen), das kann ich dann selbst anpassen.. mich interessiert vorerst einfach nur wie ich die dritte Kolumne hineinbekomme. Gegebenenfalls kann man die Gesamtbreite vergrössern auf 800 Pixel.

Ich danke für die Hilfe im voraus bestens!!

Hier das CSS:(Ohne die einzelnen Fontstyles etc)

/* -- layout -- */
#content {width: 700px; margin: 0 auto; text-align: left; background: #fff url(http://www.blogblog.com/snapshot_sable/bg-body.gif) 0 0 repeat-y;}
#header {background: #D8DADC url(http://www.blogblog.com/snapshot_sable/bg-headerdiv.gif) 0 0 repeat-y;}
#header div {background: transparent url(http://www.blogblog.com/snapshot/header-01.gif) bottom left no-repeat;}
#main {
line-height: 1.4;
float: left;
padding: 10px 12px;
border-top: solid 1px #fff;
width: 428px;
/* Tantek hack - http://www.tantek.com/CSS/Examples/boxmodelhack.html */
voice-family: ""}"";
voice-family: inherit;
width: 404px;
}
/* IE5 hack */
#main {}
#sidebar {margin-left: 428px; border-top: solid 1px #fff; padding: 4px 0 0 7px; background: #fff url(http://www.blogblog.com/snapshot_sable/bg-sidebar3.gif) 1px 0 no-repeat;}
#footer {clear: both; background: #E9EAEB url(http://www.blogblog.com/snapshot_sable/bg-footer.gif) bottom left no-repeat; border-top: solid 1px #fff;}

Hier HTML:

<!-- Begin #content - Centers all content and provides edges for floated columns -->
<div id="content">

<div id="header"><div>
</div></div>

<!-- Begin #main - Contains main-column blog content -->
<div id="main">
</div>
<!-- End #main -->

<!-- Begin #sidebar -->
<div id="sidebar">
</div>
<!-- End #sidebar -->

<!-- Begin #footer -->
<div id="footer"><hr />
</div>
<!-- End #footer -->

</div>
<!-- End #content -->

Danke nochmals!

Liebe Grüsse!

[Jeena Paradies]

Hallo,

Bei solchen Fragen würde ich erst einmal Google befragen: http://www.google.com/search?q=three+column+layout

Vielleicht hilft dir das ja auch schon weiter, wenn nicht frag noch mal nach.

Grüße
Jeena Paradies

[Michel]

Hallo!

Danke für deinen Tipp!

Jedoch habe ich dies vor wenigen Tagen als erstes gemacht. Das Problem hierbei ist aber, dass ich das Layout selbs total neu aufbauen müsste inklusive den Styles etc. Und das möchte ich umgehen, denn es geht bloss darum, dass ich zu den 2 Kolumnen eine 3. Hinzufüge.

Also genau siehts im Moment so aus

Header
----------------
Content | Sidebar

Ich möchte aber jetzt Links (nicht wie vorhin fälschlicherweise rechts genannt) eine neue Kolumne einfügen also so:

Header
--------------------------------
leftsidebar | Content | Sidebar

Ich habe einfach bei CSS noch nicht den Überblick. Aber soweit ich das verstanden habe, muss man gar nicht alzuviel verändern, sondern lediglich den richtigen Code am richtigen Ort einfügen und das gelingt mir eben nicht. (Auch nach mehreren Stunden probierens)

Danke für dir Hilfe!

[Alexander Brock]

Hallo,

Header

leftsidebar | Content | Sidebar

Es gibt einen Layout-Vorschlag für die SdN Seite, der genau das zeigt.

Gruß
Alexander Brock

[Jeena Paradies]

Hallo,

Header

Content | Sidebar

Header

leftsidebar | Content | Sidebar

Ja so schweer ist das wirklich nicht, da du ja sowieso css benutzt. Allerdings brauchst du einen Bereich der dann leftsidebar umschließt. Das hier musst du vor deinen #main Block einfügen:

<div id="leftsidebar">
   <!-- content von leftsidebar -->
  </div>

und im CSS musst du dann deine leftsidebar formatieren, also die breite und wie sie aussehen soll. Weiterhin musst du sagen dass alles andere davon floaten soll.

also zum Beispiel:

#leftsidebar {
 width: 10em;
 float: left;
}

Dann musst du noch dafür sorgen dass visuell nicht nur der text einfach vorbeifließt, sondern auch dann wenn es unter leftsidebar nach links Platz gibt das #main nicht da hinfließt, also machst du einen schönen margin, musst allerdings ausprobieren wie viel du brauchst

#main {
 margin-left: 12em;
}

Ja das müsste es gewesen sein. Wenn du noch Fragen hast melde dich einfach hier noch einmal.

Grüße
Jeena Paradies