XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Vertical fortlaufender Hintergrund in Header und footer (http://xhtmlforum.de/showthread.php?t=56446)

img 28.03.2009 10:40

Vertical fortlaufender Hintergrund in Header und footer
 
Guten Morgen miteinander,

folgendes Problem:
URL gelöscht

ich würde gerne den header nach links und rechts ins "unendliche" laufen lassen, also immer dynamisch an die bildschirmgröße angepasst auffüllen.

Wie mach ich das am besten?

mein bisheriger css code:
HTML-Code:

html, body {
margin:0;
padding:0;
}
body {
background:#FFFFFF none repeat scroll 0 0;
color:#8E8E8E;
font-family:Verdana,Sans-serif;
font-size:11px;
line-height:18px;
}
#page-container {
margin:auto;
width:894px;
}
#header {
background:#FFFFFF url(../images/header.jpg) repeat scroll 0 0;
height:145px;
}
#header ul {
float:right;
list-style-type:none;
padding-right:70px;
padding-top:105px;
}
#header ul li {
display:inline;
margin-left:76px;
}
#header li a {
color:#D8D8D8;
text-align:center;
text-decoration:none;
}
#menu {
text-align:center;
width:894px;
}
#menu ul {
list-style-type:none;
margin:0;
}
#menu li {
display:inline;
}
#menu li a {
background:transparent url(../images/menu.jpg) no-repeat scroll 0 0;
color:#687337;
display:block;
float:left;
height:101px;
padding-top:50px;
text-decoration:none;
width:113px;
}

Müsste der Hintergrund nur im Header fortlaufen, würde ich einfach für den body einen hintergrund festlegen der sich nur in x-Richtung wiederholt, aber da ich das auch im footer brauche und der inhalt und somit die position des footers variiert, funktioniert das hier nich.


Ich wäre also für ein paar Denkanstöße sehr dankbar :)
grüße img

Manko 28.03.2009 11:45

Eine Möglichkeit wäre, den Header im body als Hintergrund festlegen und den Footer dann außerhalb des Containers mit einer 100%-igen Breite zu positionieren. Ich gehe jedoch davon aus, dass sich der schwarze Menübalken auch auf die komplette Breite wiederholen soll. Dann würde ich besser mit negativen margin Werten arbeiten oder es via position lösen.

mantiz 28.03.2009 12:27

Du kannst auch einfach dem body die kachelnde Hintergrundgrafik für den Header geben, die Du horizontal wiederholst und dem div #menu gibst Du die kachelnde Menügrafik.

Dazu musst Du allerdings die Floats einschließen, was ich im Beispiel per Easy-Clearing gemacht habe, allerdings ist der Hack für den IE noch nicht enthalten.

Das soll ja erstmal nur den Weg zeigen. :)

Hier die Stellen, die ich im CSS geändert habe:
Code:

body {
        background: #ffffff url(../images/header_bg.jpg) repeat-x;
        }
       

#page-container {
}
       
#header {
        margin: auto;
        width: 894px;
        background: #ffffff
                    url(../images/header.jpg);
        }
       

#menu {
        clear: both;
        text-align:center;
        background: url(../images/menu_bg.jpg) bottom repeat-x;
        }
       
#menu:after {
        content: ".";
        display: block;
        clear: both;
        visibility: hidden;
        height: 0;
        font-size: 0;
}

#menu ul {
        margin: auto;
        width:894px;
        list-style-type:none;
        }

#menu li a {
        height:51px;
        }

Als Tipps:
Wer floated muss auch clearen. Du hattest bis dato kein einziges clear verwendet, weshalb die Container zusammengefallen sind.
Die Angabe von height:51px in "#menu li a" ist unschön, ebenso, wie die fixe Breite der Menüpunkte.
Das soll hier also noch keine Endlösung sein, nur erstmal eine Idee.

Die feste Breite musste aus #page-container raus, weil Du ja Elemente hast, die über die volle Breite gehen sollen, daher muss die Breite in #header und #menu verlagert werden, und eben auch in alle weiteren Elemente, die die fixe Breite erhalten sollen, oder Du nimmst die Elemente, die über die volle Breite sollen aus #page-container raus. :)

Die Grafiken, die ich zum kacheln verwendet habe, hängen an.

img 28.03.2009 16:23

ok erstmal danke das du mich auf die fehler hingewiesen hast ;)
Mh mir is nur noch nicht ganz klar, was genau du gemacht hast?

speziell was menu:after ist ;)

grüße img

mantiz 28.03.2009 17:03

Schau Dir dazu mal die FAQ, Punkt 2 an, dann sollte das klar sein. :)

img 29.03.2009 17:10

ok vielen dank, problem somit behoben :)


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:41 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023