Footer will nicht runter :/

    • Footer will nicht runter :/

      Hey ich habe ein problem mit dem footer (der hellblaue balken)

      er sollte eigentlich unter #wrap aber das macht er nicht :/

      Die HP :

      Der Code :

      Quellcode

      1. <style>
      2. body {background:url(bg-body.jpg) #262A2B repeat;color:#c4c4c4;font-family:Trebuchet MS;font-size:12px}
      3. #header {background:url(head.png);width:800px;height:278px;margin-left:auto;margin-right:auto;}
      4. #menu {background:;width:800px;height:35px;margin-left:auto;margin-right:auto;margin-top:-50px}
      5. #wrap {width:800px;height:;margin-left:auto;margin-right:auto;margin-top:15px}
      6. #links {background:;width:580px;height:35px;float:left}
      7. #rechts {background:;width:200px;height:35px;float:left;margin-left:20px}
      8. #perf {background:url(r-bg.png);width:200px;height:70px;border: solid 1px black;border-radius:10px}
      9. h2 {
      10. font-size:20px;
      11. color:#blue;
      12. font-weight:normal;
      13. margin-bottom:10px;
      14. font-family:Trebuchet MS;
      15. }
      16. a {color:#c4c4c4;text-decoration:none}
      17. a:visited {color:#c4c4c4;text-decoration:none}
      18. a:hover {color:#c4c4c4;text-decoration:underline}
      19. #footer {background:#284895;width:800px;height:20px;margin-left:auto;margin-right:auto;}
      21. </style>
      22. <body>
      23. <div id="header"> </div>
      24. <div id="menu"><div style="margin-top:5px"><a href="" style="margin-left:450px">Home</a> | <a href="">&Uuml;ber mich</a> | <a href="">Meine Werke</a> | <a href="">Kontakt</a> | <a href="">Downloads</a></div> </div>
      25. <div id="wrap">
      26. <div id="links">
      28. <h2>Welcome to dsignz media</h2>
      29. <p style="margin-top:0px;margin-left:0px">
      30. First impressions are made in the blink of an eye. In today's technology-centered world,
      31. your website is very often the first impression of your business, and must capture the user's
      32. attention instantly. We know how elusive it is to choose the right web design company to create
      33. the perfect website you want for your organization. Your tiresome search ends here as you have
      34. arrived at the right place you need to be in. We start by really talking to you and listening
      35. to your ideas and concepts. We understand your actual needs, take your
      36. ideas, play with our creativity and work with you to create the perfect product.
      43. </p></div>
      44. <div id="rechts">
      46. <div style="background:url(perf.png);width:200px;height:70px"></div>
      47. <div style="background:url(desi.png);width:200px;height:70px;margin-top:5px"></div>
      53. </div> </div>
      54. <div id="footer"></div>
      Alles anzeigen


      clearen geht iwie nicht :/

      lg

    • Werbung zur Unterstützung des Forums ( Bitte AddBlocker deaktivieren )

    • Der blaue balken soll über die Links?
      <div id="footer"></div> einfach unter <div id="wrap"> setzen.

      Sprich so:
      <style>
      body {background:url(bg-body.jpg) #262A2B repeat;color:#c4c4c4;font-family:Trebuchet MS;font-size:12px}
      #header {background:url(head.png);width:800px;height:278px;margin-left:auto;margin-right:auto;}
      #menu {background:;width:800px;height:35px;margin-left:auto;margin-right:auto;margin-top:-50px}
      #wrap {width:800px;height:;margin-left:auto;margin-right:auto;margin-top:15px}
      #links {background:;width:580px;height:35px;float:left}
      #rechts {background:;width:200px;height:35px;float:left;margin-left:20px}
      #perf {background:url(r-bg.png);width:200px;height:70px;border: solid 1px black;border-radius:10px}
      h2 {
      font-size:20px;
      color:#blue;
      font-weight:normal;
      margin-bottom:10px;
      font-family:Trebuchet MS;
      }
      a {color:#c4c4c4;text-decoration:none}
      a:visited {color:#c4c4c4;text-decoration:none}
      a:hover {color:#c4c4c4;text-decoration:underline}
      #footer {background:#284895;width:800px;height:20px;margin-left:auto;margin-right:auto;}

      </style>
      <body>
      <div id="header"> </div>
      <div id="menu"><div style="margin-top:5px"><a href="" style="margin-left:450px">Home</a> | <a href="">&Uuml;ber mich</a> | <a href="">Meine Werke</a> | <a href="">Kontakt</a> | <a href="">Downloads</a></div> </div>
      <div id="wrap">
      <div id="footer"></div>
      <div id="links">

      <h2>Welcome to dsignz media</h2>
      <p style="margin-top:0px;margin-left:0px">
      First impressions are made in the blink of an eye. In today's technology-centered world,
      your website is very often the first impression of your business, and must capture the user's
      attention instantly. We know how elusive it is to choose the right web design company to create
      the perfect website you want for your organization. Your tiresome search ends here as you have
      arrived at the right place you need to be in. We start by really talking to you and listening
      to your ideas and concepts. We understand your actual needs, take your
      ideas, play with our creativity and work with you to create the perfect product.






      </p></div>
      <div id="rechts">

      <div style="background:url(perf.png);width:200px;height:70px"></div>
      <div style="background:url(desi.png);width:200px;height:70px;margin-top:5px"></div>





      </div> </div>



      P.S. Style Code sehr unsauber und recht viele fehler sind vorhanden!

    • Probier mal das:

      <html>
      <head>

      <style>
      <!--
      body {background:url(bg-body.jpg) #262A2B repeat;color:#c4c4c4;font-family:Trebuchet MS;font-size:12px}
      #header {background:url(head.png);width:800px;height:278px ;margin-left:auto;margin-right:auto;}
      #menu {background:;width:800px;height:35px;margin-left:auto;margin-right:auto;margin-top:-50px}
      #wrap {width:800px;height:;margin-left:auto;margin-right:auto;margin-top:15px}
      #links {background:;width:580px;height:35px;float:left}
      #rechts {background:;width:200px;height:35px;float:left;ma rgin-left:20px}
      #perf {background:url(r-bg.png);width:200px;height:70px;border: solid 1px black;border-radius:10px}
      h2 {
      font-size:20px;
      color:#blue;
      font-weight:normal;
      margin-bottom:10px;
      font-family:Trebuchet MS;
      }
      a {color:#c4c4c4;text-decoration:none}
      a:visited {color:#c4c4c4;text-decoration:none}
      a:hover {color:#c4c4c4;text-decoration:underline}
      #footer {background:#284895;width:800px;height:20px;margin-left:auto;margin-right:auto;}
      -->
      </style>
      </head>

      <body>
      <div id="header"> </div>
      <div id="menu"><div style="margin-top:5px"><a href="" style="margin-left:450px">Home</a> | <a href="">&Uuml;ber mich</a> | <a href="">Meine Werke</a> | <a href="">Kontakt</a> | <a href="">Downloads</a></div> </div>
      <div id="wrap">

      <div id="links">

      <h2>Welcome to dsignz media</h2>
      <p style="margin-top:0px;margin-left:0px">
      First impressions are made in the blink of an eye. In today's technology-centered world,
      your website is very often the first impression of your business, and must capture the user's
      attention instantly. We know how elusive it is to choose the right web design company to create
      the perfect website you want for your organization. Your tiresome search ends here as you have
      arrived at the right place you need to be in. We start by really talking to you and listening
      to your ideas and concepts. We understand your actual needs, take your
      ideas, play with our creativity and work with you to create the perfect product.
      </p>
      <div id="footer"></div>
      </div>

      <div id="rechts">

      <div style="background:url(perf.png);width:200px;height :70px"></div>
      <div style="background:url(desi.png);width:200px;height :70px;margin-top:5px"></div>





      </div>
      </div>

      </body>
      </html>


      Edit 1: Habs nochmal verbessert

    • BlizZzard;194300 schrieb:


      P.S. Style Code sehr unsauber und recht viele fehler sind vorhanden!


      ganz ehrlich seinen Code kann man besser lesen als das was du da geschrieben hast :D

      Edit:

      Und hier der funktionierende Code falls du diesen noch nicht hast.
      Du solltest auf jedenfall noch mal ein paar Tutorials lesen. Du hast ein paar gravierende Fehler im Code. Du benutzt diverse TAGS die du aber gar nicht definierst. z.b background und height.

      Da muss du höllisch aufpassen.
      Auch ist der Aufbau mit deinen Div's nicht an jeder stelle richtig. Du schließt Divs welche gar nicht da sind, und macht nen Container Div zu bevor alles drinne ist.

      HTML-Quellcode

      1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
      3. <head>
      4. <title></title>
      5. <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
      6. <!-- Style Part, wobei ich Styles gerne auslagere als diese direkt im Dokument zuverarbeiten -->
      7. <style type="text/css">
      8. body {
      9. background:#262A2B url(bg-body.jpg) repeat; /* Bitte den Repeat überprüfen, was soll er denn wiederholen x, y oder alles?*/
      10. color:#c4c4c4;
      11. font-family:Trebuchet MS;
      12. font-size:12px;
      13. width: 800px;
      14. margin: auto;
      15. }
      16. #header {
      17. background:url(head.png);
      18. width:800px;
      19. height:278px;
      20. }
      21. #menu {
      22. width:800px;
      23. height:35px;
      24. }
      25. #wrap {
      26. width:800px;
      27. }
      28. #links {
      29. width:580px;
      30. float: left;
      31. }
      32. #rechts {
      33. width:200px;
      34. margin-left: 20px;
      35. float: left;
      36. }
      37. #perf {
      38. background:url(r-bg.png);
      39. width:200px;
      40. height:70px;
      41. border: solid 1px black;
      42. }
      43. h2 {
      44. font-size:20px;
      45. color:#blue;
      46. font-weight:normal;
      47. margin-bottom:10px;
      48. font-family:Trebuchet MS;
      49. }
      50. a {
      51. color:#c4c4c4;
      52. text-decoration:none
      53. }
      54. a:visited {
      55. color:#c4c4c4;
      56. text-decoration:none
      57. }
      58. a:hover {
      59. color:#c4c4c4;
      60. text-decoration:underline
      61. }
      62. #footer {
      63. background:#284895;
      64. height:20px;
      65. }
      66. </style>
      67. </head>
      68. <body>
      69. <div id="header">Header</div>
      70. <div id="menu">
      71. <div style="margin-top:5px">
      72. <a href="" style="margin-left:450px">Home</a> |
      73. <a href="">&Uuml;ber mich</a> |
      74. <a href="">Meine Werke</a> |
      75. <a href="">Kontakt</a> |
      76. <a href="">Downloads</a>
      77. </div>
      78. </div>
      79. <div id="wrap">
      80. <div id="links">
      81. <h2>Welcome to dsignz media</h2>
      82. <p>
      83. First impressions are made in the blink of an eye. In today's technology-centered world,
      84. your website is very often the first impression of your business, and must capture the user's
      85. attention instantly. We know how elusive it is to choose the right web design company to create
      86. the perfect website you want for your organization. Your tiresome search ends here as you have
      87. arrived at the right place you need to be in. We start by really talking to you and listening
      88. to your ideas and concepts. We understand your actual needs, take your
      89. ideas, play with our creativity and work with you to create the perfect product.
      90. </p>
      91. </div>
      92. <div id="rechts">
      93. <h2>Rechte Seite</h2>
      94. <div style="background:url(perf.png);width:200px;height:70px"></div>
      95. <div style="background:url(desi.png);width:200px;height:70px;margin-top:5px"></div>
      96. </div>
      97. </div>
      98. <div id="clear" style="clear: both;"></div>
      99. <div id="footer">Footer</div>
      101. </body>
      102. </html>
      Alles anzeigen