WCM Forum

WCM Forum (http://www.wcm.at/forum/index.php)
-   Programmierung (http://www.wcm.at/forum/forumdisplay.php?f=17)
-   -   [CSS] 2 spaltiges Layout mit 100% Höhe (http://www.wcm.at/forum/showthread.php?t=155174)

T.dot 06.01.2005 13:55
[CSS] 2 spaltiges Layout mit 100% Höhe
 
Ahoi!

Einfaches Layout: 2 Spalten nebeneinander, links Menü, rechts Haupt"Frame". Das linke Menü soll einen durchgehenden Hintegrund haben, egal wieviel im Hauptteil drinnsteht.

Mit Tables funktionierts ja ganz gut

PHP-Code:
...
<body style="padding:0px">
<table style="height:100%;width:100%;padding:0px" cellpadding="0" cellspacing="0">
<tr>
    <td style="width:200px;background-color:#CCCCFF;vertical-align:top;padding:10px">
Menu....
    </td>
    <td style="padding-left:10px">
viel Text, der mehr als 100 Prozent hoch ist...
</td></tr>
</table>
</body>
... 
ganzer code sieher hier:
http://members.aon.at/stemmer/2column100percent.html

soweit so gut - nur wie mache ich das mit DIVs?

2 DIVs nebeneinander sind ja kein Problem, nur selbst wenn ich dem linken DIV (und dem Body) Height 100% gebe nützt mir das nichts, wenn der eigentliche Content mehr als 100% braucht (dh. ich scrolle runter und links ist erst wieder normale Hintergrundfarbe)

Gibts dafür ne Lösung?

herzlichen Dank, mfg Thomas

catch17 06.01.2005 13:58
würde auf layout mit tabellen überhaupt verzichten und das mit css-elementen (containerboxen) lösen - einfacher, sicherer, schneller, eleganter...;)

lg,

nachtrag: schau mal hier: http://www.drweb.de/csstechnik/layer_1.shtml

lg,

T.dot 06.01.2005 14:19
hm, hab mich wohl nicht klar ausgedrückt!

Ich wills ja mit CSS machen, nur hab ich bis jetz keine brauchbare Lösung gefunden, wie ich die linke Seite zu immer den gleichen Hintergrund zwinge.

Auf positioneverything hab ich zwar diese:
http://www.positioniseverything.net/...l.stretch.html
Lösung gefunden, die einfach mit einem Hintergrundbild arbeitet, das der Breite der linken Spalte entspricht - aber das halte ich für keine optimale Lösung.

mfg Thomas

catch17 06.01.2005 14:46
schau dir link mal genau an - da findest eigentlich alles was du brauchst - weiters bemüh auch mal die w3c-seite - da gibts gesammte syntax und tutorials

lg,

T.dot 06.01.2005 18:10
Ich hab jetz ca. 50 Tutorials zum Thema 2/3 Column Layout gelesen, bei allen geht das von mir gesucht entweder nicht oder nur durch den Trick ein sich wiederholendes Hintergrundbild zu verwenden, dass der Breite des Menüs entspricht.

Vielleicht könntest du mir sagen wo auf der w3c page ich die Tutorials find?

Danke, mfg Thomas

catch17 06.01.2005 18:48
vieleicht hilft des :http://www.drweb.de/csstechnik/css_float.shtml

- oder missversteh ich dich völlig ??

auf "dr.web" findest noch mehr


ebenfalls hier mal vorbeischaun:
http://www.css-technik.de/rubrik/9/CSS-Snippets.htm

lg,

T.dot 06.01.2005 19:19
hm, entweder ich dich nicht oder du mich nicht ;)

Ich arbeite scho länger mit CSS, weiß auch wie man Boxen nebeneinander schachtel, kenne Float, etc. - das ist auch gar nicht das Problem.

Ich habe jetz folgenden Source (mit divs)

Code:
<body style="background: #FFFFFF">
<div class="leftcontent">
        <h1>Menu</h1>...
               
</div>               
<div class="centercontent">
mal mehr, mal weniger Text
</div>
</body>
CSS schaut so aus:

Code:
.leftcontent {
        position:absolute;
        left:0px;
        width:180px;
        height:100%;
        background-color:#CCCCFF;
}

.centercontent {
        margin-left: 200px;
        margin-right:20px;
}
Soweit so gut. Das ganze schaut auch noch brauchbar aus, wenn im Center nicht zuviel Text steht. Sobald dort gescrollt werden muss, scrollt das Menü links mit (is ja klar), aber auch der Hintergrund - d.h. ich habe dann links vom Content einen weißen Rand.

zur Verdeutlichung:
http://members.aon.at/stemmer/2columnCSS.html

ich glaube somit sind alle Klarheiten beseitig ;)

mfg Thomas

catch17 06.01.2005 20:10
also du mußt die 2 container in einen dritten einbetten dann funkts prima ;) - hab hier deine seite modifiziert - schaus dir an und probiers in deinem browser...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content="T. Fotos">
<title>T. Fotos</title>
</head>
<body style="background: #FFFFFF">
<form method="post" id="post" name="post" action="" enctype="multipart/form-data">


<div style="background-color:green;color:black;
            font-size:80%;
            text-align: left:">



<div style="background-color: green; color:black;
            width: 200px; float:left;">

        <h1>Adminkram</h1>
               


                        Kategorien bearbeiten

                        Ereignisse bearbeiten

                        Alben bearbeiten

                        Fotos bearbeiten

                        Bewertungen bearbeiten

                        Gruppen bearbeiten

                        Mitglieder bearbeiten

                        Rechte bearbeiten

                        Rechte zuordnen

                </p>
               
                <h1>Userkram</h1>
               


                        Kategorien anzeigen

                        Ereignisse anzeigen

                        Alben anzeigen

                        Fotos anzeigen

                        Gruppen anzeigen

                        Mitglieder anzeigen

                </p>
</div>       


       
<div style="background-color: white; color:black;
            margin:0 0 0 200px; ">



Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>

</div>
</form>
</div>
</body>
</html>
bitte entschuldige die farbengebung ;)

lg,

T.dot 06.01.2005 21:46
Farbgebung ist voll ok ;)

Herzlichen Dank, daran hätte ich nicht gedacht - muss ich mir merken ;)

mfg Thomas


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:42 Uhr.

Powered by vBulletin® Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
© 2009 FSL Verlag