Anzeige

CSS und seine Eigenheiten

CSS und seine Eigenheiten | PSD-Tutorials.de

Erstellt von GeneralFabi, 27.09.2008.

  1. GeneralFabi

    GeneralFabi Nicht mehr ganz neu hier

    Dabei seit:
    06.03.2007
    Beiträge:
    93
    Geschlecht:
    männlich
    Ort:
    Neunkirchen (Saar)
    Software:
    Adobe Creative Suite 5 Design Premium
    Kameratyp:
    Panasonic Lumix DMC-FZ5
    CSS und seine Eigenheiten
    Hi,
    ich habe ein ziemlich nerviges Problem mit CSS. Ich arbeite mit parent- und child-divs und es gibt nur Probleme. Das treibt mich noch zum Wahnsinn...

    Ich will ein Layout haben, bei dem es einen allesumgebenden div gibt, darin einen header-, body- und footer-Bereich und inerhalb des body- und footer-Bereich jeweils immer einen linken und rechten Bereich gibt.

    Das Problem ist, dass die body- und footer-divs nicht die entsprechenden linken und rechten divs umschließen. Die Folge davon ist, dass das gesamte Layout völlig missgestaltet erscheint.
    Solange ich den umschließenden body- und footer-divs keine Höhe gebe (was bei dem Body-Bereich nicht geht; dynamischer Inhalt), besitzen diese die Normalhöhe eines divs und umschließen ihre linken und rechten Bereiche nicht mehr.

    HTML-Code:
    HTML:
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
    3. <link href="common.css" media="screen" rel="stylesheet" title="Espadon Online-Basic" type="text/css" />
    4. <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    5. <title>Startseite | Espadon Online</title>
    6. </head>
    7. <div id="wrap">
    8.   <div id="page-header">
    9.     <h1>Espadon Online ? Startseite</h1>
    10.     <p><a class="external" href="http://blog.espadon-online.eu/">Espadon Online-Blog</a> ? <a href="forum/">Espadon Online-Forum</a></p>
    11.   </div>
    12.   <div id="page-body">
    13.     <div id="page-body-left"></div>
    14.     <div id="page-body-right">Hallo Welt!</div>
    15.   </div>
    16.   <div id="page-footer">
    17.     <div id="page-footer-left">Copyright &copy; 2008 Cowade Studios. Alle Rechte vorbehalten.<br/>
    18.       XHTML 1.0 transitional ? CSS Level 2.1 ? Barrierefreiheit</div>
    19.     <div id="page-footer-right">Nach oben ? Samstag, 27. September 2008<br/>
    20.       Deutsch ? English</div>
    21.   </div>
    22. </div>
    23. <div id="wrap-after">
    24.   <!-- height: 10px;  -->
    25. </div>
    26. </body>
    27. </html>
    28.  
    CSS-Code:
    Code (Text):
    1. @charset "utf-8";
    2. /* CSS Document */
    3.  
    4. *
    5. {
    6.     font-size: 100%;
    7.     margin: 0;
    8.     padding: 0;
    9. }
    10.  
    11. a:link, a:visited
    12. {
    13.     color: #323232;
    14.     text-decoration: none;
    15. }
    16.  
    17. a:hover
    18. {
    19.     color: #FF9944;
    20.     text-decoration: underline;
    21. }
    22.  
    23. a:active
    24. {
    25.     color: #FF9944;
    26.     text-decoration: none;
    27. }
    28.  
    29. body
    30. {
    31.     background-color: #F0F0F0;
    32.     color: #000;
    33.     font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    34.     font-size: 72.5%;
    35.     margin: 10px;
    36.     padding: 0;
    37. }
    38.  
    39. h1
    40. {
    41.     color: #333333;
    42.     font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    43.     font-size: 1.30em;
    44.     font-weight: normal;
    45. }
    46.  
    47. html
    48. {
    49.     background-color: #F0F0F0;
    50.     color: #000;
    51.     height: 100%;
    52.     margin: 0 0 10px 0;
    53. }
    54.  
    55. img { border: 0; }
    56.  
    57. p
    58. {
    59.     font-size: 1.00em;
    60.     line-height: 1.40em;
    61.     margin: 0 0 0.7em 0;
    62. }
    63.  
    64. div#wrap
    65. {
    66.     background-color: #FFF;
    67.     border: 1px solid #CCCCCC;
    68.     margin: 0 auto;
    69.     padding: 0;
    70.     text-align: left;
    71.     width: 950px;
    72. }
    73.  
    74. divwrap-after
    75. {
    76.     clear: both;
    77.     height: 10px;
    78. }
    79.  
    80. div#page-header
    81. {
    82.     background: url("site-logo.png") top left no-repeat;
    83.     clear: both;
    84.     height: 125px;
    85.     margin: 0 0 10px 0;
    86.     padding: 5px;
    87.     text-align: right;
    88.     width: 940px;
    89. }
    90.  
    91. div#page-header h1
    92. {
    93.     margin: 0;
    94.     padding: 0;
    95. }
    96.  
    97. div#page-header p
    98. {
    99.     color: #323232;
    100.     margin: 0;
    101.     padding: 0;
    102. }
    103.  
    104. div#page-body
    105. {
    106.     clear: both;
    107.     height: 100%;
    108.     margin: 0;
    109.     padding: 5px;
    110.     width: 940px;
    111. }
    112.  
    113. div#page-body-left
    114. {
    115.     float: left;
    116.     margin: 0 10px 0 0;
    117.     padding: 0;
    118.     width: 600px;
    119. }
    120.  
    121. div#page-body-right
    122. {
    123.     float: left;
    124.     margin: 0;
    125.     padding: 0;
    126.     width: 330px;
    127. }
    128.  
    129. div#page-footer
    130. {
    131.     clear: both;
    132.     height: 34px;
    133.     margin: 0;
    134.     padding: 5px;
    135.     width: 940px;
    136. }
    137.  
    138. div#page-footer-left
    139. {
    140.     float: left;
    141.     margin: 0 10px 0 0;
    142.     padding: 0;
    143.     width: 600px;
    144. }
    145.  
    146. div#page-footer-right
    147. {
    148.     float: left;
    149.     margin: 0;
    150.     padding: 0;
    151.     width: 330px;
    152.     text-align: right;
    153. }
    154.  
    Wenn jemand eine Lösung meines Problems oder eine bessere Umsetzung der Idee hat, bitte schreiben, ist echt wichtig!
    Danke im Voraus!
     
    #1      
  2. Heddy

    Heddy Guest

    CSS und seine Eigenheiten
    AW: CSS und seine Eigenheiten

    du musst das float vom body und vom footer auch noch mit clear löschen
    also bei mir war es so!
    MfG
    Heddy
     
    #2      
  3. toxictoon

    toxictoon Pixelpatriot

    Dabei seit:
    27.05.2007
    Beiträge:
    633
    Geschlecht:
    männlich
    Ort:
    Augsburg
    Software:
    Adobe CC
    Kameratyp:
    Eos 400 d
    CSS und seine Eigenheiten
    AW: CSS und seine Eigenheiten

    Wenn ich dich richtig verstanden habe sollte es so gehen...

    Code (Text):
    1.  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
    4. <head>
    5. <link href="style.css" media="screen" rel="stylesheet" title="Espadon Online-Basic" type="text/css" />
    6. <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    7. <title>Startseite | Espadon Online</title>
    8. </head>
    9. <body>
    10. <div id="wrap">
    11.   <div id="page-header">
    12.     <h1>Espadon Online ? Startseite</h1>
    13.     <p><a class="external" href="http://blog.espadon-online.eu/">Espadon Online-Blog</a> ? <a href="forum/">Espadon Online-Forum</a></p>
    14.   </div>
    15.   <div id="page-body">
    16.     <div id="page-body-left">
    17.       <p>Linker page bereich</p>
    18.       <p>asdf</p>
    19.       <p>sdas</p>
    20.       <p>dsdad</p>
    21.     </div>
    22.     <div id="page-body-right">
    23.       <p>Rechter Page BEreich</p>
    24.       <p>dsfjdsfjkldsjf</p>
    25.       <p>sdfdsflhdsf</p>
    26.       <p>&nbsp;</p>
    27.       <p>sadasd</p>
    28.       <p>asd</p>
    29.     </div>
    30.   </div>
    31.   <div id="page-footer">
    32.     <div id="page-footer-left">Copyright &copy; 2008 Cowade Studios. Alle Rechte vorbehalten.<br/>
    33.       XHTML 1.0 transitional ? CSS Level 2.1 ? Barrierefreiheit</div>
    34.     <div id="page-footer-right">Nach oben ? Samstag, 27. September 2008<br/>
    35.       Deutsch ? English</div>
    36.   </div>
    37. </div>
    38. <div id="wrap-after">
    39.   <!-- height: 10px;  -->
    40. </div>
    41. </body>
    42. </html>
    43.  
    44.  
    45.  
    46.  

    Code (Text):
    1.  
    2.  
    3. @charset "utf-8";
    4. /* CSS Document */
    5.  
    6. *
    7. {
    8.     font-size: 100%;
    9.     margin: 0;
    10.     padding: 0;
    11. }
    12.  
    13. a:link, a:visited
    14. {
    15.     color: #323232;
    16.     text-decoration: none;
    17. }
    18.  
    19. a:hover
    20. {
    21.     color: #FF9944;
    22.     text-decoration: underline;
    23. }
    24.  
    25. a:active
    26. {
    27.     color: #FF9944;
    28.     text-decoration: none;
    29. }
    30.  
    31. body
    32. {
    33.     background-color: #F0F0F0;
    34.     color: #000;
    35.     font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    36.     font-size: 72.5%;
    37.     margin: 10px;
    38.     padding: 0;
    39. }
    40.  
    41. h1
    42. {
    43.     color: #333333;
    44.     font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    45.     font-size: 1.30em;
    46.     font-weight: normal;
    47. }
    48.  
    49. html
    50. {
    51.     background-color: #F0F0F0;
    52.     color: #000;
    53.     height: 100%;
    54.     margin: 0 0 10px 0;
    55. }
    56.  
    57. img { border: 0; }
    58.  
    59. p
    60. {
    61.     font-size: 1.00em;
    62.     line-height: 1.40em;
    63.     margin: 0 0 0.7em 0;
    64. }
    65.  
    66. div#wrap
    67. {
    68.  
    69.     background-color: #FFF;
    70.     border: 1px solid #CCCCCC;
    71.     margin: 0 auto;
    72.     padding: 0;
    73.     text-align: left;
    74.     width: 950px;
    75. }
    76.  
    77. divwrap-after
    78. {
    79.     clear: both;
    80.     height: 10px;
    81. }
    82.  
    83. div#page-header
    84. {
    85.     background: url("site-logo.png") top left no-repeat;
    86.     height: 125px;
    87.     margin: 0 0 10px 0;
    88.     padding: 5px;
    89.     text-align: right;
    90.     width: 940px;
    91. }
    92.  
    93. div#page-header h1
    94. {
    95.     margin: 0;
    96.     padding: 0;
    97. }
    98.  
    99. div#page-header p
    100. {
    101.     color: #323232;
    102.     margin: 0;
    103.     padding: 0;
    104. }
    105.  
    106. div#page-body
    107. {
    108.     height: 100%;
    109.     margin: 0;
    110.     padding: 5px;
    111.     width: 940px;
    112. }
    113.  
    114. div#page-body-left
    115. {
    116.     float: left;
    117.        margin: 0 10px 0 0;
    118.     padding: 0px;
    119.     width: 600px;
    120. }
    121.  
    122. div#page-body-right
    123. {
    124.     float:left;
    125.     margin: 0;
    126.     padding: 0x;
    127.     width: 320px;
    128. }
    129.  
    130. div#page-footer
    131. {
    132.     clear: both;
    133.     height: 34px;
    134.     margin: 0;
    135.     padding: 5px;
    136.     width: 940px;
    137. }
    138.  
    139. div#page-footer-left
    140. {
    141.     float: left;
    142.     margin: 0 10px 0 0;
    143.     padding: 0;
    144.     width: 600px;
    145. }
    146.  
    147. div#page-footer-right
    148. {
    149.     float: left;
    150.     margin: 0;
    151.     padding: 0;
    152.     width: 330px;
    153.     text-align: right;
    154. }
    155.  
    156.  
    157.  
     
    #3      
  4. GeneralFabi

    GeneralFabi Nicht mehr ganz neu hier

    Dabei seit:
    06.03.2007
    Beiträge:
    93
    Geschlecht:
    männlich
    Ort:
    Neunkirchen (Saar)
    Software:
    Adobe Creative Suite 5 Design Premium
    Kameratyp:
    Panasonic Lumix DMC-FZ5
    CSS und seine Eigenheiten
    AW: CSS und seine Eigenheiten

    Funzt, danke vielmals.
     
    #4      
x
×
×
teststefan