CSS-Layout


  • TraveXaS
  • 968 Aufrufe 4 Antworten

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

  • CSS-Layout

    hi,

    ich hab das problem das meine linke Navi nicht angezeigt wird; wenn ich jedoch als height:100px eingebe wird sie angezeigt. Ich möchte aber das die navi bis nach unten reicht, also sich dem inhalt anpasst....

    jemand ne idee wie ich das hinbekommen kann?

    mein index.html:

    HTML-Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    4. <html>
    5. <head>
    6. <link rel="stylesheet" type="text/css" href="style.css">
    7. <title>.::TraveXaS' Web::.</title>
    8. </head>
    11. <body>
    13. <div id="container">
    14. <div id="banner"></div>
    15. <div id="hauptnavi_links"></div>
    16. </div>
    17. </body>
    20. </html>
    Alles anzeigen


    und hier die style.css

    Quellcode

    1. /*
    2. Verwendete Farben:
    3. #000000 =black
    4. #6495ed
    5. #8aaff1
    6. #b0c9f5
    7. #d8e4fa
    8. #ffffff =white
    9. */
    10. /*######################################################*/
    12. html, body {
    13. background-color: #ffffff;
    14. margin:0;
    15. padding:0;
    16. height:100%;
    17. }
    18. /*######################################################*/
    20. #banner {
    21. width: 100%;
    22. height: 120px;
    23. background-color: #d8e4fa;
    24. border-bottom: #6495ed groove 3px;
    25. }
    27. /*######################################################*/
    30. #hauptnavi_links {
    31. margin-left: 0;
    32. width: 150px;
    33. height: auto;
    34. background-color: #d8e4fa;
    35. border-right: #6495ed groove 3px;
    36. }
    39. /*######################################################*/
    Alles anzeigen

  • ja ok hab jetz dem container 100% gegeben, jetz is die navi aber länger als der inhalts bereich; und meinen bereich rechts zeigt es auch nicht an....stattdesen wird es unten dran gehängt...;

    könnte mein script bitte jemand korrigieren? also so das es zwar das fenster in der höhe ausfüllt, wenn aber der inhalt nicht so weit geht soll es dann nicht länger werden. Und evtl das mittelteil mit anzugeben( inhalt), dafür wäre ich sehr dankbar...

    ich möchte eig. ein frameset erstellen, nur ohne frames...der bereich für den inhalt würde sich ja automatisch ergeben....

    HTML-Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    4. <html>
    5. <head>
    6. <link rel="stylesheet" type="text/css" href="style.css">
    7. <title>.::TraveXaS' Web::.</title>
    8. </head>
    11. <body>
    13. <div id="container">
    14. <div id="banner"></div>
    15. <div id="hauptnavi_links"></div>
    16. <div id="hauptnavi_rechts"></div>
    17. </div>
    18. </body>
    21. </html>
    Alles anzeigen



    Quellcode

    1. /*
    2. Verwendete Farben:
    3. #000000 =black
    4. #6495ed
    5. #8aaff1
    6. #b0c9f5
    7. #d8e4fa
    8. #ffffff =white
    9. */
    10. /*######################################################*/
    12. html, body {
    13. background-color: #ffffff;
    14. margin:0;
    15. padding:0;
    16. height:100%;
    17. }
    19. /*######################################################*/
    21. #container {
    22. width: 100%;
    23. height: 100%;
    24. background-color: yellow;
    25. }
    27. /*######################################################*/
    29. #banner {
    30. width: 100%;
    31. height: 120px;
    32. background-color: #d8e4fa;
    33. border-bottom: #6495ed groove 3px;
    34. }
    36. /*######################################################*/
    39. #hauptnavi_links {
    40. margin-left: 0;
    41. width: 150px;
    42. height: 100%;
    43. background-color: #d8e4fa;
    44. }
    47. /*######################################################*/
    50. #hauptnavi_rechts {
    51. margin-right: 0;
    52. width: 150px;
    53. height: auto;
    54. background-color: #d8e4fa;
    55. }
    58. /*######################################################*/
    Alles anzeigen

  • Hier, hab das mal zusammengelegt, weil es so einfacher zu editieren ist.

    HTML-Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    4. <html>
    5. <head>
    6. <title>.::TraveXaS' Web::.</title>
    7. <style type="text/css"><!--
    8. html, body {
    9. background-color: #ffffff;
    10. margin:0px;
    11. padding:0px;
    12. height:100%;
    13. width:100%;
    14. }
    17. #container {
    18. width: 100%;
    19. height: 100%;
    20. margin:0px;
    21. background-color: yellow;
    22. }
    25. #banner {
    26. width: 100%;
    27. height: 14%;
    28. background-color: #d8e4fa;
    29. border-bottom: #6495ed groove 3px;
    30. margin:0px;
    31. }
    33. #inhalt {
    34. margin: 0px;
    35. width: 71%;
    36. height: 86%;
    37. background-color: #d8e4fa;
    38. float:right;
    39. }
    40. #hauptnavi_links {
    41. margin: 0px;
    42. width: 15%;
    43. height: 86%;
    44. background-color: #d8e4fa;
    45. float:right;
    46. }
    49. #hauptnavi_rechts {
    50. margin: 0px;
    51. width: 15%;
    52. height: 86%;
    53. background-color: #d8e4fa;
    54. }
    55. -->
    56. </style>
    57. </head>
    60. <body>
    62. <div id="container">
    63. <div id="banner"></div>
    64. <div id="hauptnavi_links"></div>
    65. <div id="inhalt"></div>
    66. <div id="hauptnavi_rechts"></div>
    67. </div>
    68. </body>
    71. </html>
    Alles anzeigen


    Gruß
    Broken sword
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.

  • Versuchs mal gaaanz einfach mit dem:

    HTML:

    HTML-Quellcode

    1. <div id="container>
    2. <div id="banner"></div
    3. <div id="nav_left"></div>
    4. <div id="content"></div>
    5. <div id="nav_right"></div>
    6. <div id="footer"></div>
    7. </div>

    CSS:

    Quellcode

    1. body:
    2. {
    3. margin: 0;
    4. padding:0;
    5. }
    6. #container
    7. {}
    8. #banner
    9. {
    10. height: 25px;
    11. }
    12. #nav_left
    13. {
    14. float: left;
    15. widht: 100px;
    16. }
    17. #content
    18. {
    19. margin-left: 100px;
    20. widht: 500px;
    21. }
    22. #nav_right
    23. {
    24. float: right;
    25. widht: 100px;
    26. }
    27. #footer
    28. {
    29. clear: both;
    30. height: 25px;
    31. }
    Alles anzeigen


    Sonst PN an mich.

    edit:// vergiss was ich geschrieben habe. Das Problem liegt ganz wo anders. Schreib mir eine PN mit Link zu deiner HP, bekommst dan eine CSS-Datei von mi.
    Lerne leben, leben lernt!