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 (1 - 11)
--koshin--
post
Post #2





Goście
Tutaj jak pociąłem layout www.firmasitko.pl/szablon/lay.jpg
Go to the top of the page
+Quote Post
korex
post
Post #3





Grupa: Zarejestrowani
Postów: 36
Pomógł: 4
Dołączył: 2.02.2008

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

u mnie wszystko wygląda ok... Jakiej używasz przeglądarki?
Go to the top of the page
+Quote Post
nicewik
post
Post #4





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

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

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.

Ten post edytował nicewik 20.06.2011, 22:21:22
Go to the top of the page
+Quote Post
korex
post
Post #5





Grupa: Zarejestrowani
Postów: 36
Pomógł: 4
Dołączył: 2.02.2008

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

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...
Go to the top of the page
+Quote Post
t_e_l
post
Post #6





Grupa: Zarejestrowani
Postów: 21
Pomógł: 5
Dołączył: 7.05.2011

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

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...
Go to the top of the page
+Quote Post
nicewik
post
Post #7





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





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
nicewik
post
Post #9





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

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

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?
Go to the top of the page
+Quote Post
Pawel_W
post
Post #10





Grupa: Zarejestrowani
Postów: 1 675
Pomógł: 286
Dołączył: 15.06.2009
Skąd: Wieliczka

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

@askone,

stosowanie id="left" i id="right" ma zerowe znaczenie dla SEO (IMG:style_emoticons/default/smile.gif)
powinno się raczej stosować id="sidebar" i id="main", "content", whatever (IMG:style_emoticons/default/tongue.gif)
Go to the top of the page
+Quote Post
askone
post
Post #11





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

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

Cytat(Pawel_W @ 21.06.2011, 11:46:37 ) *
@askone,

stosowanie id="left" i id="right" ma zerowe znaczenie dla SEO (IMG:style_emoticons/default/smile.gif)
powinno się raczej stosować id="sidebar" i id="main", "content", whatever (IMG:style_emoticons/default/tongue.gif)


Zgadzam się, pisane na szybko celem ukazania idei (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
nicewik
post
Post #12





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

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

a tak na szybko ja ustalić styl dla menu menu_1 obrazk / menu_2 tło z tekstem itd.....
Go to the top of the page
+Quote Post
« 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 · Linearny+ · Przełącz na: Drzewo

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

RSS Aktualny czas: 24.12.2025 - 14:52
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn