Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][CSS]Pozycjonowanie stopki
web_newb
post 19.01.2011, 01:05:30
Post #1





Grupa: Zarejestrowani
Postów: 13
Pomógł: 0
Dołączył: 18.01.2011

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

Witam wszystkich. Mój pierwszy post na forum a więc z krótkim wstępem.

Postanowiłem se dziś iż czas najwyższy nauczyć się tworzyć strony (HTML, CSS, PHP) . Siedzę więc od rana i składam jakiś podstawowy wygląd. Niestety nie idzie mi coś z wypozycjonowaniem stopki. Mój kod:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
  2. <html>
  3. <head>
  4.       <title>Moja strona</title>
  5.       <link rel="Stylesheet" type="text/css" href="mystyle.css" />
  6.  
  7. </head>
  8.  
  9. <body>
  10. <div>
  11. <div class="banner">banner</div>
  12. <div class="lewy">lewy</div>
  13. <div class="tresc">tresc
  14. <br />a<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  15. <br />a<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  16. <br />a<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  17. <br />a<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  18. <br />a<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  19. <br />a<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  20. <br />a<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />a
  21. </div>
  22. <div class="prawy">prawy</div>
  23. <div class="stopka">stopka</div>
  24. </div>
  25. </body>
  26. </html>
[HTML] pobierz, plaintext 


[CSS] pobierz, plaintext 
  1. body{
  2. padding-centre: 11em;
  3. font-family: Georgia, "Times New Roman", Times, serif;
  4. color: black;
  5. background-image: url(grafika/tlo4.png);
  6. background-attachment: fixed;
  7. }
  8.  
  9. div{
  10. position: relative;
  11. width: 1004px;
  12. margin: 0 auto;
  13. padding: 0px;
  14. }
  15.  
  16. div.banner{
  17. width: 1004px;
  18. height: 200px;
  19. background-color: #000000;
  20. }
  21.  
  22. div.lewy{
  23. position: absolute;
  24. left: 0px;
  25. top: 202px;
  26. width: 200px;
  27. height: 600px;
  28. background-color: #00A000;
  29. }
  30.  
  31. div.tresc{
  32. position: absolute;
  33. left: 202px;
  34. top: 202px;
  35. width: 600px;
  36. background-color: #4F4F4F;
  37. }
  38.  
  39. div.prawy{
  40. position: absolute;
  41. right: 0px;
  42. top: 202px;
  43. width: 200px;
  44. height: 600px;
  45. background-color: #00A000;
  46. }
  47.  
  48. div.stopka{
  49. position: fixed;
  50. height: 40px;
  51. bottom: 0;
  52. width: 1004;
  53. background-color: #00B000;
  54. }
[CSS] pobierz, plaintext


Aktualnie stopka przyczepiona jest do dolnej krawędzi przeglądarki. Zależy mi jednak aby zawsze była przyczepiona do spodu najniżej umieszczonego diva. Czyli jeśli tekst w div.tresc jest krótki, stopka przylega do spodu div-ow prawego i lewego. Jeżeli natomiast tekstu w div.tresc jest bardzo dużo, stopka styka się z dnem tego właśnie div-a.

Mam nadzieję że nie namotałem za bardzo tongue.gif

PS. Poczytałem trochę forum i napotkałem na uwagi dotyczące zbyt częstego stosowania position-absolute, a nie bardzo wiem jak się bez tego obejść.
Go to the top of the page
+Quote Post
ciekawskiii
post 19.01.2011, 02:19:35
Post #2





Grupa: Zarejestrowani
Postów: 467
Pomógł: 39
Dołączył: 7.11.2010
Skąd: Raz tu, raz tam

Ostrzeżenie: (30%)
XX---

Hmm te BRy sa super:) wywal position: fixed; ze stopki, chyba


--------------------
http://google.pl
Go to the top of the page
+Quote Post
Damonsson
post 19.01.2011, 02:35:05
Post #3





Grupa: Zarejestrowani
Postów: 2 355
Pomógł: 533
Dołączył: 15.01.2010
Skąd: Bydgoszcz

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

[CSS] pobierz, plaintext 
  1. body {
  2.     background: none repeat scroll 0 0 #FF0000;
  3.     background-image: url("grafika/tlo4.png");
  4.     color: black;
  5.     font-family: Georgia,"Times New Roman",Times,serif;
  6. }
  7. div {
  8.     margin: 0 auto;
  9.     padding: 0;
  10.     position: relative;
  11.     width: 1004px;
  12. }
  13. div.banner {
  14.     background-color: #000000;
  15.     height: 200px;
  16.     width: 1004px;
  17. }
  18. div.lewy {
  19.     background-color: #00A000;
  20.     float: left;
  21.     height: 600px;
  22.     width: 200px;
  23. }
  24. div.tresc {
  25.     background-color: #4F4F4F;
  26.     float: left;
  27.     width: 600px;
  28. }
  29. div.prawy {
  30.     background-color: #00A000;
  31.     float: left;
  32.     height: 600px;
  33.     width: 200px;
  34. }
  35. div.stopka {
  36.     background-color: #00B000;
  37.     clear: both;
  38.     height: 40px;
  39. }
[CSS] pobierz, plaintext

Praktycznie musiałbyś jeszcze zamienić kolejnością divy prawy,lewy,srodek i wyśrodkować srodek margin: 0 auto. Ale nie chciało mi się edytować HTML sad.gif

Masz zagadkę na całą noc, dlaczego tak, a nie tak jak Ty zrobiłeś winksmiley.jpg

Ten post edytował Damonsson 19.01.2011, 02:41:28
Go to the top of the page
+Quote Post
web_newb
post 19.01.2011, 12:37:24
Post #4





Grupa: Zarejestrowani
Postów: 13
Pomógł: 0
Dołączył: 18.01.2011

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

Kilka modyfikacji i działa jak należy. Wielkie dzięki thumbsupsmileyanim.gif
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: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

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

RSS Wersja Lo-Fi Aktualny czas: 16.07.2025 - 19:23
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn