1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

DIV-Bereich automatisch mit Icon/Titel versehen

Dieses Thema im Forum "CSS" wurde erstellt von radarin, 25. September 2017.

  1. radarin

    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.

    Code (CSS):
    1. .note{
    2.     border-width: 1px;
    3.     border-color: #79793E;
    4.     background: #D7D7B3;
    5.     padding: 1em 0.5em 1em 0.5em;
    6.      color: #79793E;
    7.     border-radius: 0.2em;
    8.     outline: none;
    9.     display: block;
    10. }
    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é
     
  2. MrMurphy

    MrMurphy Mitglied

    Hallo

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

    Gruss

    MrMurphy
     
  3. radarin

    radarin Grünschnabel

    Code (HTML5):
    1. <p>
    2.   <span class="note">Dieser Text wird umrandet</span>
    3. </p>
    4. [/html]
     
  4. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Für das Bild brauchst Du bloß ein img-Tag zu notieren:
    HTML:
    1. <p>
    2.   <img src="dein-bild.jpg">
    3.   <span class="note">Dieser Text wird umrandet</span>
    4. </p>
    b) verstehe ich nicht. Was meinst Du mit Tipp? Soll das ein Tooltip werden?
     
  5. radarin

    radarin Grünschnabel

  6. radarin

    radarin Grünschnabel

    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: 25. September 2017
  7. Sempervivum

    Sempervivum Erfahrenes Mitglied

    So richtig verstehe ich es immer noch nicht. Wenn Du für jede Zeile ein p-Element verwendest, werden sie untereinander angeordnet:
    Code (Text):
    1. <p>Titeltext darüber</p>
    2. <p>
    3.   <img class="title" src="dein-bild.jpg">
    4.   <span class="note">Dieser Text wird umrandet</span>
    5. </p>
    6. <p>Text darunter</>
    .title kannst Du dann entsprechen gestalten.
     
  8. MrMurphy

    MrMurphy Mitglied

    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: 25. September 2017
  9. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Code (Text):
    1. So wie vorgeschlagen wird das Bild oberhalb vom Rahmen angezeigt.
    hast Du das ausprobiert?
     
  10. radarin

    radarin Grünschnabel

    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.
     
  11. Sempervivum

    Sempervivum Erfahrenes Mitglied

    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.
     
  12. MrMurphy

    MrMurphy Mitglied

    Hallo

    Ich sehe im Moment zu folgendem HTML

    Code (Text):
    1.       <p class="note">
    2.          <span>Text ...</span>
    3.       </p>
    das folgende CSS

    Code (Text):
    1.       .note::before {
    2.          content: "Tipp";
    3.          display: block;
    4.       }
    5.       .note span {
    6.          background: #D7D7B3;
    7.          color: #79793E;
    8.          display: flex;
    9.          outline: none;
    10.          padding: 1em 0.5em 1em 0.5em;
    11.          border-width: 1px;
    12.          border-color: #79793E;
    13.          border-radius: 0.2em;
    14.       }
    15.       .note span::before {
    16.          font-family: FontAwesome;
    17.          content: "\f0eb";
    18.          /*content: url(http://www.xxx.de/pfad/dateiname);*/
    19.          margin-right: 1rem;
    20.       }
    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
     
  13. radarin

    radarin Grünschnabel

    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.
     
  14. radarin

    radarin Grünschnabel

    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.

    Code (HTML5):
    1. /* ------------------------------- */
    2. .note1::before {
    3.          content: "Tipp 1";
    4.          display: inline;
    5.          background: #D7D7B3;
    6.          color: #ffffff;
    7.          padding: 0.5em 0.5em 1em 0.5em;
    8.          font-family: 'courier', monaco, monospace;
    9.          -webkit-border-top-left-radius: 10px;
    10.          -webkit-border-top-right-radius: 10px;
    11.          -moz-border-radius-topleft: 10px;
    12.          -moz-border-radius-topright: 10px;
    13.           border-top-left-radius: 10px;
    14.           border-top-right-radius: 10px;
    15. }
    16. .note1 span {
    17.          background: #D7D7B3;
    18.          color: #79793E;
    19.          display: flex;
    20.          outline: none;
    21.          padding: 1em 0.5em 1em 0.5em;
    22.          border-width: 1px;
    23.          border-color: #79793E;
    24.          font-family: helvetica;
    25.          -webkit-border-radius: 10px;
    26.          -webkit-border-top-left-radius: 0;
    27.          -moz-border-radius: 10px;
    28.          -moz-border-radius-topleft: 0;
    29.          border-radius: 10px;
    30.          border-top-left-radius: 0;
    31. }
    32.  
    33. /* ------------------------------- */
    34. .note2::before {
    35.          content: "Tipp 2";
    36.          display: inline;
    37.          background: #D7D7B3;
    38.          color: #ffffff;
    39.          padding: 0.5em 0.5em 1em 0.5em;
    40.          font-family: 'courier', monaco, monospace;
    41.          -webkit-border-top-left-radius: 10px;
    42.          -webkit-border-top-right-radius: 10px;
    43.          -moz-border-radius-topleft: 10px;
    44.          -moz-border-radius-topright: 10px;
    45.           border-top-left-radius: 10px;
    46.           border-top-right-radius: 10px;
    47. }
    48. .note2 span {
    49.          background: #D7D7B3;
    50.          color: #79793E;
    51.          display: flex;
    52.          outline: none;
    53.          padding: 1em 0.5em 1em 0.5em;
    54.          border-width: 1px;
    55.          border-color: #79793E;
    56.          font-family: helvetica;
    57.          -webkit-border-radius: 10px;
    58.          -webkit-border-top-left-radius: 0;
    59.          -moz-border-radius: 10px;
    60.          -moz-border-radius-topleft: 0;
    61.          border-radius: 10px;
    62.          border-top-left-radius: 0;
    63. }
    64. .note2 span::before {
    65.          content: url('blank.png');
    66.          margin-right: 0.5em;
    67.          float: left;
    68.          background: #ffffff;
    69. }
    70.  
    71. /* ------------------------------- */
    72. .note3::before {
    73.          content: "Tipp 3";
    74.          display: inline;
    75.          background: #D7D7B3;
    76.          color: #ffffff;
    77.          padding: 0.5em 0.5em 1em 0.5em;
    78.          font-family: 'courier', monaco, monospace;
    79.          -webkit-border-top-left-radius: 10px;
    80.          -webkit-border-top-right-radius: 10px;
    81.          -moz-border-radius-topleft: 10px;
    82.          -moz-border-radius-topright: 10px;
    83.           border-top-left-radius: 10px;
    84.           border-top-right-radius: 10px;
    85. }
    86. .note3 span {
    87.          background: #D7D7B3;
    88.          color: #79793E;
    89.          display: flex;
    90.          outline: none;
    91.          padding: 1em 0.5em 1em 0.5em;
    92.          border-width: 1px;
    93.          border-color: #79793E;
    94.          font-family: helvetica;
    95.          -webkit-border-radius: 10px;
    96.          -webkit-border-top-left-radius: 0;
    97.          -moz-border-radius: 10px;
    98.          -moz-border-radius-topleft: 0;
    99.          border-radius: 10px;
    100.          border-top-left-radius: 0;
    101. }
    102. .note3 span::before {
    103.          content: url('[URL]http://www.darin.ch/_img/nav/home.gif');[/URL]
    104.          margin-right: 0.5em;
    105.          float: left;
    106. }
    107.  
    108. /* ------------------------------- */
    109. .note3a span {
    110.          background: #D7D7B3;
    111.          color: #79793E;
    112.          display: flex;
    113.          outline: none;
    114.          padding: 1em 0.5em 1em 0.5em;
    115.          border-width: 1px;
    116.          border-color: #79793E;
    117.          font-family: helvetica;
    118.          -webkit-border-radius: 10px;
    119.          -webkit-border-top-left-radius: 10px;
    120.          -moz-border-radius: 10px;
    121.          -moz-border-radius-topleft: 10px;
    122.          border-radius: 10px;
    123.          border-top-left-radius: 10px;
    124. }
    125. .note3a span::before {
    126.          content: url('[URL]http://www.darin.ch/_img/nav/home.gif');[/URL]
    127.          margin-right: 0.5em;
    128.          float: left;
    129. }
    130.  
    131. /* ------------------------------- */
    132. .note4::before {
    133.          content: "Tipp 4";
    134.          display: inline;
    135.          background: #D7D7B3;
    136.          color: #ffffff;
    137.          padding: 1em 0.5em 1em 0.5em;
    138.          font-family: 'courier', monaco, monospace;
    139.          -webkit-border-top-left-radius: 10px;
    140.          -webkit-border-top-right-radius: 10px;
    141.          -moz-border-radius-topleft: 10px;
    142.          -moz-border-radius-topright: 10px;
    143.           border-top-left-radius: 10px;
    144.           border-top-right-radius: 10px;
    145. }
    146. .note4 span {
    147.          background: #D7D7B3;
    148.          color: #79793E;
    149.          display: flex;
    150.          outline: none;
    151.          padding: 1em 0.5em 1em 0.5em;
    152.          border-width: 1px;
    153.          border-color: #79793E;
    154.          font-family: helvetica;
    155.          -webkit-border-radius: 10px;
    156.          -webkit-border-top-left-radius: 0;
    157.          -moz-border-radius: 10px;
    158.          -moz-border-radius-topleft: 0;
    159.          border-radius: 10px;
    160.          border-top-left-radius: 0;
    161. }
    162.  
    163. /* ------------------------------- */
    164. .note5::before {
    165.          content: "Tipp 5";
    166.          display: inline;
    167.          background: #D7D7B3;
    168.          color: #ffffff;
    169.          padding: 1em 0.5em 1em 0.5em;
    170.          font-family: 'courier', monaco, monospace;
    171.          -webkit-border-top-left-radius: 10px;
    172.          -webkit-border-top-right-radius: 10px;
    173.          -moz-border-radius-topleft: 10px;
    174.          -moz-border-radius-topright: 10px;
    175.           border-top-left-radius: 10px;
    176.           border-top-right-radius: 10px;
    177. }
    178. .note5 span {
    179.          background: #D7D7B3;
    180.          color: #79793E;
    181.          display: flex;
    182.          outline: none;
    183.          padding: 1em 0.5em 1em 0.5em;
    184.          border-width: 1px;
    185.          border-color: #79793E;
    186.          font-family: helvetica;
    187.          -webkit-border-radius: 10px;
    188.          -webkit-border-top-left-radius: 0;
    189.          -moz-border-radius: 10px;
    190.          -moz-border-radius-topleft: 0;
    191.          border-radius: 10px;
    192.          border-top-left-radius: 0;
    193. }
    194. .note5 span::before {
    195.          content: url('blank.png');
    196.          margin-right: 0.5em;
    197.          float: left;
    198.          background: #ffffff;
    199. }
    200.  
    201. /* ------------------------------- */
    202. .note6{
    203.     border-width: 1px;
    204.     border-color: #79793E;
    205.     background: #D7D7B3;
    206.     padding: 1em 0.5em 1em 0.5em;
    207.     /*font-family: 'courier', monaco, monospace;*/
    208.     /*cursor: pointer;*/
    209.     color: #79793E;
    210.     border-radius: 0.2em;
    211.     outline: none;
    212.     display: flex;
    213.     -webkit-border-radius: 10px;
    214.     -webkit-border-top-left-radius: 10px;
    215.     -moz-border-radius: 10px;
    216.     -moz-border-radius-topleft: 10px;
    217.     border-radius: 10px;
    218.     border-top-left-radius: 10px;
    219. }
    220. .note6::before{
    221.     content: url('blank.png');
    222.     margin-right: 0.5em;
    223.     float: left;
    224.     background: #ffffff;
    225. }
    226.  
    227. /* ------------------------------- */
    228. .note6a{
    229.     border-width: 1px;
    230.     border-color: #79793E;
    231.     background: #D7D7B3;
    232.     padding: 1em 0.5em 1em 0.5em;
    233.     /*font-family: 'courier', monaco, monospace;*/
    234.     /*cursor: pointer;*/
    235.     color: #79793E;
    236.     border-radius: 0.2em;
    237.     outline: none;
    238.     display: flex;
    239.     -webkit-border-radius: 10px;
    240.     -webkit-border-top-left-radius: 10px;
    241.     -moz-border-radius: 10px;
    242.     -moz-border-radius-topleft: 10px;
    243.     border-radius: 10px;
    244.     border-top-left-radius: 10px;
    245. }
    246. .note6a::before{
    247.     content: url('[URL]http://www.darin.ch/_img/nav/home.gif');[/URL]
    248.     float: left;
    249.     margin-right: 0.5em;
    250. }
    251.  
    252. <br><br>
    253.  
    254. <p>Ausgezeichnet mit P Class</p>
    255.  
    256. <p class="note1">
    257.          <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>
    258. </p>
    259. <br>
    260. <p class="note2">
    261.          <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>
    262. </p>
    263. <br>
    264. <p class="note3">
    265.          <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>
    266. </p>
    267. <br>
    268. <p class="note3a">
    269.          <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>
    270. </p>
    271. <br><br>
    272.  
    273. <p>Ausgezeichnet mit SPAN Class</p>
    274.  
    275. <span class="note4">
    276.          Text 444 Wordpress kompatibel ohne zusaetzliches 'span'.
    277. </span>
    278. <br><br><br>
    279. <span class="note5">
    280.          Text 555 Wordpress kompatibel ohne zusaetzliches 'span'.
    281. </span>
    282. <br><br><br>
    283. <span class="note4">
    284.          <span>Text 444 (span) Das funktioniert nur mit einem zusaetzlichen 'span'.</span>
    285. </span>
    286. <br><br>
    287. <span class="note5">
    288.          <span>Text 555 (span) Das funktioniert nur mit einem zusaetzlichen 'span'.</span>
    289. </span>
    290. <br><br>
    291. <span class="note6">
    292.          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
    293. </span>
    294. <br><br>
    295. <span class="note6a">
    296.          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
    297. </span>
    Das Beispiel:
    http://computer-for-dummies.ch/support-files/cssinfobox/
     
    Zuletzt bearbeitet: 29. September 2017
Die Seite wird geladen...