Automatische Anpassung der Header-Grafik!?

AbsBeginner · 03.05.2008, 18:36

Hi Forum,

ich habe folgende Frage...für euch wahrscheinlich Kinderkram, für mich noch nicht verständlich.

Als Bsp. nehme ich jetzt einfach mal : http://www.css4you.de/

Egal auf welchem Bildschirm, die Headergrafik hat immer eine weite von 100%. Wie ist das möglich? Und vor allem in welcher Größe muss ich dann die Grafik erstellen? Hat das alles nur mit der Auflösung zu tun, sodass bei einer http://www.css4you.de/ bei der Erstellung der Homepage zufällig die "meine" Auflösung gewählt hat oder gibt es ein Prozess, bei dem sich die Page automatisch an die Auflösung anpasst?????

Für hilfreiche Tipps bin ich sehr dankbar.

Guin · 03.05.2008, 20:31

Moin,
in deinem Beispiel ist nur oben rechts eine kleine Grafik von 245 x 65 Pixel Groesse. Der Hintergrund hat einfach nur eine graue Farbe; das hat nichts mit Grafik zu tun.

AbsBeginner · 03.05.2008, 20:47

schlechtes beispiel, sehe ich ein!

Aber egal, einfach mal angenommen das wäre eine komplette Grafik...wie sieht es denn dann aus??

AbsBeginner · 03.05.2008, 21:33

alles klar, dann frage ich mal anders...

ich habe meine headergrafik in fireworks erstellt und habe die Füllkategorie 'Verlauf -> Glatt' als Hintergrund gewählt. Kann ich diesen Hintergrund auch direkt in Dreamweaver einstellen, sodass ich erst gar keine Grafik erstellen muss. Wenn ja, könnte mir jemand sagen wie das geht???

background - color ist ja klar, aber wie bekomme ich den Verlauf hin?

Gruß!

Guin · 03.05.2008, 21:43

Den Verlauf koenntest du so gross erstellen, dass er auch fuer grosse Aufloesungen noch passt. Bei kleineren Aufloesungen wird dann halt ein Stueck abgeschnitten.
Anernfalls musst du die Grafik nicht als Hintergrundbild einbinden. Dann kannst du die Grafik nach belieben stauchen oder zerren... sieht halt nur nicht immer schoen aus.

Über CSS kann man mit Tricks auch "Farbverlaeufe" erstellen. Das sind dann eine Aneinandereihung von diversen Containern mit den gewuenschten Farben.

AbsBeginner · 03.05.2008, 21:49

Genauso habe ich das versucht. Den Verlauf zu groß erstellen und dann in die div box mit einer weite von 100%. Allerdings passt sich die Grafik dann nicht dem Layer an sondern umgekehrt und ich habe wieder den scroll-balken unten!?!?!
Ich weiss nicht ob der code hilft, aber ich poste es einfach mal.

Besten Dank schonmal!

#main {
position:absolute;
width:100%;
height:800px;
left:0%;
z-index:1;
top:0%;
overflow:auto;
background-color:#CCFF99;
}
#banner {
position:absolute;
left:0%;
width:100px;
top:0px;
height:150px;
z-index:2;
}

..... dann weiter unten

<body>
<div id="main">
<div id="banner"><img src="images/homepage/header2.png"/></div>

etc pp

Guin · 03.05.2008, 22:07

Ich kann dein Problem nicht so recht nachstellen.
Vielleicht hilft das:
#banner img {height:30px; width:100%;}

In #banner definierst du, dass der gesamte Container nur 100px breit ist, ist das so gewollt?

AbsBeginner · 03.05.2008, 22:58

Hey danke!

Jetzt funktioniert ist...