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

Div Grössen richtig anpassen

V

veritas696

Neues Mitglied
Hallo zusammen,

ich habe folgendes Problem:
meine Seite besitzt einen Div-Bereich welcher ein Menu (oben) und einen Content-Bereich (darunter) enthält. Das Menu besteht aus einer Liste (vereinfacht hier ohne Links). Der Content-Bereich ändert sich je nach gewähltem Menupunkt.

Beispielcode:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
    <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=windows-1252">
    <TITLE></TITLE>
    <META NAME="GENERATOR" CONTENT="">
    <META NAME="AUTHOR" CONTENT="Olaf Heddergott">
    <META NAME="CREATED" CONTENT="20090903;11225600">
    <META NAME="CHANGEDBY" CONTENT="Olaf Heddergott">
    <link href="../0_screen.css" rel="stylesheet" type="text/css" media="screen">
    <link href="../0_print.css" rel="stylesheet" type="text/css" media="print">
</HEAD>
<BODY id="produkte" LANG="de-DE" DIR="LTR" >

<div id="global">
  <div id="center_wrapper_bg">
        
    <div id="top_menu">   
      <ul>
      <li>Neuheiten</li>
      <li>Unternehmen</li>
      <li>Events</li>
      <li>Produkte</li>
      <li>Service& Downloads</li>
      <li>Preisübersicht</li>
      <li>Online-Shop</li>
      <li>Partner</li>
      <li>Presse</li>
      <li>Karriere</li>
      
      </ul>
    </div>
    
    <div id="content_wrapper">
      
      <div id="content">
        <?php
        $zahl = 15;
        for($count = 1; $count < $zahl; $count++)
        {
            echo "test test test test test test test test test test test test test test test test test <br />";
        }    
        
        ?>
      </div>
      
    </div>    
    
  </div>
</div><!--Ende #global-->

</body>
</html>
das zugehörige CSS:
HTML: 
* {
  margin:     0;
  padding:     0;
}

html, body 
{
  height:         100%;
  width:         100%;
  font-size:     90%;
  font-family:     Verdana;
  background-image: url(0_img/bg.png);
  overflow:        hidden;
}

/* Extra für IE6    */  
* html, * html body 
{
  margin:0;
  padding:0;
  height: 100%;
}
#global
{
  border: 3px solid #000000;/**/
  /*position: absolute;*/
  width: auto;
  height: 100%;
  padding: 0px 0px 0px 0px;
      
}

#center_wrapper_bg
{
  border: 2px solid #0000FF;
  position: absolute;
  height: 95%;
  width: auto; 
  padding: 0px;
  margin: 10px 10px 10px 200px; 
  z-index:10;
  background-color: #ffffff;
}
#content_wrapper
{
  border: 1px solid #00FFFF;/**/
  position: relative;
  /*left: 0px;*/
  /*top: auto; top: 0px;*/
  height: inherit;
  width: auto;
  background-color: #ffffff; 
  text-align: center;
  overflow:auto;
  z-index:11;
  /*padding-left: 0px;*/
  padding: 0px 0px 0px 20px;
  margin-right: 0px;  
}


#content
{
  border: 1px solid #FF00FF;/**/
  position: relative;
  height: auto;
  background-color: #ffffff; 
  text-align: center;
  margin-left: 40px;
  margin-right: 10px;
  z-index:12;
  overflow:auto;
}
#top_menu
{
  /*position: absolute;*/
  background-color: #999999;
  padding: 1px 25px 0px 25px;
  text-align: center;
  overflow: hidden;
  z-index: 11;
  width: auto;
}
    #top_menu ul 
    {
      margin-bottom: 0; 
      font-size: 80%;
      font-family: "verdana";
    }
    #top_menu li 
    {
      line-height:2em;
      display: inline; 
      list-style-type: none; 
      margin: 0px; 
    }
Der Content-Bereich ist je nach Größe des Inhalts scrollbar.
Das Menu bleibt beim scrollen immer sichtbar.
Ändert man die Breite des Browserfensters so werden alle Menupunkte weiterhin angezeigt und gegebenfalls in 2,3 oder mehr Zeilen aufgelistet.
Nun habe ich das Problem das sich der Inhalt des Content-Bereichs nicht an die Größe des Übergeordneten Divs anpassen lässt, bzw bekomme ich es nicht hin ;)
Das heißt, verringere ich nun die Breite des Browserfensters so läuft der Content (Türkiser Rahmen, #content_wrapper) unter das übergeordnete DIV (Blauer Rahmen, #content_wrapper_bg) hinaus. Wie kann ich das verhindern?
Das Problem liegt sicher bei der veränderlichen Höhe des Menus doch wie lässt sich der Content daran anpassen daß er nie aus den Blauen Rahmen "fällt" ?

Zur Info: zur Einfachheit habe ich einige Elemente weggelassen so daß euch vielleicht einige Divs überflüssig erscheinen ;)
 
Werbung:
Ich wär nicht hier, hät ich da nicht schon nach dem problem gesucht ;)

vielleicht noch mal anders beschrieben: Ein Div enthält zwei unterander liegende Divs, Das obere Div passt sein Höhe je nach breite des Eltern-Divs an (um alle Inhalte im Fenster anzuzeigen).
Das untere Div soll den restlichen Bereich des Eltern-Divs einehmen, also Quasi in der Höhe variieren wobei der untere Rand dem des Eltern-Divs entspricht und der obere Rand an das obere Div anschließt. Alles unabhängig welcher Inhalt im unteren DIV steht (dieser wird gegebenfalls gescrollt).

??
 
Werbung:
Nicht näher geprüft, aber ich vermute, dass es an den absoluten und relativen Positionierungen liegt.
Werf die mal alle raus. Die heißen so, weil sie meist absolut unnötig sind, sofern man sie nicht ganz speziell einsetzt.
 
Die Entfernung der position- Angabe führt nicht zum Ziel, welchen Wert muss ich den für height und/oder overflow beim #content_wrapper angeben damit er bei zu größem Inhalt nicht aus dem #content_wrapper_bg hinaus läuft? Wie gesagt, der Inhalt läuft erst aus den blauen Rahmen wenn ich mein Browser Fenster sehr schmal ziehe und damit das Menu mehrere Zeieln benötigt -> #content_wrapper rutscht weiter runter.

??
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben