Mam podstawową stronę czatu. Pole czatu pośrodku, użytkownicy wciskają Enter podczas wysyłania wiadomości. Po prawej stronie znajduje się wypełniona ajax lista aktualnie zalogowanych użytkowników.
.chat {
margin-top: 10px;
}
.chat .messages {
background-color: white;
border: 1px solid #ccc;
width: 300px;
height: 250px;
padding: 10px;
resize: both;
overflow: auto;
margin: 0 auto;
font-weight: bold;
}
.present {
float: right;
margin-top: -400px;
margin-right: 50px;
color: white;
}
.present .name {
text-align: center;
}
.name::before {
content: url("img/blue_dot.png");
margin-right: 10px;
}<div class="chat">
<div class="messages"></div>
<input type="image" id="imgClick" src="css/img/arrow.png">
<textarea class="entry" placeholder="Enter or arrow to send Shift+enter for new line"></textarea>
</div>
<div class="indexBoxes">
<form action="index.php" method="POST">
<input type="submit" class="btn btn-info" name="logout" value="Logout">
</form>
</div>
<div class="present">
</div>Teraz, odkąd ustawiłem możliwość zmiany rozmiaru okna czatu (resize:both), gdy użytkownik próbuje zmienić jego rozmiar, lista obecnych użytkowników po prawej stronie ekranu <div class="present"></div> również przesuwa się wraz z nim. Jeśli użytkownik zmieni wysokość - przeciągnie ją w dół - lista również się schodzi. Próbowałem temu zapobiec, nadając liście position: absolute, aby usunąć ją z przepływu, a następnie przesunąć ją z powrotem w prawo, ale to nie zadziałało, nadal porusza się z czatem. Próbowałem też nie używać margin: 0 auto do wyśrodkowania pudełka, myśląc, że przyniesie to jakiś efekt, ale to też nie zadziałało.
Wszelkie sugestie byłyby bardzo mile widziane.
Dzięki!
1 odpowiedź
Jeśli dobrze rozumiem, próbujesz naprawić „div” z klasą „obecnie” w prawym górnym rogu, prawda? Jeśli dobrze zrozumiałem Twój problem, spróbuj zajrzeć do fragmentu kodu, który przygotowałem dla Twojego problemu.
.chat {
margin-top: 10px;
}
.chat .messages {
background-color: white;
border: 1px solid #ccc;
width: 300px;
height: 250px;
padding: 10px;
resize: both;
overflow: auto;
margin: 0 auto;
font-weight: bold;
}
.present {
float: right;
margin-right: 50px;
position: absolute; /*added*/
right: 0; /*added*/
top: 0; /*added*/
color: black;
}
.present .name {
text-align: center;
}
.name::before {
content: url("img/blue_dot.png");
margin-right: 10px;
}<div class="chat">
<div class="messages"></div>
<input type="image" id="imgClick" src="css/img/arrow.png">
<textarea class="entry" placeholder="Enter or arrow to send Shift+enter for new line"></textarea>
</div>
<div class="indexBoxes">
<form action="index.php" method="POST">
<input type="submit" class="btn btn-info" name="logout" value="Logout">
</form>
</div>
<div class="present">User123<br>User321</div>Daj mi znać, jeśli potrzebujesz dalszego wyjaśnienia.
Podobne pytania
Nowe pytania
html
HTML (HyperText Markup Language) to język znaczników służący do tworzenia stron internetowych i innych informacji wyświetlanych w przeglądarce internetowej. Pytania dotyczące HTML powinny zawierać minimalny możliwy do odtworzenia przykład i pewne wyobrażenie o tym, co próbujesz osiągnąć. Ten tag jest rzadko używany samodzielnie i często jest łączony z [CSS] i [javascript].