Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] Problem z odsunięciem od dołu.
Forum PHP.pl > Forum > Przedszkole
Pride
16.07.2008, 17:34:00
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.


HTML:
[HTML] pobierz, plaintext 
  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. <head>
  5. <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
  6.  
  7. <link rel="stylesheet" type="text/css" href="./s.css" />
  8. </head>
  9. <body>
  10. <div id="block">
  11. 	<div class="mini-block">
  12. 		<div class="block-inside">blablablabla #1</div>
  13. 		<div class="block-inside">blablablabla #1</div>
  14. 		<div class="bottom">To ma byc "przyklejone" do dolu na wysokosci ~10px.</div>
  15. 	</div>
  16. </div>
  17. </body>
  18. </html>
[HTML] pobierz, plaintext


CSS:
[HTML] pobierz, plaintext 
  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. }
[HTML] pobierz, plaintext


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
morawcik89
16.07.2008, 17:40:53
Może:
Kod
    margin-top: 70px;
Pride
16.07.2008, 18:28:06
Cytat(morawcik89 @ 16.07.2008, 18:40:53 ) *
Może:
Kod
    margin-top: 70px;
Czy ja niewyraźnie coś na pisałem? Bo wydaje mi się, że nie. Chodzi mi o BOTTOM nie top...
morawcik89
16.07.2008, 19:24:37
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;
Pride
16.07.2008, 19:53:13
Żaden z twoich -top'ow nie ruszył niczego nawet o minimetr 0.o
morawcik89
16.07.2008, 19:57:05
Może spróbuj z bottom: 10px; ale bez position: relative;
woj_tas
17.07.2008, 07:37:28 
[HTML] pobierz, plaintext 
  1. .mini-block {position:relative;}
  2. .bottom {position:absolute;bottom:0;}
[HTML] pobierz, plaintext
Pride
17.07.2008, 15:04:28
Cytat(woj_tas @ 17.07.2008, 08:37:28 ) *
[HTML] pobierz, plaintext 
  1. .mini-block {position:relative;}
  2. .bottom {position:absolute;bottom:0;}
[HTML] pobierz, plaintext

Nareszcie działa ^.-
Dzieki
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.