Positionierung von Chatnachrichten mittels CSS

Fonex47 · 2. April 2020

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

Sempervivum · 2. April 2020

Ich habe mal einen ersten Schritt gemacht und ein Demo nur mit den Nachrichten gemacht, ohne Zeit und ohne Avatar, und zwar mit deinem letzten Codepen als Vorlage. Sieht vollständig so aus:

Code:

<?php
ini_set('display_errors', '1');
error_reporting(E_ALL);
//<li class="hunter"><span>Hey Empfänger!</span></li>
function processPrivateMsg($post)
{
    return $post;
}
function privateLog($post, $type)
{
    $class = '';
    if ($type == 2) {
        $class = ' class="hunter" ';
    }

    return '<li' . $class . '><span>' . processPrivateMsg($post) . '</span></li>';
}
?>
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Test</title>

</head>

<body>
    <style>
        html,body{
        background: black;
        margin: 0 auto;
        }

        .background_box {
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            font: 16px/1.3 sans-serif;
            overflow: auto;
            padding: 0;
            background: linear-gradient(rgb(114, 52, 169) 0%, rgb(10, 142, 231) 100%);
        }

        .background_box:after {
            content: '';
            background: white;
            flex: 1;
            pointer-events: none;
        }

        .background_box li {
            list-style-type: none;
            display: flex;
            flex-direction: row-reverse;
            overflow: hidden;
            border-style: solid;
            border-color: black;
            border-width: 2px 16px 2px 8px;
            flex: 0 0 auto;
        }

        .background_box li.hunter {
            flex-direction: row;
            border-right-width: 8px;
            border-left-width: 16px;
        }

        .background_box li:first-child {
            border-top-width: 10px;
        }

        .background_box li:last-child {
            border-bottom-width: 10px;
        }

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

        .background_box li span {
            background: #1a1a1a;
            padding: 8px;
            position: relative;
            color: white;
        }

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

        .background_box li.hunter span {
            background: none;
            color: white;
        }
        .background_box ul {
            margin: 0;
            padding: 0;
        }
    </style>
    <div id="private_content" class="background_box" value="1">
        <ul>
        <?php
echo privateLog('Hey Empfänger!', 1);
echo privateLog('Na Absender?', 2);
echo privateLog('Wie geht es dir ?', 1);
echo privateLog('Mir geht es Prima!', 2);
?>
        </ul>
    </div
</body>


</html>

Da ist jetzt viel Overhead drin, damit ich es testen konnte. Das einzige, was Du übernehmen müsstest, ist die Funktion privateLog():

Code:

function privateLog($post, $type)
{
    $class = '';
    if ($type == 2) {
        $class = ' class="hunter" ';
    }
    return '<li' . $class . '><span>' . processPrivateMsg($post) . '</span></li>';
}

d. h. die vorhandene Funktion durch diese ersetzen.
Und dann mal sehen, wie der Chat dann aussieht.

Sempervivum · 2. April 2020

Die Testdatei produziert dann dieses:

Fonex47 · 2. April 2020

Sempervivum hat gesagt.:

Ich habe mal einen ersten Schritt gemacht und ein Demo nur mit den Nachrichten gemacht, ohne Zeit und ohne Avatar, und zwar mit deinem letzten Codepen als Vorlage. Sieht vollständig so aus:

Code:

<?php
ini_set('display_errors', '1');
error_reporting(E_ALL);
//<li class="hunter"><span>Hey Empfänger!</span></li>
function processPrivateMsg($post)
{
    return $post;
}
function privateLog($post, $type)
{
    $class = '';
    if ($type == 2) {
        $class = ' class="hunter" ';
    }

    return '<li' . $class . '><span>' . processPrivateMsg($post) . '</span></li>';
}
?>
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Test</title>

</head>

<body>
    <style>
        html,body{
        background: black;
        margin: 0 auto;
        }

        .background_box {
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            font: 16px/1.3 sans-serif;
            overflow: auto;
            padding: 0;
            background: linear-gradient(rgb(114, 52, 169) 0%, rgb(10, 142, 231) 100%);
        }

        .background_box:after {
            content: '';
            background: white;
            flex: 1;
            pointer-events: none;
        }

        .background_box li {
            list-style-type: none;
            display: flex;
            flex-direction: row-reverse;
            overflow: hidden;
            border-style: solid;
            border-color: black;
            border-width: 2px 16px 2px 8px;
            flex: 0 0 auto;
        }

        .background_box li.hunter {
            flex-direction: row;
            border-right-width: 8px;
            border-left-width: 16px;
        }

        .background_box li:first-child {
            border-top-width: 10px;
        }

        .background_box li:last-child {
            border-bottom-width: 10px;
        }

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

        .background_box li span {
            background: #1a1a1a;
            padding: 8px;
            position: relative;
            color: white;
        }

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

        .background_box li.hunter span {
            background: none;
            color: white;
        }
        .background_box ul {
            margin: 0;
            padding: 0;
        }
    </style>
    <div id="private_content" class="background_box" value="1">
        <ul>
        <?php
echo privateLog('Hey Empfänger!', 1);
echo privateLog('Na Absender?', 2);
echo privateLog('Wie geht es dir ?', 1);
echo privateLog('Mir geht es Prima!', 2);
?>
        </ul>
    </div
</body>


</html>

Da ist jetzt viel Overhead drin, damit ich es testen konnte. Das einzige, was Du übernehmen müsstest, ist die Funktion privateLog():

Code:

function privateLog($post, $type)
{
    $class = '';
    if ($type == 2) {
        $class = ' class="hunter" ';
    }
    return '<li' . $class . '><span>' . processPrivateMsg($post) . '</span></li>';
}

d. h. die vorhandene Funktion durch diese ersetzen.
Und dann mal sehen, wie der Chat dann aussieht.

Aufjedenfall sind wir einen riesen schritt vorran gekommen, nun hat es den öffentlichen chat getroffen

aber das könnte ich irgendwie reparieren. nur das problem ist das der empfänger seine nachricht nicht farbig sein soll sondern meine also quasi absender. ich will es nicht kompliziert erklären

so wie es gerade ist mit den farben umgekehrt nur.

Sempervivum · 2. April 2020

nur das problem ist das der empfänger seine nachricht nicht farbig sein soll sondern meine also quasi absender.

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>';
}

Fonex47 · 2. April 2020

Sempervivum hat gesagt.:
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>'; }

hat geklappt super vielen vielen dank, jetzt schau ich mal das ich den öffentlichen chat wieder hinkriege also den public chat, der ist bissel kaputt gegangen durch den css veränderungen. ich hoffe ich kriegs hin dann wäre das alles erledigt.
Danke nochmal

Sempervivum · 2. April 2020

Das ist ja erfreulich, dass es soweit funktioniert.

dann wäre das alles erledigt.

Wirklich? Ich habe da noch Avatare und einen Zeitstempel gesehen?

Fonex47 · 2. April 2020

Sempervivum hat gesagt.:
Das ist ja erfreulich, dass es soweit funktioniert.

Wirklich? Ich habe da noch Avatare und einen Zeitstempel gesehen?

Ja ich habe euch jetzt so genervt mit dem ganzen kram, wollte nicht extra wünsche haben..
Das muss ich ja auch noch einfügen..

Sempervivum · 2. April 2020

OK, wenn Du damit noch Probleme hast, kannst Du dich ja wieder melden.

Fonex47 · 4. April 2020

Sempervivum hat gesagt.:
OK, wenn Du damit noch Probleme hast, kannst Du dich ja wieder melden.

Hallo nochmal

,
mir ist aufgefallen das ich die ID der nachrichten auch brauche, und ich eine klasse namens tick via div noch einfügen muss die nur bei Hunter angezeigt werden darf.

Ich hau mal die alte Funktion rein die ich modifiziert hatte mit den ganzen features.

PHP:

function privateLog($post, $type){
    global $data;
    switch($type){
        case 1:
            return '<li id="priv' . $post['id'] . '" class="hunter">
                <div class="private_logs">
                    <div class="private_content">
                    <div class="'.$data['pn_color'].' hunter_private"> ' . processPrivateMsg($post) . '<div class="metadata"><p class="pdate">' . displayDateNe($post['time']) . '</p><span class="tick">
                    
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" id="msg-dblcheck-ack" x="2063" y="2076">
                    <path d="M15.01 3.316l-.478-.372a.365.365 0 0 0-.51.063L8.666 9.88a.32.32 0 0 1-.484.032l-.358-.325a.32.32 0 0 0-.484.032l-.378.48a.418.418 0 0 0 .036.54l1.32 1.267a.32.32 0 0 0 .484-.034l6.272-8.048a.366.366 0 0 0-.064-.512zm-4.1 0l-.478-.372a.365.365 0 0 0-.51.063L4.566 9.88a.32.32 0 0 1-.484.032L1.892 7.77a.366.366 0 0 0-.516.005l-.423.433a.364.364 0 0 0 .006.514l3.255 3.185a.32.32 0 0 0 .484-.033l6.272-8.048a.365.365 0 0 0-.063-.51z" fill="'.(($data["status"] == 1 ) ? "#41bdf5" : "#dbdbdb").'"/>
                    </svg>
                    </span></div></div>
                        

                    </div>
                    
                </div>
            </li>';
        case 2:
            return '<li id="priv' . $post['id'] . '" class="target">
                <div class="private_logs">
                    <div class="private_avatar">
                        <img data="' . $post['user_id'] . '" class="get_info avatar_private" src="' . myavatar($post['user_tumb']) . '"/>
                    </div>
                    <div class="private_content">
                        <div class="target_private">' . processPrivateMsg($post) . ' <div class="metadata"><p class="ptdate">' . displayDateNe($post['time']) . '</p></div></div>
                        
                    </div>
                </div>
            </li>';
    }
}

Vielleicht ne Idee @Sempervivum ?

Mfg

Sempervivum · 4. April 2020

Hallo, wo brauchst Du denn die ID, sichtbar für den Benutzer oder in einer ID im HTML, wie man es in deinem ersten Posting sah?

und ich eine klasse namens tick via div noch einfügen muss die nur bei Hunter angezeigt werden darf.

Da verstehe ich leider nicht wie Du das meinst.

Positionierung von Chatnachrichten mittels CSS

Fonex47

Mitglied

Anhänge

Sempervivum

Sempervivum

Erfahrenes Mitglied

Sempervivum

Erfahrenes Mitglied

Fonex47

Mitglied

Anhänge

Sempervivum

Erfahrenes Mitglied

Fonex47

Mitglied

Sempervivum

Erfahrenes Mitglied

Fonex47

Mitglied

Sempervivum

Erfahrenes Mitglied

Fonex47

Mitglied

Sempervivum

Erfahrenes Mitglied

Neue Beiträge