zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Vertical fortlaufender Hintergrund in Header und footer

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.03.2009, 10:40
img img ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.05.2008
Beiträge: 258
img befindet sich auf einem aufstrebenden Ast
Standard 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

Geändert von img (29.03.2009 um 17:11 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 28.03.2009, 11:45
XHTML/CSS Freak since '07
neuer user
 
Registriert seit: 17.03.2009
Beiträge: 28
Manko befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 28.03.2009, 12:27
Benutzerbild von mantiz
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.02.2007
Beiträge: 2.843
mantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz sein
Standard

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.

Geändert von mantiz (04.11.2009 um 12:32 Uhr) Grund: Grafiken entfernt
Mit Zitat antworten
  #4 (permalink)  
Alt 28.03.2009, 16:23
img img ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.05.2008
Beiträge: 258
img befindet sich auf einem aufstrebenden Ast
Standard

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

Geändert von img (28.03.2009 um 17:00 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 28.03.2009, 17:03
Benutzerbild von mantiz
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.02.2007
Beiträge: 2.843
mantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz sein
Standard

Schau Dir dazu mal die FAQ, Punkt 2 an, dann sollte das klar sein.
Mit Zitat antworten
  #6 (permalink)  
Alt 29.03.2009, 17:10
img img ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.05.2008
Beiträge: 258
img befindet sich auf einem aufstrebenden Ast
Standard

ok vielen dank, problem somit behoben
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Untermenü im IE nici CSS 10 22.06.2009 22:19
Header - Leftmenue, Kontent 100% - footer CSS und keine Scrollbars! Mavarik CSS 8 26.07.2008 18:11
Div Orientierung Leonidus CSS 22 30.05.2007 18:05
div zentriert ? malo.conny CSS 2 26.04.2005 09:40
Footer Problem blub19 CSS 6 25.01.2005 12:46


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:58 Uhr.