|
|||
Headerbild und Probleme mit Skalierung
Hallo!
Wahrscheinlich ist mein Problem total dämlich, aber ich steh grad irgendwie total auf dem Schlauch... Bin dabei eine Website zu gestalten und benutze für den Header ein selbst erstelltes Bild, das aus Hintergrundfarbe,2 kleinen Bildern (links und rechts) und einem Schriftzug (in der mitte) besteht. Jetzt hat das Konstrukt eine Größe von 1403x365px. Ich entwerfe aber mit einer Auflösung von 1920x1080. Damit das Header-Bild jetzt auf jedem Monitor über die volle Breite geht habe ich dem img-Tag ein "width:100%" hinzugefügt, was das Bild natürlich streckt. Dies hat zur Folge, das zum einen die Höhe auf über 500px mit skaliert wird, weil das Seitenverhältnis immer gleich bleibt. Und zum Anderen wird der Schriftzug natürlich total verzerrt..... Wenn ich jetzt versuche ein neues Headerbild zu machen, das die Größe 1920x365 zb hat kann das ja auch nicht die Lösung sein... es kann ja immer sein das jemand eine noch größere Auflösung als 1920x hat... Bin jetzt am überlegen für den Header garkein fertiges Bild zu nehmen, sondern die 2 Bilder und den Schriftzug (aus dem Headerbild) einzeln über einen Hintergrund (farbe) zu legen... Gibt's ne bessere Lösung? Danke schonmal. |
Sponsored Links |
|
||||
Hallöchen,
Konkrete Hilfe gibt's nur mit konkreten Beispielen. Ich könnte dir jetzt raten den Schriftzug gänzlich aus dem Bild zu entfernen und ins Markup einzubauen, aber da ich nicht weiß was das für ein Schriftzug ist läuft die Empfehlung eventuell ins Leere. Meine Empfehlung lautet also zunächst: konkreten Testcase hochladen. Viele Grüße, lotti
__________________
Empfehlenswerte Links: jsFiddle | JavaScript Patterns | RedBeanPHP | Mozilla Developer Network -/- W3C Validator | JSLint |
Sponsored Links |
|
|||
Zitat:
Zitat:
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
|
|||
Also es handelt sich um folgenden Header (für eine Vereinshomepage):
http://www.myimg.de/?img=header258c61.jpg (irgendwie geht grafik einbinden nicht) Habe diesen so eingebunden: Code:
<body> <header> <img src="header2.jpg" alt="header" style="float:left; width:100%" /> <div id="menu"><!-- öffnet die Navigationsleiste--> .... |
|
|||
Homepage des SV Unna 1924
Bitteschön^^ Jetzt kann die ganze Seite, so wie sie bisher aussieht angeschaut werden, es geht halt noch nicht alles. In dieser Version habe ich eine alte Version des Headers drin, die ich selber mal schnell aus Bildschirmfotos zusammengeschraubt hatte. Dieses Headerbild hatte eine Größe von 1764x290px, wird wegen width:100% auf 1.903px × 313px skaliert. Seite sieht auf 23 Zoll und 19 Zoll Monitor ok aus. Jetzt hab ich aber von unserer vereinsinternen Grafikerin ein neues, ordentliches Headerbild bekommen mit den Maßen 1347x351px und wenn das jetzt per width:100% skaliert wird, sieht es mist aus... |
|
|||
Du brauchst kein so grosses Headerbild.
Schneide es in drei Teile und platziere es im header. Dann gibst du dem header das rot welches das headerbld jetzt hat als hintergrundfarbe und kannst anschliessend die Seite sogar skalieren ohne das dir da was verissen wird. Ich würde sogar noch einen Schritt weiter gehen und wie von lottikarotti schon angesprochen, sogar die Texte in der mitte und im rechten Block als HTML darstellen statt als Grafik. Die Schriftart müsste Constantia am nächsten kommen und hat fast jeder auf seinem Rechner. Es bliebe dann als einzige Grafik das linke Logo übrig.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
|
||||
Hallöchen,
Zitat:
Viele Grüße, lotti
__________________
Empfehlenswerte Links: jsFiddle | JavaScript Patterns | RedBeanPHP | Mozilla Developer Network -/- W3C Validator | JSLint |
|
|||
Okay, danke erstmal. Also so wie ich mir das gedacht hatte den Header selber zusammensetzen mit einem rot als Hintergrundfarbe und dann links das Logo einfügen usw. .. bin ich grad dran...
Noch ne andere Frage: Mal angenommen man wollte so etwas realisieren: -> http://svunna.de/Test/HPStartseiten.pdf Und zwar mein ich jetzt konkret das Menü, das so halb in den roten Balken hineinragt... habt ihr da nen Stichwort für mich, wie man so etwas machen könnte ? Ich würd vllt. den ganzen Header so machen mit dem verschobenen Logo usw. wenn ich ne Idee hätte wie... Gruß, Nemesys |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Probleme beim Layout - evtl. floating? | Guitarrero | CSS | 3 | 25.10.2009 12:13 |
paar Probleme mit dem CSS Layout | SimonK. | CSS | 6 | 05.10.2008 15:57 |
Probleme mit dem Border im IE6 | bullseye | CSS | 9 | 30.10.2007 17:21 |
IE: Probleme mit ul-Menü | Ares | CSS | 4 | 18.10.2006 12:42 |
Probleme mit Box id und class | Etosch | CSS | 9 | 14.07.2005 13:15 |