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.


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


--------------------
Kto pyta - nie błądzi, kto szuka - znajduje.
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 7)
morawcik89
post
Post #2





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

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

Może:
Kod
    margin-top: 70px;
Go to the top of the page
+Quote Post
Pride
post
Post #3





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

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

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...

Ten post edytował Pride 16.07.2008, 19:44:31


--------------------
Kto pyta - nie błądzi, kto szuka - znajduje.
Go to the top of the page
+Quote Post
morawcik89
post
Post #4





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
Pride
post
Post #5





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

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

Żaden z twoich -top'ow nie ruszył niczego nawet o minimetr 0.o


--------------------
Kto pyta - nie błądzi, kto szuka - znajduje.
Go to the top of the page
+Quote Post
morawcik89
post
Post #6





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

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

Może spróbuj z bottom: 10px; ale bez position: relative;
Go to the top of the page
+Quote Post
woj_tas
post
Post #7





Grupa: Zarejestrowani
Postów: 230
Pomógł: 36
Dołączył: 31.03.2006
Skąd: Zielona Góra

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

[HTML] pobierz, plaintext 
  1. .mini-block {position:relative;}
  2. .bottom {position:absolute;bottom:0;}
[HTML] pobierz, plaintext


--------------------
Wesele
Go to the top of the page
+Quote Post
Pride
post
Post #8





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

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

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


--------------------
Kto pyta - nie błądzi, kto szuka - znajduje.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

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

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

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