XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   DIV bis GANZ unten (http://xhtmlforum.de/showthread.php?t=52879)

burnZ 26.07.2008 18:12

DIV bis GANZ unten
 
Hallöchen Leute,

muss doch nochmal im Hilfe bitten hab wirklich versucht zu suchen aber ich denke ich suche nur falsch kann mir nicht vorstellen das die Frage noch nie gefallen ist eher im Gegenteil ^^

Alsooo ich hab ein "Submenu" DIV und dein "Content" Div nebeneinander, das ganze ist verschachtelt in andere DIVs, html/body 100% Höhe der Wrapper ebenfalls. Dachte ich könnte mit relative/absolute arbeiten um zu erreichen was ich will. Und zwar sollen die besagten DIVs von unter dem Banner bis GANZ unten gehen also bis zum Ende des dynamischen Contents, und nicht nur bis zum Bottom des Browserinhalts, was wohl durch bottom: 0px; passiert. Ich hab das auch irgendwo schonmal ziemlich easy hinbekommen bin ich mir sicher aber ich finds einfach nicht mehr...

Aber trotzdem dank des Forums bin ich schon viel frischer in Sachen CSS/DIV statt Table Design ;) Danke an der Stelle dafür!

Ich poste einfach mal HTML sowie CSS, Backgrounds könnt ihr ja durch Farben ersetzen...

Code:

@charset "utf-8";
*
{
        margin        : 0px;
        padding        : 0px;
}

html, body
{
        width                : 100%;
        height                : 100%;
        background        : #000000;
}

#root
{
        position: relative;
        width        : 100%;
        height        : 100%;
}

#root .page
{
        position        : relative;
        width                : 1000px;
        height                : 100%;
        margin-left        : auto;
        margin-right: auto;
}

#root .banner
{
        background: url( "../images/banner.jpg" );
        width          : 1000px;
        height          : 90px;
}

#submenu
{
        position                        : absolute;
        background-repeat        : repeat-y;
        width                                : 228px;
        top                                        : 90px;
        bottom                                : 0px;
        left                                : 0px;
        background-image        : url(../images/submenu_repeat.jpg);
        background-position : 0px 33px;
}

#submenu .begin
{
        position                        : absolute;
        background                        : url( "../images/submenu_begin.jpg" );
        width                                : 228px;
        height                                : 33px;
        top                                        : 0px;
        left                                : 0px;       
        z-index                                : 0;
}

#submenu .container
{
        position: absolute;
        width        : 228px;
        height        : auto;
        z-index : 10;
        top                : 0px;
        left        : 0px;       
}

#submenu .normal
{
        background        : url( "../images/submenu_normal.jpg" );
        width                : 184px;
        height                : 21px;
        margin-top  : 2px;
        padding-left: 40px;
        padding-top        : 7px;
}

#submenu .active
{
        background        : url( "../images/submenu_active.jpg" );
        width                : 184px;
        height                : 21px;
        margin-top  : 2px;
        padding-left: 40px;
        padding-top        : 7px;
        font-family        : Arial, Helvetica, sans-serif;
        font-size        : 12px;
        color                : #FFFFFF;
}

#submenu .normal a
{
        font-family                : Arial, Helvetica, sans-serif;
        font-size                : 12px;
        color                        : #999999;
        text-decoration        : none;
}

#content
{
        background        : url( "../images/content_repeat.jpg" );       
        width                : 772px;
        position        : absolute;
        top                        : 90px;
        bottom                : 0px;
        left                : 228px;
}

#content .begin
{
        background        : url( "../images/content_begin.jpg" );       
        width                : 772px;
        height                : 103px;
        position        : absolute;
        top                        : 0px;
        left                : 0px;
        z-index                : 0;
}

#content .end
{
        background        : url( "../images/content_end.jpg" );       
        width                : 772px;
        height                : 417px;
        position        : absolute;
        bottom                : 0px;
        left                : 0px;
        z-index                : 0;
}

#content .content
{
        position: absolute;
        width        : 752px;
        bottom        : 10px;
        left        : 10px;
        right        : 10px;
        top                : 10px;
        z-index : 10;
}

Code:

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
        <div id="root">
            <div class="page">
                <div class="banner"></div>
            <div id="submenu">
                    <div class="begin"></div>
                <div class="container">
                        <div class="normal"><a href="#">About Me</a></div>
                    <div class="active">About You</div>
                        <div class="normal"><a href="#">About Me</a></div>
                    <div class="active">About You</div>
                </div>
            </div>
            <div id="content">
                    <div class="begin"></div>
                <div class="end"></div>
                <div class="content">
                Nachdem Latein ursprünglich in Rom und der umliegenden Region (Latium) gesprochen worden war, verbreitete es sich nach und nach in den von Rom eroberten Gebieten. Neben Griechisch war Latein die Amtssprache des römischen Reiches. Dabei blieb die lateinische Hochsprache seit augusteischer Zeit (um Christi Geburt) in Syntax und Grammatik (ungeachtet stilistischer Veränderungen) weitgehend unverändert, während sich das gesprochene Vulgärlatein von einer flektierenden zu einer stärker analytischen Sprache weiter entwickelte. Der deutsche Altphilologe Wilfried Stroh zieht daraus den Schluss, dass das hochsprachliche Latein bereits seit dem 1. Jahrhundert n. Chr. faktisch eine tote Sprache war[1]. Wegen der kulturellen Überlegenheit des Ostens verlor das Lateinische zeitweise in Nordafrika und selbst in Rom in bestimmten Zusammenhängen seine Vorrangstellung. So war die Liturgiesprache der römischen Christen bis um 200 das Griechische. In dieser Zeit flossen zahlreiche griechische Lehnwörter ins Lateinische ein (hierbei war besonders der Einfluss Tertullians entscheidend). Insgesamt betrachtet war Latein aber seit dem 1. Jahrhundert die lingua franca der westlichen Reichshälfte und verdrängte vielfach die vorrömischen Sprachen.

Während der Spätantike (seit ca. 300) begannen sich verschiedene Volkssprachen und Mundarten phonetisch und grammatikalisch immer stärker von der lateinischen Hochsprache wegzuentwickeln. Diese auf dem Vulgärlatein basierenden regionalen Dialekte leben heute in den verschiedenen romanischen Sprachen fort. Obwohl das Hochlateinische in der ausgehenden Spätantike bzw. im frühen Mittelalter nicht mehr gesprochen wurde, entstanden noch im 6. Jahrhundert Werke in klassischem Latein (Boethius, Corippus). Noch Papst Gregor der Große ging um 600 davon aus, dass seine auf Latein verfassten Predigten vom einfachen Volk verstanden würden; alles spricht dafür, dass erst im späten 8. Jahrhundert Latein und die romanischen Volkssprachen als unterschiedliche Sprachen wahrgenommen wurden: Als epochales Datum gilt oft das Konzil von Tours im Jahr 813, auf dem beschlossen wurde, fortan Predigten in den „Volkssprachen“ zuzulassen, da die Gläubigen kein Latein mehr verstünden.

Im Oströmischen Reich war Latein bis ins frühe 7. Jahrhundert neben Griechisch eine der beiden offiziellen Amtssprachen. Danach wurde es in Byzanz nur noch von sehr wenigen Gelehrten verstanden.

Im Westen übernahmen die Germanen mit den Grundelementen der spätrömischen Verwaltung auch die lateinische Sprache, die in der Verwaltung bis in die frühe Neuzeit vorherrschend blieb. Seit der Völkerwanderung und Christianisierung der (zunächst zumeist arianischen) Germanenvölker wurde Latein im Westen des früheren Römischen Reiches und in den römisch-katholischen Folgestaaten Sprache des Klerus (Kirchenlatein), der Rechtswissenschaft (Glossatoren) und der sich bildenden Hochschulen (studia generalia) verwendet. Latein bildete somit die Schriftsprache, vor allem für das kirchliche und weltliche Urkundenwesen (Diplomatik) im frühen Europa.

In völkerrechtlichen Verträgen (z. B. im Westfälischen Frieden von 1648) dominierte Latein bis in das 17. Jahrhundert hinein. Es bildet noch bis ins 20. Jahrhundert den Affixvorrat für die Terminologie in den Wissenschaften und verliert durch die fortschreitende Absorption in die englische und andere Sprachen lediglich an direkter, nicht jedoch an indirekter Bedeutung. Es wird an vielen Schulen unterrichtet.

                Nachdem Latein ursprünglich in Rom und der umliegenden Region (Latium) gesprochen worden war, verbreitete es sich nach und nach in den von Rom eroberten Gebieten. Neben Griechisch war Latein die Amtssprache des römischen Reiches. Dabei blieb die lateinische Hochsprache seit augusteischer Zeit (um Christi Geburt) in Syntax und Grammatik (ungeachtet stilistischer Veränderungen) weitgehend unverändert, während sich das gesprochene Vulgärlatein von einer flektierenden zu einer stärker analytischen Sprache weiter entwickelte. Der deutsche Altphilologe Wilfried Stroh zieht daraus den Schluss, dass das hochsprachliche Latein bereits seit dem 1. Jahrhundert n. Chr. faktisch eine tote Sprache war[1]. Wegen der kulturellen Überlegenheit des Ostens verlor das Lateinische zeitweise in Nordafrika und selbst in Rom in bestimmten Zusammenhängen seine Vorrangstellung. So war die Liturgiesprache der römischen Christen bis um 200 das Griechische. In dieser Zeit flossen zahlreiche griechische Lehnwörter ins Lateinische ein (hierbei war besonders der Einfluss Tertullians entscheidend). Insgesamt betrachtet war Latein aber seit dem 1. Jahrhundert die lingua franca der westlichen Reichshälfte und verdrängte vielfach die vorrömischen Sprachen.

Während der Spätantike (seit ca. 300) begannen sich verschiedene Volkssprachen und Mundarten phonetisch und grammatikalisch immer stärker von der lateinischen Hochsprache wegzuentwickeln. Diese auf dem Vulgärlatein basierenden regionalen Dialekte leben heute in den verschiedenen romanischen Sprachen fort. Obwohl das Hochlateinische in der ausgehenden Spätantike bzw. im frühen Mittelalter nicht mehr gesprochen wurde, entstanden noch im 6. Jahrhundert Werke in klassischem Latein (Boethius, Corippus). Noch Papst Gregor der Große ging um 600 davon aus, dass seine auf Latein verfassten Predigten vom einfachen Volk verstanden würden; alles spricht dafür, dass erst im späten 8. Jahrhundert Latein und die romanischen Volkssprachen als unterschiedliche Sprachen wahrgenommen wurden: Als epochales Datum gilt oft das Konzil von Tours im Jahr 813, auf dem beschlossen wurde, fortan Predigten in den „Volkssprachen“ zuzulassen, da die Gläubigen kein Latein mehr verstünden.

Im Oströmischen Reich war Latein bis ins frühe 7. Jahrhundert neben Griechisch eine der beiden offiziellen Amtssprachen. Danach wurde es in Byzanz nur noch von sehr wenigen Gelehrten verstanden.

Im Westen übernahmen die Germanen mit den Grundelementen der spätrömischen Verwaltung auch die lateinische Sprache, die in der Verwaltung bis in die frühe Neuzeit vorherrschend blieb. Seit der Völkerwanderung und Christianisierung der (zunächst zumeist arianischen) Germanenvölker wurde Latein im Westen des früheren Römischen Reiches und in den römisch-katholischen Folgestaaten Sprache des Klerus (Kirchenlatein), der Rechtswissenschaft (Glossatoren) und der sich bildenden Hochschulen (studia generalia) verwendet. Latein bildete somit die Schriftsprache, vor allem für das kirchliche und weltliche Urkundenwesen (Diplomatik) im frühen Europa.

In völkerrechtlichen Verträgen (z. B. im Westfälischen Frieden von 1648) dominierte Latein bis in das 17. Jahrhundert hinein. Es bildet noch bis ins 20. Jahrhundert den Affixvorrat für die Terminologie in den Wissenschaften und verliert durch die fortschreitende Absorption in die englische und andere Sprachen lediglich an direkter, nicht jedoch an indirekter Bedeutung. Es wird an vielen Schulen unterrichtet.
                </div>
            </div>
        </div>
    </div>
</body>
</html>

:|

fricca 26.07.2008 18:19

Zitat:

Zitat von burnZ (Beitrag 394974)
Backgrounds könnt ihr ja durch Farben ersetzen...

Das ist deine Aufgabe. Stell einen Testcase vor, der ohne Basteleien dein Problem zeigt. Am besten als Link.
Siehe auch: http://xhtmlforum.de/40080-f-r-frage...twortende.html

burnZ 26.07.2008 20:41

So gut nun versuche ich mich nochmal besser mit einem einfachen Beispiel auszudrücken:

Ich brauche ein DIV Layout indem DIVs innerhalb eines relativen Containers absolut positioniert werden sprich: bottom: 0; ist ja der bottom des übergeordneten DIVs.

Diese inneren DIVs sollen
- immer bis zur unteren Kante des Browser gehen wenn der Inhalt zu kurz ist aber
- auch darüber hinaus wenn der Inhalt zu lang ist.

Hier eine vereinfachte Darstellung von dem was ich gerade habe. Wie man sieht gehen die DIVs zwar bis unten, aber nicht darüber hinaus und somit ragt der Text darüber. Beides DIVs sollen aber bis bottom: 0; des übergeordneten DIVs verlaufen also denke das ich dort den Fehler habe sprich in #page und/oder #center.

Code:

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
<!--
*
{
        margin        : 0;
        padding        : 0;
}

html, body
{
        width        : 100%;
        height        : 100%;
}

#page
{
        position: relative;
        width        : 100%;
        height        : 100%;
}

#center
{
        position        : relative;
        width                : 1000px;
        height                : 100%;
        margin-left        : auto;
        margin-right: auto;
}

#menu
{
        position        : absolute;
        left                : 0px;
        top                        : 0px;
        bottom                : 0px;
        background        : #cccccc;
        width                : 200px;
}

#content
{
        position        : absolute;
        left                : 200px;
        top                        : 0px;
        bottom                : 0px;
        background        : #0099CC;
        width                : 800px;       
}
-->
</style>
</head>
<body>
<div id="page">
        <div id="center">
        <div id="menu"></div>
        <div id="content">
                            Text Text Text Text
                            Text Text Text Text
                            Text Text Text Text
                            Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                            Text Text Text Text
                            Text Text Text Text
                            Text Text Text Text
                            Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text   
                            Text Text Text Text
                            Text Text Text Text
                            Text Text Text Text
                            Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                            Text Text Text Text
                            Text Text Text Text
                            Text Text Text Text
                            Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text 
                            Text Text Text Text
                            Text Text Text Text
                            Text Text Text Text
                            Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                            Text Text Text Text
                            Text Text Text Text
                            Text Text Text Text
                            Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text   
                            Text Text Text Text
                            Text Text Text Text
                            Text Text Text Text
                            Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                            Text Text Text Text
                            Text Text Text Text
                            Text Text Text Text
                            Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text
                    Text Text Text Text                 
        </div>
    </div>
</div>
</body>
</html>


burnZ 26.07.2008 23:35

Also ich hab nun schonwieder ewig rumgefuchtelt und versucht ohne absolute Positionierung zu arbeiten... Ist aber quasy unmöglich da ich auf verschiedenen Ebenen "Abwechslung" in die Repeats hole, zB unten oder oben Verläufe welche DIVs sind die halt absolut unten oder oben sitzen und hinter den DIVs mit dem Inhalt liegen aber trotzdem vor den DIVs mit den durchgehenden Repeats...da muss es doch ne Lösung geben...

burnZ 27.07.2008 11:56

Will ja wirklich nicht nerven aber hier sind sicher einige die um einiges mehr Erfahrung mit Box-Design haben und für die es ein leichtes sein wird mir die bestimmt unglaublich einfache Lösung für mein Problem zu nennen *g* Erbarmt euch Mädels! :)

burnZ 27.07.2008 14:14

So nun hab ich die Geschichte ganz anders geklärt und komme bislang komplett ohne absolute Geschichten aus. Nun floate ich das ganze sogar ziemlich simpel von HTML und CSS her aber nun hab ich doch wieder ein kleines Problemchen...

#content .level1 und #content .level2 sind ineinander verschachtelt und haben jeweils ein BG Bild unten bzw oben um Abwechslung ins Repeat zu bringen das durch #root auf die Bühne kommt.

Die Seite ist nun mindestens 100% Browserhöhe hoch geht aber auch problemlos länger...

Allerdings weiss ich nun nicht genau wie ich die height Angaben für #content .level1 und #content .level2 und vermutlich damit auch #content auslegen muss damit diese auch mindestens 100% haben damit also das top und bottom BG Bild ebenfalls immer unten und oben sind egal ob der Content nun kurz oder lang ist. Wenn ich X-Tausend breaks reinmache gehts natürlich auch so.

Hier die wirklich simplen Sources, bei BG Bildern wüsst ich jetzt nicht wie ich da ein Beispiel zurecht basteln sollte, ausser das original.

Code:

*
{
        margin        : 0px;
        padding        : 0px;
}

html, body
{
        width                                : 100%;
        height                                : 100%;
        background                        : #000000;
}

#root
{
        background                        : url( "../images/page_repeat.jpg" );
        background-position        : center -50px;
        background-repeat        : repeat-y;
        width                                : 100%;
        height                                : auto;
        min-height                        : 100%;
}

#root .center
{
        width                                : 1000px;
        height                                : auto;
        min-height                        : 100%;       
        margin-left                        : auto;
        margin-right                : auto;
}

#root .banner
{
        background                        : url( "../images/banner.jpg" );
        background-repeat        : no-repeat;
        width                                : 1000px;
        height                                : 90px;
}

#submenu
{
        background                        : url( "../images/submenu_begin.jpg" );
        background-repeat        : no-repeat;
        background-position : top;
        width                                : 228px;
        min-height                        : 33px;
        float                                : left;
}

#content
{
        width                : 772px;
        float                : right;
}

#content .level1
{
        background                        : url( "../images/content_begin.jpg" );
        background-repeat        : no-repeat;
        background-position : top;
}

#content .level2
{
        background                        : url( "../images/content_end.jpg" );
        background-repeat        : no-repeat;
        background-position : bottom;
}

Code:

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
        <div id="root">
            <div class="center">
            <div class="banner"></div>
            <div id="submenu">
                    <div class="normal"></div>
                <div class="normal"></div>
                <div class="normal"></div>
            </div>
            <div id="content">
                    <div class="level1">
                        <div class="level2">
                            de
                    </div>
                </div>
            </div>
            <div style="clear: both;"></div>
        </div>
        </div>
</body>
</html>



Alle Zeitangaben in WEZ +2. Es ist jetzt 21:03 Uhr.

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

© Dirk H. 2003 - 2023