Hallo.
Wie kann ich erreichen, dass mein JPG Header der sich oben auf der Seite befindet, auf jeder Auflösung über die ganze seiter reicht? Wenn ich die Seite auf 1024*786 Pixel ausrichte, fehlt bei 2048*1024 links und rechts was - das ist da kein Header. Da mir das doch recht unflexible erscheint interessdiert mich, wie man das anders lösen kann. Da ich den Header über eine CSS einbinden muss (arbeite hier mit einem CMS, ist eine Schulhomepage), müsste das eine CSS-basierte Lösung sein. Gibt es sowas?

Vielen Dank schonmal im Vorraus!!!

Moin,

tja, das ist schon schwierig. Insbesondere wenn es rein über CSS laufen muss. Details zu den Möglichkeiten kann man natürlich nur mit Blick auf den Code sagen, aber zuerst mal kriegt man es nicht völlig flexibel. Ein Bild will man nicht auf die jeweilige Breite strecken, derart verzerrt sehen Bilder eh schon schrecklich aus, darüber hinaus skalieren Browser die Bilder ohne Antialiasing, d.h. es werden zwischen zwei Pixeln keine Zwischentöne berechnet, Pixel werden nur weggelassen oder vervielfacht.

Somit ist eigentlich die einzige Möglichkeit, durch Hintergrundbilder/-farben das Bild nach links/rechts zu verlängern. Nicht mal einen Farbverlauf von rechts nach links kriegt man wirklich gut hin...

Weiteres Problem ist die HTML-CSS-Struktur. Wenn Du nur ein Element für den Header hast, dass Du über CSS gestalten kannst, dann fehlt dir schon die Möglichkeit, mehrere Bilder übereinander zu positionieren. Dazu braucht es schon ineinander verschachtelte Elemente.

Hast Du mal einen Link zu Deiner Seite?

Grüße,
Thorsten

ja klar, sorry total vergessen

Friedrich-Franz-Gymnasium - www.gymnasium-parchim.de

ist nocht nicht fertig.

Moin,

das CMS Papoo kannte ich noch gar nicht. Was da an HTML rauskommt finde ich schon etwas verwirrend, warum z.B. immer (auch auf der Website zum CMS selbst) eine H2-Überschrift mit dem sinnigen Text "Kopftext" ausgegeben wird, die dann über CSS wieder versteckt werden muss?

Für den Header steht also zur Verfügung ein Konstrukt aus DIV, darin H1-Überschrift und darin ein Link mit Text (hier Name des Gymnasiums). Das ist solide, aber nicht üppig für eine reine CSS-Gestaltung (auf dem Stand der Zeit, was aktuelle Browser halt unterstützen). Mehr wie ein Bild (als Hintergrundbild z.B. der H1-Überschrift, no-repeat, und die Größe des H1-Elements explizit definiert), dass über einer Hintergrundkachel (des DIV) positioniert ist, das wird wohl nicht gehen. Also setzt die Kachel den rechten Rand des Bildes fort, wenn das Bild linksbündig positioniert wird, oder es setzt den linken und rechten Rand (identisch) fort, wenn das Vordergrundbild zentriert wird.

Das sind jetzt nur Gedanken um die Machbarkeit, ich hoffe ich habe mich verständlich ausgedrückt, sonst muss ich mal etwas Zeit investieren in Demo-Bilchen oder -Links. Das soll nur als Grundlage für die nun nötige Gestaltung sein, die findet ja üblicherweise erst einmal im Grafikprogramm statt. Wie das dann exakt in CSS formuliert wird, das können wir hinterher sehen.

Grüße,
Thorsten

Moin,
Das wäre eine Möglichkeit, nur wnen ich das richtig verstanden habe, ist das sowas wie eine repeat anweisung an das CSS. Das hätte dann zur Folge das wir den Header so umbauen müssten, das er sich auch aus regelmäßigen Strukturen zusammensetzt, und das ist bei dem Bildband doch schon recht schwierig...

Moin,

so recht folge ich nicht. Das klingt, als hättest Du schon eine gewünschte Gestaltung ("Bildband") vor Augen. Erzähl mal. Bisher hast Du da ja inhaltlich quasi eine kleine Collage (sechs Fotos mit weichen Übergängen), die Du von Hand auf einem Hintergrund positioniert und in der Horizontalen gekachelt hast (zweieinhalb mal). Das würde ich in jedem Fall aufteilen, ein einfaches Hintergrundbild , dass sich dann auch an die Balken links rechts anfügt (das wird dann Hintergrund des DIV). Die Bilder würden in einer weiteren Grafik (als Hintergrund der H1-Überschrift) definiert, ggf. auch mit den angepassten Hintergründen für den Hauptbereich (über den Bildern der Verlauf, unter den Bildern das helle Blau).

Allerdings, wenn wir von der aktuellen Gestaltung der Seite als Basis ausgehen, dann ist sie doch sowieso mit fixer Breite definiert (also nicht "auflösungs-tauglich"). Für diese Gestaltung verstehe ich nicht, wie es aussehen soll, was das Ziel ist? Da ist es doch folgerichtig, auch den Kopf in dieser Breite zu gestalten. Wobei das sowieso alles noch nicht ganz korrekt passt, der Navigationsbereich bricht leicht links aus, die Loginbox hängt voll daneben usw. Auch finde ich persönlich diese fixe Breite mutig hoch gewählt (1170 Pixel Inhalt, der vertikale Scrollbalken im IE ständig, in Firefox bei einer Fensterbreite unter 1300 Pixel). Sowas passiert mit den anderen einstellbaren Pagoo-Designs nicht, die sind zwar auch alle mit fester Breite, aber schmaler.

Also ich sehe nicht die Kopfzeile sondern das gesamte Layout als überarbeitungswürdig. Wie soll es denn eigentlich sein?

Grüße,
Thorsten