Hintergrund über die ganze Seite

Dieses Thema im Forum "Webmaster Hilfe / Programmierer Forum" wurde erstellt von DJ Zebo, 01.05.2011.

  1. #1 DJ Zebo, 01.05.2011
    DJ Zebo

    DJ Zebo Erfahrener Benutzer

    Dabei seit:
    13.07.2010
    Beiträge:
    268
    Zustimmungen:
    0
    Ort:
    Graz
    nabend Jungs und Mädels ;)

    Hab ein kleines Problem.
    Bin momentan am erstellen eines Templats für meinen Clan und ich bekomme den Page-Hintergrund nicht über die ganze Höhe des Bildschirms.. Bild davon ist im Anhang. Der Haupthintergrund ist über body definiert und wird auch über repeat normal über den ganzen Bidlschirm angezeigt. Der Text Hintergrund ist ein eigenes Bild da die Höhen Verhätlnisse von Haupthintergrund und Text-HG nicht zusammen stimmen würden und es dann (sorry) beschissen aussieht, habs ausprobiert.

    Html-Datei:
    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    
    <head>
        <title>Titel</title>
    
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <meta name="keywords" content="" />
    
        <link href="style.css" type="text/css" rel="stylesheet" />
        <link href="favicon.ico" type="image/x-icon" rel="shortcut icon" />
    </head>
    <body>
        <div id="page-bg">
            <div id="page">
                <div id="header"></div>
                <div id="h-menu">
                    <a href="news/" class="h-menu-link">News</a>
                    <a href="forum/" class="h-menu-link">Forum</a>
                    <a href="contact/?action=joinus" class="h-menu-link">Join Us</a>
                    <a href="contact/?action=fightus" class="h-menu-link">Fight Us</a>
                    <a href="clanwars/" class="h-menu-link">Wars</a>
                    <a href="squads/" class="h-menu-link">Squads</a>
                    <a href="contact/" class="h-menu-link">Kontakt</a>
                    <a href="impressum/" class="h-menu-link">Impressum</a>
                </div>
                <table border="0" cellpadding="0" cellspacing="0" id="main">
                    <tr>
                        <td width="200px">
                            <div class="v-menu">
                                <div class="v-menu-kat">Main Men&uuml;</div>
                                <div class="v-menu-bg">
                                    Link<br />
                                    Link<br />
                                    Link<br />
                                    Link
                                </div>
                                <div class="v-menu-bot"></div>
                            </div>
                            <div class="v-menu">
                                <div class="v-menu-kat">Clan Men&uuml;</div>
                                <div class="v-menu-bg">
                                    Link<br />
                                    Link<br />
                                    Link<br />
                                    Link
                                </div>
                                <div class="v-menu-bot"></div>
                            </div>
                            <div class="v-menu">
                                <div class="v-menu-kat">Server Men&uuml;</div>
                                <div class="v-menu-bg">
                                    Link<br />
                                    Link<br />
                                    Link<br />
                                    Link
                                </div>
                                <div class="v-menu-bot"></div>
                            </div>
                        </td>
                        <td width="10px"></td>
                        <td width="503px">
    
                        </td>
                        <td width="10px"></td>
                        <td width="200px">
                            <div class="v-menu">
                                <div class="v-menu-kat">Login Men&uuml;</div>
                                <div class="v-menu-bg">
                                    Link<br />
                                    Link<br />
                                    Link<br />
                                    Link
                                </div>
                                <div class="v-menu-bot"></div>
                            </div>
                            <div class="v-menu">
                                <div class="v-menu-kat">Shoutbox</div>
                                <div class="v-menu-bg">
                                    Link<br />
                                    Link<br />
                                    Link<br />
                                    Link
                                </div>
                                <div class="v-menu-bot"></div>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
            <br /><br /><br /><br /><br />
        </div>
    </body>
    </html>
    CSS-Datei:
    HTML:
    body{
        background: url(images/bg.jpg) repeat center top;
        margin: 0;
        font-family: Verdana;
        font-size: 0.9em;
        font-weight: normal;
        color: #F3F3F3;
    }
    
    #page-bg{
        background: url(images/page-bg.png) repeat;
        width: 1024px;
        height: 101%;
        display: block;
        margin: auto;
    }
    
    #page{
        width: 924px;
        height: auto;
        margin: auto;
    }
    
    #header{
        background: url(images/header.jpg) no-repeat;
        width: 924px;
        height: 280px;
        display: block;
    }
    
    #h-menu{
        background: url(images/h-menu.png) no-repeat;
        width: 924px;
        height: 36px;
        display: block;
        text-align: center;
    }
    
    a.h-menu-link:link, a.h-menu-link:visited{
        width: auto;
        height: 36px;
        line-height: 35px;
        font-size: 10pt;
        font-weight: bold;
        color: white;
        margin-left: 20px;
        margin-right: 20px;
        text-transform: uppercase;
        text-decoration: underline;
        display: inline-block;
    }
    
    a.h-menu-link:hover, a.h-menu-link:active{
        color: #008CFF;
        text-decoration: underline blink;
    }
    
    table#main{
        width: 924px;
        height: auto;
        margin-top: 15px;
        vertical-align: top;
    }
    
    table#main tr, table#main td{
        border: 0;
        text-align: left;
        vertical-align: top;
    }
    
    .v-menu{
        width: 200px;
        height: auto;
        margin-bottom: 10px;
        display: block;
    }
    
    .v-menu-kat{
        background: url(images/v-menu-kat.png) no-repeat;
        width: 200px;
        height: 36px;
        display: block;
        font-size: 12pt;
        line-height: 35px;
        vertical-align: middle;
        font-weight: bold;
        color: #008CFF;
        text-align: center;
    }
    
    .v-menu-bg{
        background: url(images/v-menu-bg.png) repeat-y;
        width: 200px;
        height: auto;
        padding: 4px;
        padding-bottom: 0;
    }
    
    .v-menu-bot{
        background: url(images/v-menu-bot.png) no-repeat;
        width: 200px;
        height: 6px;
    }
    Hoffe ihr habt da eine Lösung
     

    Anhänge:

  2. AdMan

    schau mal hier: Windows-Wartungs-Tool. Viele Probleme lassen sich damit einfach beheben. Oftmals ist der PC dann auch schneller!
    Registrieren bzw. einloggen, um diese und auch andere Anzeigen zu deaktivieren.
  3. #2 xandros, 01.05.2011
    xandros

    xandros IT Consultant, Cisco Registered Partner
    Moderator

    Dabei seit:
    05.07.2007
    Beiträge:
    25.885
    Zustimmungen:
    91
    Ort:
    Umkreis Duisburg, neben Mannheim, hinter Hamburg
    Das Mixen von Hoehen- und Breitenangaben in Pixeln und als Prozent macht haeufiger Probleme. Lege dich auf eines davon fest. Nebenbei..... ein Fenster kann maximal 100% gross sein. 101% wird daher auch nicht nach deinen Vorstellungen interpretiert.
     
  4. #3 DJ Zebo, 01.05.2011
    DJ Zebo

    DJ Zebo Erfahrener Benutzer

    Dabei seit:
    13.07.2010
    Beiträge:
    268
    Zustimmungen:
    0
    Ort:
    Graz
    Das war zum probieren ;)
    Habe das bei anderen Templates schon mal gesehn und da hatte das funktioniert. Habe die Höhe auf 100% zurück gestellt aber es bleibt auf dieser Höhe stehen.. Nur mit % Kann ich nicht arbeiten da die Seite eine fixe Breite hat.
     
  5. #4 Blaxxun, 02.05.2011
    Blaxxun

    Blaxxun aka Noisy

    Dabei seit:
    06.11.2005
    Beiträge:
    6.171
    Zustimmungen:
    0
    (Aller) Spätestens in Zeiten von CSS3 sollte es jeder verstanden haben, dass man Tabellen nicht fürs Layout nutzt. Da versteh ich an deinem Code noch weniger, dass du DIVs und Tabellen mischst, mach es entweder ganz falsch oder einfach gut.

    Mit der Erweiterung des background-Attr. in CSS3 kannst du mehrere Hintergrundbilder definieren, hier auch gleich ein Beispiel dazu.
    Kleiner Tip: background in Verbindung mit <body>. Und lass die scheußlichen Tabellen weg, tu dir den Gefallen.
     
  6. 3!m0n

    3!m0n Erfahrener Benutzer

    Dabei seit:
    16.06.2010
    Beiträge:
    703
    Zustimmungen:
    0
    Ort:
    Baden-Württemberg
    ich empfehle dir auch die Tabellen wegzulassen, lieber float:right, float:left

    mit deinem seiten hintergrund sollte es meiner Meinung nach so funktionieren
    Code:
    #page-bg{
        background: url(images/page-bg.png)[COLOR="Red"] repeat-y;[/COLOR]
        width: 1024px;
        height: 100%;
        display: block;
        margin: auto;
    }
     
  7. #6 DJ Zebo, 02.05.2011
    DJ Zebo

    DJ Zebo Erfahrener Benutzer

    Dabei seit:
    13.07.2010
    Beiträge:
    268
    Zustimmungen:
    0
    Ort:
    Graz
    Das weiß ich ja Blaxxun. Ich habe allerdings die Tabelle verwendet da das alle Designer für das CMS machen. Habe mir etliche Templates für dieses CMS angesehen und überall wurden Tabellen verwendet. Werds bei gelegenheit aber mal probieren ob es mit Divs auch läuft.

    Wenn's die Seite auch in Deutsch gibt wäre das super. Mein English ist nicht das beste. Hab das aber einfachmal so nach dem Beispiel probiert aber da verschwindet der Hintergrund dann komplett.


    @ 3!m0n
    Habe ich auch schon probiert geht nicht.
     
  8. 3!m0n

    3!m0n Erfahrener Benutzer

    Dabei seit:
    16.06.2010
    Beiträge:
    703
    Zustimmungen:
    0
    Ort:
    Baden-Württemberg
    dann probier doch einfach einmal die angabe height:100 wegzulassen,
     
  9. #8 DJ Zebo, 02.05.2011
    DJ Zebo

    DJ Zebo Erfahrener Benutzer

    Dabei seit:
    13.07.2010
    Beiträge:
    268
    Zustimmungen:
    0
    Ort:
    Graz
    Ändert sich nix :(
     
  10. AdMan

    Es ist generell erstmal empfehlenswert alle ggf. veralteten oder fehlerhaften Treiber zu scannen und auf neue zu aktualisieren. Hier kannst du einen Treiber-Scanner downloaden. Das erspart oftmals viel Ärger und hilft gegen diverse Probleme.
    Registrieren bzw. einloggen, um diese und auch andere Anzeigen zu deaktivieren.
  11. #9 DJ Zebo, 10.05.2011
    DJ Zebo

    DJ Zebo Erfahrener Benutzer

    Dabei seit:
    13.07.2010
    Beiträge:
    268
    Zustimmungen:
    0
    Ort:
    Graz
    Habe das heute nochmal nach der Seite von Blaxxun probiert und diesmal hat es funktioniert. Bei FF, Opera, Chrome, Safari, ... wird alles richtig Angezeigt. Der einzige der mal wieder zicken macht ist der IE. Gibts da noch eine Variante dass es dort auch stimmt? Oder kann ich für die IE User eine eigene Style datei anlegen??
     
  12. #10 Blaxxun, 10.05.2011
    Blaxxun

    Blaxxun aka Noisy

    Dabei seit:
    06.11.2005
    Beiträge:
    6.171
    Zustimmungen:
    0
    An alles ist gedacht. Stichwort hier Browserweiche
    Soweit ich weiß unterstützt der IE9 aber auch CSS3 Standards, es funktioniert auch bei den von dir genannten Browser fast nur in den neusten Versionen.
     
Thema: Hintergrund über die ganze Seite
Besucher kamen mit folgenden Suchen
  1. hintergrundbild ganze seite

    ,
  2. hintergrundbilder ganze seite

    ,
  3. hintergrundbild über die ganze seite

    ,
  4. tabelle ganze Seite lang,
  5. hintergrundbild ganze seite auch ie,
  6. hintergrundfüllung pages komplette seite,
  7. background image uber ganze seite,
  8. hintergrundbild als ganze seite,
  9. hintergrundbild komplette seite,
  10. hintergrundbild auf ganze seite,
  11. hintergrundbild für die ganze seite,
  12. hintergrundbild über ganze seite,
  13. webspell news background tran,
  14. hintergrundbild über ganze seite html,
  15. td hintergrundbild so auf dem smartphone volle breite haben,
  16. hintergrund über die ganze seite ,
  17. css3 hintergrund rauschen
Die Seite wird geladen...

Hintergrund über die ganze Seite - Ähnliche Themen

  1. leere Seite bei cliqz Suchmaschine

    leere Seite bei cliqz Suchmaschine: bei der "cliqz" Browser und Suchmaschine gefällt mir die 1.Seite nicht, ich möchte gerne eine leere Seite, leider finde ich keinen Button, sonst...
  2. Wann ist eine Seite unseriös?

    Wann ist eine Seite unseriös?: Hi, ich stolpere immer öfter auf solche Online-Casinos, Wett- oder TraderSeiten und frage mich dabei ob der Großteil dieser Seiten überhaupt...
  3. Seit Update laden Ordnerinhalte sehr langsam

    Seit Update laden Ordnerinhalte sehr langsam: Hi Ich habe heute das große Update auf die neue windows-10 Version ausgeführt und seitdem dauert es sehr lange, sogar mehrere Minuten, bis die...
  4. Kaufberater Seite

    Kaufberater Seite: HeyHo Liebe ModernBoard Community, ich bin Internet Marketer und habe betreibe einige Kaufberater Portale, unter anderem eines für Gaming &...
  5. Muss ein ganz neues system her?

    Muss ein ganz neues system her?: Huhu. Wollte mal meinen Rechner etwas aufrüsten,für die neuesten Games reicht es leider nicht mehr für eine anständige Grafik :( primäl etc. Hier...