Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Wracajmy do tabelek!
Forum PHP.pl > Inne > Hydepark
Stron: 1, 2, 3, 4, 5
rozny
13.11.2006, 10:27:56
Dobra z mojej strony koniec. Pasuje chlopaki...

Dlaczego sie tak mecze? Bo CHCE robic zgodnie ze standardami. Jezeli dalej nie rozumiecie dlaczego divy wplywaja na lepsza pozycje w google to przykro mi, widze ze pod tym wzgledem pozostaniecie dalej w sredniowieczu.

Pewnie ze jest latwiej... i to tylko o ludzkie lenistwo chodzi... jak cos jest latwiej zrobic znaczy ze tak jest lepiej? Sorry, ale jest to dla mnie myslenie na poziomie podstawowki...

Bez urazy, ale czesc osob naprawde nie rozumie dlaczego divy wypadaja lepiej od tabelek w wyszukiwarkach... A argument ze wiekszosc witryn robiona jest na tabelach to zaden argument dla algorytmu wyszukiwarki. Jezeli ktos zna zasady dzialania algorytmu wyszukiwarek powinnien rozumiec dlaczego na divach masz wieksza kontrole nad pozycjonowaniem... Uwierzcie mi, ze wyszukiwarka indexuje wyzej strony do ktorych tresci ma szybszy dostep, to chyba logiczne... a w tabelach tresc strony ZAWSZE masz gdzies posrodku pliku index, z regoly gdzies w 3 tabeli, ewentualnie w 2gim rzedzie tr i drugim td... kawal kodu... Wiecej sie nie bede zaglebial, bo i tak czesc osob dalej mnie zmiesza...

pozdrawiam...

/edit: co do tamtego layoutu to juz sobie poradzilem i wyglada tak samo jak bym to zrobil na tabeli... tylko ze plik index wazy 1,13kb... w tabelce zalegalo by juz sporo wiecej...

pozdrawiam...
dado
23.01.2007, 20:44:47
Przeczytanie tego topica zajeło mi z godzine. Bardzo chciałbym robić strony na divach jednak mimo usilnych prób moich nie umiem tego zrobić. Dam przykład, może ktoś będzie wstanie podpowiedzieć mi jak taki układ zrobić na divach.

[HTML] pobierz, plaintext 
  1. {include file='header.tpl'}
  2. <body>
  3. <div align="center">
  4.  
  5. 	<table id="header">
  6. 		<tr>
  7. 			<td><h2>nagłówek</h2></td>
  8. 		</tr>
  9. 	</table>
  10.  
  11. 	<table id="find">
  12. 		<tr>
  13. 			<td>wysukiwarka</td>
  14. 		</tr>
  15. 	</table>
  16.  
  17. 	<table id="main">
  18. 		<tr>
  19. 			<td id="main_left">lewa</td>
  20. 			<td id="main_center">center</td>
  21. 			<td id="main_right">prawa</td>
  22. 		</tr>
  23. 	</table>
  24.  
  25. 	<table id="main2">
  26. 		<tr>
  27. 			<td id="main_left2">lewa 2</td>
  28. 			<td rowspan="2" id="main_right2">prawa 2</td>
  29. 		</tr>
  30. 		<tr>
  31. 			<td id="main_left2">lewa 3</td>
  32. 		</tr>
  33. 	</table>
  34.  
  35. 	<table id="footer">
  36. 		<tr>
  37. 			<td><h2>stopka</h2></td>
  38. 		</tr>
  39. 	</table>
  40.  
  41. </div>
  42. </body>
  43. </html>
[HTML] pobierz, plaintext


css:
[HTML] pobierz, plaintext 
  1. table,body{
  2. font-size: 12px;
  3. font-family: tahoma, arial, verdana, helvetica;
  4. }
  5.  
  6. #header{ 
  7. 	border: 1px solid #DCDCDC;
  8. 	background-color: #F5F5F5;
  9. 	width:850px;
  10. 	text-align:center;
  11. }
  12.  
  13. #find{
  14. 	margin-top:2px;
  15. 	border: 1px solid #DCDCDC;
  16. 	background-color: #F5F5F5;
  17. 	width:850px;
  18. 	text-align:left;
  19. }
  20.  
  21.  
  22.  
  23. #main{
  24. 	margin:0px;
  25. 	width:854px;
  26. 	padding:0px;
  27. }
  28.  
  29. #main_left{
  30. 	border: 1px solid #DCDCDC;
  31. 	background-color: #F5F5F5;
  32. 	width:33%;
  33. 	height:130px;
  34. 	vertical-align:top;
  35. }
  36.  
  37. #main_center{
  38. 	border: 1px solid #DCDCDC;
  39. 	background-color: #F5F5F5;
  40. 	width:33%;
  41. 	height:160px;
  42. 	vertical-align:top;
  43.  
  44. }
  45.  
  46. #main_right{
  47. 	border: 1px solid #DCDCDC;
  48. 	background-color: #F5F5F5;
  49. 	width:33%;height:160px;
  50. 	vertical-align:top;
  51. }
  52.  
  53.  
  54. #main2{
  55. 	margin:0px;
  56. 	width:854px;
  57. 	padding:0px;
  58. }
  59. #main_right2{
  60. 	border: 1px solid #DCDCDC;
  61. 	background-color: #F5F5F5;
  62. 	width:50%;
  63. 	height:160px;
  64. 	vertical-align:top;
  65. }
  66. #main_left2{
  67. 	border: 1px solid #DCDCDC;
  68. 	background-color: #F5F5F5;
  69. 	width:50%;
  70. 	height:160px;
  71. 	vertical-align:top;
  72. }
  73.  
  74. #footer{
  75. 	border: 1px solid #DCDCDC;
  76. 	background-color: #F5F5F5;
  77. 	width:850px;
  78. 	text-align:center;
  79. }
[HTML] pobierz, plaintext
kwiateusz
23.01.2007, 22:22:02 
[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2. 	  body{
  3. 	font-family:tahoma,arial,verdana,helvetica;
  4. 		font-size:12px;
  5. 		text-align: center;
  6. 		}
  7. 		div{
  8. 	margin-top: 2px;
  9. 	background-color: #F5F5F5;
  10. 		border:1px solid #DCDCDC;
  11. 		}
  12. 		#main{
  13. 		margin: 0 auto;
  14. 		text-align: left;
  15. 		width:850px;
  16. 		background: none;
  17. 		border: none;
  18. 		}
  19. 		#naglowek{
  20. 		text-align: center;
  21. 		}
  22. 		#wyszukiwarka{
  23. 	padding:1px;
  24. 		}
  25. 		#lewa{
  26. 		float: left;
  27. 		height:130px;
  28. 		vertical-align:top;
  29. 		width:33%;
  30. 		}
  31. 		#center{
  32. 	margin-left: 2px;
  33. 		float: left;
  34. 		height:130px;
  35. 		vertical-align:top;
  36. 		width:33%;
  37. 		}
  38. 	#prawa{
  39. 		float: right;
  40. 		height:130px;
  41. 		vertical-align:top;
  42. 		width:33%;
  43. 		}
  44. 		#srodek{
  45. 	background: none;
  46. 	border: none;
  47. 		}
  48. 		#srodek > div{
  49. 		margin-top: 4px;
  50. 		}
  51. 		#lewas > div{
  52. 		display: block;
  53. 		margin-top: 4px;
  54. 		}
  55. 		#lewa2{
  56. 	height:160px;
  57. 		vertical-align:top;
  58. 		width:50%;
  59. 		float: left;
  60. 		}
  61. 		#lewa3{
  62. 		margin-top: 2px !important;
  63. 	height:160px;
  64. 		vertical-align:top;
  65. 		width:50%;
  66. 		float: left;
  67. 		}
  68. 		#prawa2{
  69. 		float: right;
  70. 		width: 49%;
  71. 		height: 325px;
  72. 		}
  73. 		#stopka{
  74. 		clear: both;
  75. 		text-align: center;
  76. 		}
  77. 	</style>
  78.  </head>
  79.  <body>
  80. 	<div id="main">
  81. 		<div id="naglowek"><h2>Naglowek</h2></div>
  82. 		<div id="wyszukiwarka">Wyszukiwarka</div>
  83.  
  84. 		  <div id="lewa">Lewa</div>
  85. 		  <div id="center">center</div>
  86. 		  <div id="prawa">prawa</div>
  87.  
  88. 		<div id="srodek">
  89. 		  <div id="prawa2">prawa2</div>
  90. 		  <div id="lewas">
  91. 				<div id="lewa2">lewa2</div>
  92. 				<div id="lewa3">lewa3</div>
  93. 			</div>
  94. 		</div>
  95. 		<div id="stopka"><h2>stopka</h2></div>
  96. 	</div>
  97.  </body>
  98. </html>
[HTML] pobierz, plaintext


Prawie jak oryginał... ale tu sie kończa moje nieumiejętności w css
mike
23.01.2007, 22:28:20
~kwiateusz ja bym jeszcze to 
[HTML] pobierz, plaintext 
  1. <div id="naglowek"><h2>Naglowek</h2></div>
[HTML] pobierz, plaintext
i to: 
[HTML] pobierz, plaintext 
  1. <div id="stopka"><h2>stopka</h2></div>
[HTML] pobierz, plaintext

zamienił na 
[HTML] pobierz, plaintext 
  1. <h2>Naglowek</h2>
[HTML] pobierz, plaintext
i 
[HTML] pobierz, plaintext 
  1. <h2 id="stopka">stopka</h2>
[HTML] pobierz, plaintext



Nadmiar bloków jest tak samo zły jak nadmiar tabelek.
dado
24.01.2007, 13:26:52
woow widze ze muszę się jeszcze douczyć dużo. Natomiast co zrobić z dopasowaniem do ilości tekstu. Do przykładu kwiateusz-a dodałem tylko w css color rózny dla divów i tekst mi sie dziwnie zachowuje wrzuciłem to tutaj >>>
przykład

Jest jakaś rada na to czy trzeba pamietac aby nie wyjść poza div co będzie dość trudne.
kwiateusz
24.01.2007, 22:04:27
bo ustawiłem tak jak w Twoim przykładzie wysokość diva na stałe 130px smile.gif zmień to sobie i powinny się rozciągać
hwao
25.01.2007, 10:58:14
Podawałem linka do generatora kolumn w css... Jedyne co musisz zrobi to złożyć to w całość..

Generator idealnych kolumn w css

Jak potrzebujesz np tak jak napisałeś, układasz div'y w kolejnych warstwach (pod).
gladiror
27.01.2007, 01:18:02
A ja dalej obstaje przy tym, że to jak jest zrobiona strona ma małe znaczenie w wyszukiwarkach. Jest na to mase przykładów. Rzeczywiście rozwiązanie na divach jest wydajniejsze, ale nie wciskajcie ludziom ciemnoty, że tak bardzo to pomaga w wyszukiwaniu, bo to jest baśń z tysiąca i jednej nocy. Co prawda jakiś mały procent może mieć związku, ale to jest tak nikłe, że tego nie widać.
shpyo
27.01.2007, 08:19:22
Cytat(gladiror @ 27.01.2007, 03:18:02 ) *
ale nie wciskajcie ludziom ciemnoty, że tak bardzo to pomaga w wyszukiwaniu, bo to jest baśń z tysiąca i jednej nocy. Co prawda jakiś mały procent może mieć związku, ale to jest tak nikłe, że tego nie widać.

To jest mit oficjalnie obalony przez Google!
Cytat(gladiror @ 27.01.2007, 03:18:02 ) *
Co prawda jakiś mały procent może mieć związku, ale to jest tak nikłe, że tego nie widać.

byyzduuuura winksmiley.jpg
Jarod
27.01.2007, 10:17:29
Ja powiem tylko tyle, że odkąd robię tylko za pomocą cssa nie wyobrażam sobie powrotu do tabelek. Po drugie mam bardziej przejrzysty kod. Piszcie co chcecie ale css rządzi Rkingsmiley.png
gladiror
27.01.2007, 14:59:00
Pokaż mi cytat z google. Wpisz sobie w wyszukiwarke słowo "dyskografie" i zobacz na której pozycji jest moja strona robiona pare lat temu.. 0 aktualizacji od paru lat. Same tabelki. Jak takie coś wytłumaczysz?? (www.dyskografie.maxi.pl -> o ten link dokladnie chodzi).
mike
27.01.2007, 17:22:26
~gladiror nie gorączkuj się tylko pomyśl zanim napiszesz.
~shpyo napisał, że mit o którym mówisz Google oficjalnie potwierdziło.
Czytaj: ~shpyo potwierdził Twoje słowa, więc po co drążysz?
gladiror
27.01.2007, 18:22:51
mike_mech - różnie można interpretować to co napisał shpyo
no-name
29.01.2007, 16:32:39
Mały refresh. Strony z templatemonster-a to niewątpliwie przykład idealnie wyważonych proporcji między ilością włożonej pracy, a uzyskanym efektem. Zwrócie uwagę, że niemal wszystkie te szablony są na tabelkach, a spora część kodu jest generowana przez... ImageReady.
Dandelion
29.01.2007, 20:27:48
Cytat
Mały refresh. Strony z templatemonster-a to niewątpliwie przykład idealnie wyważonych proporcji między ilością włożonej pracy, a uzyskanym efektem. Zwrócie uwagę, że niemal wszystkie te szablony są na tabelkach, a spora część kodu jest generowana przez... ImageReady.


i to powod zeby nasladowac zle nawyki ?
no-name
30.01.2007, 08:24:58
Chciałem tylko pokazać, że można na tę sprawę patrzeć inaczej i że to, czy coś jest "złe", lub dobre jest często względne. Dotyczy to zwłaszcza sfery pracy/biznesu.
bogdan89
31.01.2007, 02:12:57
to jest troche dziwne do oceniania które rozwiąznie jest lepsze, bo każdy może robic strony jak tylko mu sie podoba... byle tam nie bylo tylko napisu: "Aby strona wyświetlała się poprawie musisz oglądać ją na komputerze autora".

Osobiście mi wygodniej buduje się strony na divach winksmiley.jpg
Co z tego, że Google nie "patrzy" na to inaczej... ale kod jest bardziej przyjazny dla programisty... winksmiley.jpg
Mnie nikt nie przekona do tabel! smile.gif
Kisiol_Ent
31.01.2007, 03:10:46
Ja kiedyś próbowałem sobie zrobić bardzo dawno temu strone, przecyztałem jakis prosty kurs i zrobilem
to na ramkach... straszny smietnik był... nawet sam szkielet wprowadzał juz bałagan a co dopiero
inne rzeczy.
Teraz postanowiłem sobie zrobic stronke i ktos mi powiedizał ze teraz robi sie na tabelach...
Wlaczylem kurs i naszczescie trafilem na stornke DLACZEGO UKLAD NA TABELI JEST GOOPI (czy
cos tam takiego). Przeczytalem i faktycznie tabele sa glupie.
Co do divow to sa wspaniale, nierozumiem jak mozna mowic ze trudno sie na nich cos robii??
Chyba jak sie niema wyobrazni, i zrobic 3 kolumny to już wielki wysiłek umyslowy....

Uzywanie tabelek jest jak jedzenie obiadu łyżką... też się da, szczególnie dzieciom łatwiej.
revyag
31.01.2007, 09:41:25
Cytat
Mały refresh. Strony z templatemonster-a to niewątpliwie przykład idealnie wyważonych proporcji między ilością włożonej pracy, a uzyskanym efektem. Zwrócie uwagę, że niemal wszystkie te szablony są na tabelkach, a spora część kodu jest generowana przez... ImageReady.

Zauważ że to są szablony stron robione przez grafików, ich kod htm nie interesuje, generują go po to żebyś mógł sobie zobaczyć jak szablon wygląda w przeglądarce a nie żeby ten kod wykorzystać.
bogdan89
31.01.2007, 10:16:50
Cytat(revyag @ 31.01.2007, 09:41:25 ) *
Zauważ że to są szablony stron robione przez grafików, ich kod htm nie interesuje, generują go po to żebyś mógł sobie zobaczyć jak szablon wygląda w przeglądarce a nie żeby ten kod wykorzystać.


widzisz... smile.gif niektorzy na to patrzą inaczej: - te szablony są tam tylko po to, aby się nie narobić biggrin.gif
ściągnąć i wrzucić tekst...
w moim przypadku jest tak, że mając jakiś szablon w .psd to sam go tnę do xhtml i css, nawet jesli juz zostal dla przykladu pociety! winksmiley.jpg
no-name
5.02.2007, 17:01:44
Skoro jak napisał mike_mech: "Wszystko da się zrobic na wszystkie przeglądarki ( IE6.0, IE7.0, FF, Opera) bez wykorzystania hacków. Wszystko! A jak się nie da, to za mało wiecie", to ja poproszę o:

- najprostszy z możliwych layoutów. Dwie kolumny (divy) w kontenerze. Lewa kolumna ma mieć tę samą długość, co prawa (rozciągana przez zawartość).
- "przymocowanie" diva do dolnej krawędzi diva nadrzędnego bez ingerencji w kod konterera.
W tabelkach wystarczy dać valign="bottom" dla komórki... Ale CSS-y dają dużo więcej mozliwości, więc pewnie da się to zrobic prosto, szybko i bez żadnych sztuczek, prawda?

Ja kurcze jakoś za mało wiem, żeby zrobić to bez hacków... smile.gif
mike
5.02.2007, 18:27:49
Czuję się zobowiązany odpowiedzieć na tego posta smile.gif

Cytat(no-name @ 5.02.2007, 17:01:44 ) *
- najprostszy z możliwych layoutów. Dwie kolumny (divy) w kontenerze. Lewa kolumna ma mieć tę samą długość, co prawa (rozciągana przez zawartość).
Czy mógłbyś dokładniej to opisać bo nie za bardzo kumam sad.gif
Mam da pomysły jaki layout mógłby z tego być.

Cytat(no-name @ 5.02.2007, 17:01:44 ) *
- "przymocowanie" diva do dolnej krawędzi diva nadrzędnego bez ingerencji w kod konterera.
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3.   <head>
  4.     <title>example</title>
  5.     <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  6.     <meta name="generator" content="mike_mech :)" />
  7.     <style type="text/css" media="all">
  8.     /* <![CDATA[ */
  9.         div#container {
  10.             position: relative;
  11.             margin: auto;
  12.             width: 400px;
  13.             height: 500px;
  14.             background-color: #ababab;
  15.         }
  16.  
  17.         div#container div {
  18.             position: absolute;
  19.             bottom: 0px;
  20.             width: 100px;
  21.             height: 100px;
  22.             background-color: #cdcdcd;
  23.         }
  24.     /*]]>*/
  25.     </style>
  26.   </head>
  27.   <body>
  28.  
  29.   <div id="container">
  30.     <div></div>
  31.   </div>
  32.  
  33.   </body>
  34. </html>
[HTML] pobierz, plaintext
no-name
7.02.2007, 17:39:45
ad 1.
Chodzi o takie coś:
Kod
<style type="text/css">
    #alles{
    width:500px;
    float:left;
    background-color:#00CC00;
    }
    #glowny{
    width:300px;
    float:left;
    background-color:#990000;
    }
    #boczny {
    width:200px;
    float:left;
    background-color:#CCCCCC;
    }
</style>
</head><body>

<div id="alles">
    <div id="glowny">
        test<br />    test<br />    test<br />    test<br />    test<br />    test<br />    test<br />    test<br />    test<br />    test<br />    
    </div>
    <div id="boczny">
        test<br/>test<br />    test<br />    test<br />    
    </div>
</div>


... żeby szare miało tę samą długość co czerwone smile.gif Oczywiście wysokość kontenera jest dynamicznie regulowana przez zawartość.

ad 2.

Jak już napisałem załozenie jest takie, że nie masz wpływu na kod div#container , a fabryka nieszczęśliwie dała go w wersji bez position:relative smile.gif Wbrew pozorom jest to sytuacja z życia wzięta smile.gif

@mike_mech: żyjesz?
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.