[gelöst!] CSS Layout, 2 Divs nebeneinander zentriert, eins davon fixed

Dieses Thema im Forum "Webentwicklung" wurde erstellt von -idur-, 15. September 2008 .

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 15. September 2008
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    moin,

    ich mach grad meine ersten versuche im css-design. hab bisher alles mit tabellen gemacht und wollte endlcih mal auf css umsteigen. klappt auch soweit ganz gut, nur eine sache geht irgendwie nich...

    und zwar soll das ganze so aussehen:
    Bild

    ich krieg das einfach nich gebacken... das ganze soll horizontal zentriert sein

    kann das kurz einer für mich machen, damit ich seh wie das geht?
    wäre sehr dankbar

    greetz
     
  2. 15. September 2008
    AW: CSS Layout, 2 Divs nebeneinander zentriert, eins davon fixed

    ja das weiß ich, aber ich kriegs nich hin, dass die navi rechts genau an der stelle fixiert is...
    immer wenn ich position: fixed; eintrage, dann is die navi nich mehr da, sondern irgendwo anders
    trotzdem danke!
     
  3. 15. September 2008
    AW: CSS Layout, 2 Divs nebeneinander zentriert, eins davon fixed

    dann nimmst du noch float dazu
    beides auf float: left und bei einem nen margin einstellen, damits auseinander geht
    außerdem wäre dein bisheriger code hilfreich
     
  4. 15. September 2008
    AW: CSS Layout, 2 Divs nebeneinander zentriert, eins davon fixed

    ok... hier:

    sind jetzt allerdings n paar andere pixel-angaben, als in dem bild ausm ersten post, aber das dürfte ja egal sein...

    die html-datei
    Code:
    <html>
    <head>
     <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    
    <body>
    <div id="mitte">
     <div id="inhalt">
     Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text
     </div>
     <div id="navi">
     Navigation<br /><br />
     Link1<br />Link2<br />Link3<br />Link4<br />Link5<br />Link6<br />Link7<br />
     </div>
    </div>
    </body>
    
    </html>
    
    und hier die css:
    Code:
    #mitte {
     margin: 160px auto;
     height: 400px;
     width: 850px;
    }
    #inhalt {
     float: left;
     width: 550px;
     margin: 0px 0px 0px 0px;
     padding: 10px;
     background-color: #cccccc;
    }
    #navi {
     float: left;
     width: 250px;
     height: 300px;
     margin: 0px 0px 0px 10px;
     padding: 10px;
     background-color: #cccccc;
    }
    

    jetzt scrollt halt die navi mit... is ja auch logisch, aber wenn ich ein position:fixed; einbaue, springt die navi woanders hin
    das is mein problem
     
  5. 15. September 2008
    AW: CSS Layout, 2 Divs nebeneinander zentriert, eins davon fixed

    hab zwei möglichkeiten für dich:

    HTML:
    <!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=utf-8" />
    <title>Unbenanntes Dokument</title>
    <style type="text/css">
    <!--
    #container {
     position: absolute;
     left: 0px; /*Abstand links*/
     top: 170px;
     width: 760px;
     height: auto;
     z-index:1;
     background: #00FF00;
    }
    #inhalt {
     position: absolute;
     float: left;
     width: 500px;
     height: auto;
     z-index:1;
     background: #00FF00;
     padding-right: 10px;
    }
    #menue {
     position: fixed;
     float: right;
     width: 250px;
     height: 300px;
     z-index:1;
     background: #0000FF;
    }
    </style>
    </head>
    
    <body>
    <div id="container">
     <div id="inhalt">
     <p>Hier dein Inhalt</p>
     </div>
     <div id="menue">
     <p>Hier dein Menü</p>
     </div>
    </div>
    </body>
    </html>
    
    oder
    HTML:
    <!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=utf-8" />
    <title>Unbenanntes Dokument</title>
    <style type="text/css">
    <!--
    #container {
     position: absolute;
     left: 0px; /*Abstand links*/
     top: 170px;
     width: 760px;
     height: auto;
     z-index:1;
     background: #00FF00;
    }
    #inhalt {
     position: absolute;
     float: left;
     width: 500px;
     height: auto;
     z-index:1;
     background: #00FF00;
    }
    #menue {
     position: fixed;
     float: right;
     width: 250px;
     height: 300px;
     z-index:1;
     background: #0000FF;
    }
    </style>
    </head>
    
    <body>
    <div id="container">
     <div id="inhalt">
     <p>Hier dein Inhalt</p>
     </div>
     <div id="menue">
     <p>Hier dein Menü</p>
     </div>
    </div>
    </body>
    </html>
    
    der unterschied?

    beim ersten ist padding eingstellt:
    sprich es wird immer ein rand von 10px eingehalten.

    beim unteren habe ich das padding weggelassen, jedoch ist auch ein rand von 10 px da, weil ich den container 760px breit gemacht habe (beim ersten auch, aber das padding verwendet die 10px dann ja )

    kannst dir ja aussuchen welche version dir besser gefällt...

    wenn jmd einwände hat, bitte sagen^^

    bin selber erst am div lernen dran. so bekomm ich gleich eine kontrolle dazu

    gruß
    rag
     
  6. 15. September 2008
    AW: CSS Layout, 2 Divs nebeneinander zentriert, eins davon fixed

    @rag: is nich zentriert und die navi is zwar fixed, aber verdeckt den inhalt... also nich so, wie ich das wollte...

    hast trotzdem ne bw für deine mühe
     
  7. 15. September 2008
    AW: CSS Layout, 2 Divs nebeneinander zentriert, eins davon fixed

    HTML:
    <!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=utf-8" />
    <title>Unbenanntes Dokument</title>
    <style type="text/css">
    <!--
    #container {
     left: 0px; /*Abstand links*/
     top: 170px;
     width: 760px;
     height: auto;
     z-index:1;
     background: #00FF00;
     margin:0px auto;
    }
    #inhalt {
     position: fixed;
     float: left;
     width: 500px;
     height: auto;
     z-index:1;
     background: #00FF00;
     padding-right: 10px;
    }
    #menue {
     position: fixed;
     float: right;
     width: 250px;
     height: 300px;
     z-index:1;
     background: #0000FF;
    }
    </style>
    </head>
    
    <body>
    <div id="container">
     <div id="inhalt">
     <p>Hier dein Inhalt</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     </div>
     <div id="menue">
     <p>Hier dein Menü</p>
     </div>
    </div>
    </body>
    </html>
    
    thx für die bw

    änderungen: alles auf fixed bis auf den container.

    das attribut position weggenommen und margin:0px auto; reingesetzt.
    dann wird das ganze zentriert. bei mir zumindest ^^

    versuchs mal
     
  8. 16. September 2008
    AW: CSS Layout, 2 Divs nebeneinander zentriert, eins davon fixed

    hmm ne, das is immer noch nich das, was ich wollte

    das inhalt-div darf nicht fixed sein... der sinn dahinter: wenn viel text auf der seite steht, so dass man runterscrollen muss, dann soll halt die navi immer daneben bleiben obwohl man halt shcon viel weiter utnen auf der seite is. ich hoff, das war jetzt verständlich

    außerdem is bei dir die navi wieder über dem inhalt und verdeckt den. die navi soll aber rechts daneben sein...

    vllt. kannst du ja auf meinem bisherigen code aufbauen, weil da stimmt das design am anfang ja. da muss nur noch die navi fest fixiert werden.

    greetz
     
  9. 16. September 2008
    AW: CSS Layout, 2 Divs nebeneinander zentriert, eins davon fixed

    naja, so einfach wars ez ned... aber es klappt

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
     <head> 
     <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /> 
     <title>Test</title> 
     <style type="text/css">
     body {
     text-align: center;
     font-family: verdana;
     font-size: 12px;
     margin: 20px;
     padding: 0;
     }
     
     #main {
     width: 90%;
     border: 1px solid #dfdfdf;
     background-color: #f5f5f5;
     margin: 0 auto;
     text-align: left;
     }
     
     #menu, #content {
     margin: 10px;
     }
     
     #menu {
     width: 200px;
     border: 1px solid #dfdfdf;
     background-color: #fff;
     float: right;
     }
     
     #content {
     margin-right: 222px;
     border: 1px solid #dfdfdf;
     background-color: #fff;
     }
     </style>
     <script type="text/javascript">
     //<![CDATA[
     /**
     * fixMenu - make an element fixed
     * btw: you can fix any element with this function ;)
     *
     * @param String id [id of the element]
     * @void
     */
     function fixMenu(id) {
     var menu = document.getElementById(id);
     if(!menu) throw "can not find menu with id '" + id + "'";
     
     //the menu is fixed/absolute... 
     //remove this attributes to get expected results
     if(menu.style.position == 'fixed' || menu.style.position == 'absolute') {
     menu.style.position = 'static';
     menu.style.top = '';
     menu.style.left = '';
     }
     
     var left = menu.offsetLeft;
     var top = menu.offsetTop;
     if(window.attachEvent && !window.opera) { //ie
     //ie returns only offset to the parent element when position != absolute
     //this fix gets all offsets of the parent element(s) too
     var parent = menu.parentNode;
     do {
     left += parent.offsetLeft;
     top += parent.offsetTop;
     var parent = parent.parentNode;
     } while(parent && parent.nodeName.toLowerCase() != 'body');
     left += 10; //add our margin
     top += 10; //add our margin
     } else { //real internet-browsers
     left -= 10; //remove our margin
     top -= 10; //remove our margin
     }
     
     //fix menu
     menu.style.position = 'fixed';
     menu.style.left = left + 'px';
     menu.style.top = top + 'px';
     
     var removeClear = document.getElementById('removeMeIfJavascript');
     if(removeClear) {
     //should be the first call of this function
     removeClear.parentNode.removeChild(removeClear);
     window.onresize = function() { fixMenu(id); };
     }
     }
     //]]>
     </script>
     </head> 
     <body onload="fixMenu('menu');"> 
     <div id="main">
     <div id="menu">
     <p>hier dein menu</p>
     <p>hier dein menu</p>
     <p>hier dein menu</p>
     <p>hier dein menu</p>
     <p>hier dein menu</p>
     </div>
     <div id="content">
     <p>hier dein inhalt</p>
     <br /><br /><br /><br />
     <br /><br /><br /><br />
     <br /><br /><br /><br />
     <br /><br /><br /><br />
     <br /><br /><br /><br />
     <br /><br /><br /><br />
     <br /><br /><br /><br />
     <br /><br /><br /><br />
     <br /><br /><br /><br />
     <br /><br /><br /><br />
     <br /><br /><br /><br />
     <br /><br /><br /><br />
     <br /><br /><br /><br />
     <br /><br /><br /><br />
     <br /><br /><br /><br />
     <br /><br /><br /><br />
     <br /><br /><br /><br />
     <br /><br /><br /><br />
     <br /><br /><br /><br />
     <br /><br /><br /><br />
     <br /><br /><br /><br />
     <br /><br /><br /><br />
     <br /><br /><br /><br />
     <br /><br /><br /><br />
     <br /><br /><br /><br />
     <br /><br /><br /><br />
     <br /><br /><br /><br />
     <p>der auch länger werden kann</p>
     </div>
     <!-- for non-javascript users / will be removed if javascript is enabled -->
     <div style="clear:both;" id="removeMeIfJavascript"></div>
     </div>
     </body> 
    </html>
    ... aber nur wenn javascript an is. ansonten is das menu zwar am richtigen platz, bleibt aber ned fixiert.
     
  10. 16. September 2008
    AW: CSS Layout, 2 Divs nebeneinander zentriert, eins davon fixed

    danke vielmals!!!
    genau so wollte ichs

    aber nur mit css geht das ned oder wie?

    greetz

    //edit: kann dich grad leider nich bewerten, aber ich werds auf jeden fall nachholen, wenns wieder geht!
     
  11. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.