18.08.2016, 11:23
Witam, chciałbym zmienić wygląd napisanej wypowiedzi w czacie by DVZ.
Utworzyłem sobie już w HTML / CSS kod jak miałby nowy czat wyglądać i jest wszystko okej. Po podmianie kodu CSS czatu DVZ z moim niestety na forum nie wygląda tak jak powinno. Usunąłem z czatu niepotrzebne na tą chwilę rzeczy, próbuję na wszystkie sposoby i nic się nie dzieje.
Chciałbym aby czat wyglądał tak:
![[Obrazek: 645c5800259da.png]](https://zapodaj.net/images/645c5800259da.png)
a wygląda po mojej podmianie kodu CSS tak:
![[Obrazek: 1b9e6d69aa8f7.png]](https://zapodaj.net/images/1b9e6d69aa8f7.png)
Kod CSS oraz HTML:
Utworzyłem sobie już w HTML / CSS kod jak miałby nowy czat wyglądać i jest wszystko okej. Po podmianie kodu CSS czatu DVZ z moim niestety na forum nie wygląda tak jak powinno. Usunąłem z czatu niepotrzebne na tą chwilę rzeczy, próbuję na wszystkie sposoby i nic się nie dzieje.
Chciałbym aby czat wyglądał tak:
a wygląda po mojej podmianie kodu CSS tak:
Kod CSS oraz HTML:
Kod:
<img src="https://lh5.googleusercontent.com/-MlnvEdpKY2w/AAAAAAAAAAI/AAAAAAAAAFw/x6wHNLJmtQ0/s0-c-k-no-ns/photo.jpg" class="avatar" />
<div class="user">SZEF | Steven</div>
<span class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</span>
<div class="date">10:49 AM</div>
<img src="https://lh5.googleusercontent.com/-MlnvEdpKY2w/AAAAAAAAAAI/AAAAAAAAAFw/x6wHNLJmtQ0/s0-c-k-no-ns/photo.jpg" class="avatar" />
<div class="user">SZEF | Steven</div>
<span class="text">Czat służy do luźnych pogawędek. Jeżeli masz problem bądź chcesz o coś zapytać - załóż temat na forum.</span>
<div class="date">10:49 AM</div>
body {
background: #f4f5f7;
color: #000;
font-family: Segoe UI;
font-size: 13px;
}
.avatar {
position: relative;
float: left;
border: 3px solid #FFF;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
overflow: hidden;
height: 39px;
width: 39px;
}
.user {
position: relative;
font-weight: bold;
font-size: 12px;
padding: 0px 0px;
margin-left: 55px;
}
.text {
position: fixed;
margin-left: 5px;
margin-top: 5px;
border-radius: 3px;
background: #fff;
padding: 8px;
}
.date {
font-size: 10px;
margin-top: 42px;
margin-left: 55px;
margin-bottom: 20px;
}