Getaltungsproblem „Sprechblase“

[EndOfGreen]

Ich möchte Kommentare auf meiner Website anzeigen lassen.

Es sollte oben eine Sprechblase sein und darunter dann das Profilbild und noch ein bisschen Text. Und auf das Bild soll dann von der Sprechblase aus ein Pfeil zeigen.

Nur bekomm ich kein ordentliches Design dafür hin.

Hat vielleicht jemand einen Link, wo Vorlagen für sowas sind? Oder vielleicht selbst einen Code gespeichert, den er hier posten würde? :)

 

[threadi]

Meinst Du jetzt eine grafische Vorlage für eine Sprechblase und Pfeil oder die entsprechende CSS-Kodierung?

 

[EndOfGreen]

Den Code für die Sprechblase (Also dort wo der Inhalt ist und den Pfeil), den Rest müsste ich auch alleine schaffen.

 

[alogheo]

Stu Nicholls | CSSplay | CSS speech bubbles (mal im Quelltext nachschauen)

 

[threadi]

Sprechblase als Background-Image.
Alles andere einfach darüber schreiben.

 

[EndOfGreen]

@alogheo: Vielen Dank, werde ich mal schauen. :)

@threadi: Geht schlecht, da die nicht immer die gleiche Größe haben.

 

[EndOfGreen]

Hab gerade gesehen, dass das bei dem Link von alogheo über Bilder gemacht wurde. Hat vielleicht jemand eine Seite, wo das ohne Bilder gemacht wurde?

 

[threadi]

Du müsstest den Entwurf dort eigentlich anpassen können und mittels border-radius die Rundungen hin bekommen - falls Du es auch so aussehen lassen möchtest. Falls deine Sprechblasen runder sein sollen, dann geht es nur mit Grafiken.

 

[EndOfGreen]

Auf der Website wird der Pfeil über eine Grafik dargestellt. Genau das wollte ich aber nicht.

Ich hab jetzt auch einen Code, der so ist, wie ich mir das vorgestellt habe.

Für alle, die sowas auch suchen:

CSS:

#bobble {
      width: 600px;
      background-color: rgb(150,150,150);
      padding:20px;
      margin-bottom: 45px;
      -moz-border-radius: 5px;
      -khtml-border-radius: 5px;
      -webkit-border-radius: 5px; 
       border-radius: 5px;
      text-align: left;
  }

/* Sprechpfeil */
#bobble div {
    width: 0px;
    height: 0px;
    border-top: 20px solid rgb(150,150,150);
    border-right: 20px solid transparent;
    display: inline;
    position: relative; left: 15px; top: 55px;
    }

HTML:

<div id="bobble">
   Inhalt
    <div></div>
</div>