zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden text auf Bild mit flexbox - responsive

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.07.2018, 16:17
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.05.2018
Beiträge: 45
sabrina79 befindet sich auf einem aufstrebenden Ast
Standard text auf Bild mit flexbox - responsive

funktioniert text auf Bild mit flexbox ??

habe ein großes teaserbild un möchte darauf in weiss eine große headline und subline stellen.

Bin mir aber nicht sicher ob das mit flexbox kompatibel ist, da der text ja "absolut" positioniert werden muss ...
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.07.2018, 16:31
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

Ist es ein Bild oder ein Hintergrundbild? Ist es ein Hintergrundbild, dann brauchst du kein flexbox, dann setzt du einfach dein Hintergrundbild auf den Container und verwendest padding um die headline und subline zu positionieren.
Ist es ein normales Bild, dann brauchst du dafür position:absolute.


Flexbox ist für das nebeneinander/übereinander Anordnen von Elementen. Für das Anordnen von übereinanderliegenden Elementen braucht es absolute positionierung (oder negative margins, aber das verursacht oft nur mehr Probleme)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.07.2018, 16:35
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 140
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

... man kann Bilder auch als Hintergrund für ein div verwenden...
https://www.webmaster-crashkurs.de/h...er-mit-css.htm
Dann kannst du deinen Text auch ganz 'normal' im div verwenden.
Und kompatibel mit Flexbox ist das auch.
Mit Zitat antworten
  #4 (permalink)  
Alt 16.07.2018, 18:18
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.05.2018
Beiträge: 45
sabrina79 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Sailor56 Beitrag anzeigen
... man kann Bilder auch als Hintergrund für ein div verwenden...
https://www.webmaster-crashkurs.de/h...er-mit-css.htm
Dann kannst du deinen Text auch ganz 'normal' im div verwenden.
Und kompatibel mit Flexbox ist das auch.

Ist auf der link Seite irgendwie so erklärt, dass ich es nicht verstehe!

hab es so geschrieben, stimmt aber nicht:
Html:
<section id="content">
<article class="teaser">
<p> real taste real food </p>
<p> passion for the perfect taste </p>
<p> order online </p>
</article>


css:
p{
background-image: url(„images/teaser_header1.jpg");
background-repeat: no-repeat;
background-position: center;
}

.... in html wird das Bild also gar nicht eingebunden??????
Die normalen () klammern werden im dreamweaver auch als Fehler angezeigt!
sorry, kapier das irgendwie nicht!

Hätte es gern so gemacht wie auf dem screenshot im Anhang ( also auch verschiedene Schriftgrößen !)
Angehängte Grafiken
Dateityp: jpg text auf bild.jpg (24,5 KB, 2x aufgerufen)
Mit Zitat antworten
  #5 (permalink)  
Alt 16.07.2018, 18:27
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.05.2018
Beiträge: 45
sabrina79 befindet sich auf einem aufstrebenden Ast
Standard

habs mal so geändert, klappt aber auch nicht! woher soll der browser denn den "weg" zum Bild finden ? kenne das mit der "url" nicht

<section id="content">
<article class="teaser">
<p> real taste real food </p>
<p> passion for the perfect taste </p>
<p> order online </p>
</article>


css:
.teaser{
background-image: url(teaser_header1.jpg);
background-repeat: no-repeat;
background-position: center;
}
Mit Zitat antworten
  #6 (permalink)  
Alt 16.07.2018, 18:46
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 140
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

Dein zweiter Ansatz:
HTML-Code:
article.teaser{
background-image: url('teaser_header1.jpg');
background-repeat: no-repeat;
background-position: center;
}
sollte zum Erfolg führen.
und die URL 'teaser_header1.jpg' stimmt nur, wenn das Bild im selben Ordner ist, wie das CSS, aus dem es aufgerufen wird.
Hast du dein CSS inline in der HTML-Datei, dann musst du schauen, wo relativ zu dieser Datei sich das Bild befindet?
zB die Datei befindet sich im Hauptverzeichnis und das Bild im Ordner 'images'.
Der Ordner 'images' ist auch im Hauptverzeichnis - dann wäre der Pfad .. also die URL ... 'images/teaser_header1.jpg'.
Hast du dein CSS extern gespeichert und der Speicherort ist ein weitere Ordner in deinem Hauptverzeichnis, dann musst du zunächst im Pfad eine Ebene nach oben wechseln... mit '../' ... dann bist du im Hauptverzeichnis und dann die Zieldatei auswählen.... '../images/teaser_header1.jpg' wäre dann die URL!
Sonst google mal nach 'relativer Pfad' - vielleicht findest du eine bessere Erklärung.
Mit Zitat antworten
Antwort

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
Parent DIV soll mit der Höhe seines Childs wachsen Tekkla CSS 2 19.11.2009 19:27
DIV bis GANZ unten burnZ CSS 5 27.07.2008 14:14
Falsche Darstellung beim Internet Explorer LordAvalon CSS 4 09.04.2007 17:22
Probleme mit Abständen zwischen div´s.... darvida CSS 4 09.07.2005 19:48


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