Ergebnis 1 bis 6 von 6
  1. #1
    Avatar von bubu-der-uhu
    bubu-der-uhu ist offline Routinier
    registriert
    03-05-2005
    Ort
    Ösireich
    Beiträge
    315

    <div> height bis ganz unten?

    Hallo!

    Hab meine Seite so Aufgebaut:

    <div id="header">Blabla; menu;usw.</div>
    <div id="content">Blabla;usw.</div>
    <div id="footer">Blabla;usw.</div>

    Zentriert werden die Divs mit margin: 0px auto;

    Nun möchte Ich, falls im "content" so wenig information steht (wodurch dieser nicht höher als der Browser ist), dass der div trotzdem bis zum unterem Browserrand geht - also nicht irgendwo in der mitte aufhört.

    also alle 3 Divs übereinander = mindestens Browserhöhe.

    Ich hab mir nun gedacht dies über height: **% zu machen, aber irgendwie fressen mir das die Browser nicht.

    Css:
    Code:
    #header {
    width:990px;
    border-left:0px solid #FFFFFF;
    border-top:0px solid #FFFFFF;
    height:118px;
    background-image:url(grafik/banner.jpg);
    margin: 0px auto;
    }
    
    #content{
    min-height: 100%;
    overflow:hidden;
    width: 990px;
    padding: 0px;
    text-align:left;
    margin: 0px auto;
    background-color:#FFFFFF;
    }
    
    #footer{
    height:64px; 
    width: 990px; 
    text-align: left; 
    padding-top: 5px; 
    font-weight: 800; 
    color: #000000; 
    background-image:url(grafik/banner-bottom.jpg); 
    border-left: 0px solid #FFFFFF; 
    margin: 0px auto;
    }
    das "overflow: hidden" hab Ich drinnen weil mir der Inhalt im "content-div" im Firefox über den unteren Rand hinausläuft - bzw. Firefox macht mir die div-höhe: 0px;

    kann mir jemand von euch Profis helfen?

    Danke schon mal im Vorraus - Bubu

  2. #2
    Avatar von bubu-der-uhu
    bubu-der-uhu ist offline Routinier
    registriert
    03-05-2005
    Ort
    Ösireich
    Beiträge
    315

    AW: <div> height bis ganz unten?

    OK leute... nach ewigem herumspielen hab Ichs nun doch geschafft:

    "content" und "footer" ins header <div> gepackt:

    <div id="header">
    <div id="content"> </div>
    <div id="footer"> </div>
    </div>

    mit folgenden Css-sheet:

    HTML-Code:
    #header {
    position:relative;
    text-align:left;
    width:990px;
    border-left:0px solid #FFFFFF;
    border-top:0px solid #FFFFFF;
    height:100%;
    background-image:url(grafik/banner.jpg);
    background-repeat:no-repeat;
    background-color:#FFFFFF;
    margin: 0px auto;
    }
    
    #content{
    overflow:hidden;
    width: 990px;
    padding: 5px 0px 70px 0px;
    text-align:left;
    margin: 0px auto;
    }
    
    #footer{
    position:absolute;
    bottom: 0px;
    height:64px; 
    width: 990px; 
    text-align: left; 
    padding-top: 5px; 
    font-weight: 800; 
    color: #000000; 
    background-image:url(grafik/banner-bottom.jpg); 
    border-left: 0px solid #FFFFFF; 
    margin: 0px auto;
    }
    jetzt muss ich nurmeh ne Css-Browserweiche einbaun damit Firefox den content nicht ganz oben über meine Header-grafik schiebt.

    bye, Bubu

  3. #3
    Avatar von bubu-der-uhu
    bubu-der-uhu ist offline Routinier
    registriert
    03-05-2005
    Ort
    Ösireich
    Beiträge
    315

    AW: <div> height bis ganz unten?

    Verdammt!!!!!

    So gehts nur im IE!

    Wenn der Content im Firefox zu lang ist (länger als Browsergrösse) dann macht er den Footer über dem Content

    Ich könnt heulen :sad: !!!

  4. #4
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: <div> height bis ganz unten?

    Zitat Zitat von bubu-der-uhu Beitrag anzeigen

    jetzt muss ich nurmeh ne Css-Browserweiche einbaun damit Firefox den content nicht ganz oben über meine Header-grafik schiebt.

    bye, Bubu
    Wenn dem so ist, dann hast Du offensichtlich etwas grundlegendes falsch gemacht.
    Der Firefox ist der Browser mit der besten CSS-Umsetzung die ich kenne.
    Und wenn der etwas mokiert, dann wäre Dein Konstrukt reif dafür, es nochmals zu überdenken.
    Zudem ist das Mischen von px und % nicht nur im Firefox problematisch...

  5. #5
    Avatar von bubu-der-uhu
    bubu-der-uhu ist offline Routinier
    registriert
    03-05-2005
    Ort
    Ösireich
    Beiträge
    315

    AW: <div> height bis ganz unten?

    Ja, da hast du wahrscheinlich recht.

    der Grund warum Ich height: 100% nehme ist folgender:

    links und rechts: body hintergrund: z.B.: grau
    in der Mitte die eigentliche Seite. Hintergrund: weiß.
    Header Grafik oben: 120px Höhe - weshalb Ich den Content Div 120 px nach unten schieben muss.
    Grafik am Ende der Seite: 60px;
    dazwischen soll die Information stehen (content div)

    Ich hab mich ewig mit positions: absolute; relativ, etc. herumgespielt
    wodurchs der Firefox zwar "richtig macht" mir das Ergebniss des IE aber besser gefällt :whacky: .

    Mit Browserweichen und Co hab Ichs aber nun hingetüftelt, dass beide mein gewünschtes Ergebniss zeigen:

    HTML-Code:
    #header {
    position:relative;
    text-align:left;
    width:990px;
    border-left:0px solid #FFFFFF;
    border-top:0px solid #FFFFFF;
    height:100%;
    background-image:url(grafik/banner.jpg);
    background-repeat:no-repeat;
    background-color:#FFFFFF;
    margin: 0px auto;
    }
    
    #content{
    position:relative;
    top: 120px !important;
    top: 0px;
    overflow:hidden;
    width: 990px;
    padding: 0px 0px 70px 0px;
    text-align:left;
    margin: 0px auto;
    background-color:#FFFFFF;
    }
    
    #footer{
    position:absolute;
    bottom: -76px !important;
    bottom: 0px;
    height:64px; 
    width: 990px; 
    text-align: left; 
    padding-top: 5px; 
    font-weight: 800; 
    color: #000000; 
    background-image:url(grafik/banner-bottom.jpg); 
    border-left: 0px solid #FFFFFF; 
    margin: 0px auto;
    }
    Es ist vielleicht nicht die schönste Lösung - aber Sie funktioniert: Für erleuchtende "schönere" Vorschläge bin Ich natürlich gerne offen!

    *EDIT:

    Scheisse... funktioniert natürlich nicht !!!!!!

    bye, Bubu
    Geändert von bubu-der-uhu (22-08-2006 um 09:45 Uhr)

  6. #6
    Avatar von Skittles
    Skittles ist offline Tripel-As
    registriert
    29-03-2005
    Ort
    Bochum
    Beiträge
    227

    AW: <div> height bis ganz unten?

    Code:
    #header {
    position:relative;
    text-align:left;
    width:990px;
    border-left:0px solid #FFFFFF;
    border-top:0px solid #FFFFFF;
    min-height:100%;
    height:auto !important;
    height:100%;
    background-image:url(grafik/banner.jpg);
    background-repeat:no-repeat;
    background-color:#FFFFFF;
    margin: 0px auto;
    }
    wenn du da dann die anderen boxen reinpackst, solltes es gehen


    2.6.24 i686 inside

Ähnliche Themen

  1. <div> - Position
    Von planet4 im Forum CSS und (X)HTML
    Antworten: 3
    Letzter Beitrag: 04-03-2006, 15:13
  2. Antworten: 10
    Letzter Beitrag: 06-12-2005, 14:59
  3. Genaue Positionierung und Browser
    Von ~red~ im Forum CSS und (X)HTML
    Antworten: 3
    Letzter Beitrag: 31-10-2005, 17:01
  4. Zerschossenes Design
    Von Clausgrm im Forum Allgemeines
    Antworten: 19
    Letzter Beitrag: 26-04-2003, 14:36
  5. Datum formatieren
    Von DejanX im Forum Serverseitige Programmierung
    Antworten: 3
    Letzter Beitrag: 18-06-2002, 13:20

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •