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:
[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
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
- Pride   [HTML][CSS] Problem z odsunięciem od dołu.   16.07.2008, 17:34:00
- - morawcik89   Może: Kod margin-top: 70px;   16.07.2008, 17:40:53
|- - Pride   Cytat(morawcik89 @ 16.07.2008, 18:40...   16.07.2008, 18:28:06
- - morawcik89   Cytatdiv.mini-block { height: 80px; } Dasz tamte...   16.07.2008, 19:24:37
- - Pride   Żaden z twoich -top'ow nie ruszył niczego nawe...   16.07.2008, 19:53:13
- - morawcik89   Może spróbuj z bottom: 10px; ale bez position: rel...   16.07.2008, 19:57:05
- - woj_tas   [HTML] pobierz, plaintext .mini-block {position:re...   17.07.2008, 07:37:28
- - Pride   Cytat(woj_tas @ 17.07.2008, 08:37:28 ...   17.07.2008, 15:04:28

« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 8.10.2025 - 21:07
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn