Banner (Header) strecken

**Xenia** · 23.07.2008 16:37

Hallo,

ich versuche mir gerade ein eigenes Template zu bauen, nur mit dem eigenen Banner habe ich etwas Schwierigkeiten.
Ich möchte im Kopfbereich eine gif-Datei (liegt im div 'header') einbauen, die sich je nach Breite des Templates anpasst. Mein Banner heißt banner.gif und der Platzhalter heißt strecken.gif. Den muss ich doch mittels css einbauen können (ich denke da an repeat-x) so dass er den Rest der Seite ausfüllt. (leider sind meine Css-Kenntnisse hier noch nicht fundiert genug, d.h. meine Versuche sind alle gescheitert).

Kann mir jemand da weiterhelfen, oder kennt jemand eine gute Anleitung wie man sowas verwirklicht?

Ich danke Euch für Eure Hilfe.

LG Xenia

**Indigo66** · 23.07.2008 17:04

dieses stückchen css wäre nicht schlecht, wenn man es mal sehen könnte, sonst können wir dir nicht sagen was du falsch gemacht hast. versuche mal nur repeat ohne "-x".

gruß

**Xenia** · 23.07.2008 18:27

Hi,

hier ist einer meiner Ansätze, leider weiß ich nicht wie ich genau das background-image platzieren muss (die Dateien habe ich mal beide mitgeliefert):
<style type="text/css">
body {
color: navy;}
#header {
font-size:36px;
background: url(banner.gif);
width:760px;
height:298px;
background-image:url(strecken.gif);
}
</style>
<body>
<div id="header">

</div>
</body>

VG Xenia

**Indigo66** · 24.07.2008 07:59

hast du vielleicht eine url wo ich mir das mal anscheuen kann?

**Xenia** · 24.07.2008 11:40

Hi,
ne Url kann ich geben. Aber ich erkläre nochmal kurz mein Problem, weil ich nicht ganz weiß ob ich mich richtig ausgedrückt habe:
Ich habe nach der Anleitung von Barrie North's Tutorial ein Template aufgebaut und möchte, dass der Banner flexibel ist, d. h. wenn ich ihn auf- oder zuziehe sich das Banner anpasst. Das gibt es z. B. beim Template RedEvoAphelion. Oder bei dem Forum von WorldLab kann man das auch sehen.
Ich weiß nur nicht genau wie es geht. Mir würde da schon ein Ansatz reichen, bzw. würde es mir schon weiterhelfen, wenn Ihr mir sagen würdet, wie Eure Lösung für sowas aussehen könnte.

Hier die Url (die Divs sind hier natürlich anders als in meinem obigen Versuche (den ich so einfach wie möglich halten wollte).
http://www.zapp-master.de/index4711.php

VG
Xenia
PS: Das Logo ist nur ein Versuchslogo und wird später ausgetauscht (auch der Link).

**Indigo66** · 24.07.2008 12:19

verwende unter #header in deiner css statt:

background-color: transparent;
dies:
background-color: #fccc00;

Vielleicht habe ich Dich richtig verstanden und das ist die Lösung für Dein Problem.

Gruß

P.S. sehe gerade dass Du evtl einen verlauf brauchst. Dann sollte das banner.gif normal in den header (nicht Hintergrund) eingesetzt werden (läßt sich dann auch gut verlinken) und das ausfüllende GIF mit dem verlauf vertikal wiederholen lassen. geht aber nur wenn das banner links bleibt und nicht zentriert wird.

**Xenia** · 24.07.2008 15:19

P.S. sehe gerade dass Du evtl einen verlauf brauchst. Dann sollte das banner.gif normal in den header (nicht Hintergrund) eingesetzt werden (läßt sich dann auch gut verlinken) und das ausfüllende GIF mit dem verlauf vertikal wiederholen lassen. geht aber nur wenn das banner links bleibt und nicht zentriert wird.

Genau das meine ich. Dann muss ich also die banner.gif mit <img scr...> in den header setzen und
wo/wie das strecken.gif?

Das sollte ich noch wissen, danke :-)

VG Xenia

**Indigo66** · 24.07.2008 16:29

Zitat von Xenia

wo/wie das strecken.gif?

Das sollte ich noch wissen, danke :-)

VG Xenia

als background-image mit repeat vertikal, ich glaube x.... ich verwechsle es immer und probiere aus ;-)

Gruß

**Xenia** · 24.07.2008 18:37

Hi,
jetzt funzt das Ganze, so wie ich es mir vorgestellt habe

Man kann es in die Breite ziehen und das Image wird "gestreckt".

Ich danke Dir vielmals für Deine Ausdauer.
LG
Xenia

PS: Für Interessierte: Ich habe wie von Indigo66 empfohlen in meiner index.php dem Header-Div folgendes Image hinzugefügt:
<div id="header"> <img src="../images/banner.gif" width="760" height="298" alt="Banner" />
und in meinem CSS dann diesen Eintrag vorgenommen:
#header {
background: url(../images/strecken.gif) repeat-x;
text-align:left;
height:298px;
}

Thema: Banner (Header) strecken

LinkBack

Themen-Optionen

Thema durchsuchen

Anzeige

Banner (Header) strecken

Erhielt Danksagungen von:

Erhielt Danksagungen von:

Erhielt Danksagungen von:

Erhielt Danksagungen von:

Lesezeichen

Lesezeichen

Berechtigungen