✔ Flexibles Layout und der Header

S

Spieleguru

Mitglied
Hallo, ich bin dabei mein Design eines Projektes zu überarbeiten. Vorher habe ich immer mit festen Größen wie Pixel gearbeitet, jetzt stelle ich es auf em um. Ich habe aber ein kleines Problem: Da der Header mit flexibel sein soll frag ich mich, wie ich dort am Besten ein Bild einfüge. Im Beispiel ist der Header 6em hoch und 50 em breit. Wie sollte ich ein dazu passendes Headerimage anfertigen? Oder soll ich die Headergröße doch lieber fest machen oder soll ich das Bild über den Browser skalieren usw.?

Ich hoffe ihr habt dazu ein Paar Tipps für mich :)

LG
 
Hi,

beim Skalieren einer Grafik solltest du beachten, dass diese je nach Motiv beim Vergrößern mitunter "pixelig" angezeigt wird, und einen optischen Qualititätsverlust mit sich zieht.

Sofern die "Flexibilität" im Kontext zur Browserfenstergröße stehen soll, ist eine relative Maßangabe mittels "%" erforderlich.

mfg Maik
 
War ich auch kürzlich am überlegen. Es kommt auf das Bild an.

Wenn es genau an das was darunter kommt anschließen soll, dann bleibt dir fast nichts anderes als feste Werte zu nehmen. Oder du nimmst es nicht als Hintergrundbild, sondern als eingebundene Grafik per <img>. Eine weitere Möglichkeit, die aber Traffic bedeutet, wäre das Header-Bild hoch genug zu machen, als Hintergrund zu definieren und trotzdem mit relativen Angaben zu arbeiten.

Wenn es frei schwebend ist, dann nehme ich immer einen em-Wert der deutlich größer ist als das Bild und definiere das Bild als Hintergrundgrafik, zentriert per CSS. Das Problem hierbei ist, dass es Browser gibt die beim "rein- / rauszoomen" nur die relativen Angaben ändern. Vielleicht bei Opera oder Safari.
 
@Maik: Genau daran habe ich auch gedacht... Diese blöde Rasterskalierung der Browser :(

Ein Vorteil bei mir ist ja wohl auch, das es nämlich nicht direkt anschließt. Der Header und die Navi ist nämlich Fix und nur der Content bewegt sich. Ich probiere mal etwas rum...

Ich denke ich mache es wie folgt: Links soll eine Weltkugel erscheinen, es sieht aber auch gut aus wenn die abgeschnitten ist, wenn man sie zentriert(vertikal und horizontal, dazu kommt dann wohl ein weiteres Divtag zum einsatz). Daneben sollte dann der Name der Seite mit ein Hintergrundmuster, welches man auch ruhig abschneiden kann :) Mal sehen, wies aussieht :)

Trotzdem Danke an euch :)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück