CSS Design

  • CSS Design

    ICh bin nicht gerade die hellste Leuchte, wenns um CSS-design geht folgendes hab ich schon mal hinbekommen (mittels Tutorial)

    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    2. <html>
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    5. <title></title>
    6. <style type="text/css">
    7. body
    8. {
    9. margin: 0;
    10. padding: 0;
    11. text-align: center;
    12. background-color: #F2F2F2;
    13. }
    14. #container
    15. {
    16. margin: 1px auto;
    17. padding: 0px;
    18. width: 647px;
    19. background-color: red;
    20. border: 1px solid black;
    21. }
    22. #header
    23. {
    24. height: 120px;
    25. background-color: black;
    26. }
    27. #navigation
    28. {
    29. height: 24px;
    30. background-color: purple;
    31. }
    32. #content
    33. {
    34. height: 600px;
    35. background-color: white;
    36. }
    37. </style>
    38. </head>
    39. <body>
    40. <div id="container">
    41. <div id="header">
    42. </div>
    43. <div id="navigation">
    44. <ul>
    45. <li><a href="#">Section 1</a></li>
    46. <li><a href="#">Section 2</a></li>
    47. <li><a href="#">Section 3</a></li>
    48. <li><a href="#">Section 4</a></li>
    49. </ul>
    50. </div>
    51. <div id="content">
    52. </div>
    53. </div>
    54. </body>
    55. </html>
    Alles anzeigen


    Jetzt habe ich den <ul></ul> - Teil eingefügt. Nun ist aber die Navigations-Box nicht mehr direkt an der Header-Box. Hab versucht das margin der Navigations-Box auf 0 zu setzen, bringt aber nix.

    Jemand ein paar Anregungen?

  • Re: CSS Design

    "BennyBunny" schrieb:


    Jetzt habe ich den <ul></ul> - Teil eingefügt. Nun ist aber die Navigations-Box nicht mehr direkt an der Header-Box.


    Liegt daran, das <ul> und <li> von sich aus auch ein padding/margin haben.
    Ich nehme immer erst mal allen Elementen "ihr" margin/padding und vergebe dann die Werte dich für mein Projekt sinnvoll sind:

    Quellcode

    1. <style type="text/css">
    2. * {
    3. margin: 0px;
    4. padding: 0px;
    5. }
    6. </style>


    Bei so einem Problem wie Du es hast ist es auch mal ganz sinvoll den einzelnen Divs einen Rahmen zu geben, damit man besser sieht, wo genau das Problem liegt.

    70abc
    We raise hopes, here ... until they're old enough to fend for themselves.
    - Mike Callahan