Skalieren von Text passend zum Hintergrundbild
 

Hallo,

erstmal im vorraus, ich bin momentan an meiner ersten komplett eigenen Homepage. Vorher hatte ich immer nur Free-CSS Templates benutzt, nun soll aber auch im Auftrag der Firma eine neue Homepage mit selbsterstelltem Layout her.

Mein Problem ist, dass ich mit CSS bisher nur Sporadisch gearbeitet habe.
Meine Frage:

Ich habe einen <div>-Container (z.B. "header"). Dieser soll ein eigenes Hintergrundbild bekommen. Auf diesem Bild ist das Logo und ein Roter Strich der von Rechts nach Links geht. Das Bild wird auch wie gewollt mit der veränderbaren Browserfenstergröße Skaliert, sprich größer und kleiner. Ich möchte nun unter dem Strich auf dem Bild ein paar Links anordnen. Diese Links sollen immer ihre Position unter dem Strich behalten, egal wie groß/klein das Fenster gezogen wird. Allerdings bekomme ich das nicht vernünftig hin. Wir löst man soetwas ?

Es müsste sich ja die Schriftgröße, -position usw. Proportional zum Hintergrundbild anpassen. Aber wie :?:

Dies ist mein erster Beitrag hier,
ich hoffe das Problem richtig beschrieben zu haben,
Mit Freundlichen Grüßen
Moritz

Ich verstehe nicht zu 100% was du meinst. Eventuell wäre ein Bild vom Layout (zumindest der Header) sinnvoll.

Ein Tipp nebenbei: Du solltest HTML5 verwenden. Vielleicht tust das auch schon, allerdings gibt es ein <header>-Element, dass du statt eines Divs mit der Klasse oder id "header" nehmen kannst. Wenn es sich also inhaltlich um einen Header handelt, nimm das HTML5-Element.

Zu deinem Problem:

Da kann ich erstmal nur raten. Wenn du möchtest, dass Schrift proportional zur Browserbreite mitskaliert, kannst du die Einheit "vw" verwenden. Das steht für "view width". Also z.B. font-size: 2vw

Und was die Position der Links betrifft: Da könnte eventuell "position: absolute" für die Links bzw. die Navigation reichen. Dann musst du dem umschließenden Element, also dem Header, noch "position: relative" geben und richtest die Links noch mit den Eigenschaft "top", "left", "right" und / oder "bottom" aus. Dann orientiert sich die Navigation immer am Header.

Ist aber nur geraten. ;)

Einem Anfänger zu position:absolute zu raten ist eine sehr, sehr schlechte Idee.
Vergiss das am Besten wieder, du brauchst position:absolute nur in den seltensten Fällen (und das ist kein solcher)
Wenn du Links in einer Reihe haben willst, so nimmst du dafür eine Liste und lässt die Elemente nebeneinander floaten.
Auch denke ich, dass der rote Strich, so wie du es beschrieben hast, nicht zu einem Bild gehört, sondern besser mit der CSS Eigenschaft border umzusetzen ist. Gibst du der Navigation ein border-top:1px solid red, dann hat deine Navigation immer einen roten Strich oben drüber, egal wo sie sich befindet.
Poste auch mal einen screenshot, was du erreichen willst. Die Schrift am Logo kann ruhig auch nicht proportional zur Schrift auf der Seite skalieren. Also vergiss das mit der vw für Schriftgröße am besten auch wieder, viel wichtiger ist, dass die Schrift lesbar bleibt.

Das Problem ist, das dass Fenster vom Browser ja in der größe verändert werden kann. Anbei habe ich mal einen Schnell-Paint-Entwurf des Designs angehängt, darauf zusehen das Logo MIT dem Rotem Strich sowie meine Gewünschte Anordnung der 12 Stichpunkte unter halb des Striches. Wenn ich das ganze jetzt auf meinem Bildschirm 1600x900 erstelle und ich das Fenster verkleinere,
passen die Stichpunkte nicht mehr unter das Logo, alles verschiebt sich und es kommt nur noch mist raus..

Was gibt es nun für möglichkeiten?

Verstehe ich das richtig? Dein Hintergrundbild skaliert proportional in der Höhe UND Breite, wenn man das Fenster verkleinert? Und irgendwann befinden sich die Navigationspunkte ÜBER dem Strich?

Falls ja, könntest du auf den Vorschlag von cloned hören und border-top für die Navigation verwenden. Dann brauchst du auch kein Hintergrundbild für den gesamten Header, sondern baust das Logo als eigenes <img>-Element ein.

Falls wir immer noch daneben legen, bitte mal einen Link zur Seite oder den Code bereitstellen 8)

Wie von mir vermutet, der rote Strich hat nichts mit dem Logo zu tun. Der rote Strich ist ein roter border.
Mein Tipp: Beschäftige dich erst mit statischen, nicht responsive Seiten und wenn du die Grundlagen von CSS raus hast, beschäftige dich damit, wie du die Seiten responsive erstellst.

Ansonsten:
So in etwa. Als Denkanstoß

Ich würde dem img aber auch noch float:left geben, sonst sitzt das rechts von der Navi. Außerdem nicht nur der Navi, sondern auch dem Bild border-top geben.

Darf ich fragen, wieso overflow: auto? Manchmal versteh ich overflow nicht ganz. :?

Es ist ja nur ein nicht getesteter Denkanstoß. Aber ja, float:left fürs Bild auch.
Und der rote Strich geht bei seinem Bild (für mich) nicht über das Bild, sondern endet in einem nicht definierten krixi-kraxi.
overflow:auto; verwende ich gerne, wenn das Element floatende Unterelemente beinhaltet. Eine Art von clearfix also ;)

Cool, danke für den Tipp. :)

Ich kannte nur das clearen mit overflow: hidden, aber ich meine, dass alte Opera-Versionen damit Probleme haben und habe deshalb immer den Clearfix verwendet.

Entschuldigt, da hab ich mich wohl falsch ausgedrückt :oops:

Ich hab hier mal zwei Seiten bei mir hochgeladen:

[1] Meine Version
[2] Cloned's Version

[1] So wie ich mir das vorgestellt hatte. Der Rote Strich gehört hier mit zum Logo, da ich es nicht geschafft hatte mitt CSS den Strich genau dan das Logo zu positionieren und diesen dann auch beim Skalieren dort zu behalten. Hier wollte ich das ganze Bild (LOGO+Strich, später noch ein grauer Farbverlauf zum BODY) als Background-Image nehmen und die "Navigation darau einblenden.

[2] Einmal die Version von "cloned" unverändert zum Vergleich..

Ich fand es halt einfacher den Roten Strich mit ins Logo zu Integrieren und das ganze dann als Hintergrund zu nehmen


Nachtrag:

Ich hab jetzt mal mit CSS "font-size" die einstellung "view-width" ausprobiert, und siehe da, der Text skaliert sich von der Größe her wie gewünscht. Nun muss ich es nur hinbekommen das sich der Text wie oben im Anhang-Beispiel gezeigt an der richtigen Position befindet und dort auch bei kleinerem Fenster bleibt.. Könnt ihr mir da auch noch eine Hilfestellung geben?

natürlich ist es einfacher, richtig ist es trotzdem nicht.
Auch hast du meinen Code nicht korrekt übernommen:
Der Teil fehlt (und ist auch nicht unwichtig!)
Dann fügst du noch folgendes für die ul hinzu:
Wenn deine Anforderung schon von Beginn an klar gewesen wäre, dann hätte man dir das auch zu Beginn schon sagen können. Aber aus deinem krixi-kraxi ist das nicht wirklich hervorgegangen. ^^
Eventuell noch das Logo "schön" rausspielen, damit der rote Strich schön am Rand aufhört.

Ich sehe in deinem Beispiel keinen Text, nur im zweiten Beispiel, deshalb kann ich leider nicht helfen.

Ich würde das Bild aber nicht auf 10% Breite setzen, sondern etwas mehr, damit es in etwa seine originale Größe hat und nicht zu klein ist, wie in deinem Beispiel. Nur so nebenbei.

Die 10% waren auch nur ein erster Denkanstoß von mir. Lesen die Leute nicht, was hier geschrieben wird?
Das war, wie man sich hoffentlich denken kann, nur, damit die beiden Elemente auch nebeneinander stehen. Ich weiß ja nicht, wie breit das Logo wirklich ist.

Das war auch nicht auf dich bezogen, sondern auf den Fred-Ersteller. Ich wusste jetzt nicht, ob bei ihm die 10% auch nur beispielhaft waren oder nicht.

So, hab den header, body und footer jetzt an meine bedürfnisse angepasst.

Nun liegt mein Problem da das ich die Navigation ein paar Pixel nachoben bekommen muss.

Hier hab ich mal das Beispiel hochgeladen:
http://www.84.200.28.39/testgebiet

Es handelt sich um die "Stichpunkte 1-4", diese sollen weiter nach oben unter den roten Strich. Meine Versuche mit margin und padding (je top,bottom,left und right) bewirken nur das sich auch der header vergrößert und das hintergrundbild verzerrt.

Wie bekomme ich die spätere Navigation ein bisschen nach oben?

Danke im für eure bisher top Hilfe,

Moritz

Hallo,

ich habe mich bei dem Wetter draußen heute mal etwas mehr dem Thema CSS gewidmet. Da mein Design wie ich es heute morgen hatte einfach Mist war, habe ich mir nocheinmal die Version von Cloned - danke dir nochmal dafür - angeguckt. Mit ein bisschen anpassen des Codes sieht es meiner Meinung nach Mittlerweile sehr gut aus. Eine saubere Navigation die sich mitskaliert habe ich jetzt auch reingebastelt. Wenn ich jetzt noch den Login-Link hinbekommen würde, wäre das Thema für mich gegessen.

Könntet ihr mir noch einmal helfen?

Der Link soll nach oben Rechts, diesesmal ÜBER den Roten strich. Allerdings bekomme ich es dann nicht mehr so hin, das der Strich genau an das Logo anschließt, da sich selbstverständlich dann wieder alles nach unten schiebt..

ich bitte um eure Hilfe,

Moritz

PS: Aktuelle Version unter hier!

Hallo,

anwenderfreundlich geht anders.

Eine kleine Schrift die sich nicht mal vernünftig zoomen läßt - was soll das?

Gruss

MrMurphy

Ich kann deine Beispiele leider nicht öffnen, die Seiten werden nicht gefunden.

Zur Einheit "vw" will ich noch erwähnen, dass die Texte erfahrungsgemäß bei kleinen Geräten verdammt klein werden und kaum noch zu lesen sind, da sollte dann mit media queries nachgeholfen werden.

Aber ich stelle mir auch die Frage: wozu das ganze?^^