Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [XHTML] Problem z divem
Forum PHP.pl > Forum > Przedszkole
Oryos
22.09.2010, 15:35:38
Witam. Mam bardzo głupi i banalny problem, ale męczę się z tym już dłuższą chwilę i nie potrafię nic wykombinować. Wygląda to tak:



Tutaj kod:

[XML] pobierz, plaintext 
  1. <div id="post">
  2.     <div id="posty1">
  3.         <div class="posty_tresc"><a href="#">Lorem ipsum dolor sit amet</a></div>
  4.         <div class="posty_tresca">as</div>
  5.         <div class="posty_trescd">22.09.2010</div>
  6.     </div>
  7.     <div id="posty2">
  8.         <div class="posty_tresc">Lorem ipsum dolor sit amet</div>
  9.         <div class="posty_tresca">as</div>
  10.         <div class="posty_trescd">22.09.2010</div>
  11.     </div>
  12.     <div id="posty3">
  13.         <div class="posty_tresc">Lorem ipsum dolor sit amet</div>
  14.         <div class="posty_tresca">as</div>
  15.         <div class="posty_trescd">22.09.2010</div>
  16.     </div>
  17. </div>
[XML] pobierz, plaintext 


[XML] pobierz, plaintext 
  1. #post {
  2.         height:163px;
  3.         width:453px;
  4.         float:left;
  5.     }
  6. .posty_tresc {
  7.         padding-top:7px;
  8.         padding-left:20px;
  9.         font-family:Tahoma;
  10.         font-size:12px;
  11.         color:#ffffff;
  12.         float:left;
  13.     }
  14. .posty_tresca {
  15.         padding-top:7px;
  16.         padding-left:240px;
  17.         font-family:Tahoma;
  18.         font-size:12px;
  19.         color:#ffffff;    
  20.     }
  21. .posty_trescd {
  22.         padding-top:7px;
  23.         padding-left:350px;
  24.         font-family:Tahoma;
  25.         font-size:12px;
  26.         color:#ffffff;
  27.     }
  28. #posty1 {
  29.         background:url(images/a_18.jpg) no-repeat;
  30.         width:453px;
  31.         height:31px;
  32.     }
  33. #posty2 {
  34.         background:url(images/a_20.jpg) no-repeat;
  35.         width:453px;
  36.         height:31px;
  37.     }
  38. #posty3 {
  39.         background:url(images/a_22.jpg) no-repeat;
  40.         width:453px;
  41.         height:51px;
  42.  
  43.     }
[XML] pobierz, plaintext


I teraz jak zrobić żeby ta data była na równi z nazwą newsa i autorem ?
Daiquiri
22.09.2010, 15:44:48
A nie łatwiej (zamiast kombinować z paddingami) ustawić te trzy divy z lorem, as i datą obok siebie za pomocą float: left? Na przykład tak:
[HTML] pobierz, plaintext 
  1. .posty-lorem {
  2. padding-top:7px; font-family:Tahoma; font-size:12px; color:#ffffff; float:left; width: 253px;
  3. }
  4.  
  5. .posty-as {
  6. padding-top:7px; font-family:Tahoma; font-size:12px; color:#ffffff; float:left; width: 100px;
  7. }
  8.  
  9. .posty-data {
  10. padding-top:7px; font-family:Tahoma; font-size:12px; color:#ffffff; float:left; width: 100px;
  11. }
  12.  
  13. .posty {
  14.     background:url(images/a_18.jpg) no-repeat; width:453px; height:31px;
  15. }
[HTML] pobierz, plaintext
Szerokości możesz zawsze ustawić wg uznania.

i do tego:
[HTML] pobierz, plaintext 
  1.   <div class="posty">
  2.         <div class="posty-lorem">Lorem ipsum dolor sit amet</div>
  3.         <div class="posty-as">as</div>
  4.         <div class="posty-data">22.09.2010</div>
  5.     </div>
  6.  
  7.    <div class="posty">
  8.         <div class="posty-lorem">Lorem ipsum dolor sit amet</div>
  9.         <div class="posty-as">as</div>
  10.         <div class="posty-data">22.09.2010</div>
  11.     </div>
  12.  
  13.     <div class="posty">
  14.         <div class="posty-lorem">Lorem ipsum dolor sit amet</div>
  15.         <div class="posty-as">as</div>
  16.         <div class="posty-data">22.09.2010</div>
  17.     </div>
[HTML] pobierz, plaintext
thurinon
22.09.2010, 15:45:40
A jak byś pobawił się z float: ;
a jak nie to zawsze jest jeszcze: margin-top: -20px; (tak na oko :-]
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.