CSS-Spezialisten gesucht!

S

Sam Lowry

Aktives Mitglied
Thread Starter
Dabei seit
09.12.2004
Beiträge
146
Reaktionspunkte
0
Wie kann ich es bloß erreichen das ein zweispaltiges Design (siehe Skizze) auf einem gemeinsamen (Bild-)Hintergrund (=1) nicht dann kaputt geht, wenn eine der beiden Textspalten (2 oder 3) deutlich länger als die andere wird?

In der Praxis soll der einheitliche Hintergrund mit Kopf- und Fußzeile immer um den gleichen Betrag höher sein als die jeweils längste Spalte, damit nix »überhängt«.

Ich hoffe, das war verständlich…?
 

Anhänge

  • cssproblem.jpg
    cssproblem.jpg
    17,1 KB · Aufrufe: 85
Hm, da habe ich keine Lösung gefunden. Ich poste mal den Code einer Beispielseite. Ziel ist es, dass der graue Hintergrund immer mit der Länge der Spalten (recht o. links) nach unten wandert, die Spalten sollen immer von Hintergrund umgeben sein!

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>

<title>test</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
<style type="text/css"><!--


#hintergrund {
	position: relative;
	margin-right: auto;
	margin-left: auto;
	width: 750px;
	background: grey repeat-y;
	padding: 10px;
	height: auto;
}

#links {
	width: 500px;
	background: #ffe4de;
	position: absolute;
	height: 100px;
}

#rechts {
	width: 250px;
	height: 200px;
	left: 500px;
	position: absolute;
	background: #d7ffa9;
}

 -->
</style>

</head>

<body>

<div id="hintergrund">

<div id="links">links</div>

<div id="rechts">rechts</div>

</div>

</body>

</html>

Herrgott, wieso zieht der das jetzt so in die Breite?
 
Probier mal folgendes:

#links { overflow:visible; }
#rechts { overflow:visible; }

damit sollte der Hintergrundbereich vergrößert werden, wenn das untergeordnete Element (#rechts oder#links) größer ist, als der Hintergrundbereich.

Weitere Optionen wären: hidden (das Element wird auf größe des übergeordneten Elements beschnitten), scroll (erzeugt einen Scrollbalken, wenn des untergeordnete Element zu groß ist) und auto (überläßt dem Browser die Entscheidung).

In deinem html Dokument müßte das dann ungefähr so aussehen:

<div class=#hintergrund>
<div class=#links></div>
<div class=#rechts></div>
</div>
 
Zuletzt bearbeitet:
Oder bastel dir ein 1px hohes, 750px breites gif. Färbe es entsprechend deinen Spalten und lasse es im #hintergrund mitlaufen.
 
Danke für Eure Tipps! :)

Muss leider jetzt weg, werde das aber morgen mal ausprobieren.
 
Dein Code ist soweit schon in Ordnung. Ich würde folgendes verändern dann sollte es gehen:

Code: 
body {
        background: grey;
        }

#hintergrund {
        background: url(/img/hintergrund.gif); *einfügen zur gif erstellung s.u.)
        position: relative; *rausnehmen*
        margin-right: auto;
        margin-left: auto;
        width: 750px;
        \width: 770px; * f. IE*
        w\idth: 750px; *f. IE*
        background: grey repeat-y; *dies wandert in den Body*
        padding: 10px;
        height: auto; *rausnehmen*
}

#links {
        margin-right: 250px; *einfügen*
        width: 500px; *rausnehmen*
        background: #ffe4de; *rausnehmen*
        position: absolute; *rausnehmen*
        height: auto; *ändern*
        min-height: 100%; *einfügen*
        z-index: 5; *höchste ebene*
}

#rechts {
        float: right; *einfügen*
        width: 250px;
        \width: 270px; *f. IE*
        w\idth: 250px; *f. IE*
        height: 200px; *rausnehmen*
        left: 500px; *rausnehmen*
        position: absolute; *rausnehmen*
        background: #d7ffa9; *rausnehmen*
        z-index: 4; *2. höchste ebene*
}

 --> </style> </head> <body> <div id="hintergrund"> <div id="links">links</div> <div id="rechts">rechts</div> </div> </body> </html>

Danach noch ein .gif erstellen mit deinen Hintergrundfarben. Also: #d7ffa9 f. rechts 250px und #ffe4de f. links 500px. Dann sollte es funktionieren.

*edit* Falls noch fragen sind -> AIM: zwocent. So macht es nun kein Problem aber du solltest dir bei Gelegenheit mal über websichere Farben Gedanken machen ;).
 
Zuletzt bearbeitet:
Hm, bis jetzt hat nichts zu einer befriedigenden Lösung geführt. Trotzdem Dank an alle!

Am nächsten kam der Sache Faux Columns, aber da hat man dann immer den Hintergrund aus einem noch hinzuzufügenden Header bzw. Footer herausgucken (oder ich habe derlei Dinge mangels Durchblick gar nicht erst positioniert bekommen).

@ kelli:
Danke für den ausführlichen Code, auch wenn er bei mir nicht zum Erfolg geführt hat. Die Anweisung min-height interpretiert Safari leider nicht. Zu den Farben: Das war nur ein hastig im Farbwähler zusammengeklicktes Beispiel, so soll es später keinesfalls aussehen… ;-)
 
Ok, nochmal drüber nachgedacht, so sollte es funktionieren:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="bla" content="bla" />	<style type="text/css">
		body {
		background-color: #999999;
			}
		#container {
			width: 750px;
			\width: 770px;
			w\idth: 750px;
			border: 1px solid gray;
			margin: 10px;
			margin-left: auto;
			margin-right: auto;
			padding: 0px;
		}

		#content {
			padding: 0px;
			margin-right: 250px;
			background-color: gray;
		}

		#sidebar-a {
			float: right;
			width: 250px;
			\width: 250px;
			w\idth: 250px;
			margin: 0;
			margin-left: 0px;
			padding: 0px;
			background-color: rgb(235, 235, 235);
		}

	</style>
</head>
<body>
	<div id="container">

		<div id="sidebar-a">&nbsp;</div>

<div id="content">&nbsp;</div>

	</div>
</body>
</html>
 
kelli schrieb:
Ok, nochmal drüber nachgedacht, so sollte es funktionieren: (…)
Zum Vergrößern anklicken....
Wow, nicht schlecht!

Vielen Dank, hab's gleich mal ausprobiert (siehe Screenshot).

Wenn man jetzt noch hinkriegen könnte, dass beide Spalten gleich lang sind, also sich immer die kürzere der längeren anpasst, wäre das optimal!
 

Anhänge

  • ausprobiert.jpg
    ausprobiert.jpg
    50,8 KB · Aufrufe: 69
Dazu musst du nur noch folgende Änderungen vornehmen:

im Container folgendes einfügen:

background: url(/img/background.gif *oder wo auch immer es liegt*) repeat-y center;

im Content und Sidebar-a den background-color löschen.

Dann sollte es passen.
 
kelli schrieb:
Dazu musst du nur noch folgende Änderungen vornehmen (…) Dann sollte es passen.
Zum Vergrößern anklicken....
Das entspräche ja dann weitgehend dieser Lösung, was aber folgendes Problem aufwirft: Ein passender Header (oder Footer), der die Spalten nach oben (und unten) abschließt, ist nicht zu positionieren.

Eigentlich brauche ich ja keine zwei unterschiedlich farbigen Spalten, sondern so etwas wie im Anhang zu diesem Post (der erste Anhang von gestern ist mir etwas unglücklich geraten):
Eine Hauptspalte und eine Navispalte, die auf einem Bild-Hintergrund (y-repeat) mit Kopf-und Fußzeile angeordnet sind. Dabei soll eben der gesamte Hintergrund immer so hoch sein wie die jeweils längere Spalte (das kann die rechte oder die linke sein!) und sauber mit einer Fußzeile abschließen.

Das ganze soll für ein Blog herhalten, wo ja - je nach Artikellänge - die Navispalte durchaus mal höher sein kann.

Mit einer Tabelle wäre es ja kein Akt, aber sowas ist halt pfui! ;-)
 
Banner und Footer ist überhaupt kein Problem:

Für den Banner folgendes in der CSS Datei einfügen nach dem Container:

HTML: 
#banner {
			padding: 0px;
			margin-bottom: 0px;
			background-color: rgb(213, 219, 225) *oder ein Image*;
		}

Für den Footer nach Sidebar-a:

HTML: 
#footer {
			clear: both;
			padding: 0px;
			margin-top: 0px;
			
			background-color: rgb(213, 219, 225);
		}

und die HTML Datei sollte dann so aussehen:

HTML: 
<body>
	<div id="container">
		<div id="banner">&nbsp;</div>

		<div id="sidebar-a">&nbsp;</div>

<div id="content">&nbsp;</div>

		<div id="footer">&nbsp;</div>
	</div>
</body>
 
kelli schrieb:
Banner und Footer ist überhaupt kein Problem (…)[/HTML]
Zum Vergrößern anklicken....
Es funktioniert!! *jubel*

kelli, Du bist die Größte! Ich schulde Dir was, ehrlich! :)

Anbei die HTML-Datei mit Text zum Ausprobieren (background.gif liegt bei diesem Beispiel im selben Verzeichnis wie die HTML-Datei). Jetzt sieht alles super aus, egal welche der beiden Spalten länger ist.

Wie hast Du den Footer dazu gekriegt, nicht unverschämt unter der jeweils kürzeren Spalte zu kleben? Das war nämlich mein großes Problem!

Vielen, vielen Dank! :))
 
Sam Lowry schrieb:
kelli, Du bist die Größte! Ich schulde Dir was, ehrlich! :)

Wie hast Du den Footer dazu gekriegt, nicht unverschämt unter der jeweils kürzeren Spalte zu kleben? Das war nämlich mein großes Problem!
Zum Vergrößern anklicken....

1. heisst es "der"
2. np
3. das macht der "clear:both;" befehl
 
kelli schrieb:
1. heisst es "der"
2. np
3. das macht der "clear:both;" befehl
Zum Vergrößern anklicken....
Im Profil stand aber »weiblich«, sorry! ;-) Edit: Jetzt hast Du es geändert!!

So ein »clear« ist toll, das muss ich mir merken!
 
Ja hab das grad im Profil gesehen und geändert. Muss ich beim Forum upgrade übersehen haben.
 
Zurück
Oben Unten