Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [html]początkujący sifer.pl
Forum PHP.pl > Forum > Przedszkole
sifer
14.01.2008, 19:29:40
witam

zacząłem się bawić html, php, js od niedawna. jeśli jest to możliwe to prosiłbym o sprawdzenie poprawności niżej zamieszczonego kodu. chodzi mi o ewentualne wyłapanie błędów początkującego. może po prostu robie coś co można zrobić prościej i wydajniej. oczywiście są to póki co same ramki gotowe do przyjęcia grafiki, skryptów itp. wiem, że jest to dopiero początek, ale lepiej odrazu dowiedzieć się o ewentualnych błędach, aniżeli potem pisać wszystko od początku.

dziękuję.

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
  2. <html>  
  3. <head>
  4. <meta http-equiv='Content-Type' content='text/html; charset=iso-8859-2'>
  5. <meta http-equiv='Content-Language' content='pl'>
  6. <title>SIFER</title>
  7. <link rel='stylesheet' href='style.css' type='text/css'>  
  8. </head>
  9. <body>
  10.  
  11.  
  12. <div id='glowne'>
  13. <table id='tabela_glowna' align="center" width='768'>
  14.  
  15.  
  16. <!-- BANER --> 
  17. <tr>
  18.  <td class='td_baner' colspan='3'>
  19.   Tutaj bedzie baner
  20.  </td>
  21. </tr>
  22. <tr>
  23.  <td class='td_info' colspan='3'>
  24.   Tutaj bedzie info
  25.  </td>
  26. </tr>
  27.  
  28. <tr>
  29.  
  30. <!-- LEWE MENU --> 
  31. <td class='td_menu_lewe' valign='top'>
  32.  <div class='menu_l'>
  33.   <table id='tabela_lewa_1'>
  34.    <tr>
  35.     <td class='tabela'>link 1</td>
  36.    </tr>
  37.    <tr>
  38.     <td class='tabela'>link 2</td>
  39.    </tr>
  40.    <tr>
  41.     <td class='tabela'>link 3</td>
  42.    </tr>
  43.    <tr>
  44.     <td class='tabela'>link 4</td>
  45.    </tr>
  46.   </table>
  47.   <br>
  48.   <table id='tabela_lewa_2' width='100%'>
  49.    <tr>
  50.     <td class='tabela'>link 1a</td>
  51.    </tr>
  52.    <tr>
  53.     <td class='tabela'>link 2a</td>
  54.    </tr>
  55.    <tr>
  56.     <td class='tabela'>link 3a</td>
  57.    </tr>
  58.   </table>
  59.   <br>
  60.   <table id='tabela_lewa_3' width='100%'>
  61.    <tr>
  62.     <td class='tabela'>link 1a</td>
  63.    </tr>
  64.    <tr>
  65.     <td class='tabela'>link 2b</td>
  66.    </tr>
  67.    <tr>
  68.     <td class='tabela'>link 3c</td>
  69.    </tr>
  70.   </table>
  71.   <br>
  72.   to jest leve menu
  73.  </div>
  74. </td>
  75.  
  76. <!-- SRODEK -->
  77. <td class='td_srodek' valign='top'> 
  78.  <div class='srodek'>
  79.   to jest czesc srodkowa
  80.  </div>
  81. </td>
  82.  
  83. <!-- PRAWE MENU --> 
  84. <td class='td_menu_lewe' valign='top'> 
  85.  <div class='menu_prawe'>
  86.  <table id='tabela_prawa_1'>
  87.   <tr>
  88.    <td class='tabela'>link 1</td>
  89.   </tr>
  90.   <tr>
  91.    <td class='tabela'>link 2</td>
  92.   </tr>
  93.   <tr>
  94.    <td class='tabela'>link 3</td>
  95.   </tr>
  96.  </table>
  97.  <br>
  98.  <table id='tabela_prawa_2' width='100%'>
  99.   <tr>
  100.    <td class='tabela'>link 1a</td>
  101.   </tr>
  102.   <tr>
  103.    <td class='tabela'>link 2b</td>
  104.   </tr>
  105.   <tr>
  106.    <td class='tabela'>link 3c</td>
  107.   </tr>
  108.  </table>
  109.   <br>
  110.   to jest prave menu
  111.  </div>
  112.  
  113. </td>
  114.  
  115. </tr>
  116. <!-- STOPKA --> 
  117. <tr>
  118.  <td class='td_stopka' valign='top' colspan='3'>
  119.   Tutaj bedzie stopka
  120.  </td>
  121.  
  122. </table>
  123. </div>
  124.  
  125. </body>
  126. </html>
[HTML] pobierz, plaintext
qrees
14.01.2008, 20:13:52
http://validator.w3.org/
sifer
14.01.2008, 23:00:49
poprawiłem sporo w kodzie w poprzednim poście

dziękuję za podpowiedź strona okazała się bardzo przydatna. z 40-paru błędów został mi tylko jeden, co wydaje mi się całkiem niezłym osiągnięciem jak na pierwszy raz.

przy okazji chciałbym spytać o ten kawałek kodu:

[HTML] pobierz, plaintext 
  1. <table id='tabela_glowna' align="center" width='768'>
[HTML] pobierz, plaintext


mianowicie cały czas mam problem z (align="center") najwyraźniej nie powinien on występować w dobrze napisanym kodzie html-a. stąd moje pytanie, jakim poleceniem mogę go zastąpić? chciałbym by cała tabela znajdowała się na środku a nie z lewej strony. błąd zapewne trywialny ale potrzebuje pomocy.

dzięki
grzesiek_g
14.01.2008, 23:11:02
W dobrze napisanym kodzie nie powinno być wogóle tabelki która buduje nam layout. Ale ok, na początek zrób na tabelce, później http://kurs.browsehappy.pl/ i możesz przepisać to na układ na warstwach, wg obecnych standardów.
Wyśrodkujesz w ten sposób w css:
[HTML] pobierz, plaintext 
  1. #tabela_glowna {
  2.     width:768px;
  3.     margin:0 auto;
  4. }
[HTML] pobierz, plaintext
Maxik
14.01.2008, 23:12:40
Ustaw to w css.
potreb
14.01.2008, 23:44:48
Cytat(grzesiek_g @ 14.01.2008, 23:11:02 ) *
W dobrze napisanym kodzie nie powinno być wogóle tabelki która buduje nam layout. Ale ok, na początek zrób na tabelce


Wystarczy ze zastosujesz mniej tabelek, bo cosik za duzo jest tam ich
rodi83
14.01.2008, 23:56:42
super pomogło smile.gif dziękuję

co do XHTML właśnie zastanawiałem się nad nim zanim zabrałem się za tą stronę. od jutra przysiadam do kursu który podałeś i postaram się odezwać za klika dni ze stroną zrobioną już na warstwach. jakby co wiem gdzie pytać.

jeszcze raz dziękuję za pomoc
sifer
15.01.2008, 00:01:15
to wyżej to moje wypociny tylko nie zalogowałem się :]

aha co się tyczy ilości tabelek to zmniejszą się radykalnie jak podłączę pod to wszytko php. wtedy kilka pętli powinno zmniejszyć liczbę tabelek. teraz raczej nie widzę gdzie można by ich było trochę wyciąć. może czegoś nie widzę?
potreb
15.01.2008, 00:42:21
Stosowanie znaczników p div li span w tym ci pomoże. Tylko więcej zabawy w css
sifer
17.01.2008, 17:22:53
ok jak powiedziałem tak zrobiłem. zacząłem zabawe div-ami i css. wyszło z tego coś takiego:

[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 xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  3. <head>
  4. <title>SIFER</title>
  5. <link rel="stylesheet" href="style.css" type="text/css" />
  6. </head>
  7. <body>
  8.  
  9. <div id="div_glowny">
  10.  
  11. <!-- SEKCJA BANER -->
  12.  <div id="div_baner">
  13.  
  14.  </div>
  15.  
  16. <!-- SEKCJA INFO -->
  17.  <div id="div_info">
  18.  
  19.  </div>
  20.  
  21. <!-- SEKCJA MENU LEWE -->
  22.  <div id="div_lewy">
  23.  
  24.  </div>
  25.  
  26. <!-- SEKCJA MENU PRAWE -->
  27.  <div id="div_prawy">
  28.  
  29.  </div>
  30.  
  31. <!-- SEKCJA ŚRODEK-->
  32.  <div id="div_srodek">
  33.   <table>
  34.    <tr>
  35.     <td> TUTAJ BĘDĄ NIUSY </td>
  36.    </tr>
  37.   </table>
  38.  </div>
  39.  
  40. <!-- SEKCJA STOPKA-->
  41.  <div id="div_stopka">
  42.  
  43.  </div>
  44.  
  45. </div>
  46.  
  47.  
  48. </body>
  49. </html>
[HTML] pobierz, plaintext



jak widac kod sie bardzo uproscił i jest go nieporównywalnie mniej. aha jeszcze css

[HTML] pobierz, plaintext 
  1. /*SEKCJA BODY*/
  2.  
  3. body { background-color: #0099CC; }
  4.  
  5. /*SEKCJA DIV*/
  6.  
  7. div { margin: 0 auto; padding: 5px; border: 1px dotted black; vertical-align: top; background-color: #0099CC; }
  8.  
  9. div#div_glowny  { padding: 5px 5px 5px 5px; width: 1024px; }
  10. div#div_baner   { padding: 0px 0px 0px 0px; margin: 0 auto; height: 100px; width: 700px; }
  11. div#div_info    { padding: 0px 0px 0px 0px; margin: 5px auto ; height: 10px; width: 700px; }
  12. div#div_lewy    { margin: 0px 0px 0px 40px; float: left; padding: 0px 0px 0px 0px; width: 200px; }
  13. div#div_prawy   { margin: 0px 40px 0px 0px; float: right; padding: 0px 0px 0px 0px; width: 200px; }
  14. div#div_srodek  { margin: 5px 290px 5px 290px; padding: 0px 0px 0px 0px; width: auto; }
  15. div#div_stopka  { padding: 0px 0px 0px 0px; margin: 5 auto; height: 10px; width: 700px; }
  16.  
  17.  
  18.  
  19.  
  20.  
  21. /*SEKCJA TABLE*/
  22.  
  23. table { border-spacing: 0px; padding: 0px 0px 0px 0px; border: 1px solid black; vertical-align: top; background-color: white; }
  24.  
  25.  
  26. /*SEKCJA TD*/
  27.  
  28. td { padding: 3px 3px 3px 3px; border: 1px solid black; vertical-align: top; background-color: white; margin: 0px 0px 0px 0px top;}
  29.  
  30. /*SEKCJA TD*/
  31.  
  32. tr { padding: 0px 0px 0px 0px; spacing: 0px 0px 0px 0px; }
  33.  
  34.  
  35. /*SEKCJE POZOSTAŁE*/
  36.  
  37. p { margin: 0px 0px 0px 0px; }
  38.  
  39. a { text-decoration: none; color: black;}
[HTML] pobierz, plaintext



wszystko narazie idzie dobrze wiec tylko się cieszyć. mam natomias jedno pytanie: powiedzmy, że na stronie są dwa div. lewy(menu) i prawy(info) w jaki sposób zrobic tak, że div levy pozostaje niezmieniony natomiast zmienia sie tylko zawartość div prawy.

pytam bo chciałbym zaoszczędzić sobie w przyszłoci niepotrzebnej pracy. co w przypadku gdy strona zawiera 100 podstron a mi będzie trzeba zmienic zwartość div lewego? chciałbym ominać przymus ingerowania w 100 innych stron by dodać np nowy link do menu.

pozdrawiam.
loff
17.01.2008, 18:29:40
Pozwolę sobie podpiać sie pod ten wątek - mam nadzieje ze autor mi wybaczy ;]

Przez dłuższy czas nie interesowałem sie tworzeniem stron i teraz gdy do tego wróciłem widzę, że popularne jest tworzenie stron na divach zamiast tabelek - co tez zostało doradzone autorowi wątku. Ma to jakieś logiczne uzasadnienie czy może po prostu taki jest trend ?
sifer
17.01.2008, 19:05:07
na poczatku tez się nad tym zastanawiałem. dlatego polecam to przeczytać http://www.kurshtml.boo.pl/css/wstep,szablon.html ciekawie na temat i w prosty sposób.

a wracając do tematu czekam na odpowiedź :]
grzesiek_g
17.01.2008, 20:51:55
Cytat(sifer @ 17.01.2008, 17:22:53 ) *
pytam bo chciałbym zaoszczędzić sobie w przyszłoci niepotrzebnej pracy. co w przypadku gdy strona zawiera 100 podstron a mi będzie trzeba zmienic zwartość div lewego? chciałbym ominać przymus ingerowania w 100 innych stron by dodać np nowy link do menu.

Do tego najlepiej wykorzystać php i utworzyć sobie pliki:
header.php
footer.php
left.php
index.php
i w pliku index.php przy pomocy funkcji include ładować potrzebne pliki, oraz plik z zawartością, który będzie zawsze się zmieniał. Bardziej zaawansowane to wykorzystanie do generowania zawartości bazy danych. Przykładów znajdziesz wiele na tym forum.
sifer
18.01.2008, 10:15:12
dzięki za naprowadzenie. zaraz zabieram sie do roboty więc niedługo znowu się odezwę i pokaże co mi wyszło z tego wszystkiego.

co się tyczy:

Cytat(grzesiek_g @ 17.01.2008, 20:51:55 ) *
Bardziej zaawansowane to wykorzystanie do generowania zawartości bazy danych.


możesz bardziej rozwinąc tą kwestie?
grzesiek_g
18.01.2008, 12:26:35
Zamiast treść strony trzymać w plikach można to robić w bazie danych. Np to forum i miliony innych stron tak działa wykorzystując prostsze, jak i bardziej zaawansowane rozwiązania. W miarę nauki PHP dojdziesz do tego.

Powodzenia w nauce.
sifer
18.01.2008, 14:17:11
żebym był pewien, że dobrze zrozumiałem. zamiast trzymać kod jakiejś części strony, w pliku np "stopka.php" który potem dołączam do strony poprzez include to powinienem ten kod trzymać w bazie danych?

jeśli tak to przyznam szczerze, ze chyba dam sobie z tym poradze, choćnie wiem za bardzo czym się wtedy zastępuje polecenie "inlude". aha jeśli dobrze rozumiem to include('stopka.php') wstawia mi w tym miejscu gdzie jest wywołane całą zawartośc pliku stopka.php a co zrobic kiedy to nie jest plik tylko rekord w bazie?

pozdrawiam
chemik1982
18.01.2008, 14:24:48
masz stronke index.php w tresci tej strony masz np. 
[PHP] pobierz, plaintext 
  1. <?php
  2. include('header.php');
  3. include('srodek.php');
  4. include('stopka.php');
  5. ?>
[PHP] pobierz, plaintext


i dalej w pliku srodek.php mozesz sobie np. 

[PHP] pobierz, plaintext 
  1. <?php
  2. include('tresc.php');
  3. ?>
[PHP] pobierz, plaintext



kazdy z dolaczanych plikow moze miec swoja funkcjonalnosc. tu nie chodzi oto ze masz trzymac caly kod html w bazie odpowiedzialny za wyglad strony, chodzi oto ze masz gdzies miejsce przeznaczone na jakas tresc i wlasnie ta tresc przechowujesz w bazie, np. tresc jakiegos artykulu.
rodzielenie kodu na poszczegolne pliki pozwala zachowac porzadek.
sifer
13.02.2008, 18:03:54
Witam po którkiej przerwie.

Wszystkie wasze porady okazały się przydatne tak więc stronke jakoś tam powoli robię. Jednakże napotkałem pewien problem:

Mianowicie mam dwa div-y jeden w drugim:

[HTML] pobierz, plaintext 
  1. <div id='div_baner'>
  2.   <div id='div_baner_button'>
  3.   przykładowy text
  4.   </div>
  5. </div>
[HTML] pobierz, plaintext


css plik wyglada tak:

[HTML] pobierz, plaintext 
  1. div#div_baner { padding: 0; margin: 0 auto; height: 300px; width: 400px; vertical-align: bottom; }
  2. div#div_baner_button { padding: 0; float: right; height: 50px; width: 300px; vertical-align: bottom; }
[HTML] pobierz, plaintext


mimo iż zawarłem tam frazę "vertical-align: bottom" ten drugi div w zaden sposób nie chce mi zejść na dół pierwszego diva.

Chciałbym w div-ie głównym umieścić kolejny, który będzie sie znajdował w prawym dolnym rogu tego pierwszego div-a.

Prosiłbym o pomoc, brakuje mi pomysłów a nie chce wracać do tabel :]

Pozdrawiam.
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.