# Header anpassen mit repeat



## svisseroo (20. August 2012)

Hallo allerseits

Hab da ein Problem, und zwar geht es um ein Header, welches in der mitte ein Grosses Bild hat, und dann aber nach rechts mit einem teilbild aufgefüllt werden muss, und nach links mit einem anderen.

Der aktuelle CSS für diesen Bereich sieht wie folgt aus:


```
/* begin Header */
div.art-header
{
   margin: 0 auto;
   position: relative;
   width:100%;
   height: 150px;
   margin-top: 0;
   margin-bottom: 0;
}

.art-header:after
{
   position: absolute;
   z-index:-1;
   display:block;
   content:' ';
   top: 0;
   width:100%;
   height: 150px;
   background-image: url('../images/header_neu.png');
   background-repeat: no-repeat;
   background-position: center center;
}
/* end Header */
```

das ergibt dann ein Header wie im Anhang...



So, nun muss ich am ende des bild, nach rechts mit dem header_right1.png auffüllen, und nach links mit dem header_left.png


	

		
			
		

		
	
 & 
	

		
			
		

		
	




Meine Frage...wie mach ich das? Ist's überhaupt möglich?

Bedanke mich schon im Voraus! Hoffe es kann mir jemand helfen!


Gruss
Svisseroo


----------



## para_noid (21. August 2012)

Mir fällt dazu im Augenblick nur ne ziemlich unschöne Lösung ein (wäre um Ergänzungen dankbar), aber eine die funktionieren sollte: Du füllst die gesamte Breite zu je einer Hälfte mit deinen "Rand"-Bildern aus und wirfst das eigentliche Headerbild obendrüber.

Du brauchst drei Div-Container: einen für den linken Part, einen für den mittleren, einen für den rechten.

```
<div id="headerleft"></div>
<div id="header"></div>
<div id="headerright"></div>
```

Dem Linken und Rechten weist du das gewünschte Hintergrundbild, die Höhe und das Repeat-X zu. Zusätzlich bekommen beide

```
#headerleft, #headerright{
    float: left;
    width: 50%;
}
```

Nach diesen 3 Divs im HTML setzt du noch eines, um das Float aufzuheben

```
<div style="clear: left;"></div>
```

Jetzt zum mittleren Div und dem Part der mir am meisten missfällt:

```
#header{
	width: 200px; /* hier die Breite des Hintergrund-Headerbildes angeben und den ganzen Rest vom Background */
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
}
```


Ich bin mir nicht sicher ob du für weitere Browser vielleicht noch z-Indizes setzen musst, bei mir im Firefox reicht das erstmal so.


----------



## svisseroo (21. August 2012)

Hallo para_noid

Danke für die Antwort. Werde es mal so versuchen.

Einen anderen Ansatz den ich selbständig versucht hab, jedoch komplett misslungen ist, ist 3 div zu erstellen: header, header-right und header-left. Diese dann in der index.php in einer Tabelle aus 3 spalten und einer zeile zu packen. in der css hab ich die 3 div ersellt, so dass sie ihre spalte füllen. klappte aber gar nicht.

Mal sehen, scheint mir jedenfalls nicht so einfach.


Gruss
Svisseroo


----------



## meisti94 (21. August 2012)

Versuch es in diesem Styl:


```
<div id="headerleft">
<div id="header">
<div id="headerright"></div></div></div>
```

Dann noch mit "Float:right" und "Float:left" im CSS. 

So sollte es klappen


----------



## threadi (21. August 2012)

Ich würde folgendes empfehlen:


```
<div id="headerleft"></div>
<div id="headerright"></div>
<div id="header"></div>
```


```
#headerleft { float: left; }
#headerright { float: right; }
#header{
    width: 200px; /* hier die Breite des Hintergrund-Headerbildes angeben und den ganzen Rest vom Background */
    margin: 0 auto;
}
```

Auf die absolute Positionierung solltest Du verzichten, wenn die angegeben ist wirkt "margin: 0 auto;" sowieso nicht.


----------



## svisseroo (27. August 2012)

Danke allerseits.

Klappt leider alles nicht.

Entweder mach ich was falsch, oder es liegt daran, dass die CSS sowie index.php durch Artisteer erstellt worden sind.

Bin im Moment gerade einfalslos wie ich das lösen könnte.

Nochmals allen herzlichenDank.
Svisseroo


----------



## meisti94 (27. August 2012)

Also es sollte gehen..

Ich hab mal ne seite gemacht (Ist hässlich und nicht fertig)

http://m.tagebisweihnachten.ch/

Da ist oben links ein "schleifen-bild" und dann wird rechts ein hintergrund hinzugefügt und dieser nach rechts wiederholt. Also eigentlich das selbe wie du willst?

Guck dir sonst da mal den Quellcode an wenn das das richtige ist..


----------



## svisseroo (27. August 2012)

Hallo meisti94

Hab's noch nicht gelöst, aber dein Quellcode hat mich der Sache etwas näher gebracht.


Danke vielmals!
Svisseroo


----------



## djheke (27. August 2012)

Varsuch es mal so. Wenn du es so haben willst.  Übrigens warst du mit :after schon auf dem richtigen Weg.

```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Website</title>
    <style type="text/css">

* {
 
 margin:0;
 padding:0;
}

body{
 background:url(bg.jpg) repeat-x 0 0 #aaa;
}
#header {
 width:890px;
 margin:0 auto;
 position:relative;background:#dad;
 overflow:hidden;z-index:-1;
}

#header:before {
 content:"";
 display:block;
 height:150px;
 width:50%;
 float:left;
 background:url(header_left.jpg) repeat-x 0 0;
}

#header:after {
 content:"";
 display:block;
 height:150px;
 width:50%;
 float:left;
 background:url(header_right.jpg) repeat-x 0 0;
}

#header h1 {
 position:absolute;
 width:100%;
 height:150px;
 background:url(header.jpg) no-repeat center center;
}

/* Gilder/Levin CSS an Grafik aus*/
#header h1 span {
 position:absolute;
 padding-left:50px;
 z-index:-1;
}

#header h1 span b {
 font-size:75%;
 display:block;
 width:100%;
}

  </style>
 </head>
 <body>
<div id="header"><h1><span>Bodyline<b>Studio für Gesundheit und Fitness</b></span></h1></div>
 </body>
</html>
```

http://www.gipspferd.de/forumhilfe/header/


----------



## djheke (28. August 2012)

Edit: Welche max. Breite soll denn deine Webseite haben?  Ich glaub es würde auch eine Grafik reichen.


----------



## svisseroo (28. August 2012)

Hallo djheke

Danke vielmals, ich probier's mal umzusetzen. Mal schauen ob's klappt.

Die Seitenbreite hab ich in %, und zwar 80% ...wenn ich's richtig im Kopf hab.
Der Header sollte jedoch 100% sein, also über die ganze Breite.
Ist aber nicht tragisch wenn's nicht wäre. Der Header muss einfach mindestens so Breit
sein wie der Inhaltsteil. 80% eben.


Gruss und nochmals Danke
Svisseroo


----------

