Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Dziwne zachowanie diva w zależności od zawartości
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
Dominator
12.06.2015, 21:51:35
Witam,
spotkałem się dziś z dziwnym zachowaniem diva - polega ono na tym, że jeśli jest w nim dużo tekstu to jest OK, ale jak jest mało to sobie wędruje w prawo...

Jak to rozwiązać?

http://scr.hu/0f9/xxc27

Gdy zamiast lorem ipsum napisałbym jeszcze z 5-6 wyrazów to zachowałby się normalnie.
Comandeer
12.06.2015, 22:10:46
Kod pokaż (html i css) - z obrazka nic nie wyczytamy
Dominator
13.06.2015, 11:01:38 
[PHP] pobierz, plaintext 
  1. <div id="messageContainer">
  2.                     <div class="imageBox"><div id="img"></div></div>
  3.                     <div id="boxText">
  4.                         wiadomosc1
  5.                     </div>
  6.                 </div>
  7.  
[PHP] pobierz, plaintext 


[PHP] pobierz, plaintext 
  1. #img
  2. {
  3.     margin-top: 0%;
  4.     border-radius: 25px;
  5.     margin-left: 10%;
  6.     margin-bottom: 2%;
  7.     background-image:url(../img/avatar.png);
  8.     width: 48px;
  9.     height: 48px;
  10.     background-repeat: no-repeat;
  11.     background-size:auto;
  12.     float: left;
  13. }
  14.  
  15. .imageBox
  16. {
  17.  
  18.     margin-bottom: 5%;
  19.     margin-top: 2%%;
  20.     margin-left: -10%;
  21. }
  22.  
  23. #messageContainer
  24. {
  25.     /*
  26.     border-bottom: 2px solid #1976D2; 
  27.     */
  28.  
  29. }
  30.  
  31. #boxText
  32. { 
  33.     margin-top: -3%;
  34.     margin-bottom: 2%;
  35.     width: auto;
  36.     background-color: #E3F2FD;
  37.     height: auto;
  38.     padding: 1.5%;
  39.     margin-left: 8.5%;
  40.     margin-right: 5%;
  41.  
  42.     overflow:hidden;
  43.  
  44.     position: relative;
  45.  
  46.     -webkit-border-radius: 15px;
  47.     -moz-border-radius: 15px;
  48.     border-radius: 15px;
  49.  
  50. }
[PHP] pobierz, plaintext


Ktoś pomoże?
RysQ
13.06.2015, 11:50:01
W działaniu tego kodu nie widzę opisanego przez Ciebie problemu - z dostarczonego obrazka. Być może masz jeszcze jakieś inne reguły, które wpływają na te elementy i/+ dodatkowe tagi html?

Natomiast mam kilka uwag:

Cytat(Dominator @ 13.06.2015, 12:01:38 ) *
[HTML] pobierz, plaintext 
  1. <div id="messageContainer"> <- 1. Jeżeli to jest element powtarzalny zmień id na class
  2.                     <div class="imageBox"><div id="img"></div></div> <- 2. po co Ci tutaj dodatkowy div#img ? Dodatkowo patrz punkt 1.
  3.                     <div id="boxText"> <- 3. Jeśli masz tutaj tyko treść wiadomości semantycznie <p></p> będzie lepsze. Patrz 1.
  4.                         wiadomosc1
  5.                     </div>
  6.                 </div>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
  1. #img
  2. {
  3.     margin-top: 0%; /* po co to? */
  4.     border-radius: 25px;
  5.     margin-left: 10%;
  6.     margin-bottom: 2%;
  7.     background-image:url(../img/avatar.png);
  8.     width: 48px;
  9.     height: 48px;
  10.     background-repeat: no-repeat;
  11.     background-size:auto;  /* a to? */
  12.     float: left;
  13. }
  14.  
  15. .imageBox
  16. {
  17.     
  18.     margin-bottom: 5%;
  19.     margin-top: 2%%; /* 1 % wystarczy */
  20.     margin-left: -10%;
  21. }
  22.  
  23. #messageContainer
  24. {
  25.     /*
  26.     border-bottom: 2px solid #1976D2; 
  27.     */
  28.     
  29. }
  30.  
  31. #boxText
  32. { 
  33.     margin-top: -3%;
  34.     margin-bottom: 2%;
  35.     width: auto; /* po co */
  36.     background-color: #E3F2FD;
  37.     height: auto;  /* po co */
  38.     padding: 1.5%;
  39.     margin-left: 8.5%;
  40.     margin-right: 5%;
  41.     
  42.     overflow:hidden; /* jeżeli nie masz szerokości i wysokości określonej w jakichś jednostkach ten parametr nic nie wnosi */
  43.  
  44.     position: relative;
  45.     
  46.     -webkit-border-radius: 15px;
  47.     -moz-border-radius: 15px;
  48.     border-radius: 15px;
  49.     
  50. /*No chyba, że gdzieś wcześniej masz jakieś reguły CSS, po czym musisz elementom przypisywać domyślne wartości.*/
  51.  
  52. }
[CSS] pobierz, plaintext
Dominator
13.06.2015, 12:09:55
Wystarczyło dać zrobić tak:

[PHP] pobierz, plaintext 
  1. <div id="boxText">
  2.                         <p>tekst1</p>
  3.                     </div>
[PHP] pobierz, plaintext


dzięki za pomoc! smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.