Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML]ułożenie divów
Forum PHP.pl > Forum > Przedszkole
-koshin-
20.06.2011, 21:41:17
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?

-koshin-
20.06.2011, 21:44:34
Tutaj jak pociąłem layout www.firmasitko.pl/szablon/lay.jpg
korex
20.06.2011, 21:45:31
u mnie wszystko wygląda ok... Jakiej używasz przeglądarki?
nicewik
20.06.2011, 22:20:27
sorkii ale zarejestrowałem si na inny nick.
Ale które ci wyświetla normalnie?
http://firmasitko.pl/szablon/nowyszablon4.html tło z tabeli zostaje w miejscu.
http://firmasitko.pl/szablon/nowyszablon3.html
U mnie na Firefox i chrome się rozjeżdżają. Natomiast http://firmasitko.pl/szablon/nowyszablon3.html. Internet explorer pokazuje ok.
korex
20.06.2011, 22:30:38
to z 4 się rozjeżdża, wczesniej tego nie podałeś wiec tylko miałem 3 i działał poprawnie... To że się rozjadą to normalne.. grafika stałej wysokości a overflow dla div#tekst nie jest ustawiony... po wtóre usuń </div> z 35 linni bo z tego co pokazuje mój notepad to on nie zamyka niczego...
t_e_l
21.06.2011, 01: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...



nicewik
21.06.2011, 07:18:50
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.
askone
21.06.2011, 09:51:44
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 wink.gif Konwertując szablon z tabelek na div nie musisz trzymać się takiego podziału jaki miałeś na tabelkach...

Pozdrawiam
nicewik
21.06.2011, 10:44:44
Ok spróbuje tylko czy jak zdefiniuje rozmiar rodzica to podrzędne divy będą się rozciągać . W sumie to menu lepiej zapisać poprze <li>. Z tym że to robota od nowa , a póki co czy macie jakieś rozwiązanie mojego problemu?
Pawel_W
21.06.2011, 10:46:37
@askone,

stosowanie id="left" i id="right" ma zerowe znaczenie dla SEO smile.gif
powinno się raczej stosować id="sidebar" i id="main", "content", whatever tongue.gif
askone
21.06.2011, 10:51:21
Cytat(Pawel_W @ 21.06.2011, 11:46:37 ) *
@askone,

stosowanie id="left" i id="right" ma zerowe znaczenie dla SEO smile.gif
powinno się raczej stosować id="sidebar" i id="main", "content", whatever tongue.gif


Zgadzam się, pisane na szybko celem ukazania idei smile.gif
nicewik
21.06.2011, 10:56:49
a tak na szybko ja ustalić styl dla menu menu_1 obrazk / menu_2 tło z tekstem itd.....
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.