✔ Mehrere Hintergrundbilder im Header

[WIK-Lars]

Hallo,

ich möchte einen Header so bauen, dass er links aus einem festen Hintergrundbild besteht und nach rechts hin mit einem 1px breiten Anschlußbild dynamisch je nach Browsergröße erweitert werden kann. Unabhängig von diesen Hintergrundbildern soll in einem bestimmten Abstand zum Browserrand rechts oben ein Logo erscheinen.

Ich hatte mir das ungefähr so vorgestellt:

<div id="header">
<div id="header_left">links</div>
<div id="header_right">rechts</div>
 <a href="index.html"><img src="http://www.tutorials.de/forum/images/logo.gif" border="0"></a>
</div>

Das dazugehöige CSS:

#header { width: 100%; 
              height: 70px;
              text-align: right;  }
#header_left { float:left;
                     background-image:url(images/Header.gif);
                     background-repeat: no-repeat;  }
#header_right { float:right;
                       background-image: url(images/Header_endlos.gif);
                       background-repeat: repeat-x;  }
#header img {   padding-top: 5px;
                       padding-right: 25px; }

Vom eigentlichen Konstrukt her, scheint es zu funktionieren. Allerdings werden die Hintergrundbilder im div-header_left und div-header_right nicht angezeigt.

Kann mir jemand mitteilen, warum dem so ist? ( Pfade etc. sind natürlich in Ordnung! )

DANKE!

 

[Maik]

Hi,

warum bei dir besagte Hintergrundbilder nicht angezeigt werden, vorausgesetzt, dass die Pfade im Stylesheet stimmen, kann ich dir derzeit nicht sagen, denn bei mir funktioniert das Stylesheet einwandfrei.

//edit:

Vermutlich liegt es daran, dass du in den beiden DIVs, entgegen obigen HTML-Code, keinen Inhalt notiert hast, denn durch die float-Deklaration ohne Breitenangabe dehnen sie sich auch nicht aus, und folglich wird ihr Hintergrundbild nicht angezeigt.

In deinem Thread Lücke mit wiederholendem Bild schließen kannst du ja nochmal nachschlagen, wie wir das Modell seinerzeit aufgestellt haben; möglicherweise hilft dir das weiter.

Ansonsten könntest du auch die Grafik "Header_endlos.gif" als Hintergrundbild für #header verwenden und die Grafik "Header.gif" als Grafikelement (img) im Header einbetten, da sie dem CSS-Code zufolge nicht wiederholt werden soll.

 

[Gumbo]

Die beiden zusätzlichen Elemente sind nicht unbedingt notwendig. Folgendes ist auch möglich:

#header {
	position: relative;
	width: 100%;
	height: 70px;
	background: #FE0 url(images/Header_endlos.gif) repeat-x;
}
#header:before {
	position: absolute;
	width: 280px;
	height: 100%;
	content: "";
	background: #F00 url(images/Header.gif) no-repeat;
}
#header img {
	position: absolute;
	top: 0;
	right: 0;
	padding-top: 5px;
	padding-right: 25px;
}

Dies setzt allerdings CSS 2 voraus, was der Internet Explorer unter anderem noch nicht vollständig kann.

Wenn sich allerdings der Link über die vollständige Breite und Höhe ausbreiten soll/darf, ginge auch Folgendes:

#header {
	position: relative;
	height: 70px;
	background: #FE0 url(images/Header_endlos.gif) repeat-x;
}
#header a {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	outline: thin solid;
	background: #F00 url(images/Header.gif) no-repeat 0 0;
}
#header img {
	position: absolute;
	top: 0;
	right: 0;
	padding-top: 5px;
	padding-right: 25px;
}

 

[WIK-Lars]

Hallo Markus,

ich habe es mit Deinem oberen Beispiel probiert und es sieht auch schon gut aus - allerdings wird das große Hintergrundbild noch nicht eingefügt.
Mein HTML-Code sieht jetzt so aus (Header-div mit Logo-Bildchen):

<div id="header">
 <a href="index.html"><img src="http://www.tutorials.de/forum/images/logo.gif" border="0" ></a>
</div>

Das dazugehörige CSS ziemlich exakt, so wie Du es vorgeschlagen hast - abgesehen von der tatsächlichen Breite meines großen Hintergrundbildes:

#header { position:relative;
  width: 100%; 
  height: 70px;
  text-align: right;
  background-image:url(images/NH_endlos.gif); 
  background-repeat:repeat-x;}
#header:before { position:absolute;
width:1280px;
height:100%;
content:"";
background-image: url(images/NeuerHeader.gif);
background-repeat:no-repeat; }
#header img { position:absolute;
   top: 0;
   right: 0;
   padding-top: 5px;
   padding-right: 25px; }

Maik, ich denke, das dieser Header sich mit dem im verlinkten Thread insofern nicht vergleichen läßt, dass es hier ja nicht darum geht, einen klar definierten Bereich zu füllen. Vielmehr soll ja über einem fest definierten Bereich und einem dynamischen Bereich ein Bild(Logo) angezeigt werden.
Euch beiden schon mal vielen Dank für die schnellen und kompetenten Antworten!

 

[Maik]

Maik, ich denke, das dieser Header sich mit dem im verlinkten Thread insofern nicht vergleichen läßt, dass es hier ja nicht darum geht, einen klar definierten Bereich zu füllen.

Aus diesem Grund schrieb ich heute Mittag auch: "... möglicherweise hilft dir das weiter".

allerdings wird das große Hintergrundbild noch nicht eingefügt.

Sofern du dies nicht mit dem IE überprüft hast, könnte auch content:url(images/NeuerHeader.gif) der Schlüssel zum Erfolg sein.

Ansonsten verfolge mal meinen Vorschlag, die Grafik "klassisch" als Grafikelement (img) im Header einzubetten, damit sie auch im IE angezeigt wird, denn der IE (auch in der aktuellen 7er Version) kann mit der :before-Pseudoklasse und dem generierten Inhalt content nichts anfangen.

 

[WIK-Lars]

Sofern du dies nicht mit dem IE überprüft hast, könnte auch content:url(images/NeuerHeader.gif) der Schlüssel zum Erfolg sein.
.

Genau, im Firefox geht das wunderbar! So hab ich's mir vorgestellt.

Ansonsten verfolge mal meinen Vorschlag, die Grafik "klassisch" als Grafikelement (img) im Header einzubetten, damit sie auch im IE angezeigt wird, denn der IE (auch in der aktuellen 7er Version) kann mit der :before-Pseudoklasse und dem generierten Inhalt content nichts anfangen.

Ja, das ist mit dem IE 7 wirklich enttäuschend! Ich schau mal, wie ich das umsetzen kann. Denn eigentlich benötige ich ja schon ein img-Tag für das Logo. Aber vielleicht kann ich die ja mit z-index versehen und übereinander legen...

 

[Gumbo]

Ich sagte ja bereits, dass der Internet Explorer CSS 2 noch nicht vollständig unterstützt und mein erster Lösungsvorschlag damit nicht zufriedenstellend sein wird.

 

[WIK-Lars]

Das Thema hat sich mittlerweile erledigt.

Der Vollständigkeit wegen zur Info, wie ich es nun gelöst habe:

<div id="header">
	<a href="index.html"><img class="back" src="images/NeuerHeader.gif"></a>
	<a href="index.html"><img class="logo" src="images/logo.gif"></a>
</div>

CSS-Code:

#header { position:relative;
		width: 100%;	
		height: 70px;
		text-align: right;
		background-image:url(images/NH_endlos.gif); 
		background-repeat:repeat-x;}
.back { position:absolute;
		top:0px;
		left:0px; }
.logo { position:absolute;
			top: 0;
			right: 0;
			padding-top: 5px;
			padding-right: 25px; }

Danke - wie immer - auch für Eure Hilfen und Anregungen!