Text auf Bild fixieren, responsive Design

[MrMurphy]

Hallo,

wie ist es möglich, einen Text so auf einem Bild zu plazieren, das er auch bei responsive Design (und damit einer Veränderung der Bildgröße bei unterschiedlichen Fensterbreiten) an der Ursprungsstelle verharrt?

Das die Textgröße im Verhältnis zur Bildgröße starr ist kann unberücksichtigt bleiben.

Der Text soll in meinem Beispiel über der Sicke (Vertiefung) der Fahrertür des VW Busses verharren.

Ich habe den aktuellen Stand meiner Versuche online bereitgestellt. HTML5 mit dem figure- und dem figcaption-Element.

http://foreninfo.bplaced.net/seiten_probleme/2014_05_10_text_auf_bild_01.html

Gruss

MrMurphy

 

[Tronjer]

Das geht natürlich, schlechtesten falls mit der Combo position: absolute/relative. Das Problem bei dir ist das translate.

 

[djheke]

Versuch mal folgendes.
Notiere zusätzlich im Figure-Selektorblock position:relative;.
und den Code so übernehmen.

figcaption {
  color: #F00;
  background-color: rgba(255, 248, 220, 0.5);
  font-size: 1.3rem;
  font-weight: bold;
  padding-left: 1%;
  padding-right: 1%;
  border: 5px solid #F00;
  border-radius: 1rem;
  transform: rotate(-12deg);
  position: absolute;
  left: 64%;
  top: 48%;
}

Hat funktioniert.

 

[MrMurphy]

Hallo,

danke, das funktioniert. Ich musste dem figure-Element nur noch mit "max-width" die Höchstbreite des Bildes mit auf den Weg geben:

http://foreninfo.bplaced.net/seiten_probleme/2014_05_10_text_auf_bild_02.html

Und dann habe ich das ganze noch mal verschönbessert, die Texte auf dem Bild befinden sich in dem figcaption-Element:

http://foreninfo.bplaced.net/seiten_probleme/2014_05_10_text_auf_bild_03.html

So bleibt Text auch auf Bildern Text, so wie es sein soll. Das erleichtert auch den Webseitenerstellern die Arbeit, bei Textänderungen muss nicht das gesamte Bild neu bearbeitet werden.

Die Schriftgröße kann noch per Responsive Design angepasst werden. In der Praxis würde ich mir für den Text eher größere Flächen auf dem Bild suchen, wo die Schriftgröße nicht so häufig nachreguliert werden muss.

Danke

MrMurphy

 

[djheke]

Für den Fall, dass du die Schriftgröße doch anpassen möchtest.

font-size:7vt;
font-size:1.7vw;
...

http://www.mediaevent.de/css/font-size.html

 

[MrMurphy]

Hallo,

danke für die Info. Die Schriftgrößen kannte ich noch nicht und werde mich mal damit beschäftigen.

Die Schriftgröße soll natürlich auch angepasst werden, aber das wollte ich dann in Sprüngen mit Responsive Design erledigen. Wenn es flüssig mit den genannten Schriftgröße funktioniert - um so besser.

Ich muss noch etwas rumpuzzeln, da die Schriftgröße von der Fensterbreite abhängig ist und die ja auch noch wachsen kann, wenn das Bild bereits seine volle Breite erreicht hat. Aber das sollte kein Problem sein.

Gruss

MrMurphy