zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Vertikalen Abstand von Schrift bestimmen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.07.2016, 17:23
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.07.2016
Beiträge: 1
themrdomi befindet sich auf einem aufstrebenden Ast
Standard Vertikalen Abstand von Schrift bestimmen

Hallo zusammen,
ich habe ein kleines Problem:
Auf einer HP habe ich oben ein Bild, welches ein Verhältnis von 16/3 hat und mit width:100% ganz oben auf der Seite platziert ist.
Ich würde gerne eine Schrift genau in die Mitte darüber legen.
Leider schaffe ich es nicht, die Schrift von oben exakt in die Mitte des Bilds zu legen, weil als Ausgangspunkt mit margin, padding etc. immer die Schriftränder genommen werden und nicht die Mitte der Schrift.
Hat jemand eine Ahnung wie ich das sonst verwirklichen könnte?
Ich hoffe, ich habe es verständlich beschrieben.

mfg,
Dominik
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.07.2016, 18:28
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.949
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Was hast du denn probiert?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.07.2016, 20:32
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.071
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Ich hoffe, ich habe es verständlich beschrieben.
Ich befürchte leider nicht.

Das aktuelle Vorgehen dazu ist, das img-Element mit dem Bild und das figcaption-Element mit dem Text in ein figure-Element zu schreiben. Per CSS mittels Flexbox wird der Text dann über dem Bild angezeigt und per text-align mittig ausgerichtet.

HTML:

Code:
<figure>
   <img src="http://pfad/bild.jpg">
   <figcaption>Text über dem Bild</figcaption>
</figure>
CSS:

Code:
figure {
   min-width: 0;
   margin: 0;
   display: flex;
   flex-direction: column-reverse;
}
figcaption {
   font-size: 1.2rem;
   text-align: center;
}
img {
   display: block;
   min-width: 0;
   max-width: 100%;
   max-height: 100vh;
   border: 0;
}
Und ein Beispiel direkt zum Ausprobieren:

Text über Bild

Nachtrag: Wie Killerbear schrieb habe ich die Frage wohl falsch verstanden - Diesen Beitrag also bitte vergessen. Ich lasse ihn bestehen damit Killerbears Beitrag nicht aus dem Zusammenhang gerissen wird. Mein Online-Beispiel habe ich aber korrigiert.

Gruss

MrMurphy

Geändert von MrMurphy (18.07.2016 um 13:34 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 17.07.2016, 21:38
Neuer Benutzer
neuer user
 
Registriert seit: 25.06.2016
Beiträge: 7
Killerbear befindet sich auf einem aufstrebenden Ast
Standard

ich glaube themrdomi möchte nicht, dass der Text über dem Bild steht, sondern auf dem Bild.

Also mittig im Bild.

Wie sieht denn dein aktueller Code dazu aus?

Eine Möglichkeit wäre das Bild per Hintergrundgrafik zu laden und den Text dann drüber zu legen.
Beispiel:
A Pen by Killerbear
Mit Zitat antworten
  #5 (permalink)  
Alt 18.07.2016, 13:47
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.071
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Stimmt, ich habe themrdomis Problem wohl falsch verstanden.

Deshalb habe ich meine Online-Beispiel angepasst und dort drei mögliche Lösungen erstellt, da die Beschreibung von themrdomis nicht eindeutig ist. Zum Beispiel um wie viel Text es sich überhaupt handelt. Ein Wort? Ein kurzer Satz? Mehrere Absätze?

Wegen der Angabe des Bildverhältnisses bin ich davon ausgegangen, das das Bild bei jeder Fensterbreite möglichst komplett sichbar sein soll. Das Bild passt sich also der Fensterbreite an.

Bei der Einbindung als vollflächiges Hintergrundbild können am Rand immer ein paar Pixel verlorengehen, da der umgebende Container nicht direkt auf ein Hintergrundbild reagieren kann. Das sollte aber keine Rolle spielen. Andernfalls könnte das Bild etwas verzerrt werden, was aber auch nicht sichtbar sein wird.

Für sehr schmale Fensterbreiten müssen gegebenenfalls noch Media Queries hinzugefügt werden.

Für andere Bilder müssen die Größen und Abstände natürlich angepasst werden. Das Schriftgröße, -farbe, -hintergrund, -schatten u.s.w. nur beispielhaft sind versteht sich von selbst.

Text auf Bild

Gruss

MrMurphy
Mit Zitat antworten
Antwort

Stichwörter
bild, css, platzierung, schrift

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
@font-face: Firefox zeigt die Schrift nicht an Scolex CSS 3 17.01.2012 17:31
Weiße Schrift weiß drucken renet CSS 5 15.07.2009 21:58
[TYPO] Axel - eine neue Spiekermann et. al Schrift andir Grafik, Design, Typografie 0 13.06.2009 23:57
Helle Schrift auf dunklen Hintergrund Mesh (X)HTML 6 06.08.2007 21:31
skalierbare Schrift in IE / NN / FF / OP siakone CSS 17 10.05.2006 12:21


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:32 Uhr.