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
askone
post
Post #2





Grupa: Zarejestrowani
Postów: 654
Pomógł: 121
Dołączył: 27.10.2007
Skąd: Poznań, Łódź

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

Bardzo złe podejście do tematu...
Na samym początku wrzuć całość strony do jednego wielkiego kontenera, który będziesz mógł wyśrodkować i ustawić mu szerokość.
Osobiście stosuję poniższy szablon:
[HTML] pobierz, plaintext 
  1. <div id="container">
  2. 	<div id="header">
  3. 		<div id="logo"></div>
  4. 		<ul id="navigation">
  5. 			<li>menu_1</li>
  6. 			<li>menu_2</li>
  7. 			<li>menu_3</li>
  8. 		</ul>
  9. 	</div>
  10. 	<div id="content">
  11. 		<div id="sidebar"></div>
  12. 		<div id="main"></div>
  13. 	</div>
  14. 	<div id="footer">
  15. 	</div>
  16. </div>
[HTML] pobierz, plaintext


Pozostaje tylko wszystko ładnie ostylować i gotowe (IMG:style_emoticons/default/wink.gif) Konwertując szablon z tabelek na div nie musisz trzymać się takiego podziału jaki miałeś na tabelkach...

Pozdrawiam

Ten post edytował askone 21.06.2011, 10:52:13
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: 29.12.2025 - 19:26
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn