kostenloser Webspace werbefrei: lima-city

CSS | Drei Bereiche nebeneinander

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   ferdinand24

   

   ferdinand24 hat kostenlosen Webspace.

   15:11, 21.10.2007

   Hallo hallo,
   
   
   ich habe gerade einen Blackout und brauche Hilfe...
   
   um nicht sinnfreien Mist zu labern und zum Verständnis beizutragen, habe ich das Ganze mal skizziert: http://vokabel-trainer.ath.cx/foreign/skizze.png
   
   
   
   Ich möchte also ein kleines CSS-Layout für eine Website basteln.
   Das graue ist der ANzeigebereich des Browsers, also alles, was man von der Website sieht. Das Grüne ist der Bereich für den Inhalt (da kommt an den oberen Rand die Navigation). Die beiden Roten sind Randstücke mit einem Farbverlauf.
   
   Für die beiden roten Bereiche (beide 95px breit) habe ich eine Graphik mit der Größe 1x95 px. Die Graphik soll sich nach unten (Y) wiederholen und in dem Bereich als Hintergrund (background-image) sein.
   Für den grünen BEreich gibt es eine Graphik, die 777px (so wie der Bereich) breit ist und etwa 1100px hoch. Die Graphik soll im Hintergrund stehen bleiben, wenn man scrollt (background-attachment:fixed). Sie ist deshalb so lang, weil es ja verschieden große bildscirme gibt.
   
   So, genug der Rede. Mein Problem ist nun einfach die Anordnung der Bereiche.
   
   Ich habe eine DIV erstellt, die 777px+95px+95px breit ist und sie in die Mitte der Seite gehängt (margin-left:auto;margin-right:auto; ). Dann sollen da rein die beiden Randstücke und der Main-Bereich.
   Also in die große soeben erstellte DIV drei weitere DIVs rein. Breite ist klar, Höhe 100%, denn sie sollen ja bis nach unten reichen.
   
   Ha, geht aber nocht, die Dinger sind nur etwa 20 Pixel hoch. Außerdem "stapeln" sie sich. Ist ja auch klar, sind ja Block-Elemente. Mit "display:inline" st dann tatsächlich gar nichts mehr zu sehen....
   
   
   Toll... Könnt ihr mir helfen?
   
   
   gruß
   ferdinand24
   
   Beitrag geändert: 21.10.2007 15:12:18 von ferdinand24

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. e********l

   12:21, 30.10.2007

   In welchen Browsern soll das laufen? IE 5.5+ und Co. oder IE 6+ und Co?

4. schrotti12

   Moderator

   schrotti12 hat kostenlosen Webspace.

   12:27, 30.10.2007

   Eine Spalte rechts und links padding (dadurch erhöht sich die Breite... WICHTIG!).
   Dann einfach ein Hintergrundbild dahinter und mit dem repeat-y-Wert per CSS wiederholen.
   
   ansich kein Problem...

5. timo1

   

   timo1 hat kostenlosen Webspace.

   12:34, 30.10.2007

   Also... Eine Höhe kann nicht relativ angegeben werden. ;)
   Das heist, entweder eine feste Höhe in Pixeln o.Ä. angeben, oder gar nichts, dann passt es sich in der Höhe an den Inhalt an.
   
   Zum Problem, dass sie sich stapeln...
   
   Das lässt sich mit der Eigenschaft float recht schön beheben.
   Sähe dann wohl ungefähr so aus:
   
   

   <div id="root">
     <div id="content">Hier steht der Inhalt</div>
     <div id="linkerVerlauf" style="float:left;...">Der linke Verlauf</div>
     <div id="rechterVerlauf" style="float:right;...">Der rechte Verlauf</div>
     <br style="clear:both" />
   </div>

   
   
   Ok, das dürfte funktionieren, die CSS-Eigenschaften eben noch ergänzen usw.
   
   Zum Thema float siehe auch:
   http://www.css4you.de/float.html
   

6. e********l

   12:54, 30.10.2007

   Je nachdem in welchen Browser er es darstellen will, brauchen wir ein bzw max. zwei Divs ...

7. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?