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

Sempervivum

Erfahrenes Mitglied
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.
 

MrMurphy

Mitglied
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.
 

Fonex47

Mitglied
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:

Sempervivum

Erfahrenes Mitglied
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.
 

Fonex47

Mitglied
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
 

EuroCent

Erfahrenes Mitglied
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 :)
 

Sempervivum

Erfahrenes Mitglied
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.
 

Fonex47

Mitglied
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.
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
 

Sempervivum

Erfahrenes Mitglied
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

Erfahrenes Mitglied
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.
 

Fonex47

Mitglied
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.
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.
 

Sempervivum

Erfahrenes Mitglied
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?
 

Fonex47

Mitglied

Sempervivum

Erfahrenes Mitglied
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.
 

EuroCent

Erfahrenes Mitglied
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!
 
Status
Dieses Thema wurde gelöst! Zur Lösung gehen…