DIV-Bereich automatisch mit Icon/Titel versehen

dass Titel und/oder Grafik auf Grund der SPAN-Klasse ergänzt werden
Zum Vergrößern anklicken....
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.
 
Hallo

Ich sehe im Moment zu folgendem HTML

Code: 
      <p class="note">
         <span>Text ...</span>
      </p>

das folgende CSS

Code: 
      .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
 
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.
 
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.

HTML: 
<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/
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück