Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> CSS - Wysrodkowanie strony+ automatyczne powiekszanie
pajdakks
post 13.01.2010, 16:26:48
Post #1





Grupa: Zarejestrowani
Postów: 51
Pomógł: 0
Dołączył: 13.01.2010

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

Witam mam problem, ponieważ nie wiem jak wyśrodkować stronę i jak zrobić żeby środek mi się sam rozszerzał, dokładnie chodzi o ten blok #glowna-03.
Mam nadzieję, że mi ktoś pomoże ;p. Pozdrawiam winksmiley.jpg





[XML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>glowna</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
  6. <style type="text/css">
  7. <!--
  8.  
  9. #Table_01 {
  10.  
  11. text-align: center; 
  12. text-align: center; 
  13. position:absolute;
  14. left:0px;
  15. top:0px;
  16. width:400px;
  17. height:768px;
  18. }
  19.  
  20. #glowna-01_ {
  21. background-image: url("images/glowna_01.gif");
  22. position:absolute;
  23. left:0px;
  24. top:0px;
  25. width:400px;
  26. height:31px;
  27. }
  28.  
  29. #glowna-02_ {
  30. background-image: url("images/glowna_02.gif");
  31. position:absolute;
  32. left:0px;
  33. top:31px;
  34. width:20px;
  35. height:696px;
  36. }
  37.  
  38. #glowna-03_ {
  39. background-color:#2CA3DA;
  40. background-repeat: repeat-x;
  41. position:absolute;
  42. left:20px;
  43. top:31px;
  44. width:361px;
  45. height:696px;
  46. }
  47.  
  48. #glowna-04_ {
  49. background-image: url("images/glowna_04.jpg");
  50. position:absolute;
  51. left:381px;
  52. top:31px;
  53. width:19px;
  54. height:696px;
  55. }
  56.  
  57. #glowna-05_ {
  58. background-image: url("images/glowna_05.gif");
  59. position:absolute;
  60. left:0px;
  61. top:727px;
  62. width:400px;
  63. height:41;
  64. }
  65.  
  66. -->
  67. </style>
  68. </head>
  69. <div id="Table_01">
  70. <div id="glowna-01_">
  71. </div>
  72. <div id="glowna-02_">
  73. </div>
  74. <div id="glowna-03_">
  75.  
  76. </div>
  77. <div id="glowna-04_">
  78. </div>
  79. <div id="glowna-05_">
  80. </body>
  81. </html>
[XML] pobierz, plaintext
Go to the top of the page
+Quote Post
Volume
post 13.01.2010, 16:34:36
Post #2





Grupa: Zarejestrowani
Postów: 283
Pomógł: 11
Dołączył: 11.10.2004
Skąd: 3c

Ostrzeżenie: (10%)
X----

Po co CI tam position? Zrob to po przez float i bedzie Ci latwiej. Position nie wysrodkujesz - nadales mu wszystkie wymiary i wypozycjonowales, a do Twojego celu zupelnie nie tedy droga....

Poza tym jesli chcesz zeby strona Ci sie dopasowywala do wielkosci okna to jdnostki w %.

Ten post edytował Volume 13.01.2010, 16:37:12
Go to the top of the page
+Quote Post
pajdakks
post 13.01.2010, 16:41:09
Post #3





Grupa: Zarejestrowani
Postów: 51
Pomógł: 0
Dołączył: 13.01.2010

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

Czyli muszę usnąć :
[XML] pobierz, plaintext 
  1. position:absolute;
[XML] pobierz, plaintext
?
I co dalej ? ;p
Go to the top of the page
+Quote Post
Volume
post 13.01.2010, 17:26:10
Post #4





Grupa: Zarejestrowani
Postów: 283
Pomógł: 11
Dołączył: 11.10.2004
Skąd: 3c

Ostrzeżenie: (10%)
X----

Przeanalizuj sobie to:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>glowna</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
  6. <style type="text/css">
  7. <!--
  8. * {
  9. margin:0;
  10. padding:0;
  11. } 
  12. body {
  13.   text-align: center;
  14. }
  15. #all {
  16.   width: 800px;
  17.   text-align: left;
  18.   margin: 0 auto;
  19. }
  20.  
  21. #top {
  22. background: red;
  23. height: 50px;
  24. }
  25.  
  26. #left {
  27. background: yellow;
  28. width: 100px;
  29. float: left;
  30. }
  31.  
  32. #cent {
  33. background-color:#2CA3DA;
  34. width: 600px;
  35. float: left;
  36. }
  37.  
  38. #right {
  39. background: green;
  40. width: 100px;
  41. float: left;
  42. }
  43.  
  44. #stopka {
  45. background: orange;
  46. clear: both;
  47. }
  48.  
  49. -->
  50. </style>
  51. </head>
  52. <div id="all">
  53.   <div id="top">top</div>
  54.   <div id="left">left</div>
  55.   <div id="cent">
  56.   cent cent cent cent cent cent cent cent cent cent cent cent cent cent 
  57.   cent cent cent cent cent cent cent cent cent cent cent cent cent cent
  58.   cent cent cent cent cent cent cent cent cent cent cent cent cent cent 
  59.   cent cent cent cent cent cent cent cent cent cent cent cent cent cent
  60.   </div>
  61.   <div id="right">right</div>
  62.   <div id="stopka">stopka</div>
  63. </div>
  64.  
  65. </body>
  66. </html>
[HTML] pobierz, plaintext

Osiagniecie tabelowego modelu (display:table-cell) w css jest mozliwe ale nie wszystkie przegladarki sobie z tym radza wiec najlepiej kombinowac dodatkowo po przez obrazki w tle.

Ten post edytował Volume 14.01.2010, 17:12:23
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · 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: 24.07.2025 - 19:57
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn