zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Headerbild und Probleme mit Skalierung

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 01.10.2013, 17:11
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.10.2013
Beiträge: 6
Nemesys befindet sich auf einem aufstrebenden Ast
Standard 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.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 01.10.2013, 17:16
Benutzerbild von lottikarotti
Ein ♥ für's Web
XHTMLforum-Mitglied
 
Registriert seit: 18.04.2012
Ort: Karlsruhe
Beiträge: 396
lottikarotti wird schon bald berühmt werden
Standard

Hallöchen,

Zitat:
Zitat von Nemesys Beitrag anzeigen
Gibt's ne bessere Lösung?
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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 01.10.2013, 17:24
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von Nemesys Beitrag anzeigen
Jetzt hat das Konstrukt eine Größe von 1403x365px.

Ich entwerfe aber mit einer Auflösung von 1920x1080.
Das ist unerheblich. Was machst du wenn jemand die Seite auf einem Smartphone betrachtet oder das Browserfenster verkleinert aufgemacht hat.

Zitat:
Zitat von lottikarotti
Meine Empfehlung lautet also zunächst: konkreten Testcase hochladen.
Dem schliesse ich mich mal an.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #4 (permalink)  
Alt 01.10.2013, 17:28
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.10.2013
Beiträge: 6
Nemesys befindet sich auf einem aufstrebenden Ast
Standard

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-->

        ....
Mit Zitat antworten
  #5 (permalink)  
Alt 01.10.2013, 17:53
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Ihr habt doch eine Webseite.
Erstelle dort einen Ordner test und lade alles in diesen Ordner.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #6 (permalink)  
Alt 01.10.2013, 18:09
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.10.2013
Beiträge: 6
Nemesys befindet sich auf einem aufstrebenden Ast
Standard

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...
Mit Zitat antworten
  #7 (permalink)  
Alt 01.10.2013, 18:33
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
Mit Zitat antworten
  #8 (permalink)  
Alt 01.10.2013, 19:28
Benutzerbild von lottikarotti
Ein ♥ für's Web
XHTMLforum-Mitglied
 
Registriert seit: 18.04.2012
Ort: Karlsruhe
Beiträge: 396
lottikarotti wird schon bald berühmt werden
Standard

Hallöchen,

Zitat:
Zitat von Nemesys Beitrag anzeigen
Also es handelt sich um folgenden Header (für eine Vereinshomepage):
myimg.de - header258c61.jpg
wie explanator schon angesprochen hat, kannst du den Großteil dieses "Headers" mit purem HTML und CSS abbilden. Einzig das Logo würde ich als Grafik bestehen lassen und entsprechend in den Header integrieren. Der Vorteil: du kannst anschließend mit Media Queries auf Größenänderungen reagieren und den Header für Smartphones, Tablets usw. umstrukturieren.

Viele Grüße,
lotti
__________________
Empfehlenswerte Links:
jsFiddle | JavaScript Patterns | RedBeanPHP | Mozilla Developer Network -/- W3C Validator | JSLint
Mit Zitat antworten
  #9 (permalink)  
Alt 01.10.2013, 19:42
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.10.2013
Beiträge: 6
Nemesys befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 01.10.2013, 19:50
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Das kannst du erreichen indem du die Abstände variierst, sprich margin-top.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:56 Uhr.