zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 3 teiliges Box Modell mit Farbverlauf

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.08.2008, 19:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.08.2008
Beiträge: 5
thatway befindet sich auf einem aufstrebenden Ast
Standard 3 teiliges Box Modell mit Farbverlauf

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
Angehängte Grafiken
Dateityp: jpg box_normal_inhalt.jpg (98,3 KB, 42x aufgerufen)
Dateityp: jpg box_uebermaessig_inhalt.jpg (97,6 KB, 38x aufgerufen)
Dateityp: jpg oben.jpg (6,2 KB, 42x aufgerufen)
Dateityp: jpg strich.jpg (887 Bytes, 42x aufgerufen)
Dateityp: jpg unten.jpg (5,0 KB, 38x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.08.2008, 20:54
Benutzer
neuer user
 
Registriert seit: 08.08.2008
Ort: Hamburg
Beiträge: 37
Ratatoeskr befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 08.08.2008, 22:30
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.08.2008
Beiträge: 5
thatway befindet sich auf einem aufstrebenden Ast
Standard

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?!

Geändert von thatway (08.08.2008 um 22:34 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 08.08.2008, 22:55
Benutzer
neuer user
 
Registriert seit: 08.08.2008
Ort: Hamburg
Beiträge: 37
Ratatoeskr befindet sich auf einem aufstrebenden Ast
Standard

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.

Geändert von Ratatoeskr (08.08.2008 um 23:05 Uhr) Grund: Reflektion
Mit Zitat antworten
  #5 (permalink)  
Alt 08.08.2008, 23:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.08.2008
Beiträge: 5
thatway befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 08.08.2008, 23:30
Benutzer
neuer user
 
Registriert seit: 08.08.2008
Ort: Hamburg
Beiträge: 37
Ratatoeskr befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #7 (permalink)  
Alt 09.08.2008, 00:03
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.08.2008
Beiträge: 5
thatway befindet sich auf einem aufstrebenden Ast
Standard

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

Geändert von thatway (09.08.2008 um 00:13 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 09.08.2008, 10:30
Benutzer
neuer user
 
Registriert seit: 08.08.2008
Ort: Hamburg
Beiträge: 37
Ratatoeskr befindet sich auf einem aufstrebenden Ast
Standard

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.
Angehängte Grafiken
Dateityp: jpg vorschlag.jpg (15,0 KB, 4x aufgerufen)
Mit Zitat antworten
  #9 (permalink)  
Alt 09.08.2008, 11:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.08.2008
Beiträge: 5
thatway befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:36 Uhr.