|
|||
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 |
Sponsored Links |
|
|||
Hallo
Zitat:
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> 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; } 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 12:34 Uhr) |
|
|||
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 |
|
|||
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 |
Stichwörter |
bild, css, platzierung, schrift |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
@font-face: Firefox zeigt die Schrift nicht an | Scolex | CSS | 3 | 17.01.2012 16:31 |
Weiße Schrift weiß drucken | renet | CSS | 5 | 15.07.2009 20:58 |
[TYPO] Axel - eine neue Spiekermann et. al Schrift | andir | Grafik, Design, Typografie | 0 | 13.06.2009 22:57 |
Helle Schrift auf dunklen Hintergrund | Mesh | (X)HTML | 6 | 06.08.2007 20:31 |
skalierbare Schrift in IE / NN / FF / OP | siakone | CSS | 17 | 10.05.2006 11:21 |