• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Problem mit zwei benachbarten Divs

MrPii2

MrPii2

Neues Mitglied
Hallo liebes Forum :)

Wie so viele bastel ich gerade an einer Homepage die nun bis auf einige inhaltliche Aspekte, auch fast fertig gestellt ist.

Der auf ist der übliche, ein Header, auf der linken Seite ein Menü und ein paar Infos, und rechts neben dem Menü der Content bereich. Natürlich wird das ganze von einer Fußleiste abgerundet.

Das Problem ist nun das ich beim "Befüllen" des Inhaltes festgestellt habe, dass sich der Content Bereich wie gewünscht dem Inhalt anpasst, aber die meist kürzerer Menü Box doch eher unschön wirkt. Also ist mein Ziel nun die Menü leiste mit wachsen zu lassen.

Probiert habe ich bereits mit "height" und "min-height" 100% zu setzen, auch mit den Umgebenden Containern sowie des html und body Bereiches. Leider verschaffte mir nichts den gewünschten Erfolg. Auch meine Suche im Internet brachte mich immer wieder auf diese Ansätze zurück.

Ich hoffe das mir hier jemand helfen 0:)

Meine html Struktur sieht so aus :

HTML: 
<!doctype html><html>
<head>


<meta charset="utf-8">
<title>Seite</title>
<link href="style/style.css" type="text/css" rel="stylesheet" />


</head>


<body>
    <a name="seitenanfang"></a>
    <div id = "header">
        <div id = "header_banner">
            <div id = "position_text">Startseite</div>
        </div>   
    </div> 
    
    
   
   <div id = "seite">
        <div id = "content">
              <div id = "inhalt">
                  <h1>Willkommen</h1>
              </div>
        </div>
   
           <div id = "menue_background">
                <h3>Navigation</h3>
                   <ul id = "menue_list">
                       <li><a href="index.html"><p>Startseite</p></a></li>
                   </ul>
                <h3>Inhalt</h3>
                <div class = "zeiten_back">
                    <div class = "zeiten">
                          <p>Dienstag 16:30 - 18:00 Uhr Donnerstag 18:30 - 20:00 Uhr</p>
                     </div>
                </div>
                <div id = "zeiten_shadow"></div>
            </div>

        <div class= "clear"></div>
    </div>


 
    <div id = "botton_background">
        <div id = "botton_menue">
            <div id = "botton_ul">    
                <ul>
                    <li class = "botton_list"><a href="impressum.html"><div>Impressum</div></a></li>
                </ul>
            </div>
        </div>
    </div>
    
</body>
</html>

Wenn es geht würde ich damit nun gerne den bereich "menue_background" auf 100% des Bildschirmes nach unten ausbreiten.

Meine CSS datei sieht so aus:

HTML: 
html,body {
    margin: 0px auto;
    min-width:960px;
    background:url(../img/background_first.png) repeat-x;
    background-color:#3D93FF;
    font-size: 10pt;
    font-family:Arial;
}


li {
    list-style:none;
    margin: 0;
    padding:: 0;
}


ul {
    list-style:none;
    margin: 0;
    padding:: 0;
}


a:visited {color: #FFF;text-decoration:none}
a:hover   {color: #FFF;text-decoration:none}
a:active  {color: #FFF;text-decoration:none}


#mail_add a{
    text-decoration:underline;
}




#header {
    text-align:center;
    background:url(../img/header_background.png) repeat-x;
    margin:0px auto;
    width:100%;
    height:284px;
}


#header_banner {
    color:#FFF;
    margin:0px auto;
    text-align:center;
    height:284px;
    width:960px;
    background:url(../img/header.png);
}


#position_text {
    
    text-align:left;
    padding-top:252px;
    padding-left:225px;
    font-size: 12pt;
    font-weight:bold;


}


#seite {
    margin: 0px auto;
    height:auto;
    width:960px;
    text-align:center;
    
    min-height:100%;
}


#content {
    margin: 0px auto;
    height:auto;
    min-height:772px;
    width:756px;
    background:url(../img/content.png) repeat-y;
    text-align:center;
    float:right;
}


#menue_background {
    background:url(../img/menue.png) repeat-y;
    width:202px;
    min-height:772px;
    height:auto;
    float:right;
    color:#FFF;
}


#menue_list {
    margin-top:10px;
    padding-left:26px;
    clear:both;
    
}




#menue_list a {
    text-decoration:none;
}




#menue_list p {
    margin:0;
    padding-top:3px;
    width:157px;
    height:27px;
    background:url(../img/buttons.png) no-repeat;
    background-position:0px -27px;
}


#menue_list p:hover {
    background-position: 0px 2px;
    color:#333;
}


.zeiten_back {
    
    margin-left:6px;
    padding-left:5px;
    text-align:left;
    height:auto;
    width:198px;
    background:url(../img/zeiten_back.png) repeat-y;
}


.zeiten p {
    margin:0px auto;
    }


#zeiten_shadow {
    margin:0px 6px auto;
    height:9px;
    width:198px;
    background:url(../img/zeiten_endShadow.png)  no-repeat;
}


#inhalt {
    padding-top: 20px;
    padding-left: 50px;
    text-align: center;
}


#botton_background {
    background:url(../img/backend_background.png) repeat-x;
    height:33px;
    width:auto;
    margin:0px auto;
    color:#FFF;
}


#botton_menue {
    text-align:center;
    margin:0px auto;
    height:34px;
    width:960px;
}


#botton_menue a {
    color:#FFF;
    text-decoration:none;
}


.botton_list {
    float:left;
    padding-top:8px;
    margin:0px 15px auto;
}


#botton_ul {
    width:400px;
    padding-left:190px;
}


#by {
    width:200px;
    padding-top:8px;
    margin-left:230px;
    font-weight:bold;
    float:left;
}




.clear {
    clear:both;
}

Hoffentlich ist es ein wenig nachvollziehbar, schon einmal vielen Dank im Vorraus!

LG Pii
 
Mache es doch einfach mit jQuery.

Code: 
var foo = $('#seite').height();
$('#menu_background').height(foo);
 
Da ich leider keine Erfahrung mit jQuery besitze, könntest du mir freundlicherweise kurz erläutern, wie ich diesen Code einbinde?

LG
 
Und eine leichtere Möglichkeit als mir jQuery anzueignen besteht nicht, mein Problem zu lösen ?
 
Hast du die jQuery Bibliothek eingebunden?
Gab es eine JavaScript Fehlermeldung in der Konsole?
Hast du dir den Wert von var foo ausgeben lassen?

Ich sagte ja, nur copy & paste reicht nicht. Aber nimm dir doch den Ansatz mit CSS, falls es für dich einfacher sein sollte. Mir wäre das zu aufwendig.
 
Also eingebunden habe ich die Bibliothek mit
Code: 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>

die Variable hat den Wert 1696 was stimmen dürfte.
Eine Fehlermeldung bekomme ich nicht.
 
Also jQuery ist richtig eingebunden und die Selektoren stimmen auch?

Dann versuche statt dessen mal:

Code: 
$(document)ready(function() {
    var foo = $('#seite').height();
    $('#menu_background').css(['height' : foo + 'px']);
});

Damit sollte die height des Divs mit der ID #seite dem Div #menu_background zugewiesen werden. Dabei bietet es sich an, den beiden Divs einen border zuzuweisen, respektive im Firebug nachzuschauen, ob bei #menu_background ein style-Attribut in das Tag geschrieben wurde.

/edit: Um zu überprüfen, ob jQuery geladen wurde und gleichzeitig die Version abzufragen, gib mal in der Konsole ein:

Code: 
$().jquery;
 
Zuletzt bearbeitet:
Problem gefunden,lediglich ein Schreibfehler statt #menu_background muss es #menue_background heißen ;)
Jetzt funktioniert es hab vielen Dank!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben