Positionierung von Chatnachrichten mittels CSS

Fonex47

Fonex47

Mitglied
Es ist wirklich ein schwieriges thema, würde mich freuen wenn sich jemand melden würde.
Wie auf dem Bild zu sehen sind die Chatblasen untereinander.
Ich möchte die aber wie auf der rechten seite , einmal empfänger links und absender rechts.

Es klingt erstmal leicht, nur wird da viel mit border, flex, und und und gearbeitet. So das es schwer ist die positionierung festzulegen.

Würde mich freuen wenn mir da jemand helfen würde über Teamviewer oder so.


CSS: 
#private_content {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 0;
  background: linear-gradient(rgb(114, 52, 169) 0%, rgb(10, 142, 231) 100%);
}

#private_content:after {
  content: '';
  background: black;
  flex: 1;
  pointer-events: none;
}

#private_content li {
  list-style-type: none;
  display: flex;
  flex-direction: row-reverse;
  overflow: hidden;
  border-style: solid;
  flex: 0 0 auto;
  border-color: black;
  border: solid 3px black;
}


#private_content li:first-child {
  border-top-width: 10px;
}

#private_content li:last-child {
  border-bottom-width: 10px;
}

#private_content li.hunter_private {
  flex-direction: row;
  border-right-width: 8px;
  border-left-width: 16px;
}

#private_content li:before {
  content: '';
  flex: 1;
  background: black;
  pointer-events: none;
}

#private_content li span {
  padding: 9px 9px 9px;
  position: relative;
  color: white;
  padding-bottom: 7px;
}


#private_content li span:before {
  content: '';
  position: absolute;
  left: -8px;
  top: -8px;
  bottom: -8px;
  right: -8px;
  border: 8px solid black;
  border-radius: 16px;
  pointer-events: none;
}

#private_content li.target_private span {
  background: none;
  color: white;
}

#private_content li.hunter_private::before {
  content: '';
  flex: 1px;
  background: black;
  pointer-events: none;
}

HTML: 
        <div id="private_content" class="background_box" value="1">
            <ul><li id="priv56">
                       
            <div class="private_logs">
                <div class="target_private"><span>hey was geht bei dir so ab lo</span></div>

                                </div>
                       
                    </li><li id="priv57">
                        <div class="private_logs">

                                <div class="hunter_private"><span>hey nix bei dir so ?</span>
                           
                            </div>
                        </div>
                    </li><li id="priv58">
                        <div class="private_logs">
                   
                           
                                <div class="hunter_private"><span>test</span>
                           
                            </div>
                        </div>
                    </li><li id="priv59">
                        <div class="private_logs">
                   
                           
                                <div class="hunter_private"><span>test</span>
                           
                            </div>
                        </div>
                    </li><li id="priv60">
                <div class="target_private"><span>test zurück</span></div>
                </li></ul>
        </div>
        <div id="priv_input_extra" class="add_shadow background_box" style="display: none;">
        </div>

ps: habs auf dem bild mit paint geändert als beispiel..


Mfg
 

Anhänge

  • ggooll.png
    ggooll.png
    20,2 KB · Aufrufe: 8
Lösung
Sempervivum
nur das problem ist das der empfänger seine nachricht nicht farbig sein soll sondern meine also quasi absender.
Zum Vergrößern anklicken....
Verstehe schon, das kannst Du leicht umkehren, indem Du die Abfrage des Typs änderst:
Code: 
function privateLog($post, $type)
{
    $class = '';
    if ($type == 1) {
        $class = ' class="hunter" ';
    }

    return '<li' . $class . '><span>' . processPrivateMsg($post) . '</span></li>';
}
Sempervivum hat gesagt.:
Damit kann man doch etwas anfangen. Was mir jetzt unklar ist: In dem Code taucht ein Bild bzw. Avatar auf, den ich weder in dem Bild noch in dem HTML, das Du in deinem Eingangsposting gepostet hast, finde?
Wenn Du das schon online hast, wäre es auch hilfreich, wenn man es sich ansehen könnte, dann sieht man wenigstens das generierte HTML.
Zum Vergrößern anklicken....
Ja ich hatte den Avatar Kram raus genommen um es erst zum laufen zu bekommen.
Jetzt habe ich den originalen Code raus genommen aus dem Backup
Mein chat ist leider lokal offline
Aber hier ist ein Demo vom Chat Entwickler
https://boomcoding.com/boombox/
 
Leider braucht es da ein Login. Ich dachte bei einem Demo gäbe es vielleicht einen öffentlichen Testaccount?
Wäre aber u. U. schon ausreichend, wenn Du einen Screenshot mit Avatar posten würdest.
 
Zuletzt bearbeitet:
Sempervivum hat gesagt.:
Leider braucht es da ein Login. Ich dachte bei einem Demo gäbe es vielleicht einen öffentlichen Testaccount?
Wäre aber u. U. schon ausreichend, wenn Du einen Screenshot mit Avatar posten würdest.
Zum Vergrößern anklicken....

Ja leider muss man sich dort anmelden da der Account dort mit der Lizenz verbunden ist.

hier mal ein screenshot mit avatar
 

Anhänge

  • hier.png
    hier.png
    28,3 KB · Aufrufe: 4
Jetzt verstehe ich überhaupt nichts mehr: Das ist doch genau das, was Du dir wünschst: Der eine Gesprächspartner links und der andere rechts.
 
Sempervivum hat gesagt.:
Jetzt verstehe ich überhaupt nichts mehr: Das ist doch genau das, was Du dir wünschst: Der eine Gesprächspartner links und der andere rechts.
Zum Vergrößern anklicken....

Ja aber, das was ich dazu haben möchte ist der background gradient. Und mit dem Aufbau vom Standart php der den html generiert krieg ich es nicht hin da es im php einen break gibt und somit es nicht möglich ist einen bg gradient von oben nach unten zu ziehen.
 
OK, auf dem Screenshot in deinem ersten Posting sehe ich einen BG-Gradienten in den einzelnen Chat-Beiträgen. Willst Du jetzt einen Gradienten über den Hintergrund des ganzen Chats haben?
 
OK, ich denke jetzt verstehe ich was Du vorhast und auch was das Problem ist: Du möchtest den Farbverlauf wie in dem Codepen und dabei
a) ist dir die Struktur mit links und rechts kaputt gegangen und
b) bekommst Du keinen durchgehenden Farbverlauf, weil die Chatbeiträge durch die Divs zergliedert sind.
Und jetzt verstehe ich auch diese Mimik mit den Pseudoelementen: Sie verdecken ganz einfach den Hintergrund, damit dieser nur bei den Sprechblasen durchscheint.
 
Wenn Ich mich recht erinnere geht dies doch auf das gesamte Element des Chat Divs und die anderen Textnachrichten Divs, da einfach den Background auf Transparent setzen, geht auch mit rgba(0, 0, 0, 0)!

wenn es du es bei den Texten haben willst dann wird das so nicht einfach gehen!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück