divs anordnen

    Hi,

    ich kriege das mit den divs einfach nicht richtig hin
    ich möchte folgendes machen

    div1 div2
    div3 div4
    div5

    das heißt div 1 ist ein bild was in der mitte der seite sein soll, ein div mit nem video drin rechts daneben, also rechts angeordnet
    div3 enthält das menü und div4 den jeweiligen gewählten inhalt, div4 soll sich links an div1 ausrichten
    div5 soll einfach wieder zentriert unter allem anderen sein
    ich kriege das einfach nicht hin,
    hoffe es kann mir jemand helfen

    So kannst du divs nebeneinander platzieren:

    Bei div1 float:right und bei div2 float:left

    und das Ganze eben untereinander wiederholen.

    habe das probiert, aber durch das erste (div1 float:left), steht doch alles oben links, div1 soll aber zentriert sein

    es soll so aussehen

    ----------div1---------div2
    div3-----div4---------div2
    ----------div5---------div2

    div1 ist ein bild das zentriert sein soll
    div zwei enthält ein flash welches rechts von unten nach oben geht
    div 3 enthält die navi
    div 4 das fenster mit den texten, welches genauso breit sein soll wie das bild in div1
    und div 5 enthält nur eine zeile mit text die auch zentriert sein soll

    Jetzt wird so langsam klar, was du willst.
    Probier mal dieses Grundgerüst. Details musst du noch anpassen.

    habe es jetzt so umgesetzt, aber das menue ist immer noch oben links und nicht weiter unten, das menü zentriert sein und da aufhören wo die ecke das logos beginnt:

    #flash {
    float:right;
    width:auto;
    height:auto;
    }

    #logo {
    width:774px;
    height:206px;
    margin:auto
    }

    #menue{
    float:left;
    margin-left:100px;
    margin-top:auto;
    width:100px;
    height:200px;
    }

    #hauptfenster {
    margin-left:200px;
    margin-right:200px;
    height:100%;
    }

    #etc {
    clear:both;
    }

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Logventure</title>
    <style type="text/css">

    body {
    background-image: url(bilder/back.gif);
    background-repeat:no-repeat;
    }
    body,td,th {
    font-family: Times New Roman, Times, serif;
    }
    #flash {
    float:right;
    width:auto;
    height:auto;
    background-color:transparent;
    }

    #logo {
    width:774px;
    height:206px;
    margin:auto;
    }

    #menue{
    float:left;
    margin-left:100px;
    margin-top:0px;
    width:120px;
    height:200px;
    }

    #hauptfenster {
    margin-left:200px;
    margin-right:200px;
    height:100%;
    }

    #etc {
    clear:both;
    }

    </style>

    <script type="text/javascript">
    function archiv(){
    var zielobjekt =document.getElementById("hauptfenster");
    zielobjekt.innerHTML= "<iframe src='archiv.html' style='height:100%; width:100%'></iframe>";
    }
    function home(){
    var zielobjekt =document.getElementById("hauptfenster");
    zielobjekt.innerHTML= "<iframe src='home.html' style='height:100%; width:100%'></iframe>";
    }
    function organisation(){
    var zielobjekt =document.getElementById("hauptfenster");
    zielobjekt.innerHTML="<iframe src='organisation.html' style='height:100%; width:100%'></iframe>";
    }
    function idee(){
    var zielobjekt =document.getElementById("hauptfenster");
    zielobjekt.innerHTML= "<iframe src='idee.html' style='height:100%; width:100%'></iframe>";
    }
    function team(){
    var zielobjekt =document.getElementById("hauptfenster");
    zielobjekt.innerHTML= "<iframe src='team.html' style='height:100%; width:100%'></iframe>";
    }
    function schwerpunkte(){
    var zielobjekt =document.getElementById("hauptfenster");
    zielobjekt.innerHTML= "<iframe src='schwerpunkte.html' style='height:100%; width:100%'></iframe>";
    }
    function kompetenzen(){
    var zielobjekt =document.getElementById("hauptfenster");
    zielobjekt.innerHTML= "<iframe src='kompetenzen.html' style='height:100%; width:100%'></iframe>";
    }
    function partner(){
    var zielobjekt =document.getElementById("hauptfenster");
    zielobjekt.innerHTML= "<iframe src='partner.html' style='height:100%; width:100%'></iframe>";
    }
    function referenzen(){
    var zielobjekt =document.getElementById("hauptfenster");
    zielobjekt.innerHTML= "<iframe src='referenzen.html' style='height:100%; width:100%'></iframe>";
    }
    function kontakt(){
    var zielobjekt =document.getElementById("hauptfenster");
    zielobjekt.innerHTML= "<iframe src='kontaktformular.php' style='height:100%; width:100%'></iframe>";
    }
    </script>
    </head>

    <body>
    <div id="flash">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/…ersion=7,0,19,0" width="200" height="1205">
    <param name="movie" value="flash/fsblasen.swf" />
    <param name="wmode" value="transparent" />
    <param name="quality" value="high" />
    <embed src="flash/fsblasen.swf" wmode="transparent" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="200" height="1205"></embed>
    </object>
    </div>

    <div id="logo"></div>

    <div id="menue">
    <dl id="menu">


    <script type="text/javascript">var MenuLinkedBy="AllWebMenus [4]",awmMenuName="menu",awmBN="630";awmAltUrl="";</script><script charset="UTF-8" src="menu.js" type="text/javascript"></script><script type="text/javascript">awmBuildMenu();</script>

    </dl>
    </div>

    <div id="hauptfenster">

    </p>
    </div>

    <div id= "etc">Impressum, Webmaster: matthiasgeissler@gmx.de, letzte Änderung: 10.08.2007</div>
    </body>
    </html>

    So?

    Wenn du die Rahmen weglässt musst du nochmal die Breiten justieren.

    das menü ist immer noch oben links, das flash nicht ganz rechts am rand und das logo wird zwischen dem flash und dem linken rand zentriert, da das flash aber nicht ganz rechts ist ist das logo auch nicht in der mitte der seite

    es soll so sein, dass sich die divs an der auflösung ausrichten, aber ihr verhältnis zueinander trotzdem gleich ist

    Zitat von 00eraser00


    es soll so sein, dass sich die divs an der auflösung ausrichten, aber ihr verhältnis zueinander trotzdem gleich ist


    Dann musst du statt mit Pixelwerten mit Prozentangaben arbeiten, z. B. width: 80%

    Dein Logo-Bild hat jedoch eine feste Breite. Von daher kann es sich nicht anpassen (Es sei denn du verwendest auch hier einen Prozentwert, was zu Skalierung mit Verpixelung führen kann).
    Die Navi wird bei mir unter dem Logo angezeigt (IE 7).
    Falls u IE 6 hast, dann weise der Navi noch ein "display: inline;" zu.