ganz einfach CSS-Design: content + sidebar

-Oliver- · #1 (**permalink**) 30.04.2006, 16:05

Hi!

Leider habe ich eine zeitlang nicht mehr so intensiv mit CSS gearbeitet und schon bekomme ich die einfachsten Sachen nicht mehr hin.

Aber gott sei Dank gibt es ja noch euch!

Also folgendes Problem:

Ein Content links
Eine Sidebar rechte
Ein Footer unten

aber da die sidebar gefloatet wird, weiss ich ned, wie ich es bis zum footer verlängern kann.

Der orange Bereich sollte bis unten reichen, auch wenn die Sidebar mal länger ist, sollte der gelbe bereich bis unten reichen.

Quellcode:

Code:

<html>
<body>
	<div id='main'>
		<div style='width:75%;float:left;background-color:yellow;'>
			main main main mai

			main main main mai

			main main main mai

			main main main mai

			main main main mai

			main main main mai

			main main main mai

			main main main mai

			main main main mai

			main main main mai

		</div>
		<div style='margin-left:75%;background-color:orange'>
			sidebar sidebar sidebar

			sidebar sidebar sidebar

			sidebar sidebar sidebar

			sidebar sidebar sidebar

		</div>
	</div>
	<div style='background-color:green;clear:left'>footer footer footer footer footer footer footer footer</div>

</body>
</html>

Link: http://stud05.technikum-wien.at/~tw0...cssproblem.htm

Vielen Dank im Voraus
Oliver

Tigereye · #2 (**permalink**) 30.04.2006, 16:21

Versuchs mal mit Faux Columns.

-Oliver- · #3 (**permalink**) 30.04.2006, 16:30

danke, ja das würde gehen, nur brauche ich ein div bis zum ende, da ich am ende eine abschliessende grafik plazieren muss.

aber schon mal vielen dank!

Oliver

Tigereye · #4 (**permalink**) 30.04.2006, 16:49

Zitat:

Zitat von -Oliver-

danke, ja das würde gehen, nur brauche ich ein div bis zum ende, da ich am ende eine abschliessende grafik plazieren muss.

Wie meinst du das? Eine abschließende Grafik kannst du ja nach den Faux Columns einbauen.

Zitat:

aber schon mal vielen dank!

Oliver

kein Problem

-Oliver- · #5 (**permalink**) 30.04.2006, 17:05

Also, das Beispiel war ja nur eine vereinfachte Darstellung. Wofür dich das benötige ist folgendes:

http://stud05.technikum-wien.at/~tw0...ssproblem2.htm

Das rechte Div bekommt auch noch eine Abrundung aber dafür müsste das linke und rechte div gleich hoch sein.

LG Oliver

Tigereye · #6 (**permalink**) 30.04.2006, 17:32

Zitat:

Zitat von -Oliver-

Also, das Beispiel war ja nur eine vereinfachte Darstellung. Wofür dich das benötige ist folgendes:

http://stud05.technikum-wien.at/~tw0...ssproblem2.htm

Das rechte Div bekommt auch noch eine Abrundung aber dafür müsste das linke und rechte div gleich hoch sein.

LG Oliver

Du kannst doch die Abrundung der beiden Bilder (rechts und links) als extra Hintergrundbild von einem Div einbinden, das du nach den Faux Columns einbaust?!
Anm. zu dem ALA-Artikel: Du musst die Faux Columns nicht im Body einbauen, du kannst das mit jedem beliebigen Container machen.[/code]

-Oliver- · #7 (**permalink**) 01.05.2006, 23:45

Naja, das Faux Columns ist ja nur der Trick, dass mein einfach ein Hintergrundbild verwendet, dass über beide Bereiche geht oder?

Gibt es eine Möglichkeit, damit auch die divs zu verlängern?

LG Oliver

Tigereye · #8 (**permalink**) 02.05.2006, 13:38

Zitat:

Zitat von -Oliver-

Naja, das Faux Columns ist ja nur der Trick, dass mein einfach ein Hintergrundbild verwendet, dass über beide Bereiche geht oder?

Genau, mit Faux Columns erzeugt man nur die Illusion, dass die zwei Divs gleich lang sind.
Gibt es eine Möglichkeit, damit auch die divs zu verlängern?

LG Oliver[/quote]
Eben nicht, du kannst zwei Divs nicht gleich lang machen außer natürlich mit fester Höhe.

Achereto · #9 (**permalink**) 02.05.2006, 20:30

Doch das geht. Allerdigns nur mit Hilfe einer div-Suppe:

Code:

<div id="container1">
  <div id="container2">
    <div id="content"></div>
    <div id="sidebar"></div>
  </div>
</div>
<div id="footer"></div>

container1 bekommt den Hintergrund für links, conateiner2 den für rechts und im footer kannst dann die passenden Abschlussgrafiken unterbringen.

Besser ist aber, due verabschiedest dich von derartigen Designs.

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
DIV Box (Sidebar) in bereits fertiges Design einfügen?	Daniel386	CSS	10	21.06.2011 22:58
CSS Floated Layout	didb	CSS	5	05.04.2010 18:47
Inspiration - Sammlung von Links	emti	Ressourcen	8	01.12.2009 18:02
ps design (slices), php (dynamischer inhalt), css gestaltung	schleepy	CSS	19	02.06.2006 22:46
CSS Design Probleme	Hawklan	CSS	5	12.08.2004 11:45