Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [HTML]ułożenie divów
--koshin--
post
Post #1





Goście
Witam.
Panie i panowie może ktoś z was pomoże bo mi już zbrakło pomysłów jak to posklejać a chce przerobić szablon z tabelek na divy:
kod html
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>szablon mebloag</title>
  6. <link href="nowyszablon.css" rel="stylesheet" type="text/css" />
  7. </head>
  8.  
  9. <body>
  10. <div id="góra" style="width:1000px ; height:142px;"></div>
  11. <div id="doklikania" style="height:43px; width:1000px;">
  12. <div id="klik1"></div>
  13. <div id="klik2"></div>
  14. <div id="klik3"></div>
  15. <div id="klik4"></div>
  16. <div id="klik5"></div>
  17. <div id="klik6"></div></div>
  18. <div>
  19. <div id="logo" style="width:1000px; height:244; clear:both;"></div>
  20. <div id="witamy"></div></div>
  21. <div id="lewakloumnatla" style="width:86px; height:100%;"></div>
  22. <div id="lewakloumnatla2" style="width:33px;"></div>
  23. <div id="lewakloumnatla3" style="width:251px;">
  24. <div id="kontakt"></div>
  25. <div id="tlo1"></div>
  26. <div id="wysylka"></div>
  27. <div id="tlo2"></div>
  28. <div id="platnosc" style="width:251px; height:61px;"></div>
  29. <div id="tlo3"> </div>
  30. <div id="koniectabeli" style="width:251px; height:26px;"></div>
  31. </div></div>
  32. <div id="tekst" style="width:544px; height:440px;">tekst tesk teskst teskstekst tesk teskst teskstekst tesk teskst teskst
  33. ekst tesk teskst teskstekst tesk teskst teskstekst tesk teskst teskstekst tesk teskst teskstekst tesk teskst teskstekst tesk teskst teskstekst tesk teskst teskstekst tesk teskst teskstekst tesk teskst teskstekst tesk teskst teskstekst tesk teskst teskstekst tesk teskst teskstekst tesk teskst teskstekst tesk teskst teskstekst tesk teskst teskstekst tesk teskst teskstekst tesk teskst teskstekst tesk teskst teskstekst tesk teskst teskstekst tesk teskst teskstekst tesk teskst teskstekst tesk teskst teskstekst tesk teskst teskstekst tesk teskst teskstekst tesk teskst teskstekst tesk teskst teskstekst tesk teskst teskstekst tesk teskst teskstekst tesk teskst teskstekst tesk teskst teskstekst tesk teskst teskstekst tesk teskst teskstekst tesk teskst teskstekst tesk teskst teskstekst tesk teskst teskstekst tesk teskst teskstekst tesk teskst teskstekst tesk teskst teskstekst tesk teskst teskstekst tesk teskst teskstekst tesk teskst teskstekst tesk teskst teskstek</div>
  34. <div id="koniectabeli2" style="width:56px; height:100%;"></div>
  35. </div>
  36. <div id="stopka" style="height:70px; width:1000px;"></div>
  37.  
  38. </body>
  39. </html>
  40.  
[HTML] pobierz, plaintext


kod css:
[HTML] pobierz, plaintext 
  1. @charset "utf-8";
  2. /* CSS Document */
  3. html , body {
  4. 	background-color:#ffffff;
  5. 	 width:1000px;
  6. 	  height: 100%;
  7.   margin: 0;
  8.   padding: 0;
  9.  
  10. }
  11. #góra { 
  12. background-image: url(images/nowyszablon_01.jpg);
  13. width:1000px;
  14. height:142; 
  15. }
  16. #klik1 {
  17. 	background-image:url(images/nowyszablon_02.jpg); 
  18. 	width:86px; 
  19. 	height:43px;
  20. 	float:left;
  21. }
  22. #klik2 {
  23. 	background-image:url(images/nowyszablon_03.jpg); 
  24. 	width:355px;   
  25. 	height:43px;
  26. 	float:left;
  27. }
  28. #klik3 {
  29. 	background-image:url(images/nowyszablon_04.jpg); 
  30. 	width:159px; 
  31. 	height:43px;
  32. 	float:left;
  33. }
  34. #klik4 {
  35. 	background-image:url(images/nowyszablon_05.jpg); 
  36. 	width:134px; 
  37. 	height:43px;
  38. 	float:left;
  39. }
  40. #klik5 {
  41. 	background-image:url(images/nowyszablon_06.jpg); 
  42. 	width:208px; 
  43. 	height:43px;
  44. 	float:left;
  45. }
  46. #klik6 {
  47. 	background-image:url(images/nowyszablon_07.jpg); 
  48. 	width:58px; 
  49. 	height:43px;
  50. 	float:left;
  51. }
  52. #logo {
  53. 	background-image:url(images/nowyszablon_09.jpg);
  54. 	width:1000px;
  55. 	height:244px; 
  56. 	margin-left:1px;
  57. }
  58. #witamy { 
  59. background-image:url(images/nowyszablon_10.jpg);
  60. width:1000px;
  61. height:61px;
  62. }
  63. #lewakloumnatla {
  64. 	background-image:url(images/nowyszablon_11.jpg); background-repeat:repeat;
  65. 	width:86; 
  66. 	height:100%; 
  67. 	float:left;
  68. }
  69. #lewakloumnatla2 { 
  70. background-color:#FFF; background-repeat:repeat;
  71. 	width:33px; 
  72. 	height:440px;
  73. 	float:left;
  74. }
  75. #lewakloumnatla3 { 
  76. 	width:251; 
  77. 	float:left;
  78. }
  79. #kontakt { 
  80. background-image:url(images/nowyszablon_13.jpg); 
  81. width:251px;
  82. height:50px; 
  83. }
  84. #tlo1 { 
  85. background-image:url(images/nowyszablon_17.jpg); 
  86. background-repeat:repeat;
  87. width:221px; 
  88. font-family:Verdana, Geneva, sans-serif; 
  89. padding:10px 10px 10px 20px; 
  90.  
  91. }
  92. #wysylka { 
  93. background-image:url(images/nowyszablon_18.jpg); 
  94. width:251px;
  95. height:56px; 
  96.  
  97. }
  98. #tlo2 { 
  99. background-image:url(images/nowyszablon_19.jpg); 
  100. background-repeat:repeat;
  101. width:221px; 
  102. font-family:Verdana, Geneva, sans-serif; 
  103. padding:10px 10px 10px 20px; 
  104.  
  105. }
  106. #platnosc { 
  107. background-image:url(images/nowyszablon_20.jpg); 
  108. width:251px;
  109. height:61px; 
  110. }
  111. #tlo3 { 
  112. background-image:url(images/nowyszablon_21.jpg); 
  113. background-repeat:repeat;
  114. width:221px; 
  115. font-family:Verdana, Geneva, sans-serif; 
  116. padding:10px 10px 10px 20px; 
  117. }
  118. #koniectabeli { 
  119. background-image:url(images/nowyszablon_22.jpg);
  120. background-repeat:repeat-y; 
  121. width:251px;
  122. height:26px; 
  123. }
  124. #tekst { 
  125. background-color:#FFF; 
  126. background-repeat:repeat;
  127. width:548px; 
  128. font-family:Verdana, Geneva, sans-serif; 
  129. padding:10px 10px 10px 20px; 
  130. float:left;
  131. }
  132. #koniectabeli2 { 
  133. background-image:url(images/nowyszablon_16.jpg); 
  134. background-repeat:repeat; 
  135. width:56px; 
  136. height:100%; 
  137. float:left; 
  138. }
  139. #stopka { 
  140. background-image:url(images/nowyszablon_23.jpg); background-repeat:no-repeat;
  141. width:1000px;
  142. height:70px; 
  143. float:left; 
  144. }
  145.  
[HTML] pobierz, plaintext


Rozjeżdżają mi się boki jak dodam tekst do tabelek.
Dla was pewnie to proste ale ja już nie mam pojęcia co robię źle. parament background-repeat nic nie zmienia?
Całość do pooglądania tutaj:
http://firmasitko.pl/szablon/nowyszablon.html - tuaj wygląda ok ale ta wersja już nie:http://firmasitko.pl/szablon/nowyszablon3.html oraz ta http://firmasitko.pl/szablon/nowyszablon3.html w jednej rozjeżdżają się boki a w drugim stopka się nie przesuwa?
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
nicewik
post
Post #2





Grupa: Zarejestrowani
Postów: 4
Pomógł: 0
Dołączył: 20.06.2011

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

Cytat(t_e_l @ 21.06.2011, 02:02:25 ) *
Doctype powinien wyglądać tak
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
[HTML] pobierz, plaintext

Po co tworzysz tyle pustych divów ? (div jest do grupowania elementów, pusty div jest trochę bez sensu)
Po co w dokumencie html wpisujesz rozmiary w poszczególnych divach skoro masz to samo wpisane w CSS.
Menu tworzy się na liście...

Dlatego że jak nie sprecyzuje rozmiaru w div to nie pokazuje mi tła.
Overflow nic nie daje . Działą tylko scroll ale ja chce żeby strona sama się rozciągała. Dodatkowo jak rozwiązać problem z dłuższym tekstem np. w płatności tak aby boki tez się rozjeżdżały.
Go to the top of the page
+Quote Post

Posty w temacie
- -koshin-   [HTML]ułożenie divów   20.06.2011, 21:41:17
- - -koshin-   Tutaj jak pociąłem layout www.firmasitko.pl/szablo...   20.06.2011, 21:44:34
- - korex   u mnie wszystko wygląda ok... Jakiej używasz przeg...   20.06.2011, 21:45:31
- - nicewik   sorkii ale zarejestrowałem si na inny nick. Ale kt...   20.06.2011, 22:20:27
- - korex   to z 4 się rozjeżdża, wczesniej tego nie podałeś w...   20.06.2011, 22:30:38
- - t_e_l   Doctype powinien wyglądać tak [HTML] pobierz, plai...   21.06.2011, 01:02:25
- - nicewik   Cytat(t_e_l @ 21.06.2011, 02:02:25 ) ...   21.06.2011, 07:18:50
- - askone   Bardzo złe podejście do tematu... Na samym początk...   21.06.2011, 09:51:44
- - nicewik   Ok spróbuje tylko czy jak zdefiniuje rozmiar rodzi...   21.06.2011, 10:44:44
- - Pawel_W   @askone, stosowanie id="left" i id=...   21.06.2011, 10:46:37
|- - askone   Cytat(Pawel_W @ 21.06.2011, 11:46:37 ...   21.06.2011, 10:51:21
- - nicewik   a tak na szybko ja ustalić styl dla menu menu_1 ob...   21.06.2011, 10:56:49

« 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: 26.12.2025 - 20:54
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn