1. Dashboard
  2. Artikel
  3. Mitglieder
    1. Letzte Aktivitäten
    2. Benutzer online
    3. Team
    4. Mitgliedersuche
  4. Forum
    1. Unerledigte Themen
  • Anmelden
  • Registrieren
  • Suche
Dieses Thema
  1. HTML - Webmaster Forum
  2. HTML / Webmaster Forum
  3. HTML & CSS Forum

Höhe von Divs...

  • Netvizion
  • 16. Oktober 2009 um 12:57
  • Netvizion
    Teeny
    Beiträge
    20
    • 16. Oktober 2009 um 12:57
    • #1

    Hallo allerseits,

    ich stehe vor einem nervtötenden Problem...

    Ich möchte eine Seite aus 5 untereinanderfolgenden <divs> bauen, jedoch klappt es mit der Höhe in "%" nicht... Suche schon seit 3 Stunden google durch, auch faux columns hat mir irgendwie nich weitergeholfen... min-height ist auch keine lösung.. weiß einfach nicht weiter.
    Außerdem soll .inhalt (div) einen Bereich zum scrollen haben.

    Hier mein HTML:

    Code: Alles auswählen
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/transitional.dtd">

    <html>
    <head>
    <title>....</title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

    <link rel="icon" href="favicongw.ico" type="image/x-icon">
    <link rel="shortcut icon" href="favicongw.ico" type="image/x-icon"> <!-- Fuer IE -->
    <link rel="stylesheet" type="text/css" href="homepage.css">


    </head>


    <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

    <div class="all">

    <div class="navoben">
    test
    </div>

    <div class="logol">
    test
    </div>


    <div class="logor">
    test
    </div>


    <div class="inhalt">
    test
    </div>


    <div class="navunten">
    test
    </div>

    </div>

    </body>
    </html>

    -----------------------------------------------
    CSS: homepage.css

    .all {width:100%; height:100%}

    .navoben {height:10%; width:100%;}

    .logol {height:14%; width:50%; float:left}

    .logor {height:14%; width:50%; float:right}

    .inhalt {height:66%; width:100%;}

    .navunten {height:10%; width:100%;}

    ---------------------------------------------------


    Das was stört ist, dass die divs zwar 100% Breite haben, aber nur so hoch wie der "content test" sind... :?

    Hier mal meine Vorstellung der Seite:

    [Blockierte Grafik: http://www.gradeko-werbung.de/divs.gif]

    Hoffe hier wird mir geholfen ;)

    Mfg
    Netvizion

    2 Mal editiert, zuletzt von Netvizion (19. Oktober 2009 um 16:37)

  • sejuma
    Kaiser(in)
    Reaktionen
    5
    Beiträge
    2.720
    • 16. Oktober 2009 um 13:16
    • #2

    Die Prozentwerte brauchen noch einen Bezugspunkt. Das ist html und body (erste Zeile)

    Den rechten Teil habe ich etwas anders formatiert, beim Inhalt noch "overflow: auto;"

    Code
    html, body {margin: 0; padding: 0; height: 100%; width: 100%;}
    .all {width:100%; height:100%}
    
    
    .navoben {height:10%; width:100%;background: green;}
    
    
    .logol {height:14%; width:50%; background: red; float:left;}
    
    
    .logor {height:14%; margin-left: 50%; background: blue;}
    
    
    .inhalt {background: yellow; height:66%; width:100%; overflow: auto;}
    
    
    .navunten {background: magenta;height:10%; width:100%;}
    Alles anzeigen

    [Blockierte Grafik: http://www.ohne-css.gehts-gar.net/img/banner/banner350x20.png]
    sejuma's CSS-Einsteigerkurs

  • Netvizion
    Teeny
    Beiträge
    20
    • 16. Oktober 2009 um 13:21
    • #3

    Vielen, vielen Dank für die schnelle Antwort!!!

    Habs dazu auch noch geschnallt :lol:

    Aus meinem CSS/XHTML Buch ging das nicht hervor..

    MFG
    Netvizion

Tags

  • gif
  • homepage
  • html
  • link
  • background
  • body
  • text
  • blue
  • werbung
  • problem
  • code
  • auto
  • div
  • inhalt
  • google
  • scrollen
  • height
  • css
  • image
  • width
  • formatiert
  • left
  • w3c
  • overflow
  • float
  • padding
  • margin
  • skalieren
  • div container
  • divs
  • teil
  1. Datenschutzerklärung
  2. Impressum
Community-Software: WoltLab Suite™
  • Alles
  • Dieses Thema
  • Dieses Forum
  • Artikel
  • Seiten
  • Forum
  • Erweiterte Suche