Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [html]początkujący sifer.pl
sifer
post 14.01.2008, 19:29:40
Post #1





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 14.01.2008

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

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


Ten post edytował sifer 14.01.2008, 22:52:27
Powód edycji: dodałem bbcode (cysiaczek)
Go to the top of the page
+Quote Post
qrees
post 14.01.2008, 20:13:52
Post #2





Grupa: Zarejestrowani
Postów: 275
Pomógł: 44
Dołączył: 23.11.2007

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

http://validator.w3.org/
Go to the top of the page
+Quote Post
sifer
post 14.01.2008, 23:00:49
Post #3





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 14.01.2008

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

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

Ten post edytował sifer 14.01.2008, 23:01:30
Go to the top of the page
+Quote Post
grzesiek_g
post 14.01.2008, 23:11:02
Post #4





Grupa: Zarejestrowani
Postów: 249
Pomógł: 30
Dołączył: 18.07.2007

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

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


--------------------
Warsztat: Ubuntu 12.10, PHPStorm
http://vertoo.pl
Go to the top of the page
+Quote Post
Maxik
post 14.01.2008, 23:12:40
Post #5





Grupa: Zarejestrowani
Postów: 726
Pomógł: 129
Dołączył: 10.01.2008
Skąd: Gdańsk

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

Ustaw to w css.


--------------------
Pomogłem? Kliknij przycisk Pomógł pod pomocnym Ci postem.
http://maxik.me/
Go to the top of the page
+Quote Post
potreb
post 14.01.2008, 23:44:48
Post #6





Grupa: Zarejestrowani
Postów: 1 568
Pomógł: 192
Dołączył: 7.03.2005
Skąd: Warszawa

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

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


--------------------
Go to the top of the page
+Quote Post
-rodi83-
post 14.01.2008, 23:56:42
Post #7





Goście
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
Go to the top of the page
+Quote Post
sifer
post 15.01.2008, 00:01:15
Post #8





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 14.01.2008

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

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ę?
Go to the top of the page
+Quote Post
potreb
post 15.01.2008, 00:42:21
Post #9





Grupa: Zarejestrowani
Postów: 1 568
Pomógł: 192
Dołączył: 7.03.2005
Skąd: Warszawa

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

Stosowanie znaczników p div li span w tym ci pomoże. Tylko więcej zabawy w css


--------------------
Go to the top of the page
+Quote Post
sifer
post 17.01.2008, 17:22:53
Post #10





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 14.01.2008

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

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.
Go to the top of the page
+Quote Post
loff
post 17.01.2008, 18:29:40
Post #11





Grupa: Zarejestrowani
Postów: 39
Pomógł: 15
Dołączył: 21.03.2007
Skąd: Poznań

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

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 ?
Go to the top of the page
+Quote Post
sifer
post 17.01.2008, 19:05:07
Post #12





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 14.01.2008

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

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ź :]
Go to the top of the page
+Quote Post
grzesiek_g
post 17.01.2008, 20:51:55
Post #13





Grupa: Zarejestrowani
Postów: 249
Pomógł: 30
Dołączył: 18.07.2007

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

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.


--------------------
Warsztat: Ubuntu 12.10, PHPStorm
http://vertoo.pl
Go to the top of the page
+Quote Post
sifer
post 18.01.2008, 10:15:12
Post #14





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 14.01.2008

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

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?
Go to the top of the page
+Quote Post
grzesiek_g
post 18.01.2008, 12:26:35
Post #15





Grupa: Zarejestrowani
Postów: 249
Pomógł: 30
Dołączył: 18.07.2007

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

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.


--------------------
Warsztat: Ubuntu 12.10, PHPStorm
http://vertoo.pl
Go to the top of the page
+Quote Post
sifer
post 18.01.2008, 14:17:11
Post #16





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 14.01.2008

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

ż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
Go to the top of the page
+Quote Post
chemik1982
post 18.01.2008, 14:24:48
Post #17





Grupa: Zarejestrowani
Postów: 91
Pomógł: 13
Dołączył: 20.03.2007
Skąd: Bydgoszcz

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

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.


--------------------
fitmate.pl - aplikacje internetowe
Go to the top of the page
+Quote Post
sifer
post 13.02.2008, 18:03:54
Post #18





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 14.01.2008

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

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.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

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

RSS Wersja Lo-Fi Aktualny czas: 30.07.2025 - 19:30
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn