Header anpassen mit repeat

[svisseroo]

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]

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]

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]

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]

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]

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]

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]

Hallo meisti94

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


Danke vielmals!
Svisseroo

 

[djheke]

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]

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