Unterteilung durch vert. Linien

[afr0kalypse]

hi zusammen.
ich bastel gerade eine kleine webseite.
sie ist in 3 horizontale bereiche unterteilt. links ne navi, in der mitte inhalt rechts ne weitere box. den inhalt möchte ich nun etwas hervorheben. momentan ist es durch border-left und border-right gelöst. aber das gefällt mir nicht ich würde das gerne mit ner grafik lösen.
ich dachte an eine linie, die zu den enden hin ausblendet.
wenn ich eine solche linie erstelle, muss diese ja ne mindesthöhe haben. mit repeat-y kann ich diese also nur untereinander ablegen. ich möchte sie aber so übereinander legen dass man an den enden nur die schwächer werdende linie sieht und in der mitte die linie stark durchgezogen ist.
Beispiel:

wie lässt sich das sinnvoll mit css und nem bild realisieren?
hat jemand noch ne andere idee, eine unterteilung durchzuführen?

dank und gruß
afr0

 

[feelx75]

AW: Unterteilung durch vert. Linien

Hoi

Hoffe, ich habe es richtig verstanden Das Problem ist natürlich, dass die Höhe variabel ist. Im Prinzip müsste es aber mit 6 DIVs gehen
Je drei für den linken und drei für den rechten Rand. Jeweils eines ist das "solid" DIV (quasi, die Mitte), das du mit repeat-y wiederholen lässt. Dies muss zuerst in der HTML Struktur notiert werden. Danach werden das jeweils obere und untere darüber gelegt, also jeweils das nach oben auslaufende positionieren (top: 0px, left/right: 0px) und analog das Untere (bottom: 0px, left/right: 0px). Der Wrapper (der die diese DIVs enthält) müsste mit position: relative positioniert sein, dann kannst du die sechs DIVs absolute dazu positionieren.

Hoffe es ist klar geworden, was ich machen würde. Ansonsten, falls du schon code hast oder noch besser nen Link, könnte man es konkreter sagen.

lg

 

[afr0kalypse]

AW: Unterteilung durch vert. Linien

danke feelx75 aber mit so vielen divs wollte ich nicht unbedingt arbeiten
ich suche nach ner eleganteren lösung, wenn es da eine gibt.
ich habe jetzt schon überlegt, den inhalt generell in h2 überschrift und p text zu gliedern und denen jeweils nen backgroundimage zu verpassen. so würde ich die div's umgehen können.
dann hab ich zwar kein problem mehr mit variabler höhe aber dafür mit variabler breite die umgehe ich momentan mit ner 400px width für den inhalt ^^

 

[feelx75]

AW: Unterteilung durch vert. Linien

bitte sehr

Du hast schon recht, dass das eine DIV suppe ist und elegant ist es auch nicht wirklcih, deswegen das *shocked-smiliey"

Also dann nimmt H2 aber immer die Höhe ein, die das "auslaufen" braucht. Und wo wie willst du die unten auslaufende Linie realisieren? Wenn du immer eine fixe Breite hast, könntest du das ganze natürlich mit entsprechend weniger DIVs lösen, in dem du die linien links und rechts zusammenpackst. Allenfalls dem content-bereich gleich das "solid" Bild zuordnen und dann bräuchtest du nur noch zwei.
Das mit <h2> und <p> ist sicherlich eine saubere Lösung, musst aber dafür sorgen, dass diese elemente innerhalb der content-box keine abstände (margins) haben, was ja auch eine Einschränkung ist.

 

[afr0kalypse]

AW: Unterteilung durch vert. Linien

hi,
ich habs jetzt vorerst mit h2 und p tags gelöst. das ergebnis kann man sich hier ansehen:
http://www.der-alex.com

code:

/*frame für inhalt */
#inhalt
{
	width:400px;
	margin:0 auto;
	padding:0;
	float:left;
	display:block;
	/* background:url() no-repeat; */
}
#inhalt h2
{	
	height:60px;
	margin:0;
	padding: 10px 0 0 0;
	text-align:center;
	background:url("../img/inhalt_oben.png") no-repeat;
}
#inhalt p
{
	margin:-10px 0 0 0;
	padding:0 15px 10px 15px;
	background:url("../img/inhalt.png") repeat-y;
	border:0px solid black;
}
#inhalt #info
{	
	height:60px;
	margin:0;
	padding:20px 0 0 20px;	
	background:url("../img/inhalt_unten.png") no-repeat;
	color:#f50;
}

Musste in #inhalt h2 sowie #inhalt p die margin und padding eigenschaften etwas angleichen aber es funktioniert (im aktuellen ie und ff)
hier habe ich allerdings das ausblenden anders herum gemacht. hat mir irgendwie besser gefallen