✔ Hintergrundbild verschiebt sich bei anderer Fenstergröße!

Funj0y · 14. Mai 2010

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:

<!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

CSS:

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

CSS:

/*>> 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:

Wenn das Fenster verändert ist:

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

Maik · 14. Mai 2010

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

Funj0y · 14. Mai 2010

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:

CSS:

#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:

Gruß Funj0y

Maik · 14. Mai 2010

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.

Webmaster FAQ -> CSS Warum passt sich die Boxenhöhe nicht dem Inhalt an?

mfg Maik

Funj0y · 14. Mai 2010

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

Maik · 14. Mai 2010

HTML:

<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

Funj0y · 14. Mai 2010

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:

Gruß Funj0y

Maik · 14. Mai 2010

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.

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

Funj0y · 14. Mai 2010

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:

Gruß Funj0y

Maik · 14. Mai 2010

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

✔ Hintergrundbild verschiebt sich bei anderer Fenstergröße!

Funj0y

Mitglied

Maik

Funj0y

Mitglied

Maik

Funj0y

Mitglied

Maik

Funj0y

Mitglied

Maik

Funj0y

Mitglied

Maik

Neue Beiträge