3 teiliges Box Modell mit Farbverlauf

thatway · #1 (**permalink**) 08.08.2008, 19:37

Hallo,

ich habe in meiner Website ein Box platziert, in der der Content angezeigt werden soll.

Die Grafik ist leicht transparent.
Nun habe ich das Problem, dass wenn der Inhalt übermäßig lang wird, ich die Box ja "in die Länge ziehen" muss.

Dazu hab die Box in 3 Teile aufgeteilt, den größten Teil der Standard Box, den Farbverlauf,

dann einen sehr dünnen Teil, der beliebig in die Länge gezogen werden kann

und den unteren Teil der Standard Box.

Jedes der Bilder ist das background image von einem div, damit der mittlere Teil (der sehr dünne Strich) sich entsprechend dem Content in die Länge ziehen kann, ist der Content (in einem eigenen div) in dem entsprechenden div. (also 2 ineinander geschachtelte divs)
Damit aber der Text nicht erst nach dem Farbverlauf anfängt habe ich ihn mit margin-top entsprechend höher gerückt.

Nun habe ich das Problem, dass ich den unteren Teil nicht korrekt unten dran gesetzt bekomme.

Vielen Dank schonmal für eure Hilfe, ich hoffe ich habe mein Problem gut genug erklärt.

Gruß
Thatway

Ratatoeskr · #2 (**permalink**) 08.08.2008, 20:54

Magst du evtl. einen Link posten in dem man sich dein Markup und deine Styles live ankucken kann? Dann könnte man besser sehen was du da gemacht hast

thatway · #3 (**permalink**) 08.08.2008, 22:30

also ich hab mal die box aus der seite extrahiert:
Box

da sieht man jetzt, dass sich zwar der mittelteil in die länge zieht, aber sich der untere div nicht korrekt platziert.

edit: oh ich seh grad, dass im IE der text von dem oberen teil überdeckt wird, trotz z-index?!

Ratatoeskr · #4 (**permalink**) 08.08.2008, 22:55

negative werte beim z-index werden afaik nicht interpretiert

Nachtrag:

Der Div-Container "mitte" kann übrigens dein Design gar nicht "aufspannen". Dadurch das er absolute positioniert wurde hast du ihn aus dem Textfluss heraus genommen. Dadurch nimmt er keinen Platz mehr im Design ein, und seine Größe wird nicht berücksichtigt.

thatway · #5 (**permalink**) 08.08.2008, 23:22

ah vielen Dank

wenn du jetzt nochmal auf den link gehst platziert es den unteren div korrekt, aber kannst du mir verraten, wie ich nur den text noch entsprechend nach oben verschiebe, mit margin-top zieht es den mittleren div+hintergrund mit hoch

Ratatoeskr · #6 (**permalink**) 08.08.2008, 23:30

Damit sollte schon mal das was du vorhattest funzen:

Code:

<html>
<head>
<title>Box</title>
<style type="text/css">
.box_geruest{
	position:absolute;
	top:100px;
	left:200px;
}

.oben{
	width:720px;
	height:445px;
	background-image:url(oben.png);
	background-repeat: no-repeat;
	color:#2287BB;
}

.mitte{
	width:718px;
	background-image:url(mitte.png);
}

.unten{
	width:720px;
	height:123px;
	background-image:url(unten.png);
	background-repeat: no-repeat;
	margin:-14px 0 0 0;
}
.box{
	width:684px;
	max-width:684px;
	margin:-406px 0 0 18px;
	font-family:Verdana;
	font-size:13px;
	color:#2287BB;
}
</style>
</head>
<body>
<div class="box_geruest">
	<div class="oben"></div>
		<div class="mitte">
			<div class="box" id="box">
				<p>
				text-text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text- text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text- text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text- text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text- text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text- text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text- text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text- text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text- text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text- text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text- text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text- text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text- text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text- text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text- text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text- text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text- text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text- text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text- text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text- text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text- text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text- text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text- text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text-text- text-text-
				</p>
			</div>
	</div>
	<div class="unten">

	</div>
</div>
</body>
</html>

Deine Box wächst jetzt mit dem Inhalt mit. Was ist passiert? Ich habe die absolute Positionierung rausgekickt. Damit dein "Footer" richtig dranpasst habe ich ihm eine negativen Margin von 14px nach oben gegeben. Unschön? Ja.

Du solltest in dein Projekt auf jeden Fall irgendeine normalization.css einbinden und den Wert vom Margin dann nochmals anpassen damit das broswerübergreifend klappt.

Das Problem mit dem IE konnte ich nicht auf die schnelle lösen. Habe hier leider nur die 6.0er und kann somit nciht vernünftig testen. Und nein, Multiple IE ist leider extrem unzuverlässig...

Ich würde ja sagen das hat etwas damit zu tun das der 6er keine PNGs mag, das wäre aber Quatsch. Generell ist dein Problem mit obigen Code nicht gelöst.

Du hast jetzt n ganz blöden Weißraum gute 30px hoch über deinen Content. Aber das nur mal so als erster Lösungsansatz

thatway · #7 (**permalink**) 09.08.2008, 00:03

hm das mit dem "Weißraum" ist seltsam, weil wenn man genau hinsieht sieht man unten eine kante, an der sich der farbverlauf und die mitte schneiden...

irgendwie hab ich das gefühl das geht so überhaupt nicht, wie ich mir das vorstelle xD
vlt. sollte ich einfach einen div machen und da dann ne textarea rein *grübel*
=> textarea.html

auf jeden Fall DANKE

Ratatoeskr · #8 (**permalink**) 09.08.2008, 10:30

Also von der Lösung mit der Textarea würde ich dir stark abraten. Ich nehme mal an das dort wo nun überall "text" steht später content sein soll, oder?

Dafür wäre Textarea semantisch gesehen total falsch, denn Textarea ist ein Eingabefeld.

Dein Content sollte aus einem Div bestehen in denen du bedeutungsvolle Elemente wie Absätze ( <p> ), Listen ( ul,ol ) und Überschriften ( h1,h1,h3... ) ihrer Bedeutung gemäß kombinierst und einsetzt.

Geht es dir darum zu scrollen? Dann gebe dem Div in dem du deinen Content haben willst eine feste Höhe. Dann definierst du mit:

overflow:scroll;

Das alles was sich in diesem Div befindet und über die angegebene Höhe bzw. Breite hinausgeht gescrollt wird.

Gefällt dir dann der hässliche Defaultscroller des Browsers nicht? Du kannst dir einen eigenen schicken Scroller einbauen der auf dein Design angesetzt ist.

Das fällt dann aber in dem Bereich JavaScript bzw. den schönen Kunstwort "DHTML". Keinen Plan von JS? Kein Ding im Netzt findest du unendlich viele fertige DHTML Scroller die du in dein Projekt einbinden kannst. Einfach mal googlen

Was du dir ursprünglich vorgestellt hast klappt auf jeden Fall. Aber ich würde das anders lösen bzw. die Grafiken anpassen. Mache doch lieber nur 2 Grafiken. Einen für die runden Ecken oben, und einen für den Footer.

Das Mittelstück wäre ein einfaches Div ohne Hintergrundgrafik. mit blauem Hintergrund. Damit du links und rechts diese blaue Linie hast definierst du für dieses Div einfach:

border-left:3px solid #00ff00; <---- deine Werte musst du selbst eintragen =P
border-right:3px solid #00ff00;

bzw. die Kurzschreibweise dazu.

Habe mal ein Bild angehängt wie ich das slicen bzw. umsetzen würde. Aber...dann hast du evtl. Probleme mit deinem Verlauf. Man kann halt nicht alles haben

Obwohl ich da auch eine Idee hätte. Aber probiere erst mal das aus was ich dir bis jetzt vorgeschlagen habe.

thatway · #9 (**permalink**) 09.08.2008, 11:32

also ich hab jetzt ein div anstatt der textarea genommen

allerdings nicht overflow:scroll; sondern overflow:auto; damit ich den horizontalen scrollbalken nicht habe.

Danke für den Tipp mit den Scrollbalken, werds bei gelegenheit mal testen, hatte mir schon bei der textarea überlegt, ob man da was machen kann xD

Gruß
Thatway

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Box Modell Umrandung	MaWo80	CSS	9	27.04.2009 11:36
ich habe totale Schwerigkeiten mit Absolute und Relative Positionierung?!?	damonster	CSS	12	27.08.2008 15:56
Kniffliges Layout mit float	Roadrunnerle	CSS	6	14.03.2006 11:26
#boxes a:hover.info: 2.posting mit css !!!	marioN	CSS	5	25.01.2004 17:04
#box a:hover .info: css-layout: ie6.0/win, moz.1ie5.0/mac,	marioN	CSS	2	19.01.2004 17:17