Div Container springt nach unten

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

  • Div Container springt nach unten

    Huhu liebe Community,

    ich bin gerade dabei die Seite unser örtlichen Feuerwehr auf Joomla umzubauen.

    Das fertige Template habe ich nun ja schon.
    Nun zu meinem Problem:

    Wie ich nen Template selber baue für Joomla ist kein Problem, nur sprint jetzt komischerweiße immer der eine Div Container und egal was ich gemacht habe er will nicht auch Google half nicht.

    Erstmal nen Screenshot mit dem Fehler:
    [Blockierte Grafik: http://www.imagebanana.com/img/u5egb6q/thumb/ffw_1271617943608.png]

    So nun noch der HTML und der CSS Code:

    Quellcode

    1. <html>
    2. <head>
    3. <base href="" />
    4. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    5. <meta name="robots" content="index, follow" />
    6. <meta name="keywords" content="" />
    7. <meta name="description" content="" />
    8. <meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
    9. <title>Feuerwehr</title>
    11. <link href="/index.php?format=feed&amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
    12. <link href="/index.php?format=feed&amp;type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
    13. <script type="text/javascript" src="/media/system/js/mootools.js"></script>
    14. <script type="text/javascript" src="/media/system/js/caption.js"></script>
    16. <link rel="stylesheet" href="/templates/ffw/css/template.css" type="text/css" />
    17. <link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" />
    18. <link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" />
    20. </head>
    21. <body>
    22. <div id="header">
    23. <div id="header_left"><img src="/templates/ffw/images/banner_kopf_links.jpg" /></div>
    24. <div id="header_right"><img src="/templates/ffw/images/banner_kopf_rechts.jpg" /></div>
    26. </div>
    27. <div id="page">
    28. <div id="page_left"><div class="moduletable_menu">
    29. <ul class="menu"><li id="current" class="active item1"><a href=""><span>Startseite</span></a></li></ul></div>
    31. </div>
    32. <div id="page_main"><div class="componentheading">
    33. Feuerwehr</div>
    34. <table class="blog" cellpadding="0" cellspacing="0">
    35. <tr>
    36. <td valign="top">
    37. </td>
    38. </tr>
    41. </table>
    43. </div>
    44. </div>
    45. <div id="footer">
    46. <div id="footer_left"><img src="/templates/ffw/images/fusszeile_links.jpg" /></div>
    47. <div id="footer_right"><img src="/templates/ffw/images/fusszeile_rechts.jpg" /></div>
    49. </div>
    50. </body>
    51. </html>
    Alles anzeigen


    Quellcode

    1. * {
    2. margin: 0;
    3. padding: 0;
    4. }
    7. body { font-family: Arial;
    8. background: #fff url(../images/ffw_bg.jpg);
    9. text-align: center;
    10. }
    12. img {
    13. border: none;
    14. }
    16. #header { background: #fff url(../images/banner_kopf_bg.jpg);
    17. height: 110px;
    18. margin: 0 auto;
    19. margin-top: 35px;
    20. text-align: center;
    21. width: 80%;
    22. }
    24. #page { margin: 0 auto;
    25. position: relative;
    26. text-align: center;
    27. width: 80%;
    28. height: 550px;
    29. }
    31. #page_left { background: #fff url(../images/bg_menu.jpg);
    32. font-size: small;
    33. left: 10px;
    34. padding-left: 5px;
    35. text-align: left;
    36. top: 0;
    37. width: 15%;
    38. height: 550px;
    39. }
    41. #page_main { background: #fff;
    42. float: right;
    43. margin: 0 auto;
    44. width: 85%;
    45. overflow: auto;
    46. height: 550px;
    47. text-align: right;
    48. }
    50. #footer { background: #fff url(../images/fusszeile_bg.jpg);
    51. height: 70px;
    52. margin: 0 auto;
    53. text-align: center;
    54. width: 80%;
    55. }
    57. #header_left { float: left;
    58. text-align: left;
    59. }
    61. #header_right { float: right;
    62. text-align: right;
    63. }
    65. #footer_left { float: left;
    66. text-align: left;
    67. }
    69. #footer_right { float: right;
    70. text-align: right;
    71. }
    Alles anzeigen



    Hoffe jeder blickt ein bisschen durch und ihr hoffe ihr versteht was ich meine.

    Gruß

  • Ich kenn mich jetzt auch nicht so gut aus, weil ich grad nicht ganz durchschaue welcher Teil der Seite über welches <div> erzeugt wird(die Müdigkeit schlägt langsam zu ;) ) aber ich hatte mal ein ähnliches Problem.
    Ich konnte es beheben indem ich das betreffende <div> kleiner gemacht habe. Allerdings hatte das <div> bei mir eine fixe Breite, die Lösung lag darin dass ich die Höhe und Breite des <div>s um 20px verkleinert habe.
    Das lag an dem padding:10px; (mal 2 macht dann 20px die in der Höhe und in der Breite "weggenommen" werden müssen).
    Wie dass dann bei Prozentwerten aussieht weiß ich leider nicht, aber verkleiner einfach mal das betreffende und schau ob sich was tut, viel Glück!
    Edit: css4you.de/wsboxmodell/index.html#buh Hilft dir vielleicht : )

    Ansonsten gibts vielleicht ein Problem mit den floats?

  • Ja bei mir liegt auch schon nen haufen Müdigkeit vor ;)

    Also die Seite funktioniert sonst ja also die Vorlage ist genauso aufgebaut.
    Der entsprechende Div ist der:

    Quellcode

    1. <div id="page_main"><div class="componentheading">
    2. Feuerwehr</div>
    3. <table class="blog" cellpadding="0" cellspacing="0">
    4. <tr>
    5. <td valign="top">
    6. </td>
    7. </tr>
    10. </table>
    12. </div>
    Alles anzeigen


    Die table wurde von Joomla erzeugt aber macht keinen Unterschied ob da oder nicht.

    Mit der Breite und Höhe werde ich mal testen :)

  • Hast du irgendwo eine laufende Version von dem was funktioniert und von deinem? Am Live-Code lässt sich das am einfachsten und schnellsten ablesen.
    Außerdem fehlt die Angabe um welche CSS-Datei es sich hier im Forum handelt. Du bindest ja 3 Dateien ein. Welche davon hast du hier reingepostet?

    EDIT: ich habe mir den Code jetzt mal angeschaut. Also ganz unrecht hatte iriss nicht. Du musst eventuell die Größen etwas anpassen. Das Problem ist, dass die innenliegenden Container zusammen 100% Breite ergeben. Dazu hat #page_left noch einen padding. Im Firefox bricht das aus den Fugen, da du damit über 100% liegst.
    Das eigentliche Problem ist aber, dass dein #page_left nicht floatet. Div-Container sind halt Blockelemente und wenn man ihnen kein floating zuweist, brechen sie um. du könntest das Ganze also z.B. so beheben.

    Quellcode

    1. * {
    2. margin: 0;
    3. padding: 0;
    4. }
    7. body { font-family: Arial;
    8. background: #fff url(../images/ffw_bg.jpg);
    9. text-align: center;
    10. }
    12. img {
    13. border: none;
    14. }
    16. #header { background: #fff url(../images/banner_kopf_bg.jpg);
    17. height: 110px;
    18. margin: 0 auto;
    19. margin-top: 35px;
    20. text-align: center;
    21. width: 80%;
    22. }
    24. #page { margin: 0 auto;
    25. position: relative;
    26. text-align: center;
    27. width: 80%;
    28. height: 550px;
    29. border: 1px solid red;
    30. }
    32. #page_left { background: #fff url(../images/bg_menu.jpg);
    33. font-size: small;
    34. left: 10px;
    35. padding-left: 5px;
    36. text-align: left;
    37. top: 0;
    38. width: 15%;
    39. height: 500px;
    40. border: 1px solid green;
    41. float: left;
    42. }
    44. #page_main { background: #fff;
    45. float: right;
    46. margin: 0 auto;
    47. width: 83%;
    48. overflow: auto;
    49. height: 500px;
    50. text-align: right;
    51. border: 1px solid blue;
    52. }
    54. div.clear {
    55. clear:both;
    56. }
    58. #footer { background: #fff url(../images/fusszeile_bg.jpg);
    59. height: 70px;
    60. margin: 0 auto;
    61. text-align: center;
    62. width: 80%;
    63. border: 1px solid gray;
    64. }
    66. #header_left { float: left;
    67. text-align: left;
    68. }
    70. #header_right { float: right;
    71. text-align: right;
    72. }
    74. #footer_left { float: left;
    75. text-align: left;
    76. }
    78. #footer_right { float: right;
    79. text-align: right;
    80. }
    Alles anzeigen


    (Die Ränder habe ich eingebaut, damit man mal sieht wo welche Box rumschwirrt, das ist immer sehr hilfreich bei der Fehlersuche)
    Du solltest dein HTML, aber auch noch ein wenig anpassen. Und zwar solltest du nach deinen beiden Boxen mit float ein clea-div einfügen:

    Quellcode

    1. <div id="page">
    2. <div id="page_left">
    3. <div class="moduletable_menu">
    4. <ul class="menu">
    5. <li id="current" class="active item1">
    6. <a href=""><span>Startseite</span></a>
    7. </li>
    8. </ul>
    9. </div>
    10. </div>
    11. <div id="page_main">
    12. <div class="componentheading">
    13. Feuerwehr
    14. </div>
    15. <table class="blog" cellpadding="0" cellspacing="0">
    16. <tr>
    17. <td valign="top"></td>
    18. </tr>
    19. </table>
    20. </div>
    21. <div class="clear"></div>
    22. </div>
    Alles anzeigen


    Falls das nicht funktioniert, zeig uns mal eine Live-Version.

    Dieser Beitrag wurde bereits 4 mal editiert, zuletzt von mad ()