DIV-Bereich automatisch mit Icon/Titel versehen

radarin

Grünschnabel
Hallo zusammen, ich bin neu hier, ein Gruss in die Runde.

Ich möchte gerne im Text einen Tip verfassen. Der Text wir eingerückt und bekommt einen Rahmen. Soweit klappt das.

CSS:
.note{
    border-width: 1px;
    border-color: #79793E;
    background: #D7D7B3;
    padding: 1em 0.5em 1em 0.5em;
     color: #79793E;
    border-radius: 0.2em;
    outline: none;
    display: block;
}

Nun möchte ich, dass

a) links vom Rahmen ein Bild angezeigt wird,
b) Das DIV automatisch den Titel Tipp (als Text) bekommt.

Beides hab ich schon gesehen, aber meine Google Suche ist wohl falsch.

Einstweilen mal Dank, Gruss René
 
Für das Bild brauchst Du bloß ein img-Tag zu notieren:
HTML:
<p>
  <img src="dein-bild.jpg">
  <span class="note">Dieser Text wird umrandet</span>
</p>
b) verstehe ich nicht. Was meinst Du mit Tipp? Soll das ein Tooltip werden?
 
30463081vn.jpg
 
Nein kein Tooltip. So soll es aussehen. Beim drüberfahren soll nicht passieren.

Die Grafik soll im CSS hinterlegt sein. Wenn ich <span class="note" eingebe, soll die Grafik links ausserhalb vom Rahmen platziert werden. So wie vorgeschlagen wird das Bild oberhalb vom Rahmen angezeigt.

Wie gesagt, hab das schon so gesehen. Werde wohl die Augen nach Seiten offenhalten müssen die das anwenden.
 
Zuletzt bearbeitet:
So richtig verstehe ich es immer noch nicht. Wenn Du für jede Zeile ein p-Element verwendest, werden sie untereinander angeordnet:
Code:
<p>Titeltext darüber</p>
<p>
  <img class="title" src="dein-bild.jpg">
  <span class="note">Dieser Text wird umrandet</span>
</p>
<p>Text darunter</>
.title kannst Du dann entsprechen gestalten.
 
Hallo

Sehr verwirrend.

In deinem Quelltext kommt kein div vor und mit dem Bild hat er auch nichts zu tun.

Wie sollen wir dir damit konkret helfen?

Momentan sehe ich den Einsatz von Flexbox und dem Pseudoelement ::before.

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Stimmt, mein Fehler. In der Eile heute Mittag hab ich im Titel SPAN und DIV verwechselt. Es gibt keine DIVs. Der Text wird in Wordpress verfasst und das Span macht einen Rahmen drum. Meine Vorstellung ist, dass Titel und/oder Grafik auf Grund der SPAN-Klasse ergänzt werden. Nicht noch jedesmal jede Menge Code in den Beitrag packen, das ist nicht der Sinn von WP. Aber vielleicht bin ich auf etwas raus das so gar nicht geht.
 
Zurück