Ergebnis 1 bis 3 von 3

Thema: Div-Container gleich hoch aber variabel

  1. #1
    Azubi(ne)
    Registriert seit
    22.01.2007
    Beiträge
    74
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Div-Container gleich hoch aber variabel

    Hallo allerseits,
    ich bin gerade dabei ein Layout für meine Webseite zu basteln. Ich habe es auch soweit fertig. Es gibt oben einen Banner, ein Verlauf/momentane Position auf der Seite im Banner, links ein Menu, rechts der eigentliche Content und unten die Fußleiste. Im Moment sind die Höhen der beiden mittleren Divs variabel, abhängig vom jeweiligen Inhalt. Ich möchte nun die beiden Container für das Menü und den Inhalt immer gleich groß machen, d.h. wenn der div-Container vom Inhalt aufgrund des Inhalts größer ist, als der Menü-Container soll das div für das Menü genauso hoch sein und genauso umgekehrt. Heißt also, es gibt immer 2 Spalten, die vom Banner bis zur Fussleiste reichen, unabhängig vom Inhalt, allerdings vergrößern sich die Div-Bereiche, wenn mehr Inhalt dazu kommt. Ich hoffe Ihr wisst, was ich meine. Ich schicke jetzt noch das html und css dazu.
    HTML-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        
        
        <link rel="stylesheet" type="text/css" href="styles/site.css">
        <link rel="stylesheet" type="text/css" href="styles/history.css">
        <link rel="stylesheet" type="text/css" href="styles/menu.css">
    </head>
    
    <body>
        <div id="site">
            <div id="banner">
                <div id="history"><a href="" class="history">HOME</a> &gt; <a href="" class="history">NEWS</a></div>
            </div>
            
            <div id="menu">
                <ul class="menu">
                    <li><a href="" class="menu">Menu</a>
                        <ul class="submenu">
                            <li><a href="" class="submenu">Submenu</a></li>
                            <li><a href="" class="submenu">Submenu</a></li>
                        </ul>
                    </li>
                    <li><a href="" class="menu">Menu</a></li>
                    <li><a href="" class="menu">Menu</a></li>
                    <li><a href="" class="menu">Menu</a></li>
                   </ul>
            </div>
            <div id="content">content <br />content<br />content <br />content<br />content <br />content<br />content <br />content<br /></div>
            <div id="footer">footer</div>
        </div>
    </body>
    </html>
    Code:
    *charset "utf-8";
    /* CSS Document */
    
    body{
        background-color:#BFCDD6;
         height:100%;
        background-attachment:fixed;
        background-repeat:repeat;
        text-align:center;
    }
    
    div{
        position:static;
        display:block;
    }
    
    div#site{
        top:0px;
        width:800px;
        margin:0px auto;
        margin-top:10px;
    }
    
    div#banner{
        position:relative;
        float:none;
        background:url(../pics/banner.png);
        height:120px;
        width:798px;
        clear:both;
        border-left:1px solid #FFFFFF;
        border-right:1px solid #FFFFFF;
        border-top:1px solid #FFFFFF;
        background-repeat:repeat-x;
    }
    
    div#history{
        position:relative;
        float:right;
        clear:both;
        height:32px;
        width:607px;
        top:88px;
        background:url(../pics/history.png);
        background-repeat:repeat-x;
        border-left:1px solid #FFFFFF;
        text-align:left;
        padding-top:10px;
        padding-left:10px;
        
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size:10px;
        font-weight:lighter;
        color:#5B5F82;
    }
    
    div#menu{
        position:relative;
        float:left;
        clear:none;
        width:180px;
        background:url(../pics/menu.png);
        background-repeat:repeat-y;
        border-left:1px solid #FFFFFF;
        border-right:1px solid #FFFFFF;
        border-top:1px solid #FFFFFF;
        text-align:left;
    }
    
    div#content{
        position:relative;
        float:left;
        clear:right;
        width:618px;
        background:#EDF4FA;
        border-right:1px #FFFFFF;
        border-top:1px solid #FFFFFF;
    }
    
    div#footer{
        position:relative;
        float:none;
        background:url(../pics/footer.png);
        height:40px;
        width:798px;
        clear:both;
        border:1px solid #FFFFFF;
    }
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Jedi Ritter Avatar von Dodo
    Registriert seit
    26.04.2008
    Ort
    Wien
    Alter
    27
    Beiträge
    3.774
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    1
    Something big is coming. And there will be pirates and ninjas and unicorns...

  3. #3
    Azubi(ne)
    Themenstarter

    Registriert seit
    22.01.2007
    Beiträge
    74
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    hehe, ja genauso habe ich das gestern auch ausprobiert. Hab mir eine Hintergrundgrafik gebastelt, die bei den ersten 180px das Aussehen des Menüs hat und die verbleibenden 620px das Aussehen des Content-Divs. Diesen Hintergrund habe ich dann meinem site-Container zugewiesen. Der Hintergrund erstreckt sich also über den gesamten Bereich (auch Kopf- und Fuss-Container, die aber später überdeckt werden) Dass das schon die beste Lösung ist, hätte ich nicht gedacht, denn die div-Container sind ja immernoch nicht gleich hoch. Nagut, interessiert ja eigentlich auch nicht.
    Ich danke dir

Ähnliche Themen

  1. Variabel setzen
    Von Marlo im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 16
    Letzter Beitrag: 03.07.2008, 14:37
  2. DIV-COntainer variabel anlegen
    Von crillerich im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 18.05.2007, 19:46
  3. Alle Seiten gleich! Aber warum?
    Von Area51sbk im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 05.05.2007, 15:49
  4. [JS] Probleme beim Speichern einer Variabel (Schriftgrösse)
    Von lester im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 10
    Letzter Beitrag: 20.10.2005, 15:00
  5. Layer variabel ausrichten
    Von cmykay im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 10.11.2004, 15:03

Stichworte

Berechtigungen

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