Drei spaltiges Layout

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

  • Drei spaltiges Layout

    Nunja ich bins mal wieder, und mal wieder habe ich keine Ahnung, und bin am verzweifeln.
    Diesmal geht es um dreispaltige Layouts.
    Ich habe mal dieses Layout genommen:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>Dreispaltiges Layout</title>
    <style type="text/css">
    body {
    color: black; background-color: white;
    font-size: 100.01%;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0; padding: 1em;
    min-width: 40em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
    }

    ul#Navigation {
    font-size: 0.83em;
    float: left; width: 18em;
    margin: 0; padding: 0;
    border: 1px dashed silver;
    }
    ul#Navigation li {
    list-style: none;
    margin: 0; padding: 0.5em;
    }
    ul#Navigation a {
    display: block;
    padding: 0.2em;
    font-weight: bold;
    }
    ul#Navigation a:link {
    color: black; background-color: #eee;
    }
    ul#Navigation a:visited {
    color: #666; background-color: #eee;
    }
    ul#Navigation a:hover {
    color: black; background-color: white;
    }
    ul#Navigation a:active {
    color: white; background-color: gray;
    }

    div#Info {
    font-size: 0.9em;
    float: right; width: 12em;
    margin: 0; padding: 0;
    border: 1px dashed silver; background-color: #eee;
    }
    div#Info strong {
    font-size: 1.33em;
    margin: 0.2em 0.5em;
    }
    div#Info p {
    font-size: 1em;
    margin: 0.5em;
    }

    div#Inhalt {
    margin: 0 12em 0 16em;
    padding: 0 1em;
    border: 1px dashed silver;
    }
    div#Inhalt h1 {
    font-size: 1.5em;
    margin: 0 0 0.5em;
    }
    div#Inhalt h2 {
    font-size: 1.2em;
    margin: 0.2em 0;
    }
    div#Inhalt p {
    font-size: 1em;
    margin: 1em 0;
    }
    </style>
    </head>
    <body>

    <ul id="Navigation">
    <li><a href="../einfuehrung.htm">Einf&uuml;hrung in CSS-basierte Layouts</a></li>
    <li><a href="../mehrspaltige.htm">Mehrspaltige CSS-basierte Layouts</a></li>
    <li><a href="../fixbereiche.htm">Fixe Bereiche mit CSS-basierten Layouts</a></li>
    <li><a href="../navigationsleisten.htm">CSS-basierte Navigationsleisten</a></li>
    <li><a href="../browserweichen.htm">CSS-Browserweichen</a></li>
    </ul>

    <div id="Info">
    <strong>Info-Box</strong>
    <p>Auch wenn diese Info- Box am Bildschirm als letzte angezeigt wird, ist sie
    im Quelltext vor dem im Fluss belassenen Inhaltsbereich zu notieren.</p>
    <p>Dadurch, dass f&uuml;r den Inhaltsbereich kein float definiert ist, kann auf
    die Angabe einer Breite verzichtet werden und die Seite den ihr zur
    Verf&uuml;gung stehenden Raum ausnutzen.</p>
    <p>Diese Methode, ein Element im Fluss zu belassen und dadurch auf eine
    Breitenangabe verzichten zu k&ouml;nnen, hat au&szlig;erdem den Vorteil, Abweichungen
    durch das falsche Box-Modell des Internet Explorer auszugleichen.</p>
    </div>

    <div id="Inhalt">
    <h1>CSS-basierte Layouts</h1>
    <h2>3-spaltiges Layout</h2>
    <p>In diesem Beispiel ist die Breite der Navigation etwas reduziert,
    um einer zus&auml;tzlichen Info-Box an der rechten Seite Platz zu machen;
    die Schriftgr&ouml;&szlig;e der Navigation und Info-Box ist etwas verringert,
    um den relativ geringen Breiten Rechnung zu tragen.</p>
    <p>Nur f&uuml;r die &auml;u&szlig;eren Boxen ist eine Breite und float angegeben.
    Durch die Angabe der Breiten relativ zur Schriftgr&ouml;&szlig;e in 'em'
    k&ouml;nnen sich die Boxen einer &Auml;nderung des Schriftgrades anpassen.</p>
    <p>Dieser mittlere Inhaltsbereich wird &uuml;ber seitliches margin auf Abstand
    gehalten und passt sich flexibel an die Fensterbreite an.</p>
    </div>

    <p><a style="color:black" href="../mehrspaltige.htm#dreispaltig">zur&uuml;ck</a></p>
    </body>
    </html>

    Von SelfHTML.ORG

    So wenn man von links nach rehcts schaut, gibts 3 Boxen.
    1. Navigation
    2. Inhalt
    3. Infobox.

    So nun will ich aber die 1. Box weiter runter setzen, und evtl. auch die 3.
    So ich habe es mit margin-top:20%; etc. versucht, aber nie will es funktionieren. Außerdem möchte ich, dass die Umrandungen, nicht so komisch sind. (dashed silver)
    Kann man auch eigtl. Bilder als Hintergrund für eine Box benutzen, und darauf schreiben?

    mfg. h4wX
  • Hast du dir das hier schon durchgelesen?
    #php/QuakeNet Tutorial - 3-Spalten-Layout

    Zu deiner anderen Frage: ja du kannst Bilder als Hintergrund nutzen.

    Quellcode

    1. background-image: url('deinbild.jpg');
    Möchtest du dass sich das Bild wiederholt?

    Quellcode

    1. background-repeat: no-repeat;
    Soll's sich nur in einer Richtung wiederholen, dann machst du statt no-repeat repeat-x oder repeat-y (x/y Achse).

    mfg
    Snip3r
    Neulinge * Forenregeln * F.A.Q. * Lexikon
    Suchfunktion* IRC * Teamspeak * User helfen User
    Patrioten reden nur davon, dass sie für ihr Land sterben, niemals davon, dass sie für ihr Land töten. (Bertrand Russell)
  • Ne habe ich nicht, aber das sieht noch komplizierter aus als das von SelfHTML. Hm und da muss man ja anscheinend etwas mit PHP können, was ich irgendwie nicht kann^^.
    Naja eigtl. ist der Code von SelfHTML gut, nur ich muss ihn halt verändern können.
    Das mit dem Bild werde ich gleich ausprobieren.


    mfg. h4wX
  • HTML-Quellcode

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    2. "http://www.w3.org/TR/html4/strict.dtd">
    3. <html>
    4. <head>
    5. <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    6. <title>Dreispaltiges Layout</title>
    7. <style type="text/css">
    8. body {
    9. color: black; background-color: white;
    10. font-size: 100.01%;
    11. font-family: Helvetica,Arial,sans-serif;
    12. margin: 0; padding: 1em;
    13. min-width: 40em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
    14. }
    15. ul#Navigation {
    16. font-size: 0.83em;
    17. float: left; width: 18em;
    18. margin: 0; padding: 0;
    19. border: none;
    20. }
    21. ul#Navigation li {
    22. list-style: none;
    23. margin: 0; padding: 0.5em;
    24. }
    25. ul#Navigation a {
    26. display: block;
    27. padding: 0.2em;
    28. font-weight: bold;
    29. }
    30. ul#Navigation a:link {
    31. color: black; background-color: #eee;
    32. }
    33. ul#Navigation a:visited {
    34. color: #666; background-color: #eee;
    35. }
    36. ul#Navigation a:hover {
    37. color: black; background-color: white;
    38. }
    39. ul#Navigation a:active {
    40. color: white; background-color: gray;
    41. }
    42. div#Info {
    43. font-size: 0.9em;
    44. float: right; width: 12em;
    45. margin: 0; padding: 0;
    46. border: none;
    47. }
    48. div#Info strong {
    49. font-size: 1.33em;
    50. margin: 0.2em 0.5em;
    51. }
    52. div#Info p {
    53. font-size: 1em;
    54. margin: 0.5em;
    55. }
    56. div#Inhalt {
    57. margin: 0 12em 0 16em;
    58. padding: 0 1em;
    59. border: none;
    60. }
    61. div#Inhalt h1 {
    62. font-size: 1.5em;
    63. margin: 0 0 0.5em;
    64. }
    65. div#Inhalt h2 {
    66. font-size: 1.2em;
    67. margin: 0.2em 0;
    68. }
    69. div#Inhalt p {
    70. font-size: 1em;
    71. margin: 1em 0;
    72. }
    73. </style>
    74. </head>
    75. <body>
    76. <ul id="Navigation">
    77. <li style="height:100px;"></li>
    78. <li><a href="einfuehrung.htm">Einf&uuml;hrung in CSS-basierte Layouts</a></li>
    79. <li><a href="mehrspaltige.htm">Mehrspaltige CSS-basierte Layouts</a></li>
    80. <li><a href="fixbereiche.htm">Fixe Bereiche mit CSS-basierten Layouts</a></li>
    81. <li><a href="navigationsleisten.htm">CSS-basierte Navigationsleisten</a></li>
    82. <li><a href="browserweichen.htm">CSS-Browserweichen</a></li>
    83. </ul>
    84. <div id="Info">
    85. <div style="height:100px;"></div>
    86. <strong>Info-Box</strong>
    87. <p>Auch wenn diese Info- Box am Bildschirm als letzte angezeigt wird, ist sie
    88. im Quelltext vor dem im Fluss belassenen Inhaltsbereich zu notieren.</p>
    89. <p>Dadurch, dass f&uuml;r den Inhaltsbereich kein float definiert ist, kann auf
    90. die Angabe einer Breite verzichtet werden und die Seite den ihr zur
    91. Verf&uuml;gung stehenden Raum ausnutzen.</p>
    92. <p>Diese Methode, ein Element im Fluss zu belassen und dadurch auf eine
    93. Breitenangabe verzichten zu k&ouml;nnen, hat au&szlig;erdem den Vorteil, Abweichungen
    94. durch das falsche Box-Modell des Internet Explorer auszugleichen.</p>
    95. </div>
    96. <div id="Inhalt">
    97. <h1>CSS-basierte Layouts</h1>
    98. <h2>3-spaltiges Layout</h2>
    99. <p>In diesem Beispiel ist die Breite der Navigation etwas reduziert,
    100. um einer zus&auml;tzlichen Info-Box an der rechten Seite Platz zu machen;
    101. die Schriftgr&ouml;&szlig;e der Navigation und Info-Box ist etwas verringert,
    102. um den relativ geringen Breiten Rechnung zu tragen.</p>
    103. <p>Nur f&uuml;r die &auml;u&szlig;eren Boxen ist eine Breite und float angegeben.
    104. Durch die Angabe der Breiten relativ zur Schriftgr&ouml;&szlig;e in 'em'
    105. k&ouml;nnen sich die Boxen einer &Auml;nderung des Schriftgrades anpassen.</p>
    106. <p>Dieser mittlere Inhaltsbereich wird &uuml;ber seitliches margin auf Abstand
    107. gehalten und passt sich flexibel an die Fensterbreite an.</p>
    108. </div>
    109. <p><a style="color:black" href="mehrspaltige.htm#dreispaltig">zur&uuml;ck</a></p>
    110. </body>
    111. </html>
    Alles anzeigen

    das ist zwar unschön, aber fürn anfang reichts
    liegts an mir oder warum sind im html-dings keine absätze?
  • Danke für deine Antwort, ich tests gleich auchmal aus.


    mfg. h4wX

    E: Funktioniert THX, aber wie mache ich jetzt die Umrandung gleichmäßig, also normal. Bei mir wird nix angezeigt wenn ich Border zu 1 mache.
  • ul#Navigation {
    font-size: 0.83em;
    float: left; width: 18em;
    margin: 0; padding: 0;
    border: 1px black solid;
    }

    div#Info {
    font-size: 0.9em;
    float: right; width: 12em;
    margin: 0; padding: 0;
    border: 1px black solid;
    }

    div#Inhalt {
    margin: 0 12em 0 16em;
    padding: 0 1em;
    border: 1px black solid;
    }

    Wenn du diese Aenderungen vornimmst hast du um den Div Container nen Rahmen(hoffe du hast mit Umrandung Rahmen gemeint).
  • So bin auch wieder mal da. Hab da auch etwas gemacht. Vieleicht hilft es dir weiter.

    HTML-Quellcode

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    2. "http://www.w3.org/TR/html4/strict.dtd">
    3. <html>
    4. <head>
    5. <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    6. <title>Dreispaltiges Layout</title>
    7. <style type="text/css">
    8. body {
    9. margin: 0px;
    10. padding: 0px;
    11. }
    12. #container {
    13. width: 759px;
    14. margin-left: auto;
    15. margin-right: auto;
    16. }
    17. #navi {
    18. width: 160px;
    19. border: 1px black solid;
    20. float: left;
    21. margin-top: 25px;
    22. padding-bottom: 15px;
    23. }
    24. #navi ul{
    25. margin: 0px;
    26. padding: 0px;
    27. }
    28. #navi li{
    29. list-style: none;
    30. margin: 0px;
    31. padding: 0px;
    32. }
    33. #navi a{
    34. display: block;
    35. font-size: 12px;
    36. font-weight: 700;
    37. text-decoration: none;
    38. margin: 2px 5px 0px 15px;
    39. padding: 2px 0px 2px 0px;
    40. border-bottom: 1px black dashed;
    41. color: #3D00B8;
    42. font-family: verdana, arial, sans-serif;
    43. }
    44. #navi a:hover{
    45. border-bottom: 1px red dashed;
    46. }
    47. #content {
    48. width: 401px;
    49. margin-left: 5px;
    50. margin-right: 5px;
    51. padding-left: 6px;
    52. padding-right: 10px;
    53. border: 1px red solid;
    54. float: left;
    55. }
    56. #infobox {
    57. width: 160px;
    58. margin-top: 225px;
    59. border: 1px black solid;
    60. float: right;
    61. }
    62. #infobox h3{
    63. font-size: 20px;
    64. font-weight: 450;
    65. display: block;
    66. padding: 3px 3px 3px 15px;
    67. background-color: #CFFFFF;
    68. font-family: verdana, arial, sans-serif;
    69. }
    70. #infobox p{
    71. padding: 0px 0px 0px 15px;
    72. font-family: verdana, arial, sans-serif;
    73. }
    74. #footer {
    75. height: 20px;
    76. clear: both;
    77. background-color: green;
    78. }
    79. </style>
    80. </head>
    81. <body>
    82. <div id="container">
    83. <div id="navi">
    84. <ul>
    85. <li><a href="http://www.google.com">Google</a></li>
    86. <li><a href="http://www.yahoo.com">Yahoo</a></li>
    87. <li><a href="http://www.freesoft-board.to">Freesoft Board</a></li>
    88. </ul>
    89. </div>
    90. <div id="content">
    91. <p>
    92. At mutat conclusionemque ius, eam ea everti instructior. Sit ne postea impetus eruditi, eam eius dicat eu. Noluisse intellegam et eam, quo ei novum disputando. Vis elitr iudico eleifend te, vel liber oblique invenire no, eu lorem indoctum appellantur eos. Putent quaerendum temporibus ea vim, ex wisi detracto ullamcorper duo. Stet ceteros no eum, vel nonumy alienum id, eum in deseruisse accommodare.
    93. </p>
    94. <p>
    95. Vim novum nostrud accommodare et, id vix odio suscipit. Dolor fierent adipiscing eu his, nec nemore essent causae ut, porro causae delectus ad vel. At cibo mundi theophrastus eum, movet dicam vix ad, tollit tractatos te usu. Nobis diceret dolores ius eu. Dicunt perpetua his ei, ne mel liber explicari.
    96. </p>
    97. <p>
    98. Has enim dicit epicurei id, mundi munere luptatum in vis, quis facilis eligendi eu eos. Id mei quot erat, id duo eruditi dignissim, discere omittam officiis vel id. At mea dicat veniam urbanitas, utinam tincidunt nec ex. Dico ancillae qualisque ei nec, vel ex habeo diceret dolorum. Et tractatos consetetur eum, nam ignota recteque in.
    99. </p>
    100. </div>
    101. <div id="infobox">
    102. <h3>Info-Box</h3>
    103. <p>Das ist die Info-Box. Hier stehen jeden Tag die neusten Infos!</p>
    104. </div>
    105. <div id="footer"></div>
    106. </div>
    107. </body>
    108. </html>
    Alles anzeigen


    Bei Frage stehe ich dir gerne zur Verfügung.
    Lerne leben, leben lernt!