zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Skalieren von Text passend zum Hintergrundbild

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.11.2014, 19:39
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.11.2014
Ort: Niedersachsen
Beiträge: 5
moritz9627 befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.11.2014, 09:06
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.11.2014, 09:28
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.074
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 18.11.2014, 20:01
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.11.2014
Ort: Niedersachsen
Beiträge: 5
moritz9627 befindet sich auf einem aufstrebenden Ast
Standard

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?
Angehängte Grafiken
Dateityp: jpg beispiel.jpg (32,7 KB, 13x aufgerufen)
Mit Zitat antworten
  #5 (permalink)  
Alt 19.11.2014, 09:08
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 19.11.2014, 09:11
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.074
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

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:
Code:
<img src="ich/bin/ein/logo.gic">
<ul>
<li> Stichwort 1 </li>
<li> Stichwort 2 </li>
</ul>
*{ box-sizing: border-box; margin:0;padding:0}
ul li{float:left}
img{width:10%}
ul{overflow:auto;border-top:2px solid red;float:left;width:90%}
So in etwa. Als Denkanstoß
Mit Zitat antworten
  #7 (permalink)  
Alt 19.11.2014, 09:35
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

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.
Mit Zitat antworten
  #8 (permalink)  
Alt 19.11.2014, 10:48
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.074
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

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
Mit Zitat antworten
  #9 (permalink)  
Alt 19.11.2014, 11:00
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

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.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 19.11.2014, 19:36
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.11.2014
Ort: Niedersachsen
Beiträge: 5
moritz9627 befindet sich auf einem aufstrebenden Ast
Standard

Entschuldigt, da hab ich mich wohl falsch ausgedrückt

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?

Geändert von moritz9627 (19.11.2014 um 20:09 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
bild, css, schrift, skalierung

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
Wrapper wächst nicht mit, keine Floats maclady CSS 11 10.02.2010 18:30
Wachsende Container Andy CD CSS 13 10.02.2010 14:08
DIV bis GANZ unten burnZ CSS 5 27.07.2008 14:14
Helft mir. Ich habe voll die Leseschwäche nick CSS 12 15.01.2008 21:52
Problem mit div und Höhe deep4 CSS 2 13.11.2007 21:03


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:46 Uhr.