1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Hintergrundbild verschiebt sich bei anderer Fenstergröße!

Dieses Thema im Forum "CSS" wurde erstellt von Funj0y, 14. Mai 2010.

  1. Funj0y

    Funj0y Grünschnabel

    Hallo,

    Ja ich arbeite gerade für meinen Verein an einer Homepage, da ich schon lange raus bin aus der Materie und CSS für eine schlanke Webseite unabdingbar ist, habe ich mir auch noch eine Lektüre dazu gekauft um alles richtig zu machen.

    Nun habe ich ein Klinze kleines Problem, das Design konnte ich erfolgreich in HTML und CSS umsetzen jedoch habe ich festgestellt wenn ich die Fenstergröße in der Breite kleiner als 1000px ändere das sich der Hintergrund bzw. das Bild total verschiebt und meine Sidebar im leeren stehen lässt.

    Nun ist mir klar das ich den Hintergrund einfach eine feste Größe zuweisen muss, jedoch wird mein Design mittig dargestellt und da geht das schlecht (denke ich ^^).

    Mein (X)HTML hat das Documenttype: XHTML 1.0 Strict

    Da die Seite derzeit nur Lokal auf mein Rechner liegt kann ich euch nur den Code und Screenshots anbieten. :)

    index.html
    HTML:
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml" lang="de">
    3.     <title>SV Bau-Union e.V. - Abteilung Tischtennis</title>
    4.     <meta http-equiv="Content-type" content="text/html; CHARSET=iso-8859-1" />
    5.     <link rel="stylesheet" type="text/css" href="style/svbu-2010/css/svbu.css" media="screen" />
    6.     <link rel="stylesheet" type="text/css" href="template/css/basic.css" media="screen" />
    7. </head>
    8.     <div id="Wrap">
    9.         <div id="Header"></div>
    10.         <div id="Navigation">
    11.          <ul>
    12.             <li><a href="#">Impressum</a></li>
    13.             <li><a href="#">Abteilungen</a></li>
    14.             <li><a href="#">Kontakt</a></li>
    15.             <li><a class="HoverActivated" href="#">Mannschaften</a></li>
    16.             <li><a href="#">Startseite</a></li>
    17.          </ul>
    18.         </div>
    19.         <!-- #######################SIDEBAR####################### -->
    20.         <div id="Sidebar" class="FloatLeft">
    21.             <p id="IdS">
    22.                 <a href="http://www.integration-durch-sport.de">
    23.                     <img src="style/svbu-2010/img/IdS.jpg" height="47" width="93" alt="Integration durch Sport" title="Integration durch Sport" />
    24.                 </a>
    25.             </p>
    26.             <ul>
    27.                 <li><p>Herren</p></li>
    28.                 <li><a href="#">1. Herren</a></li>
    29.                 <li><a href="#" class="HoverActivated">2. Herren</a></li>
    30.                 <li><a href="#">3. Herren</a></li>
    31.  
    32.                 <li><p>Damen</p></li>
    33.                 <li><a href="#">1. Damen</a></li>
    34.                 <li><a href="#">2. Damen</a></li>
    35.             </ul>
    36.         </div>
    37.         <!-- Content! -->
    38.         <div id="Content" class="FloatLeft">
    39.              <h1>Startseite</h1>
    40.              <!-- Ergebnis Dienst -->
    41.              <div id="ResultService" class="FloatLeft">
    42.                 <table border="0" cellpadding="0" cellspacing="0" summary="Ergebnis- Dienst f&uuml;r alle Mannschaften des SV Bau-Union!">
    43.                     <caption>Ergebnis- Dienst</caption>
    44.                     <thead>
    45.                         <tr>
    46.                             <th colspan="2">Heim</th>
    47.                             <th>Ausw&auml;rts</th>
    48.                             <th class="tAlignC tResultTitle">Ergebnis</th>
    49.                         </tr>
    50.                     </thead>
    51.                     <tbody>
    52.                         <tr class="Win">
    53.                             <td>1. Herren</td>
    54.                             <td class="tAlignC tDash">&ndash;</td>
    55.                             <td>Mannschaft A</td>
    56.                             <td class="tAlignC"><strong>9:2</strong></td>
    57.                         </tr>
    58.                         <tr class="Lose">
    59.                             <td>Mannschaft B</td>
    60.                             <td class="tAlignC tDash">&ndash;</td>
    61.                             <td>2. Herren</td>
    62.                             <td class="tAlignC"><strong>9:7</strong></td>
    63.                         </tr>
    64.                         <tr class="Draw">
    65.                             <td>Mannschaft C</td>
    66.                             <td class="tAlignC tDash">&ndash;</td>
    67.                             <td>3. Herren</td>
    68.                             <td class="tAlignC"><strong>8:8</strong></td>
    69.                         </tr>
    70.                         <tr>
    71.                             <td>1. Damen</td>
    72.                             <td class="tAlignC tDash">&ndash;</td>
    73.                             <td>Mannschaft D</td>
    74.                             <td class="tAlignC"><strong>n/a</strong></td>
    75.                         </tr>
    76.                         <tr class="Lose">
    77.                             <td>Mannschaft E</td>
    78.                             <td class="tAlignC tDash">&ndash;</td>
    79.                             <td>2. Damen</td>
    80.                             <td class="tAlignC"><strong>8:4</strong></td>
    81.                         </tr>
    82.                     </tbody>
    83.                     <!--<tfoot>
    84.                        <tr>
    85.                            <td colspan="4">Es ist Saisonpause, keine Ergebnisse Vorhanden!</td>
    86.                        </tr>
    87.                    </tfoot>-->
    88.                 </table>
    89.              </div>
    90.  
    91.              <!-- News -->
    92.              <div id="News">
    93.               <h2>Neuzug&auml;nge f&uuml;r die 1. Herren!</h2>
    94.               <p class="Note">Autor: Thomas Bowe, Do 06. Mai 2010 (13:00 Uhr)</p>
    95.               <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    96.              </div>
    97.         </div>
    98.     </div>
    99. </body>
    100. </html>
    101.  
    svbu.css
    Code (CSS):
    1. body {
    2.     background-image: url(../img/svbuBackground.jpg);
    3.     background-repeat: repeat-y;
    4.     background-position: center;
    5. }
    6.  
    7. /*>> Wrap config <<*/
    8. #Wrap {
    9.  
    10.  
    11.     width: 1002px;
    12.     margin: 0px auto;
    13.     text-align: left;
    14. }
    15.  
    16. /*>> Header config... <<*/
    17.  
    18. #Header {
    19.     width: 100%;
    20.     height: 275px;
    21.  
    22.     background-color: #FFFFFF;
    23.     background-image: url(../img/svbuHeader.jpg);
    24.     background-repeat: no-repeat;
    25.     background-position: bottom;
    26. }
    27.  
    28. /*>> Navigation config... <<*/
    29. #Navigation {
    30.     width: 998px;
    31.     height: 33px;
    32.  
    33.     background-image: url(../img/svbuNavi.jpg);
    34.     background-repeat: repeat-x;
    35.     background-position: top;
    36.  
    37.     margin: 0px auto;
    38. }
    39.  
    40. #Navigation ul {
    41.     list-style-type: none;
    42.     text-align: right;
    43.     padding: 9px 2px 0px 0px;
    44. }
    45.  
    46. #Navigation ul a:link, #Navigation ul a:visited,
    47. #Navigation ul a:active {
    48.     display: block;
    49.     float: right;
    50.     height: 24px;
    51.  
    52.     border-right: 1px solid #000000;
    53.     border-left: 1px solid #000000;
    54.     border-bottom: 1px solid #000000;
    55.     background-color: #8a8a8a;
    56.  
    57.     margin-left: 2px;
    58.     padding: 0px 10px 0px 10px;
    59.  
    60.     font-family: "Comic Sans MS";
    61.     font-size: 16px;
    62.     text-decoration: none;
    63.     color: #FFFFFF;
    64. }
    65.  
    66. #Navigation ul a:hover {
    67.     background-color: #425dfd;
    68. }
    69.  
    70. #Navigation a.HoverActivated:link, #Navigation a.HoverActivated:visited,
    71. #Navigation a.HoverActivated:hover, #Navigation a.HoverActivated:active {
    72.     background-color: #425dfd;
    73. }
    74.  
    75. /*>> Sidebar config... <<*/
    76. #Sidebar {
    77.     width: 181px;
    78.     padding-left: 2px;
    79. }
    80.  
    81. #Sidebar ul {
    82.     font-size: 13px;
    83.     font-weight: normal;
    84.  
    85.     list-style-type: none;
    86.     text-align: left;
    87.  
    88.     padding-bottom: 15px;
    89. }
    90.  
    91. #Sidebar ul p {
    92.     font-weight: bold;
    93.     color: #800000;
    94.     font-size: 15px;
    95.  
    96.     border-bottom: 1px solid #eaeaea;
    97.  
    98.     padding: 25px 5px 5px 20px;
    99. }
    100.  
    101. #Sidebar ul a:link, #Sidebar ul a:visited,
    102. #Sidebar ul a:active {
    103.     color: #000080;
    104.     text-decoration: none;
    105.  
    106.     display: block;
    107.     background-color: #f8f8f8;
    108.  
    109.     padding: 5px 5px 5px 20px;
    110. }
    111.  
    112. #Sidebar ul a:hover {
    113.     background-color: #eaeaea;
    114. }
    115.  
    116. #Sidebar a.HoverActivated:link, #Sidebar a.HoverActivated:visited,
    117. #Sidebar a.HoverActivated:hover, #Sidebar a.HoverActivated:active {
    118.     background-color: #eaeaea;
    119. }
    120.  
    121. #Sidebar p#IdS {
    122.     text-align: center;
    123.     padding: 15px 0px 15px 0px;
    124. }
    basic.css
    Code (CSS):
    1. /*>> Global config... <<*/
    2. * {
    3.     padding: 0px;
    4.     margin: 0px;
    5.  
    6.     font-family: Verdana;
    7.     font-size: 12px;
    8.     color: #444444;
    9. }
    10.  
    11. .FloatLeft {
    12.     float: left;
    13. }
    14.  
    15. .tAlignC {
    16.     text-align: center;
    17. }
    18.  
    19. img {
    20.     border: none;
    21. }
    22.  
    23. /*>> Content config... <<*/
    24. #Content {
    25.     width: 775px;
    26.     padding: 20px 20px 40px 20px;
    27.  
    28.     font-weight: normal;
    29.     font-style: normal;
    30.     line-height: 20px;
    31. }
    32.  
    33. #Content h1 {
    34.     font-size: 24px;
    35.     font-weight: bold;
    36.     color: #D5D5D5;
    37.  
    38.     text-align: right;
    39.     padding-bottom: 35px;
    40. }
    41.  
    42. /*>> News config... <<*/
    43. #News {
    44.     clear: both;
    45. }
    46. #News h2 {
    47.     font-size: 18px;
    48.     font-weight: bold;
    49.     line-height: 35px;
    50.     padding-top: 50px;
    51. }
    52.  
    53. #News p.Note {
    54.     font-size: 9px;
    55.     line-height: 15px;
    56.     text-align: right;
    57.  
    58.     padding: 2px 5px 5px 0px;
    59.     margin-bottom: 5px;
    60.     border-top: 1px solid #888888;
    61. }
    62.  
    63. /*>> Result Service config... <<*/
    64. #ResultService {
    65.     width: 550px;
    66.  
    67.     border-bottom: 8px solid #eaeaea;
    68. }
    69. #ResultService table {
    70.     width: 100%;
    71. }
    72.  
    73. .tResultTitle {
    74.     width: 80px;
    75. }
    76.  
    77. .tDash {
    78.     width: 40px;
    79. }
    80.  
    81. #ResultService table caption {
    82.     font-weight: bold;
    83.     font-size: 15px;
    84.     line-height: 30px;
    85.     text-align: left;
    86.  
    87.     margin-bottom: 3px;
    88.     border-bottom: 1px solid #eaeaea;
    89. }
    90.  
    91. #ResultService table thead th {
    92.     font-size: 11px;
    93.     font-weight: bold;
    94.     color: #800000;
    95.     line-height: 27px;
    96.  
    97.     padding: 0px 5px 0px 5px;
    98. }
    99.  
    100. #ResultService table tbody td, strong {
    101.     font-size: 10px;
    102.     padding: 0px 5px 0px 5px;
    103. }
    104.  
    105. #ResultService table tbody td {
    106.     border-bottom: 1px solid #FFFFFF;
    107. }
    108.  
    109. #ResultService table tbody tr.Win td {
    110.     background-color: #C3FFCB;
    111. }
    112.  
    113. #ResultService table tbody tr.Draw td {
    114.     background-color: #EDEDED;
    115. }
    116.  
    117. #ResultService table tbody tr.Lose td {
    118.     background-color: #FFB4AA;
    119. }
    120.  
    121. #ResultService table tfoot td {
    122.     font-style: italic;
    123.     text-align: center;
    124. }
    Hier nun noch 2 Screenshots die das Problem verdeutlichen sollen!
    Wenn das Fenster unverändert ist:
    DesignNormal.PNG

    Wenn das Fenster verändert ist:
    DesignAfter.PNG

    Ich danke schon mal für alle Lösungsvorschläge, was jedoch dabei noch zu beachten ist, dass #Wrap eine 100% Höhe haben muss! Deswegen hatte ich es via das Element body probiert. Ich wüßte jetzt nicht ob XHTML 1.0 Strict das zulässt das #Wrap eine 100% Höhe haben kann.

    Gruß Funj0y
  2. Maik

    Maik Gast

    Hi,

    ist kein Wunder, dass das zentriert positionierte Seitenhintergrundbild sich gegenüber dem horizontal zentrierten DIV-Block #Wrap verschiebt, wenn der Viewport im Browser schmäler skaliert wird, wie das Element selbst breit ist.

    Folglich muß das Hintergrundbild stattdessen für #Wrap verwendet werden.

    mfg Maik
  3. Funj0y

    Funj0y Grünschnabel

    Hallo,

    Joa die Logik warum das Hintergrundbild sich verschiebt ist mir auch Klar nur mir fehlt eine Lösung. Ich selber bin auch schon auf die Idee gekommen, dass ich #Wrap einfach die CSS- Definition gebe also so:
    Code (CSS):
    1. #Wrap {
    2.     background-image: url(../img/svbuBackground.jpg);
    3.     background-repeat: repeat-y;
    4.  
    5.     width: 1002px;
    6.     margin: 0px auto;
    7.     text-align: left;
    8. }
    nur dann habe ich folgendes Problem das, dass DIV- Element den Hintergrund verdeckt. Nun habe ich auf SelfHtml gelesen das man die background-color Transparent einstellen kann. Somit habe ich bei #Sidebar background-color: transparent; probiert jedoch ohne Erfolg.

    Das Resultat ist dieses hier:
    DesignWrap.PNG

    Gruß Funj0y
  4. Maik

    Maik Gast

    Dir ist wohl noch nicht aufgefallen, dass der Block #Wrap nicht in seiner vollständigen Höhe erscheint, was an deiner Floatumgebung liegt, die du nicht ordnungsgemäß mit der clear-Eigenschaft abgebrochen hast, um wieder den normalen Textfluß im Dokument herzustellen (clear:both für #News bleibt hier wirkungslos), und daher die Spaltenblöcke unterhalb des Navigationsmenüs derzeit über den unteren Boxenrand des Elternelements hinauslaufen.

    Aus diesem Grund siehst du das Hintergrundbild nun auch nicht in vollem vertikalen Umfang. Zur Gegenprobe kannst du ja mal border:thin solid red für #Wrap deklarieren, und schauen, bis wohin sich der Rahmen erstreckt.

  5. Funj0y

    Funj0y Grünschnabel

    Aha,

    Wenn ich das jetzt mit deiner Methode .clearfix mache und innerhalb des DIV- Elements von #Wrap noch ein DIV- Element hinzufüge mit der Klasse clearfix bekomme ich das Ergebnis teilweise hin. Die Box wird nun um #Sidebar und #Content geschlossen. Was mich hier nur stört ist das er nun mein Design etwas nach Links versetzt was ich sicher noch ausgleichen könnte und das er (das ist mein Hauptproblem nun) das wenn der Inhalt zu wenig ist, er unten alles abschneidet und der Hintergund nicht bis unten erfolgreich zu sehen ist.

    Da frage ich mich nun, da es ja nur ein höhen Problem von #Wrap ist ob es eine Möglichkeit gibt einfach #Wrap auf 100% Höhe zu stellen? Dann könnte ich mir das mit .clearfix sparen.

    Gruß Funj0y
  6. Maik

    Maik Gast

    Code (HTML5):
    1. <div id="Wrap" class="clearfix">
    ... reicht vollkommen, und verschiebt bei mir nix ;-)

    Zu deiner Frage bzgl. der 100%-Seitenhöhe findest du in meiner Signatur das passende CSS-Tutorial :)

    Ein Clearing der floatenden Blöcke ist aber auch dort vonnöten, wie du sehen wirst, wenn du die Quellcodes der einzelnen Ausbaustufen studierst.

    mfg Maik
  7. Funj0y

    Funj0y Grünschnabel

    Jepp aber da es dann zu einfach wäre gibs auch da ein Problem ^^

    Wenn ich bei #Wrap .clearfix ranhäng ist mein Design nicht mehr mittig wird quasi durch .clearfix aufgehoben ;)

    Hier mal wieder ein Bild:
    DesignCF.PNG


    Gruß Funj0y
  8. Maik

    Maik Gast

    Dann ist dir irgendwo ein (Syntax-)Fehler unterlaufen, denn bei mir behält #Wrap trotz der ergänzten .clearfix-Klasse weiterhin seine angedachte Position in der Fenstermitte bei.

    Dass diese Klasse darin existiert, erkennst du an dem roten Rahmen, der nun den floatenden Inhalt von #Wrap in voller Höhe umschließt, was zuvor nicht der Fall war.

    wrap-in-der-mitte.jpg

    In meinem empfohlenen Tutorial nutze ich diese Technik ebenso für ein Layout mit fester Breite und horizontaler Zentrierung - an der .clearfix-Klasse liegt es somit definitiv nicht.

    mfg Maik
  9. Funj0y

    Funj0y Grünschnabel

    Super hat geklappt :)

    Es war kein Syntaxfehler drinn nachdem ich beim BODY- Element die Eigenschaft text-align: center; deklariert hatte, hat er mir das Design auch wieder mittig dargestellt. ^^

    Mal eine Frage am Rande, da du ja aus der Szene kommst. Gibt es ein Addon für Firefox oder eine kostenlose Software die mir die gängigsten Browser simmuliert oder bin ich dazu verdammt die gängigsten Browser zu laden und zu schauen ob das Design passt oder nicht. Bestimmte Browser wie Netscape 4 sind mir dabei wurscht wer die benutzt ist selber schuld ^^

    Achja und vielen Dank für deine Hilfe, hier das Ergebnis:
    DesignCenter.PNG

    Gruß Funj0y
  10. Maik

    Maik Gast

    Kenn ich als FF-Erweiterung nur für den IE: IE Tab 2.

    Wenn http://browsershots.org/ dir hier wegen der "Screenshots" nicht genügt, installierst du dir eben Opera, Safari, Google Chrome & Co. auf dem System.

    mfg Maik
  11. Funj0y

    Funj0y Grünschnabel

    Alles Klar dann muß ich die Seite erst Hochladen um zu testen danke für den Link :)

    Gruß Funj0y
  12. Maik

    Maik Gast

    Dann stammte dein Schnappschuß aber aus dem IE, denn die übrigen Browser zentrieren Block-Elemente nicht auf diese Weise.

    Wenngleich ich jetzt nicht nachvollziehen kann, warum IE im standardkonformen Modus die margin:0 auto-Regel für #Wrap ignorieren sollte. Dies macht er nur, wenn er in den "Quirks Mode" geschaltet wird, was mit deiner Doctype-Deklaration aber nicht der Fall ist.

    Oder hast du im Entwicklertool des IE8 den Dokumentmodus auf "Quirks Mode" umgestellt?

    mfg Maik
  13. Funj0y

    Funj0y Grünschnabel

    ähm du liegst total Falsch ^^

    Der Screen stammt aus dem Firefox! Ich kann dir ja gerne nochmal den Code posten was ich quasi geändert habe. Ich habe da kein Syntaxfehler gefunden aber vielliecht bin ich ja Blind :)

    Wie sagt man so schön 4 Augen sehen besser wie 2 ;)

    index.html
    HTML:
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml" lang="de">
    3.     <title>SV Bau-Union e.V. - Abteilung Tischtennis</title>
    4.     <meta http-equiv="Content-type" content="text/html; CHARSET=iso-8859-1" />
    5.     <link rel="stylesheet" type="text/css" href="style/svbu-2010/css/svbu.css" media="screen" />
    6.     <link rel="stylesheet" type="text/css" href="template/css/basic.css" media="screen" />
    7. </head>
    8.     <div id="Wrap" class="ClearFix">
    9.         <div id="Header"></div>
    10.         <div id="Navigation">
    11.          <ul>
    12.             <li><a href="#">Impressum</a></li>
    13.             <li><a href="#">Abteilungen</a></li>
    14.             <li><a href="#">Kontakt</a></li>
    15.             <li><a class="HoverActivated" href="#">Mannschaften</a></li>
    16.             <li><a href="#">Startseite</a></li>
    17.          </ul>
    18.         </div>
    19.         <!-- #######################SIDEBAR####################### -->
    20.         <div id="Sidebar" class="FloatLeft">
    21.             <p id="IdS">
    22.                 <a href="http://www.integration-durch-sport.de">
    23.                     <img src="style/svbu-2010/img/IdS.jpg" height="47" width="93" alt="Integration durch Sport" title="Integration durch Sport" />
    24.                 </a>
    25.             </p>
    26.             <ul>
    27.                 <li><p>Herren</p></li>
    28.                 <li><a href="#">1. Herren</a></li>
    29.                 <li><a href="#" class="HoverActivated">2. Herren</a></li>
    30.                 <li><a href="#">3. Herren</a></li>
    31.  
    32.                 <li><p>Damen</p></li>
    33.                 <li><a href="#">1. Damen</a></li>
    34.                 <li><a href="#">2. Damen</a></li>
    35.             </ul>
    36.         </div>
    37.         <!-- Content! -->
    38.         <div id="Content" class="FloatLeft">
    39.              <h1>Startseite</h1>
    40.              <!-- Ergebnis Dienst -->
    41.              <div id="ResultService" class="FloatLeft">
    42.                 <table border="0" cellpadding="0" cellspacing="0" summary="Ergebnis- Dienst f&uuml;r alle Mannschaften des SV Bau-Union!">
    43.                     <caption>Ergebnis- Dienst</caption>
    44.                     <thead>
    45.                         <tr>
    46.                             <th colspan="2">Heim</th>
    47.                             <th>Ausw&auml;rts</th>
    48.                             <th class="tAlignC tResultTitle">Ergebnis</th>
    49.                         </tr>
    50.                     </thead>
    51.                     <tbody>
    52.                         <tr class="Win">
    53.                             <td>1. Herren</td>
    54.                             <td class="tAlignC tDash">&ndash;</td>
    55.                             <td>Mannschaft A</td>
    56.                             <td class="tAlignC"><strong>9:2</strong></td>
    57.                         </tr>
    58.                         <tr class="Lose">
    59.                             <td>Mannschaft B</td>
    60.                             <td class="tAlignC tDash">&ndash;</td>
    61.                             <td>2. Herren</td>
    62.                             <td class="tAlignC"><strong>9:7</strong></td>
    63.                         </tr>
    64.                         <tr class="Draw">
    65.                             <td>Mannschaft C</td>
    66.                             <td class="tAlignC tDash">&ndash;</td>
    67.                             <td>3. Herren</td>
    68.                             <td class="tAlignC"><strong>8:8</strong></td>
    69.                         </tr>
    70.                         <tr>
    71.                             <td>1. Damen</td>
    72.                             <td class="tAlignC tDash">&ndash;</td>
    73.                             <td>Mannschaft D</td>
    74.                             <td class="tAlignC"><strong>n/a</strong></td>
    75.                         </tr>
    76.                         <tr class="Lose">
    77.                             <td>Mannschaft E</td>
    78.                             <td class="tAlignC tDash">&ndash;</td>
    79.                             <td>2. Damen</td>
    80.                             <td class="tAlignC"><strong>8:4</strong></td>
    81.                         </tr>
    82.                     </tbody>
    83.                     <!-- <tfoot>
    84.                        <tr>
    85.                            <td colspan="4">Es ist Saisonpause, keine Ergebnisse Vorhanden!</td>
    86.                        </tr>
    87.                    </tfoot> -->
    88.                 </table>
    89.              </div>
    90.              <!-- News -->
    91.              <div id="News">
    92.               <h2>Neuzug&auml;nge f&uuml;r die 1. Herren!</h2>
    93.               <p class="Note">Autor: Thomas Bowe, Do 06. Mai 2010 (13:00 Uhr)</p>
    94.               <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    95.              </div>
    96.         </div>
    97.     </div>
    98. </body>
    99. </html>
    svbu.css
    Code (CSS):
    1. html, body {
    2.     height: 100%;
    3.     text-align: center;
    4. }
    5.  
    6. /*>> wrap config<<*/
    7. #Wrap {
    8.     position: relative;
    9.     min-height: 100%;
    10.     height: auto !important;
    11.     height: 100%;
    12.  
    13.     width: 1002px;
    14.     background-image: url(../img/svbuBackground.jpg);
    15.  
    16.     margin: 0px auto;
    17.     text-align: left;
    18. }
    19.  
    20. /*>> Header config... <<*/
    21.  
    22. #Header {
    23.     width: 100%;
    24.     height: 275px;
    25.  
    26.     background-color: #FFFFFF;
    27.     background-image: url(../img/svbuHeader.jpg);
    28.     background-repeat: no-repeat;
    29.     background-position: bottom;
    30. }
    31.  
    32. /*>> Navigation config... <<*/
    33. #Navigation {
    34.     width: 998px;
    35.     height: 33px;
    36.  
    37.     background-image: url(../img/svbuNavi.jpg);
    38.     background-repeat: repeat-x;
    39.     background-position: top;
    40.  
    41.     margin: 0px auto;
    42. }
    43.  
    44. #Navigation ul {
    45.     list-style-type: none;
    46.     text-align: right;
    47.     padding: 9px 2px 0px 0px;
    48. }
    49.  
    50. #Navigation ul a:link, #Navigation ul a:visited,
    51. #Navigation ul a:active {
    52.     display: block;
    53.     float: right;
    54.     height: 24px;
    55.  
    56.     border-right: 1px solid #000000;
    57.     border-left: 1px solid #000000;
    58.     border-bottom: 1px solid #000000;
    59.     background-color: #8a8a8a;
    60.  
    61.     margin-left: 2px;
    62.     padding: 0px 10px 0px 10px;
    63.  
    64.     font-family: "Comic Sans MS";
    65.     font-size: 16px;
    66.     text-decoration: none;
    67.     color: #FFFFFF;
    68. }
    69.  
    70. #Navigation ul a:hover {
    71.     background-color: #425dfd;
    72. }
    73.  
    74. #Navigation a.HoverActivated:link, #Navigation a.HoverActivated:visited,
    75. #Navigation a.HoverActivated:hover, #Navigation a.HoverActivated:active {
    76.     background-color: #425dfd;
    77. }
    78.  
    79. /*>> Sidebar config... <<*/
    80. #Sidebar {
    81.     width: 181px;
    82.     padding-left: 2px;
    83. }
    84.  
    85. #Sidebar ul {
    86.     font-size: 13px;
    87.     font-weight: normal;
    88.  
    89.     list-style-type: none;
    90.     text-align: left;
    91.  
    92.     padding-bottom: 15px;
    93. }
    94.  
    95. #Sidebar ul p {
    96.     font-weight: bold;
    97.     color: #800000;
    98.     font-size: 15px;
    99.  
    100.     border-bottom: 1px solid #eaeaea;
    101.  
    102.     padding: 25px 5px 5px 20px;
    103. }
    104.  
    105. #Sidebar ul a:link, #Sidebar ul a:visited,
    106. #Sidebar ul a:active {
    107.     color: #000080;
    108.     text-decoration: none;
    109.  
    110.     display: block;
    111.     background-color: #f8f8f8;
    112.  
    113.     padding: 5px 5px 5px 20px;
    114. }
    115.  
    116. #Sidebar ul a:hover {
    117.     background-color: #eaeaea;
    118. }
    119.  
    120. #Sidebar a.HoverActivated:link, #Sidebar a.HoverActivated:visited,
    121. #Sidebar a.HoverActivated:hover, #Sidebar a.HoverActivated:active {
    122.     background-color: #eaeaea;
    123. }
    124.  
    125. #Sidebar p#IdS {
    126.     text-align: center;
    127.     padding: 15px 0px 15px 0px;
    128. }
    basic.css
    Code (CSS):
    1. /*>> Global config... <<*/
    2. * {
    3.     padding: 0px;
    4.     margin: 0px;
    5.  
    6.     font-family: Verdana;
    7.     font-size: 12px;
    8.     color: #444444;
    9. }
    10.  
    11. .FloatLeft {
    12.     float: left;
    13. }
    14.  
    15. .tAlignC {
    16.     text-align: center;
    17. }
    18.  
    19. .ClearFix:after {
    20.     content: ".";
    21.     display: block;
    22.     height: 0px;
    23.     font-size: 0px;
    24.     clear: both;
    25.     visibility: hidden;
    26. }
    27.  
    28. .ClearFix {
    29.     display: inline-block;
    30. }
    31.  
    32. img {
    33.     border: none;
    34. }
    35.  
    36. /*>> Content config... <<*/
    37. #Content {
    38.     width: 775px;
    39.     padding: 20px 20px 40px 20px;
    40.  
    41.     font-weight: normal;
    42.     font-style: normal;
    43.     line-height: 20px;
    44. }
    45.  
    46. #Content h1 {
    47.     font-size: 24px;
    48.     font-weight: bold;
    49.     color: #D5D5D5;
    50.  
    51.     text-align: right;
    52.     padding-bottom: 35px;
    53. }
    54.  
    55. /*>> News config... <<*/
    56. #News {
    57.     clear: left;
    58. }
    59. #News h2 {
    60.     font-size: 18px;
    61.     font-weight: bold;
    62.     line-height: 35px;
    63.     padding-top: 50px;
    64. }
    65.  
    66. #News p.Note {
    67.     font-size: 9px;
    68.     line-height: 15px;
    69.     text-align: right;
    70.  
    71.     padding: 2px 5px 5px 0px;
    72.     margin-bottom: 5px;
    73.     border-top: 1px solid #888888;
    74. }
    75.  
    76. /*>> Result Service config... <<*/
    77. #ResultService {
    78.     width: 550px;
    79.  
    80.     border-bottom: 8px solid #eaeaea;
    81. }
    82. #ResultService table {
    83.     width: 100%;
    84. }
    85.  
    86. .tResultTitle {
    87.     width: 80px;
    88. }
    89.  
    90. .tDash {
    91.     width: 40px;
    92. }
    93.  
    94. #ResultService table caption {
    95.     font-weight: bold;
    96.     font-size: 15px;
    97.     line-height: 30px;
    98.     text-align: left;
    99.  
    100.     margin-bottom: 3px;
    101.     border-bottom: 1px solid #eaeaea;
    102. }
    103.  
    104. #ResultService table thead th {
    105.     font-size: 11px;
    106.     font-weight: bold;
    107.     color: #800000;
    108.     line-height: 27px;
    109.  
    110.     padding: 0px 5px 0px 5px;
    111. }
    112.  
    113. #ResultService table tbody td, strong {
    114.     font-size: 10px;
    115.     padding: 0px 5px 0px 5px;
    116. }
    117.  
    118. #ResultService table tbody td {
    119.     border-bottom: 1px solid #FFFFFF;
    120. }
    121.  
    122. #ResultService table tbody tr.Win td {
    123.     background-color: #C3FFCB;
    124. }
    125.  
    126. #ResultService table tbody tr.Draw td {
    127.     background-color: #EDEDED;
    128. }
    129.  
    130. #ResultService table tbody tr.Lose td {
    131.     background-color: #FFB4AA;
    132. }
    133.  
    134. #ResultService table tfoot td {
    135.     font-style: italic;
    136.     text-align: center;
    137. }
    Was mir jetzt noch einfällt ist, könnte es vielleicht darin liegen das svbu.css als erstes eingebunden wird und dann basic.css da in basic.css ClearFix definiert wird?!

    Gruß Funj0y
  14. Maik

    Maik Gast

    Du hast da schlichtweg was vergessen zu übernehmen :p

    Code (Text):
    1.  
    2. /* Hides from IE-mac \*/
    3. * html .clearfix {height:1%;}
    4. [b].clearfix {display:block;}[/b]
    5. /* End hide from IE-mac */

    mfg Maik
  15. Funj0y

    Funj0y Grünschnabel

    Ups habe ich wohl beim ausmisten ausversehen gelöscht :eek:

    Aber da sieht man mal wieder was so eine kleine Definition auslösen kann ^^

    Jetzt kann ich mich endlich dem Programmier- Teil widmen, da liegen eher meine Stärken :)

    Gruß Funj0y
    Zuletzt bearbeitet: 14. Mai 2010

Diese Seite empfehlen