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

ein div in einem div vertikal nach unten positionieren

Status
Für weitere Antworten geschlossen.
D

destiny156

Neues Mitglied
hallo zusammen,

von dem prob was ich habe, habe ich schon oft von gelesen und es gibt auch viele lösungen, nur das keine bei mir funzt. Hier schonmal der code
Code: 
<body>

<!--main-->
<div id="site_main">
  
  <!--header-->
  <div id="site_header">
  
    <!--logo-->
    <div id="site_header_left">
    </div>
    <!--logo end-->

    <!--headerpic-->
    <div id="site_header_right">
    </div>
    <!--headerpic end-->
    
  </div>  
  <!--header end-->
  
  <!--middle-->
  <div id="site_middle">
  
    [COLOR=Red]<!--menu-->
    <div id="menu">
    
      <!--navi-->
      <div id="navi">
      läuft
      </div>
      <!--navi end-->
   
      <!--contact-->
      <div id="contact">
      moin
      </div>
      <!--contact end-->[/COLOR]
  
   [COLOR=Red]</div>
   <!--menu end-->[/COLOR]
 
    <!--content-->
    <div id="content">
    Hallo
    </div>
    <!--content end-->
    
  </div>
  <!--middle end-->
  
  <!--footer-->
  <div id="footer">
  </div>
  <!--footer end-->  
  
</div>
<!--main end-->
</body>

hier die CSS:

Code: 
body{   
    text-align: center;
    margin-top: 0px;
    background-color: #445909;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    font-weight: normal;
    text-decoration: none;
}

div#site_main{
    background-color: #ffffff;
    padding: 0px;
    margin: auto;
    width: 800px;
}

div#site_header{
    width: 800px;
}

div#site_header_left {
    width: 200px;
    height: 150px;
    background-image: url(gif/logo.gif);
    background-position: center;
    background-repeat: no-repeat;
    float: left;
}

div#site_header_right {
    width: 600px;
    height: 150px;
    background-image: url(gif/haus_grau.jpg);
    background-position: center;
    background-repeat: no-repeat;
    float: left;
}

div#site_middle{
    clear: both;   
    float: left;
    text-align: left;
    width: 800px;
    background-image: url(gif/background.gif);
}

[COLOR=Red]div#menu {
    width: 200px;
    float: left;
}

div#navi {
    float: left;
    width: 200px;
}

div#contact {
    float: left;
    width: 200px;
    background-image: url(gif/contact_background.gif);
}[/COLOR]

div#content {
    width: 600px;
    float: right;
}

div#footer {
    height: 13px;
    clear: both;
    width: 800px;
    background-image: url(gif/footer_background.gif);
}
so, ich habe also in dem menu-div zwei weitere divs, einmal navi und einmal contact. das navi-div soll innerhalb des menu-divs oben positioniert sein, kein ding. das contact-div soll innerhalb des menu-divs ganz unten sein, da liegt das prob. ich brauche eine lösung die im FF wie auch im IE funzt und welche die seite immernoch dynamisch und flexibel sein lässt. "display: table-cell" und was sonst noch mit table ist, fällt weg, da der IE nicht mitmacht. "position: absolut" fällt weg, da dann flexibilität futsch ist. habe auch mit margin rumgefrickelt bzw. bottom und position relativ, aber es funzt einfach nicht.

falls euch ein paar komische oder doppeltgemoppelte befehle auffallen liegt das daran das ich jeden mist ausprobiert habe, sei er auch noch so unlogisch;)
 
Bevor du weiter machst....

Header kannst du mit <h1> darstellen, menu wird in <ul> <li></li>... </ul> dargestellt.
 
Ja nee, is kla

k, also das ist erst der grobe aufbau und das menü wird später dynamisch mit unserem cms-system eingebunden, falls du das meintest. aber hilft mir das bei meinem prob?
 
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de-de">

<head>
<title>test</title>


<style type="text/css">
#navi    {     height: 250px;
        width: 250px;
        margin: 0px auto;
        list-style:none;
        border: 1px solid;
    }


.oben    {    height: 50px;
        width: 50px;
        background-color: #000000;
    }


.unten    {    height: 50px;
        width: 50px;
        margin-top: 150px;
        background-color: #000000;
    }

</style>

</head>

<body>
<ul id="navi">
    <li class="oben">     <a href="#"> oben </a> </li>
    <li class="unten">     <a href="#"> unten </a> </li>
</ul>

</body>
</html>

und weiter? Ist es das was du willst?
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben