Positionierung von Chatnachrichten mittels CSS

Status
Dieses Thema wurde gelöst! Zur Lösung gehen…

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
Erst dachte ich: Null Problemo,
Code:
display: flex;
flex-direction: column;
align-items: flex-start;
und dann den anderen Partner mit
Code:
.anderer {
    align-self: flex-end;
}
nach rechts befördern.
Aber dann als ich in das HTML und CSS hinein sehe: Ich hasse diese Inflation von Divs und in dem Fall kommen noch die Pseudoelemente hinzu.
Da Du das Ganze ja anscheinend mit PHP generierst, empfehle ich, es schlanker zu machen, so dass Du das CSS verwenden kannst oben in diesem Posting.
 
Ich hasse diese Inflation von Divs

Nicht nur du. Auch die Entwickler von HTML5, die deshalb ins Regelwerk geschrieben haben, dass nicht nur unnötige div, sondern alle unnnötigen Container im HTML-Quelltext regelwidrig und damit zu vermeiden sind.

Für mich ergibt sich die Frage wie sich die Sprechblasen verhalten sollen, falls die Sätze länger sind und sie deshalb ineinander übergehen. Oder wenn bei noch längeren Sätzen Zeilenumbrüche erforderlich werden.
 
Erst dachte ich: Null Problemo,
Code:
display: flex;
flex-direction: column;
align-items: flex-start;
und dann den anderen Partner mit
Code:
.anderer {
    align-self: flex-end;
}
nach rechts befördern.
Aber dann als ich in das HTML und CSS hinein sehe: Ich hasse diese Inflation von Divs und in dem Fall kommen noch die Pseudoelemente hinzu.
Da Du das Ganze ja anscheinend mit PHP generierst, empfehle ich, es schlanker zu machen, so dass Du das CSS verwenden kannst oben in diesem Posting.

Danke für die schnellen Antworten :love: . Mag mir jemand über TeamViewer helfen, da ich das ganze nicht selber programmiert habe, weiß ich nicht wo ich anfangen soll und aufhören soll, wäre über jede Hilfe sehr dankbar.

Mfg
 
Zuletzt bearbeitet:
Teamviewer ist so eine Sache: Man hört da Dinge, dass einer seiner Oma einmal im Monat Support leistet und dann gesperrt wird, weil Teamviewer kommerzielle Nutzung unterstellt :LOL:
Versuche es doch erstmal hier im Forum. Das schwierigste wird wahrscheinlich sein, im PHP die Stelle ausfindig zu machen, wo das HTML generiert wird. Wenn es nicht zu viel ist, poste mal das ganze PHP.
 
Teamviewer ist so eine Sache: Man hört da Dinge, dass einer seiner Oma einmal im Monat Support leistet und dann gesperrt wird, weil Teamviewer kommerzielle Nutzung unterstellt :LOL:
Versuche es doch erstmal hier im Forum. Das schwierigste wird wahrscheinlich sein, im PHP die Stelle ausfindig zu machen, wo das HTML generiert wird. Wenn es nicht zu viel ist, poste mal das ganze PHP.

Das ding ist der Chat ist etwas komplex aufgebaut, es wird zuviel auch via javasript hinzugefügt.



PHP:
function privateLog($post, $type){
    switch($type){
        case 1:
            return '<li id="priv' . $post['id'] . '">
                        <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="hunter_private">' . processPrivateMsg($post) . '</div>
                                <p class="pdate">' . displayDate($post['time']) . '</p>
                            </div>
                        </div>
                    </li>';
        case 2:
            return '<li id="priv' . $post['id'] . '">
                        <div class="private_logs">
                            <div class="private_content">
                                <div class="target_private">' . processPrivateMsg($post) . '</div>
                                <p class="ptdate">' . displayDate($post['time']) . '</p>
                            </div>
                            <div class="private_avatar">
                                <img data="' . $post['user_id'] . '" class="get_info avatar_private" src="' . myavatar($post['user_tumb']) . '"/>
                            </div>
                        </div>
                    </li>';
    }
}


Hier mal die Funktion die den HTML generiert im PHP.
Ich hoffe es hilft etwas weiter.

Mfg
 
Hier solltest du wie in dem Beispiellink den Ich Dir gezeigt habe, eine Pseudovariable als Class nutzen und da kannst du gezielt triggern welcher nach rechts, links und welche Farbe es haben soll :)

min deinem Beispiel bei den LI Element ;)
Schau dir da am besten das Beispiel an :)
 
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.
 
Status
Dieses Thema wurde gelöst! Zur Lösung gehen…
Zurück