ERLEDIGT
JA
ANTWORTEN
14
ZUGRIFFE
2183
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
  1. #1
    Avatar von Funj0y
    Funj0y ist offline Mitglied
    Registriert seit
    Feb 2010
    Beiträge
    20
    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-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="de">
    <head>
        <title>SV Bau-Union e.V. - Abteilung Tischtennis</title>
        <meta http-equiv="Content-type" content="text/html; CHARSET=iso-8859-1" />
        <link rel="stylesheet" type="text/css" href="style/svbu-2010/css/svbu.css" media="screen" />
        <link rel="stylesheet" type="text/css" href="template/css/basic.css" media="screen" />
    </head>
    <body>
        <div id="Wrap">
            <div id="Header"></div>
            <div id="Navigation">
             <ul>
                <li><a href="#">Impressum</a></li>
                <li><a href="#">Abteilungen</a></li>
                <li><a href="#">Kontakt</a></li>
                <li><a class="HoverActivated" href="#">Mannschaften</a></li>
                <li><a href="#">Startseite</a></li>
             </ul>
            </div>
            <!-- #######################SIDEBAR####################### -->
            <div id="Sidebar" class="FloatLeft">
                <p id="IdS">
                    <a href="http://www.integration-durch-sport.de">
                        <img src="style/svbu-2010/img/IdS.jpg" height="47" width="93" alt="Integration durch Sport" title="Integration durch Sport" />
                    </a>
                </p>
                <ul>
                    <li><p>Herren</p></li>
                    <li><a href="#">1. Herren</a></li>
                    <li><a href="#" class="HoverActivated">2. Herren</a></li>
                    <li><a href="#">3. Herren</a></li>
    
                    <li><p>Damen</p></li>
                    <li><a href="#">1. Damen</a></li>
                    <li><a href="#">2. Damen</a></li>
                </ul>
            </div>
            <!-- Content! -->
            <div id="Content" class="FloatLeft">
                 <h1>Startseite</h1>
                 <!-- Ergebnis Dienst -->
                 <div id="ResultService" class="FloatLeft">
                    <table border="0" cellpadding="0" cellspacing="0" summary="Ergebnis- Dienst f&uuml;r alle Mannschaften des SV Bau-Union!">
                        <caption>Ergebnis- Dienst</caption>
                        <thead>
                            <tr>
                                <th colspan="2">Heim</th>
                                <th>Ausw&auml;rts</th>
                                <th class="tAlignC tResultTitle">Ergebnis</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="Win">
                                <td>1. Herren</td>
                                <td class="tAlignC tDash">&ndash;</td>
                                <td>Mannschaft A</td>
                                <td class="tAlignC"><strong>9:2</strong></td>
                            </tr>
                            <tr class="Lose">
                                <td>Mannschaft B</td>
                                <td class="tAlignC tDash">&ndash;</td>
                                <td>2. Herren</td>
                                <td class="tAlignC"><strong>9:7</strong></td>
                            </tr>
                            <tr class="Draw">
                                <td>Mannschaft C</td>
                                <td class="tAlignC tDash">&ndash;</td>
                                <td>3. Herren</td>
                                <td class="tAlignC"><strong>8:8</strong></td>
                            </tr>
                            <tr>
                                <td>1. Damen</td>
                                <td class="tAlignC tDash">&ndash;</td>
                                <td>Mannschaft D</td>
                                <td class="tAlignC"><strong>n/a</strong></td>
                            </tr>
                            <tr class="Lose">
                                <td>Mannschaft E</td>
                                <td class="tAlignC tDash">&ndash;</td>
                                <td>2. Damen</td>
                                <td class="tAlignC"><strong>8:4</strong></td>
                            </tr>
                        </tbody>
                        <!--<tfoot>
                            <tr>
                                <td colspan="4">Es ist Saisonpause, keine Ergebnisse Vorhanden!</td>
                            </tr>
                        </tfoot>-->
                    </table>
                 </div>
    
                 <!-- News -->
                 <div id="News">
                  <h2>Neuzug&auml;nge f&uuml;r die 1. Herren!</h2>
                  <p class="Note">Autor: Thomas Bowe, Do 06. Mai 2010 (13:00 Uhr)</p>
                  <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>
                 </div>
            </div>
        </div>
    </body>
    </html>
    svbu.css
    Code css:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    
    body {
        background-image: url(../img/svbuBackground.jpg);
        background-repeat: repeat-y;
        background-position: center;
    }
     
    /*>> Wrap config <<*/
    #Wrap {
     
     
        width: 1002px;
        margin: 0px auto;
        text-align: left;
    }
     
    /*>> Header config... <<*/
     
    #Header {
        width: 100%;
        height: 275px;
     
        background-color: #FFFFFF;
        background-image: url(../img/svbuHeader.jpg);
        background-repeat: no-repeat;
        background-position: bottom;
    }
     
    /*>> Navigation config... <<*/
    #Navigation {
        width: 998px;
        height: 33px;
     
        background-image: url(../img/svbuNavi.jpg);
        background-repeat: repeat-x;
        background-position: top;
     
        margin: 0px auto;
    }
     
    #Navigation ul {
        list-style-type: none;
        text-align: right;
        padding: 9px 2px 0px 0px;
    }
     
    #Navigation ul a:link, #Navigation ul a:visited,
    #Navigation ul a:active {
        display: block;
        float: right;
        height: 24px;
     
        border-right: 1px solid #000000;
        border-left: 1px solid #000000;
        border-bottom: 1px solid #000000;
        background-color: #8a8a8a;
     
        margin-left: 2px;
        padding: 0px 10px 0px 10px;
     
        font-family: "Comic Sans MS";
        font-size: 16px;
        text-decoration: none;
        color: #FFFFFF;
    }
     
    #Navigation ul a:hover {
        background-color: #425dfd;
    }
     
    #Navigation a.HoverActivated:link, #Navigation a.HoverActivated:visited,
    #Navigation a.HoverActivated:hover, #Navigation a.HoverActivated:active {
        background-color: #425dfd;
    }
     
    /*>> Sidebar config... <<*/
    #Sidebar {
        width: 181px;
        padding-left: 2px;
    }
     
    #Sidebar ul {
        font-size: 13px;
        font-weight: normal;
     
        list-style-type: none;
        text-align: left;
     
        padding-bottom: 15px;
    }
     
    #Sidebar ul p {
        font-weight: bold;
        color: #800000;
        font-size: 15px;
     
        border-bottom: 1px solid #eaeaea;
     
        padding: 25px 5px 5px 20px;
    }
     
    #Sidebar ul a:link, #Sidebar ul a:visited,
    #Sidebar ul a:active {
        color: #000080;
        text-decoration: none;
     
        display: block;
        background-color: #f8f8f8;
     
        padding: 5px 5px 5px 20px;
    }
     
    #Sidebar ul a:hover {
        background-color: #eaeaea;
    }
     
    #Sidebar a.HoverActivated:link, #Sidebar a.HoverActivated:visited,
    #Sidebar a.HoverActivated:hover, #Sidebar a.HoverActivated:active {
        background-color: #eaeaea;
    }
     
    #Sidebar p#IdS {
        text-align: center;
        padding: 15px 0px 15px 0px;
    }

    basic.css
    Code css:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    
    /*>> Global config... <<*/
    * {
        padding: 0px;
        margin: 0px;
     
        font-family: Verdana;
        font-size: 12px;
        color: #444444;
    }
     
    .FloatLeft {
        float: left;
    }
     
    .tAlignC {
        text-align: center;
    }
     
    img {
        border: none;
    }
     
    /*>> Content config... <<*/
    #Content {
        width: 775px;
        padding: 20px 20px 40px 20px;
     
        font-weight: normal;
        font-style: normal;
        line-height: 20px;
    }
     
    #Content h1 {
        font-size: 24px;
        font-weight: bold;
        color: #D5D5D5;
     
        text-align: right;
        padding-bottom: 35px;
    }
     
    /*>> News config... <<*/
    #News {
        clear: both;
    }
    #News h2 {
        font-size: 18px;
        font-weight: bold;
        line-height: 35px;
        padding-top: 50px;
    }
     
    #News p.Note {
        font-size: 9px;
        line-height: 15px;
        text-align: right;
     
        padding: 2px 5px 5px 0px;
        margin-bottom: 5px;
        border-top: 1px solid #888888;
    }
     
    /*>> Result Service config... <<*/
    #ResultService {
        width: 550px;
     
        border-bottom: 8px solid #eaeaea;
    }
    #ResultService table {
        width: 100%;
    }
     
    .tResultTitle {
        width: 80px;
    }
     
    .tDash {
        width: 40px;
    }
     
    #ResultService table caption {
        font-weight: bold;
        font-size: 15px;
        line-height: 30px;
        text-align: left;
     
        margin-bottom: 3px;
        border-bottom: 1px solid #eaeaea;
    }
     
    #ResultService table thead th {
        font-size: 11px;
        font-weight: bold;
        color: #800000;
        line-height: 27px;
     
        padding: 0px 5px 0px 5px;
    }
     
    #ResultService table tbody td, strong {
        font-size: 10px;
        padding: 0px 5px 0px 5px;
    }
     
    #ResultService table tbody td {
        border-bottom: 1px solid #FFFFFF;
    }
     
    #ResultService table tbody tr.Win td {
        background-color: #C3FFCB;
    }
     
    #ResultService table tbody tr.Draw td {
        background-color: #EDEDED;
    }
     
    #ResultService table tbody tr.Lose td {
        background-color: #FFB4AA;
    }
     
    #ResultService table tfoot td {
        font-style: italic;
        text-align: center;
    }

    Hier nun noch 2 Screenshots die das Problem verdeutlichen sollen!
    Wenn das Fenster unverändert ist:
    Hintergrundbild verschiebt sich bei anderer Fenstergröße!-designnormal.png

    Wenn das Fenster verändert ist:
    Hintergrundbild verschiebt sich bei anderer Fenstergröße!-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. #2
    Maik Tutorials.de Gastzugang
    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. #3
    Avatar von Funj0y
    Funj0y ist offline Mitglied
    Registriert seit
    Feb 2010
    Beiträge
    20
    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
    2
    3
    4
    5
    6
    7
    8
    
    #Wrap {
        background-image: url(../img/svbuBackground.jpg);
        background-repeat: repeat-y;
     
        width: 1002px;
        margin: 0px auto;
        text-align: left;
    }

    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:
    Hintergrundbild verschiebt sich bei anderer Fenstergröße!-designwrap.png

    Gruß Funj0y
     

  4. #4
    Maik Tutorials.de Gastzugang
    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.



    mfg Maik
     

  5. #5
    Avatar von Funj0y
    Funj0y ist offline Mitglied
    Registriert seit
    Feb 2010
    Beiträge
    20
    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. #6
    Maik Tutorials.de Gastzugang
    HTML-Code:
    <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. #7
    Avatar von Funj0y
    Funj0y ist offline Mitglied
    Registriert seit
    Feb 2010
    Beiträge
    20
    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:
    Hintergrundbild verschiebt sich bei anderer Fenstergröße!-designcf.png


    Gruß Funj0y
     

  8. #8
    Maik Tutorials.de Gastzugang
    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.

    Hintergrundbild verschiebt sich bei anderer Fenstergröße!-wrap-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. #9
    Avatar von Funj0y
    Funj0y ist offline Mitglied
    Registriert seit
    Feb 2010
    Beiträge
    20
    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:
    Hintergrundbild verschiebt sich bei anderer Fenstergröße!-designcenter.png

    Gruß Funj0y
     

  10. #10
    Maik Tutorials.de Gastzugang
    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. #11
    Avatar von Funj0y
    Funj0y ist offline Mitglied
    Registriert seit
    Feb 2010
    Beiträge
    20
    Alles Klar dann muß ich die Seite erst Hochladen um zu testen danke für den Link

    Gruß Funj0y
     

  12. #12
    Maik Tutorials.de Gastzugang
    Zitat Zitat von Funj0y Beitrag anzeigen
    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.
    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. #13
    Avatar von Funj0y
    Funj0y ist offline Mitglied
    Registriert seit
    Feb 2010
    Beiträge
    20
    ä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-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="de">
    <head>
        <title>SV Bau-Union e.V. - Abteilung Tischtennis</title>
        <meta http-equiv="Content-type" content="text/html; CHARSET=iso-8859-1" />
        <link rel="stylesheet" type="text/css" href="style/svbu-2010/css/svbu.css" media="screen" />
        <link rel="stylesheet" type="text/css" href="template/css/basic.css" media="screen" />
    </head>
    <body>
        <div id="Wrap" class="ClearFix">
            <div id="Header"></div>
            <div id="Navigation">
             <ul>
                <li><a href="#">Impressum</a></li>
                <li><a href="#">Abteilungen</a></li>
                <li><a href="#">Kontakt</a></li>
                <li><a class="HoverActivated" href="#">Mannschaften</a></li>
                <li><a href="#">Startseite</a></li>
             </ul>
            </div>
            <!-- #######################SIDEBAR####################### -->
            <div id="Sidebar" class="FloatLeft">
                <p id="IdS">
                    <a href="http://www.integration-durch-sport.de">
                        <img src="style/svbu-2010/img/IdS.jpg" height="47" width="93" alt="Integration durch Sport" title="Integration durch Sport" />
                    </a>
                </p>
                <ul>
                    <li><p>Herren</p></li>
                    <li><a href="#">1. Herren</a></li>
                    <li><a href="#" class="HoverActivated">2. Herren</a></li>
                    <li><a href="#">3. Herren</a></li>
    
                    <li><p>Damen</p></li>
                    <li><a href="#">1. Damen</a></li>
                    <li><a href="#">2. Damen</a></li>
                </ul>
            </div>
            <!-- Content! -->
            <div id="Content" class="FloatLeft">
                 <h1>Startseite</h1>
                 <!-- Ergebnis Dienst -->
                 <div id="ResultService" class="FloatLeft">
                    <table border="0" cellpadding="0" cellspacing="0" summary="Ergebnis- Dienst f&uuml;r alle Mannschaften des SV Bau-Union!">
                        <caption>Ergebnis- Dienst</caption>
                        <thead>
                            <tr>
                                <th colspan="2">Heim</th>
                                <th>Ausw&auml;rts</th>
                                <th class="tAlignC tResultTitle">Ergebnis</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="Win">
                                <td>1. Herren</td>
                                <td class="tAlignC tDash">&ndash;</td>
                                <td>Mannschaft A</td>
                                <td class="tAlignC"><strong>9:2</strong></td>
                            </tr>
                            <tr class="Lose">
                                <td>Mannschaft B</td>
                                <td class="tAlignC tDash">&ndash;</td>
                                <td>2. Herren</td>
                                <td class="tAlignC"><strong>9:7</strong></td>
                            </tr>
                            <tr class="Draw">
                                <td>Mannschaft C</td>
                                <td class="tAlignC tDash">&ndash;</td>
                                <td>3. Herren</td>
                                <td class="tAlignC"><strong>8:8</strong></td>
                            </tr>
                            <tr>
                                <td>1. Damen</td>
                                <td class="tAlignC tDash">&ndash;</td>
                                <td>Mannschaft D</td>
                                <td class="tAlignC"><strong>n/a</strong></td>
                            </tr>
                            <tr class="Lose">
                                <td>Mannschaft E</td>
                                <td class="tAlignC tDash">&ndash;</td>
                                <td>2. Damen</td>
                                <td class="tAlignC"><strong>8:4</strong></td>
                            </tr>
                        </tbody>
                        <!-- <tfoot>
                            <tr>
                                <td colspan="4">Es ist Saisonpause, keine Ergebnisse Vorhanden!</td>
                            </tr>
                        </tfoot> -->
                    </table>
                 </div>
                 <!-- News -->
                 <div id="News">
                  <h2>Neuzug&auml;nge f&uuml;r die 1. Herren!</h2>
                  <p class="Note">Autor: Thomas Bowe, Do 06. Mai 2010 (13:00 Uhr)</p>
                  <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>
                 </div>
            </div>
        </div>
    </body>
    </html>
    svbu.css
    Code css:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    
    html, body {
        height: 100%;
        text-align: center;
    }
     
    /*>> wrap config<<*/
    #Wrap {
        position: relative;
        min-height: 100%;
        height: auto !important;
        height: 100%;
     
        width: 1002px;
        background-image: url(../img/svbuBackground.jpg);
     
        margin: 0px auto;
        text-align: left;
    }
     
    /*>> Header config... <<*/
     
    #Header {
        width: 100%;
        height: 275px;
     
        background-color: #FFFFFF;
        background-image: url(../img/svbuHeader.jpg);
        background-repeat: no-repeat;
        background-position: bottom;
    }
     
    /*>> Navigation config... <<*/
    #Navigation {
        width: 998px;
        height: 33px;
     
        background-image: url(../img/svbuNavi.jpg);
        background-repeat: repeat-x;
        background-position: top;
     
        margin: 0px auto;
    }
     
    #Navigation ul {
        list-style-type: none;
        text-align: right;
        padding: 9px 2px 0px 0px;
    }
     
    #Navigation ul a:link, #Navigation ul a:visited,
    #Navigation ul a:active {
        display: block;
        float: right;
        height: 24px;
     
        border-right: 1px solid #000000;
        border-left: 1px solid #000000;
        border-bottom: 1px solid #000000;
        background-color: #8a8a8a;
     
        margin-left: 2px;
        padding: 0px 10px 0px 10px;
     
        font-family: "Comic Sans MS";
        font-size: 16px;
        text-decoration: none;
        color: #FFFFFF;
    }
     
    #Navigation ul a:hover {
        background-color: #425dfd;
    }
     
    #Navigation a.HoverActivated:link, #Navigation a.HoverActivated:visited,
    #Navigation a.HoverActivated:hover, #Navigation a.HoverActivated:active {
        background-color: #425dfd;
    }
     
    /*>> Sidebar config... <<*/
    #Sidebar {
        width: 181px;
        padding-left: 2px;
    }
     
    #Sidebar ul {
        font-size: 13px;
        font-weight: normal;
     
        list-style-type: none;
        text-align: left;
     
        padding-bottom: 15px;
    }
     
    #Sidebar ul p {
        font-weight: bold;
        color: #800000;
        font-size: 15px;
     
        border-bottom: 1px solid #eaeaea;
     
        padding: 25px 5px 5px 20px;
    }
     
    #Sidebar ul a:link, #Sidebar ul a:visited,
    #Sidebar ul a:active {
        color: #000080;
        text-decoration: none;
     
        display: block;
        background-color: #f8f8f8;
     
        padding: 5px 5px 5px 20px;
    }
     
    #Sidebar ul a:hover {
        background-color: #eaeaea;
    }
     
    #Sidebar a.HoverActivated:link, #Sidebar a.HoverActivated:visited,
    #Sidebar a.HoverActivated:hover, #Sidebar a.HoverActivated:active {
        background-color: #eaeaea;
    }
     
    #Sidebar p#IdS {
        text-align: center;
        padding: 15px 0px 15px 0px;
    }

    basic.css
    Code css:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    
    /*>> Global config... <<*/
    * {
        padding: 0px;
        margin: 0px;
     
        font-family: Verdana;
        font-size: 12px;
        color: #444444;
    }
     
    .FloatLeft {
        float: left;
    }
     
    .tAlignC {
        text-align: center;
    }
     
    .ClearFix:after {
        content: ".";
        display: block;
        height: 0px;
        font-size: 0px;
        clear: both;
        visibility: hidden;
    }
     
    .ClearFix {
        display: inline-block;
    }
     
    img {
        border: none;
    }
     
    /*>> Content config... <<*/
    #Content {
        width: 775px;
        padding: 20px 20px 40px 20px;
     
        font-weight: normal;
        font-style: normal;
        line-height: 20px;
    }
     
    #Content h1 {
        font-size: 24px;
        font-weight: bold;
        color: #D5D5D5;
     
        text-align: right;
        padding-bottom: 35px;
    }
     
    /*>> News config... <<*/
    #News {
        clear: left;
    }
    #News h2 {
        font-size: 18px;
        font-weight: bold;
        line-height: 35px;
        padding-top: 50px;
    }
     
    #News p.Note {
        font-size: 9px;
        line-height: 15px;
        text-align: right;
     
        padding: 2px 5px 5px 0px;
        margin-bottom: 5px;
        border-top: 1px solid #888888;
    }
     
    /*>> Result Service config... <<*/
    #ResultService {
        width: 550px;
     
        border-bottom: 8px solid #eaeaea;
    }
    #ResultService table {
        width: 100%;
    }
     
    .tResultTitle {
        width: 80px;
    }
     
    .tDash {
        width: 40px;
    }
     
    #ResultService table caption {
        font-weight: bold;
        font-size: 15px;
        line-height: 30px;
        text-align: left;
     
        margin-bottom: 3px;
        border-bottom: 1px solid #eaeaea;
    }
     
    #ResultService table thead th {
        font-size: 11px;
        font-weight: bold;
        color: #800000;
        line-height: 27px;
     
        padding: 0px 5px 0px 5px;
    }
     
    #ResultService table tbody td, strong {
        font-size: 10px;
        padding: 0px 5px 0px 5px;
    }
     
    #ResultService table tbody td {
        border-bottom: 1px solid #FFFFFF;
    }
     
    #ResultService table tbody tr.Win td {
        background-color: #C3FFCB;
    }
     
    #ResultService table tbody tr.Draw td {
        background-color: #EDEDED;
    }
     
    #ResultService table tbody tr.Lose td {
        background-color: #FFB4AA;
    }
     
    #ResultService table tfoot td {
        font-style: italic;
        text-align: center;
    }

    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. #14
    Maik Tutorials.de Gastzugang
    Du hast da schlichtweg was vergessen zu übernehmen

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


    mfg Maik
     

  15. #15
    Avatar von Funj0y
    Funj0y ist offline Mitglied
    Registriert seit
    Feb 2010
    Beiträge
    20
    Ups habe ich wohl beim ausmisten ausversehen gelöscht

    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
    Geändert von Funj0y (14.05.10 um 16:25 Uhr)
     

Ähnliche Themen

  1. Antworten: 3
    Letzter Beitrag: 23.05.07, 06:58
  2. Antworten: 2
    Letzter Beitrag: 17.09.06, 11:02
  3. Hintergrundbild an Fenstergröße anpassen
    Von Riegel im Forum HTML & XHTML
    Antworten: 4
    Letzter Beitrag: 20.05.05, 16:56
  4. Hintergrundbild in anderer Tabellenzelle ändern?
    Von Picture im Forum Javascript & Ajax
    Antworten: 5
    Letzter Beitrag: 06.07.04, 15:18