Hilfe bei grobem Layout einer Website

  • Beratung

  • CrazyKnight
  • 1026 Aufrufe 3 Antworten

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

  • Hilfe bei grobem Layout einer Website

    Hallo,
    ich würde gerne eine Website erstellen, leider habe ich bisher nur etwas Ahnung von HTML. Deshalb würde ich mich sehr freuen, wenn mir jemand helfen könnte. Ein grobes Layout wie ich mir das vorstelle, sieht man hier. Ich denke für jemanden der sich auskennt, ist das schnell gemacht.

    Würde mich wirklich sehr freuen, wenn mir jemand helfen kann.

    lg,
    Crazyknight

  • Hallo, also am einfachsten geht das mit css und xhtml 1.0 strict.

    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 xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
    6. <head>
    7. <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
    8. <title>Titel der Site</title>
    9. <link href="css/standart.css" rel="stylesheet" type="text/css" media="all" />
    10. </head>
    12. <body>
    13. <div id="container">
    14. <div id="header">Hier das Header-Pic</div>
    16. <div id="navi">Hier kommt die Navi rein</div>
    18. <div id="content"> Hier kommt der Inhalt hin</div>
    20. <div id="footer">Links zu Disclamer, Sitemap und Kontakt</div>
    22. </div>
    23. </body>
    25. </html>
    Alles anzeigen


    Das ist das grobe Grundgerüst.

    Die Navi würde ich mit Listen-Links realisieren. Das sieht dan in etwa so aus:

    HTML-Quellcode

    1. <ul class="tobnavi">
    3. <li><a title="Link 1" href="link1.html">Link 1</a></li>
    5. <li><a title="Link 2" href="link2.html">Link 2</a></li>
    7. <li><a title="Link 3" href="link3.html">Link 3</a></li>
    9. <li><a title="Link 4" href="link4.html">Link 4</a></li>
    11. <li><a title="Link 5" href="link5.html">Link 5</a></li>
    13. </ul>
    Alles anzeigen


    Dass alles steurst du dann über css, die Datei könnte so aussehen:

    HTML-Quellcode

    1. body {
    2. margin: 0px;
    3. padding: 0px;
    4. background-color: white;
    5. color: black;
    6. }
    7. #header {
    8. height: 128px;
    9. width: 493px;
    10. background-image: url(images/headerbkg.jpg);
    11. background-position: top left;
    12. background-repeat: no-repeat;
    13. }
    14. #content {
    15. background-image: url(images/contentbkg.jpg);
    16. background-position: top right;
    17. background-repeat: no-repeat;
    18. }
    19. #navigation {
    20. height: 239px;
    21. background-image: url(images/navibkg.jpg);
    22. background-position: 214px 0px;
    23. background-repeat: no-repeat;
    24. padding: 0px 0px 0px 0px;
    25. }
    26. #navigation ul{
    27. padding: 25px 0px 0px 0px;
    28. list-style: none;
    29. margin: 0px 0px 0px 17px;
    30. }
    31. #navigation li{
    32. }
    33. #navigation a{
    34. display: block;
    35. height: 20px;
    36. width: 180px;
    37. padding: 0px;
    38. margin: 0px;
    39. padding-top: 8px;
    40. margin-top: 7px;
    41. font-family: Verdana, Arial, san-serif;
    42. font-size: 16px;
    43. font-weight: 100;
    44. text-decoration: none;
    45. border-bottom: 1px dotted white;
    46. color: white
    47. }
    48. #navigation a:hover{
    49. border-bottom: 1px dotted white;
    50. color: red;
    51. }
    52. #content {
    53. margin-left: 214px;
    54. width: 483px;
    55. background-image: url(images/contentbkg.jpg);
    56. background-position: top left;
    57. background-repeat: repeat-y;
    58. padding-left: 5px;
    59. padding-right: 5px;
    60. padding-top: 10px;
    61. padding-bottom: 10px;
    62. font-family: Verdana, Arial, san-serif;
    63. font-size: 11px;
    64. color: black;
    65. }
    66. #content h1{
    67. font-size: 20px;
    68. padding: 4px 0px 4px 0px;
    69. margin: 4px 0px 4px 0px;
    70. }
    71. #content h2{
    72. font-size: 18px;
    73. padding: 4px 0px 4px 0px;
    74. margin: 4px 0px 4px 0px;
    75. }
    76. #content h3{
    77. font-size: 16px;
    78. padding: 4px 0px 4px 0px;
    79. margin: 4px 0px 4px 0px;
    80. }
    81. #content h4{
    82. font-size: 14px;
    83. padding: 4px 0px 4px 0px;
    84. margin: 4px 0px 4px 0px;
    85. }
    86. #content h5{
    87. font-size: 12px;
    88. padding: 4px 0px 4px 0px;
    89. margin: 4px 0px 4px 0px;
    90. }
    91. #content h6{
    92. font-size: 11px;
    93. font-weight: bold;
    94. padding: 1px 0px 3px 0px;
    95. margin: 1px 0px 3px 0px;
    96. }
    97. #content p{
    98. font-size: 11px;
    99. padding: 3px 0px 3px 0px;
    100. margin: 3px 0px 3px 0px;
    101. }
    102. #content a{
    103. color: red;
    104. }
    105. #content span{
    106. color: black;
    107. font-weight: bold
    108. }
    109. #footer {
    110. margin-left: 214px;
    111. margin-bottom: 10px;
    112. width: 493px;
    113. background-image: url(images/footerbkg.jpg);
    114. background-position: top left;
    115. background-repeat: no-repeat;
    116. padding-top: 10px;
    117. padding-bottom: 10px;
    118. font-family: Verdana, Arial, san-serif;
    119. text-align: center;
    120. font-size: 10px;
    121. }
    122. #footer a {
    123. color: red;
    124. text-decoration: none;
    125. }
    Alles anzeigen


    Die CSS musst du abändern, wenn du dass benutzen willst.

    Das sit nur ein Beispiel, du kannst somst nähere Angaben zu deinem Layout geben (farbe, gösse usw.) dann kann ich dir kurzer Hand etwas bastelln.
    Lerne leben, leben lernt!