Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [HTML][CSS] Problem z odsunięciem od dołu.
Pride
post
Post #1





Grupa: Zarejestrowani
Postów: 139
Pomógł: 11
Dołączył: 31.01.2005
Skąd: Bydgoszcz

Ostrzeżenie: (0%)
-----


Witam.
Szukam rozwiązania pewnego problemu. Próbuje coś z tym zrobić od dobrych 25min i nie mam już najmniejszego pomysłu jak to zrobić. Tak jak widać na poniższym rys. chciałbym aby to białe pole (div - bottom) był odsunięty o 10px od dołu tego wewnętrznego bloku (mini-block). Moglibyście coś mi doradzić?

Rys.
(IMG:http://img397.imageshack.us/img397/4206/testlm7.th.jpg)

HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
  5.  
  6. <link rel="stylesheet" type="text/css" href="./s.css" />
  7. </head>
  8. <div id="block">
  9. <div class="mini-block">
  10. <div class="block-inside">blablablabla #1</div>
  11. <div class="block-inside">blablablabla #1</div>
  12. <div class="bottom">To ma byc "przyklejone" do dolu na wysokosci ~10px.</div>
  13. </div>
  14. </div>
  15. </body>
  16. </html>


CSS:
  1. /* Common */
  2.  
  3. * { font-family: Tahoma, Verdana, sans-serif; }
  4.  
  5. html { margin: 0; padding: 0; font-size: 11px; }
  6.  
  7. body {
  8. color: #000;
  9. margin: 0;
  10. padding: 0;
  11. background-color: #FFF;
  12. text-align: center;
  13. }
  14.  
  15. /* */
  16.  
  17. #block {
  18. margin: 0;
  19. padding: 0;
  20. background-color: #F1F1F1;
  21. width: 300px;
  22. height: 96px;
  23. position: relative;
  24. float: left;
  25. text-align: center;
  26. top: 10px;
  27. left: 10px;
  28. }
  29.  
  30. div.mini-block {
  31. background-color: #E0E0E0;
  32. height: 80px;
  33. width: 284px;
  34. margin: 5px;
  35. padding: 3px;
  36. }
  37.  
  38. div.block-inside {
  39. margin-top: 1px;
  40. margin-bottom: 3px;
  41. text-align: justify;
  42. }
  43.  
  44. div.bottom {
  45. color: #E69905;
  46. background-color: #FFF;
  47. text-align: center;
  48. position: relative;
  49. }


P.S. Nie patrzcie na to, że czasami ten CSS jest bzdurny, ale wycinałem go, jak i html'a z większego pliku i usuwałem co zbędne - może o czymś zapomniałem ;p
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi
morawcik89
post
Post #2





Grupa: Zarejestrowani
Postów: 56
Pomógł: 1
Dołączył: 15.07.2008

Ostrzeżenie: (0%)
-----


Cytat
div.mini-block {
height: 80px;
}


Dasz tamtemu elementowi -top: 70px (może trochę mniej) i ustawi ci go na ok 70px od góry czyli gdzieś ok 10px od dołu.

PS Musisz jeszcze doliczyć rozmiar tego elementu.
PS2 Jak tak bardzo zależy ci na bottom to daj -bottom: 10px;
Go to the top of the page
+Quote Post

Posty w temacie


Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 7.10.2025 - 21:15