✔ links und rechts vom Text einen Layer

[nepda]

Hallo,

ich habe mal ein CSS Problem, dass ich nicht beschreiben kann bzw. nur sehr schwer
Wenn ihr euch diese Seite (unten verlinkt) anschaut seht ihr links eine Art Navigation, dort sollen die grünen und roten Layer durchgezogen werden (von oben bis unten), ich habe leider über haupt gar kein Plan wo ich da ansetzen muss.
drei_spalten_text.html

klar, mit Tabellen wäre das kein Problem, ich will aber Tabellenlos stylen

Danke!

 

[Cyber-GFX]

mit float: left; / float: right; kannst du sowas machen, wenn ich dich richtig verstanden habe

 

[hans jörg]

Hallo,
3 Layer nebeneinder zu Platzieren schaffst du zb in dem du ihnen die Eigenschaft style="float:left" gibst. Dem ersten Element danach musst du dann ein style="clear:left" einbauen um die nächsten Blockelemente wieder normal anzeigen zu können.

 

[nepda]

naja okay, klar drei Layer nebeneinander schaff ich ja, sieht man auch im Banner, aber der Banner ist ja statisch (von der höhe her).
also entweder ich blick nicht so ganz was ihr mein (scheint ja ziemlich ähnlich zu sein) oder es funktioniert nicht.
Könntet ihr mir evtl. ein Beispiel geben?

wenn mein Problem nicht klar ist: ich will quasi die Roten spalten nachahmen

>> link zur Demo ;-)

 

[hans jörg]

wenn ich dich richtig verstanden habe sollte dieses Beispiel deine Anforderungen erfüllen:
Beispiel:
http://www.cssplay.co.uk/layouts/3cols.html
von diese Seite:
http://www.cssplay.co.uk/layouts/threecol.html
hoffe ich mal

 

[nepda]

ja und nein, sieht zwar auf den ersten Blick genau richtig aus, aber das ist ja ein Fake (mehr oder weniger, aber mehr mehr als weniger) denn in deinem Beispiel wird sozusagen auf den border des center-Layers geschrieben. Ich hatte eigentlich später vor, die Farben durch Bilder zu ersetzen und border-image gibt es ja erst in CSS3

deutlich wird es, wenn man zum Beispiel bei #left den Background ändert bzw. erstmal hinzufügt

.....
#inner {display:block; margin-left:-200px; margin-right:-200px; padding:5px;}
#left {background: red; float:left; position:relative; width:200px; left:0px;} /* hier Background red eingefügt */
#right {float:right; position:relative; width:190px; right:0px;}
#center {margin-left:200px; margin-right:200px; position:relative; display:block; height:1%;}
.clear {clear:both;}
.....

weitere Ideen?

 

[Maik]

Hi,

ich empfehle dir die Faux-Columns-Technik.

#site > #site_navigation > #site_navigation_middle {
    width:               110px;
    padding:             0 20px;
    background:          url(3cols.png) repeat-y;
}

 

[nepda]

naja, auch hier ist das nicht ganz das, was ich wollte. Diese Methode ist für statische-Breiten sicherlich das optimale (also bei der Navigation könnte ich das anwenden) aber für den Inhaltsbereich ist das nichts.
Aber auf dieser Seite habe ich ein bisschen gestöbert und habe tatsächlich genau das gefunden, wonach ich gesucht habe.
>> CSS Design: Creating Custom Corners & Borders Part II

Ich bin schon am rumbasteln, aber das schaffe ich jetzt mit diesem Artikel

Vielen Dank an alle, die mir helfen wollten und geholfen haben!