XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   ganz einfach CSS-Design: content + sidebar (http://xhtmlforum.de/showthread.php?t=39752)

-Oliver- 30.04.2006 17:05

ganz einfach CSS-Design: content + sidebar
 
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 30.04.2006 17:21

Versuchs mal mit Faux Columns.

-Oliver- 30.04.2006 17: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 30.04.2006 17: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- 30.04.2006 18: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 30.04.2006 18: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- 02.05.2006 00: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 02.05.2006 14: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 02.05.2006 21: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. :)


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

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2020, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019