Wieder mal DIVs zentrieren

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Wieder mal DIVs zentrieren

    Hallo zusammen,

    trotz Recherche bei mehrspaltigen Elementen bei SELFHTML.org und hier im Forum bin ich irgendwie immer noch ned so zufrieden wie's sein soll.

    Ich habe folgende Platzaufteilung.
    - Header mit clear:both
    - Navigation links mit float:left
    - Content rechts auch mit Float: left
    - footer mit clear: both

    Nun hab ich auch schon im Body ein min-width und ein min-heigth angegeben. Aber was ich erreichen will, dass zum
    1.) der Conten horizontal und vertical auf der Seite zentriert wird wenn eben genug Platz da ist
    2.) und dass sich bei minimierung des fensters zuerst der content ein stück kleiner wird, und wenn die minierung noch größer wird, dann erst die scrollbalken kommen.

    gerne hänge ich auch einen teil meiner bisherigen CSS-Datei an:

  • vince schrieb:



    Hmm... Ich glaub, ich seh die Nadel im Heuhaufen ned. So is mein CSS-Layout:

    Quellcode

    1. body {
    2. background-color: #FFFFFF;
    3. border: 0px;
    4. font-size: 0.35cm;
    5. color: #00007F;
    6. font-family: Verdana, Arial, Times New Roman;
    7. margin: 2em 2em 2em 4em;
    8. min-width: 800px; min-height: 600px;
    9. }
    11. /* Formatierung der einzelnen DIV's */
    12. #root {
    13. /* background-color: #DFDFDF;*/
    14. }
    16. #header {
    17. background-color: #fed;
    18. border: 1px dashed silver;
    19. font-size: 0.5cm;
    20. text-align: center; text-decoration: underline; bold;
    21. margin: 0; padding: 1em;
    22. width: 28cm;
    23. clear: both;
    24. }
    26. #nav1 {
    27. background-color: #CFCFCF;
    28. border: 1px dashed silver;
    29. font-size: 0.9em;
    30. margin: 0.5cm 0 0.25cm 0; padding: 0.4em;
    31. width: 6cm; height: 14cm;
    32. float: left;
    33. }
    35. #content{
    36. background-color: #CFCFCF;
    37. border: 1px dashed silver;
    38. margin: 0.5cm 0 0.25cm 7cm; padding: 0.4em;
    39. width: 21.75cm; height: 14cm;
    40. }
    41. * html div#Inhalt {
    42. height: 1em; /* Workaround gegen den 3-Pixel-Bug des Internet-Explorers bis Version 6 */
    43. }
    45. #footer {
    46. background-color: #fed;
    47. border: 1px dashed silver;
    48. font-size: 0.9em;
    49. text-align: center;
    50. vertical-align: middle;
    51. margin: 0; padding: 1em;
    52. width: 28.35cm;
    53. clear: both;
    54. }
    Alles anzeigen


    Zur Ergänzung noch die index.php:

    Quellcode

    1. <?php
    2. session_start();
    3. include ("./config/globals.php");
    4. error_reporting(E_ERROR | E_PARSE);
    5. echo "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\"\n";
    6. echo " \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">\n";
    7. echo "<html>\n";
    8. echo " <head>\n";
    9. echo " <title>"._Title."</title>\n";
    10. echo " <link rel=\"stylesheet\" type=\"text/css\" href=\"./config/style.css\" />\n";
    11. echo " <meta http-equiv=\"Content-Type\"
    12. content=\"text/html; charset=ISO-8859-1\" />\n";
    13. echo " </head>\n";
    14. echo " <body>\n";
    15. echo " <div id=\"root\">\n"; //container
    16. echo " <div id=\"header\">\n"; // Header
    17. echo " "._Title."<br>";
    18. echo " </div>\n";
    19. echo " <div id=\"nav1\">\n"; // Navigationsmenü
    20. include "nav1.php";
    21. echo " </div>\n";
    22. echo " <div id=\"content\">\n"; // Inhalt
    23. include "inhalt.php";
    24. echo " </div>\n";
    25. echo " <br style=\"clear:both;\" />\n";
    26. echo " <div id=\"footer\">\n"; // Footer
    27. include "footer.php";
    28. echo " </div>\n";
    29. echo " </div>\n";
    30. echo " </body>\n";
    31. echo "</html>\n";
    32. ?>
    Alles anzeigen