3 Zeiliges DIV-Design über 100% des Bildschirms @ tutorials.de: Tutorials, Forum & Hilfe

owned139 · 09.11.10 19:08

Hallo liebe Community,
ich habe mal wieder ein Problem. Wie bekommt man bei einem 3 zeiligen Design die mittleren DIV`s so groß, das sich das Design auf 100% des sichbaren Bereichs erstreckt?

HTML:

HTML-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>Unbenanntes Dokument</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <div id="header"></div>
        <div id="navigation"></div>
        <div id="content"></div>
        <div class="clear"></div>
        <div id="footer"></div>
    </body>
</html>

CSS:

Code :

html,body{
    padding:0;
    margin:0;
    border:none;
    width:100%;
    height:100%;
}
#header{
    width:100%;
    height:100px;
    background:#4e4e4e url(img/black_border.gif) bottom repeat-x;
}
#navigation{
    float:left;
    width:240px;
    height:400px;
    background:#646464 url(img/menu_spacer.jpg) right repeat-y;
}
#content{
    margin:0 0 0 240px;
    height:400px;
    background:#393939;
}
#footer{
    width:100%;
    height:40px;
    background:#4e4e4e url(img/black_border.gif) repeat-x;
}
.clear{
    clear:both;
}

navigation und content sollen eine variable Höhe haben.

spicelab · 09.11.10 19:27

Indem ein weiteres DIV deine existierenden DIVs ein-/umschließt, das zum einen mit einer Mindesthöhe von 100% ausgestattet wird, und zum anderen als Hintergrund den von #navigation übernimmt, da dieser eine absolute Breite besitzt (Hintergrundfarbe und -bild werden in einer Grafik vereint).

Den breitenvariablen Hintergrund für den Inhalt wiederum besorgt dann stattdessen das <body>-Element.

Auf diese Weise gleichen sich auch die Spaltenhöhen automatisch an, was mit deinem CSS ebenso nicht der Fall wäre.

Code xhtml:

<!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>Unbenanntes Dokument</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <div id="wrap">
            <div id="header"></div>
            <div id="navigation"></div>
            <div id="content"></div>
            <div id="footer"></div>
        </div>
    </body>
</html>

Code css:

body {
   background:#393939;
}
#wrap {
   background:url(naviBg.jpg) repeat-y;
   min-height:100%;
   height:auto !important;
   height:100%;
}
#navigation{
    float:left;
    width:240px;
}
#content{
    margin:0 0 0 240px;
}

Wozu dient hier überhaupt diese unnötige "DIV-Suppe" im HTML-Code?

Code xhtml:

1 2	<div class="clear"></div> <div id="footer"></div>

Code css:

#footer{
    width:100%;
    height:40px;
    background:#4e4e4e url(img/black_border.gif) repeat-x;
}
.clear{
    clear:both;
}

Wo hier doch die verkürzte Fassung mit dem alleinigen DIV #footer möglich ist.

Sei es so:

Code xhtml:

1	<div id="footer" class="clear"></div>

Oder so:

Code css:

#footer{
    width:100%;
    height:40px;
    background:#4e4e4e url(img/black_border.gif) repeat-x;
    clear:both;
}

owned139 · 09.11.10 21:45

Danke

Ich mach fürs "clearen" immer ein extra DIV, ist übersichtlicher wie ich finde
aber wieso extra ein DIV drum herum? Hätte man das nicht unter html, head{} defninieren können?

Edit:
Funktioniert im FF leider garnicht.

spicelab · 10.11.10 06:48

Zitat von owned139

Ich mach fürs "clearen" immer ein extra DIV, ist übersichtlicher wie ich finde

Ah ja, und was ist bitte in deinen Augen an meinen aufgezeigten Möglichkeiten unübersichtlich?

Wenn du den HTML-Code unnötig (mit inhaltsleeren DIVs) aufblähen willst, was bei einem umfangreicheren / komplexeren Quellcode noch stärker zum Tragen kommt, wünsch' ich dir mal einen guten Appetit mit deiner DIV-Suppe

Zitat von owned139

aber wieso extra ein DIV drum herum? Hätte man das nicht unter html, head{} defninieren können?

Nö, solange die Spaltenhöhen variabel sein sollen.

Zitat von owned139

Edit:
Funktioniert im FF leider garnicht.

Doch, doch. Hier fehlt blos noch das Sahnehäubchen, damit der Footer am unteren Fensterrand positioniert wird.

Code css:

#wrap {
   background:url(naviBg.jpg) repeat-y;
   min-height:100%;
   height:auto !important;
   height:100%;
   position:relative;
}
 
#footer{
    width:100%;
    height:40px;
    background:#4e4e4e url(img/black_border.gif) repeat-x;
    clear:both;
    position:absolute;
    bottom:0;
}

Sowie

Code css:

#navigation{
    float:left;
    width:240px;
    padding-bottom:40px;
}
#content{
    margin:0 0 0 240px;
    padding-bottom:40px;
}

...damit deren Inhalt nicht den Footer unterwandert.

owned139 · 10.11.10 18:15

Es funktioniert weiterhin nicht, obwohl ich deinen Code 1zu1 übernommen habe!

HTML-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>Unbenanntes Dokument</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <div id="wrap">
            <div id="header"></div>
            <div id="navigation"></div>
            <div id="content"></div>
            <div id="footer"></div>
        </div>
    </body>
</html>

Code :

body {
   background:#393939;
}
#header{
    width:100%;
    height:100px;
    background:#4e4e4e url(img/black_border.gif) bottom repeat-x;
}
#wrap {
   background:url(naviBg.jpg) repeat-y;
   min-height:100%;
   height:auto !important;
   height:100%;
   position:relative;
}
#footer{
    width:100%;
    height:40px;
    background:#4e4e4e url(img/black_border.gif) repeat-x;
    clear:both;
    position:absolute;
    bottom:0;
}
#navigation{
    float:left;
    width:240px;
    padding-bottom:40px;
}
#content{
    margin:0 0 0 240px;
    padding-bottom:40px;
}

So sieht es aus: http://img826.imageshack.us/img826/7...benanntcxv.jpg
und so sollte es aussehen: http://img185.imageshack.us/img185/6483/unbenann2t.jpg (sind fixe Werte, Problem besteht also weiterhin)

spicelab · 10.11.10 18:18

Meine bislang gezeigten CSS-Codes sind selbstverständlich im eingangs gezeigten CSS-Code einzuarbeiten. Und damit funktioniert es einwandfrei.

spicelab · 10.11.10 18:26

Den Grund, warum es bei dir bislang nicht funktioniert, kannst du übrigens hier nachlesen:

Webmaster FAQ -> [CSS] Warum wird mein Layer nicht auf das gesamte Browserfenster gestreckt?

owned139 · 10.11.10 18:34

Ok es funktioniert jetzt, allerdings sind die DIV`s #navigation und #content nur so hoch/groß wie der Inhalt und erstrecken sich nicht über die freie fläche zwischen header und footer.

spicelab · 10.11.10 18:57

Kann ich nicht bestätigen, was deren Hintergründe betrifft, denn die erstrecken sich innerhalb von <body> und <div id="wrap"> über die komplette Höhe im Viewport. Mehr ist da auch nicht möglich, wenn es sich hierbei um Blöcke mit variablen Höhen handeln soll, als mit ihnen (den Hintergründen) beim Betrachter diesen optischen Eindruck zu erwecken.

owned139 · 10.11.10 19:16

Hab dir noch mal nen Bild hochgeladen: http://img708.imageshack.us/img708/9...benannttex.jpg

CSS:

Code :

html,body {
    height:100%;
    margin:0;
    background:#393939;
}
#header{
    width:100%;
    height:100px;
    background:#4e4e4e url(img/black_border.gif) bottom repeat-x;
}
#wrap {
    background:url(img/menu_spacer.jpg) repeat-y;
    min-height:100%;
    height:auto !important;
    height:100%;
    position:relative;
}
#navigation{
    float:left;
    width:240px;
    padding-bottom:40px;
    background:#646464 url(img/menu_spacer.jpg) right repeat-y;
}
#content{
    margin:0 0 0 240px;
    padding-bottom:40px;
}
#footer{
    width:100%;
    height:40px;
    background:#4e4e4e url(img/black_border.gif) repeat-x;
    clear:both;
    position:absolute;
    bottom:0;
}

Hab ich i.was übersehen?

spicelab · 10.11.10 19:35

Zitat von owned139

Hab ich i.was übersehen?

i.was heißt noch immer irgendwas - soviel Zeit darf sein.

Jo. Meinen CSS-Code in Post #2, sowie deinen in Post#5, worin die Hintergrunddefinition für den Navigationsbereich noch stimmt.

Liest du eigentlich auch die erhaltenen Antworten und Erläuterungen aufmerksam durch? Im Zweifelsfall und zur Sicherheit auch nochmal von oben beginnend?

owned139 · 10.11.10 19:40

Ja lese ich

und ob ich Wörter abkürze oder nicht kannst du mir überlassen.
In Post #5 enthält der Navigationsbereich gar keine Hintergrunddefinition.

spicelab · 10.11.10 19:40

Zitat von owned139

Ja lese ich

Macht hier aber nicht den Eindruck.

Zitat von owned139

In Post #5 enthält der Navigationsbereich gar keine Hintergrunddefinition.

Ebend. Bei mir nämlich auch nicht

Oder wofür steht hier wohl das Hintergrundbild "naviBg.jpg"?

Zitat von spicelab

Indem ein weiteres DIV deine existierenden DIVs ein-/umschließt, das zum einen mit einer Mindesthöhe von 100% ausgestattet wird, und zum anderen als Hintergrund den von #navigation übernimmt, da dieser eine absolute Breite besitzt (Hintergrundfarbe und -bild werden in einer Grafik vereint).

Den breitenvariablen Hintergrund für den Inhalt wiederum besorgt dann stattdessen das <body>-Element.

Auf diese Weise gleichen sich auch die Spaltenhöhen automatisch an, was mit deinem CSS ebenso nicht der Fall wäre.

[...]

Code css:

body {
   background:#393939;
}
#wrap {
   background:url(naviBg.jpg) repeat-y;
   min-height:100%;
   height:auto !important;
   height:100%;
}
#navigation{
    float:left;
    width:240px;
}
#content{
    margin:0 0 0 240px;
}

owned139 · 10.11.10 19:54

Ja schön, aber hättest du meine Posts gelesen wüsstest du, dass ich nicht mit dem wrap den BG der Navigation "faken" möchte, sondern die Höhe der beiden DIV`s so anpassen, dass sie sich über den freien Bereich zwischen header und footer erstecken, auch ohne Inhalt!
Dies funktionert mit deinem Code, was ich dir aber schon mehrmals mitgeteilt habe, nicht!
Falls deine nächste Antwort wieder so herablassen und patzig sein sollte klemm sie dir

spicelab · 10.11.10 19:59

Dass du dies nicht faken möchtest, bringst du hier an dieser Stelle zum ersten Mal zum Ausdruck.

Ich hab von dir nur mehrmals zur Antwort bekommen, dass es bei dir nicht funktioniert.

Und wie ich auch schon erwähnte, ist dein Vorhaben mit variablen Blockhöhen so nicht möglich.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Auf Größenänderung des Bildschirms reagieren

Zwei-zeiliges horizontales Menu ohne Dropdown

Popup in der Mitte des Bildschirms?

Stichworte

E-Mail:

Abonnieren Abbestellen