# DIV-Bereich automatisch mit Icon/Titel versehen



## radarin (25. September 2017)

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.


```
.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é


----------



## MrMurphy (25. September 2017)

Hallo

Du hast den HTML-Quelltext mit einem typischen Beispiel vergessen.  

Gruss

MrMurphy


----------



## radarin (25. September 2017)

```
<p>
  <span class="note">Dieser Text wird umrandet</span>
</p>
[/html]
```


----------



## Sempervivum (25. September 2017)

Für das Bild brauchst Du bloß ein img-Tag zu notieren:

```
<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?


----------



## radarin (25. September 2017)




----------



## radarin (25. September 2017)

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.


----------



## Sempervivum (25. September 2017)

So richtig verstehe ich es immer noch nicht. Wenn Du für jede Zeile ein p-Element verwendest, werden sie untereinander angeordnet:

```
<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.


----------



## MrMurphy (25. September 2017)

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


----------



## Sempervivum (25. September 2017)

```
So wie vorgeschlagen wird das Bild oberhalb vom Rahmen angezeigt.
```
hast Du das ausprobiert?


----------



## radarin (25. September 2017)

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.


----------



## Sempervivum (25. September 2017)

> dass Titel und/oder Grafik auf Grund der SPAN-Klasse ergänzt werden


Heißt das, dass das span unterschiedliche Klassen haben kann und dass abhängig von der Klasse der Text im Titel und die Grafik unterschiedlich gesetzt werden sollen? Auf geradem Wege geht das, AFAIK, nur mit Javascript, weil man in CSS keine vorherigen Elemente ansprechen kann.


----------



## MrMurphy (25. September 2017)

Hallo

Ich sehe im Moment zu folgendem HTML


```
<p class="note">
         <span>Text ...</span>
      </p>
```

das folgende CSS


```
.note::before {
         content: "Tipp";
         display: block;
      }
      .note span {
         background: #D7D7B3;
         color: #79793E;
         display: flex;
         outline: none;
         padding: 1em 0.5em 1em 0.5em;
         border-width: 1px;
         border-color: #79793E;
         border-radius: 0.2em;
      }
      .note span::before {
         font-family: FontAwesome;
         content: "\f0eb";
         /*content: url(http://www.xxx.de/pfad/dateiname);*/
         margin-right: 1rem;
      }
```

Eine Grafik kann mit dem auskommentieren content eingefügt werden.

Ein Beispiel mit einem etwas längerem Text zum direkten ausprobieren:

http://boratb.bplaced.net/index80.html

Das Wort "Tipp" und die Grafik (in diesem Beispiel das Icon-Font) werden per CSS eingefügt.

Gruss

MrMurphy


----------



## radarin (26. September 2017)

Danke Euch erst mal für die Mühe. Das geht so in die gewünschte Richtung. Ich komme erst heute Abend wieder dazu da rum zu probieren. Wenn die Grafik höher als die Schrift ist, passt es noch nicht. Da muss ich noch mit dem Textfluss probieren. Und gerne hätte ich das Symbol links ausserhalb der farbigen Fläche. Da muss ich mir die Zeit nehmen. Wollte einfach mal kurz Feedback geben. Wünsch Eich einen schönen Tag. Ich melde mich weiter wenn ich weiter bin. Jetzt warten die Kunden, wollen ihr DSL repariert haben.


----------



## radarin (29. September 2017)

Ich hab jetzt etwas weiter rum probiert. Das Ganze soll in Wordpress verwendet werden. Das System ist so eingestellt, dass es keine <p> erlaubt/verwendet. In den Einstellungen wird darauf hingewiesen dies nicht zu ändern.

In einer speziellen Datei kann ich Klassen definieren, welche mir im Editor als Menu zur Verfügung stehen. Der markierte Inhalt wird dann einfach in ein <span class="info">...</span> eingebunden. Das ermöglicht mir nur sehr begrenzte Formatierungsmöglichkeiten. Ein hervorgehobener Hintergrund mit Titel, so dass es aussieht wie eine Registerkarte, wäre eine gern genutzte Möglichkeit, bedingt allerdings ein zusätzliches <span> das ich manuel im Code nachtragen muss. Nicht unmöglich, aber ungern. Ein farbiger Hintergrund mit Icon links vom Text funktioniert mit einem einzelnen <span>. Wie ursprünglich mal vorgesehen das Icon ausserhalb des farbigen Hintergrundes zu platzieren wprde wieder zusätzliche, von mir unerwünschte Codierung im Quellcode voraussetzen.

Der Vollständigkeit halber im Anhang meine Lösung und das Beispiel online.


```
<style>
/* ------------------------------- */
.note1::before {
         content: "Tipp 1";
         display: inline;
         background: #D7D7B3;
         color: #ffffff;
         padding: 0.5em 0.5em 1em 0.5em;
         font-family: 'courier', monaco, monospace;
         -webkit-border-top-left-radius: 10px;
         -webkit-border-top-right-radius: 10px;
         -moz-border-radius-topleft: 10px;
         -moz-border-radius-topright: 10px;
          border-top-left-radius: 10px;
          border-top-right-radius: 10px;
}
.note1 span {
         background: #D7D7B3;
         color: #79793E;
         display: flex;
         outline: none;
         padding: 1em 0.5em 1em 0.5em;
         border-width: 1px;
         border-color: #79793E;
         font-family: helvetica;
         -webkit-border-radius: 10px;
         -webkit-border-top-left-radius: 0;
         -moz-border-radius: 10px;
         -moz-border-radius-topleft: 0;
         border-radius: 10px;
         border-top-left-radius: 0;
}
 
/* ------------------------------- */
.note2::before {
         content: "Tipp 2";
         display: inline;
         background: #D7D7B3;
         color: #ffffff;
         padding: 0.5em 0.5em 1em 0.5em;
         font-family: 'courier', monaco, monospace;
         -webkit-border-top-left-radius: 10px;
         -webkit-border-top-right-radius: 10px;
         -moz-border-radius-topleft: 10px;
         -moz-border-radius-topright: 10px;
          border-top-left-radius: 10px;
          border-top-right-radius: 10px;
}
.note2 span {
         background: #D7D7B3;
         color: #79793E;
         display: flex;
         outline: none;
         padding: 1em 0.5em 1em 0.5em;
         border-width: 1px;
         border-color: #79793E;
         font-family: helvetica;
         -webkit-border-radius: 10px;
         -webkit-border-top-left-radius: 0;
         -moz-border-radius: 10px;
         -moz-border-radius-topleft: 0;
         border-radius: 10px;
         border-top-left-radius: 0;
}
.note2 span::before {
         content: url('blank.png');
         margin-right: 0.5em;
         float: left;
         background: #ffffff;
}

/* ------------------------------- */
.note3::before {
         content: "Tipp 3";
         display: inline;
         background: #D7D7B3;
         color: #ffffff;
         padding: 0.5em 0.5em 1em 0.5em;
         font-family: 'courier', monaco, monospace;
         -webkit-border-top-left-radius: 10px;
         -webkit-border-top-right-radius: 10px;
         -moz-border-radius-topleft: 10px;
         -moz-border-radius-topright: 10px;
          border-top-left-radius: 10px;
          border-top-right-radius: 10px;
}
.note3 span {
         background: #D7D7B3;
         color: #79793E;
         display: flex;
         outline: none;
         padding: 1em 0.5em 1em 0.5em;
         border-width: 1px;
         border-color: #79793E;
         font-family: helvetica;
         -webkit-border-radius: 10px;
         -webkit-border-top-left-radius: 0;
         -moz-border-radius: 10px;
         -moz-border-radius-topleft: 0;
         border-radius: 10px;
         border-top-left-radius: 0;
}
.note3 span::before {
         content: url('[URL]http://www.darin.ch/_img/nav/home.gif');[/URL]
         margin-right: 0.5em;
         float: left;
}

/* ------------------------------- */
.note3a span {
         background: #D7D7B3;
         color: #79793E;
         display: flex;
         outline: none;
         padding: 1em 0.5em 1em 0.5em;
         border-width: 1px;
         border-color: #79793E;
         font-family: helvetica;
         -webkit-border-radius: 10px;
         -webkit-border-top-left-radius: 10px;
         -moz-border-radius: 10px;
         -moz-border-radius-topleft: 10px;
         border-radius: 10px;
         border-top-left-radius: 10px;
}
.note3a span::before {
         content: url('[URL]http://www.darin.ch/_img/nav/home.gif');[/URL]
         margin-right: 0.5em;
         float: left;
}

/* ------------------------------- */
.note4::before {
         content: "Tipp 4";
         display: inline;
         background: #D7D7B3;
         color: #ffffff;
         padding: 1em 0.5em 1em 0.5em;
         font-family: 'courier', monaco, monospace;
         -webkit-border-top-left-radius: 10px;
         -webkit-border-top-right-radius: 10px;
         -moz-border-radius-topleft: 10px;
         -moz-border-radius-topright: 10px;
          border-top-left-radius: 10px;
          border-top-right-radius: 10px;
}
.note4 span {
         background: #D7D7B3;
         color: #79793E;
         display: flex;
         outline: none;
         padding: 1em 0.5em 1em 0.5em;
         border-width: 1px;
         border-color: #79793E;
         font-family: helvetica;
         -webkit-border-radius: 10px;
         -webkit-border-top-left-radius: 0;
         -moz-border-radius: 10px;
         -moz-border-radius-topleft: 0;
         border-radius: 10px;
         border-top-left-radius: 0;
}

/* ------------------------------- */
.note5::before {
         content: "Tipp 5";
         display: inline;
         background: #D7D7B3;
         color: #ffffff;
         padding: 1em 0.5em 1em 0.5em;
         font-family: 'courier', monaco, monospace;
         -webkit-border-top-left-radius: 10px;
         -webkit-border-top-right-radius: 10px;
         -moz-border-radius-topleft: 10px;
         -moz-border-radius-topright: 10px;
          border-top-left-radius: 10px;
          border-top-right-radius: 10px;
}
.note5 span {
         background: #D7D7B3;
         color: #79793E;
         display: flex;
         outline: none;
         padding: 1em 0.5em 1em 0.5em;
         border-width: 1px;
         border-color: #79793E;
         font-family: helvetica;
         -webkit-border-radius: 10px;
         -webkit-border-top-left-radius: 0;
         -moz-border-radius: 10px;
         -moz-border-radius-topleft: 0;
         border-radius: 10px;
         border-top-left-radius: 0;
}
.note5 span::before {
         content: url('blank.png');
         margin-right: 0.5em;
         float: left;
         background: #ffffff;
}

/* ------------------------------- */
.note6{
    border-width: 1px;
    border-color: #79793E;
    background: #D7D7B3;
    padding: 1em 0.5em 1em 0.5em;
    /*font-family: 'courier', monaco, monospace;*/
    /*cursor: pointer;*/
    color: #79793E;
    border-radius: 0.2em;
    outline: none;
    display: flex;
    -webkit-border-radius: 10px;
    -webkit-border-top-left-radius: 10px;
    -moz-border-radius: 10px;
    -moz-border-radius-topleft: 10px;
    border-radius: 10px;
    border-top-left-radius: 10px;
}
.note6::before{
    content: url('blank.png');
    margin-right: 0.5em;
    float: left;
    background: #ffffff;
}

/* ------------------------------- */
.note6a{
    border-width: 1px;
    border-color: #79793E;
    background: #D7D7B3;
    padding: 1em 0.5em 1em 0.5em;
    /*font-family: 'courier', monaco, monospace;*/
    /*cursor: pointer;*/
    color: #79793E;
    border-radius: 0.2em;
    outline: none;
    display: flex;
    -webkit-border-radius: 10px;
    -webkit-border-top-left-radius: 10px;
    -moz-border-radius: 10px;
    -moz-border-radius-topleft: 10px;
    border-radius: 10px;
    border-top-left-radius: 10px;
}
.note6a::before{
    content: url('[URL]http://www.darin.ch/_img/nav/home.gif');[/URL]
    float: left;
    margin-right: 0.5em;
}
</style>

<br><br>

<p>Ausgezeichnet mit P Class</p>

<p class="note1">
         <span>Text 111 fgfrgtff fjgjerh jfjzudegh kfgkjzjfnr fjfh hf fjgijhkir  idjgkidfnr fgikvjd ftvbkfjtkjrf fjdfjfkgk jfijtj<br>fiigigjtif ifgirti idfur<br>figihg<br><br>igifig</span>
</p>
<br>
<p class="note2">
         <span>Text 222 fgfrgtff fjgjerh jfjzudegh kfgkjzjfnr fjfh hf fjgijhkir  idjgkidfnr fgikvjd ftvbkfjtkjrf fjdfjfkgk jfijtj<br>fiigigjtif ifgirti idfur<br>figihg<br><br>igti idfur<br>figihg<br><br>igti idfur<br>figihg<br><br>igti idfur<br>figihg<br><br>igifig</span>
</p>
<br>
<p class="note3">
         <span>Text 333 fgfrgtff fjgjerh jfjzudegh kfgkjzjfnr fjfh <br>hf fjgijhkir  idjg<br>kidfnr fgikvjd ftvbkfjtkj<br>rf fjdfjfkgk jfijtj<br>fiigig<br>jtif<br>ifgirti idfur<br>figihgigifig</span>
</p>
<br>
<p class="note3a">
         <span>Text 333aaa fgfrgtff fjgjerh jfjzudegh kfgkjzjfnr fjfh <br>hf fjgijhkir  idjg<br>kidfnr fgikvjd ftvbkfjtkj<br>rf fjdfjfkgk jfijtj<br>fiigig<br>jtif<br>ifgirti idfur<br>figihgigifig</span>
</p>
<br><br>

<p>Ausgezeichnet mit SPAN Class</p>

<span class="note4">
         Text 444 Wordpress kompatibel ohne zusaetzliches 'span'.
</span>
<br><br><br>
<span class="note5">
         Text 555 Wordpress kompatibel ohne zusaetzliches 'span'.
</span>
<br><br><br>
<span class="note4">
         <span>Text 444 (span) Das funktioniert nur mit einem zusaetzlichen 'span'.</span>
</span>
<br><br>
<span class="note5">
         <span>Text 555 (span) Das funktioniert nur mit einem zusaetzlichen 'span'.</span>
</span>
<br><br>
<span class="note6">
         Text 666 Wordpress kompatibel ohne zusaetzliches 'span'. fgfrgtff fjgjerh jfjzudegh kfgkjzjfnr fjfh <br>hf fjgijhkir  idjg<br>kidfnr fgikvjd ftvbkfjtkj<br>rf fjdfjfkgk jfijtj<br>fiigig<br>jtif<br>ifgirti idfur<br>figihgigifig
</span>
<br><br>
<span class="note6a">
         Text 666aaa Wordpress kompatibel ohne zusaetzliches 'span'. fgfrgtff fjgjerh jfjzudegh kfgkjzjfnr fjfh <br>hf fjgijhkir  idjg<br>kidfnr fgikvjd ftvbkfjtkj<br>rf fjdfjfkgk jfijtj<br>fiigig<br>jtif<br>ifgirti idfur<br>figihgigifig
</span>
```

Das Beispiel:
http://computer-for-dummies.ch/support-files/cssinfobox/


----------

