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.:
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?
Da verstehe ich leider nicht wie Du das meinst.
Zum Vergrößern anklicken....

Genau, die id brauch ich da ich eine funktion drinne hab die die ganzen ids überprüft und je nachdem dann auf gelesen oder nicht gelesen setzt den status, das heißt ich brauche es nur bei hunter.

War jetzt zu schnell sorry, und hab oben den beitrag nochmal bearbeitet.
 
Verstehe, jetzt wo ich den Code sehe. ID und Class sind klar, aber da sehe ich auch ein img-Tag und eine SVG-Grafik. Sind die erstmal nicht Thema?
 
ID kannst Du so einfügen:
Code: 
function privateLog($post, $type)
{
    $class = '';
    if ($type == 2) {
        $class = ' class="hunter" ';
    }

    return '<li id="priv' . $post['id'] . '"' . $class . '><span>' . processPrivateMsg($post) . '</span></li>';
}

Die andere Klasse sehe ich in deinem Code, ich weiß nur nicht, wo wir sie hin tun müssen, weil ja das HTML jetzt ganz anders aussieht.
 
Sempervivum hat gesagt.:
ID kannst Du so einfügen:
Code: 
function privateLog($post, $type)
{
    $class = '';
    if ($type == 2) {
        $class = ' class="hunter" ';
    }

    return '<li id="priv' . $post['id'] . '"' . $class . '><span>' . processPrivateMsg($post) . '</span></li>';
}

Die andere Klasse sehe ich in deinem Code, ich weiß nur nicht, wo wir sie hin tun müssen, weil ja das HTML jetzt ganz anders aussieht.
Zum Vergrößern anklicken....

Ich hab das ausprobiert das sieht verbuggt aus,
Ich hab mal jetzt das aktuelle design so zum testen nur als html und css hochgeladen..
So sieht es aktuell aus
https://hevale.net
 
Warum sieht das denn verbuggt aus? Im Code oder in der Darstellung?
Bei dem Link bin ich verwundert: Du wolltest doch unbedingt diesen Farbverlauf haben und deswegen haben wir doch das HTML und CSS umgestellt. Und von dem ist jetzt gar nichts mehr zu sehen?
 
Sempervivum hat gesagt.:
Warum sieht das denn verbuggt aus? Im Code oder in der Darstellung?
Bei dem Link bin ich verwundert: Du wolltest doch unbedingt diesen Farbverlauf haben und deswegen haben wir doch das HTML und CSS umgestellt. Und von dem ist jetzt gar nichts mehr zu sehen?
Zum Vergrößern anklicken....
Ja das war vor dem umstyling weil du ja geschrieben hast du weißt nicht wo das hinmuss womit du auch recht hast kannst es ja nicht sehen nur durch PHP oder HTML code.

So nun war ich so weit die uhrzeit mitzunehmen, also anzuzeigen. Und jetzt am ende bin ich bei den häkchen gescheitert. priv ist ne id und generiert eigentlich keinen css ich versteh auch nicht warum das verbuggt aussah eben beim testen in der Darstellung.
 
Also mit verbuggt meinst Du das unsaubere Aussehen? Das hat aber sicher nichts mit der ID zu tun.

Schon spät, ich mache jetzt Schluss. Dann bis morgen - gute Nacht!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück