Proszę o ocenę kodu xHTML
Link
Pełna wersja: [kod css/xhtml] kod xHTML
Pierwszy spojrzenie i... divitis. Ale jedziemy po kolei.
Ciekawa nazwa klasy
To jest lista.
A zamiast stosować klasę floatleft dałbyś div#logoikony img { float: left; }
Myślę że lepiej było się posłużyć znacznikami h i p i zamiast dawać kolejne divy i id dać div#logo p { styl }, div#logo h2 { styl }
Do menu mogłeś odwołać się poprzez div#menu ol { }, a te divy o klasie text1 i 2 eh... masakra
Znów pominąłeś h, nie używasz span a przydałoby się do zegara, no i tekst bardziej w p...
To też jest lista. Dodaj width i height do obrazków.
Kod
class="floatleft"
Ciekawa nazwa klasy
Kod
<a href="index.html"><img src="images/aktualnosci.jpg" alt="Aktualności" class="floatleft" /></a>
<a href="filmy.html"><img src="images/filmy.jpg" alt="Aktualności" class="floatleft" /></a>
<a href="wycinki.html"><img src="images/wycinki_prasowe.jpg" alt="Aktualności" class="floatleft" /></a>
<a href="linki.html"><img src="images/linki.jpg" alt="Aktualności" class="floatleft" /></a>
<a href="filmy.html"><img src="images/filmy.jpg" alt="Aktualności" class="floatleft" /></a>
<a href="wycinki.html"><img src="images/wycinki_prasowe.jpg" alt="Aktualności" class="floatleft" /></a>
<a href="linki.html"><img src="images/linki.jpg" alt="Aktualności" class="floatleft" /></a>
To jest lista.
A zamiast stosować klasę floatleft dałbyś div#logoikony img { float: left; }
Kod
<div id="logo">
<div id="tytul_logo">Zapisy</div>
<div id="tresc_logo">Przykładowy tekst cd; Przykładowy tekst cd; Przykładowy tekst cd; Przykładowy tekst cd :-)</div>
</div>
<div id="tytul_logo">Zapisy</div>
<div id="tresc_logo">Przykładowy tekst cd; Przykładowy tekst cd; Przykładowy tekst cd; Przykładowy tekst cd :-)</div>
</div>
Myślę że lepiej było się posłużyć znacznikami h i p i zamiast dawać kolejne divy i id dać div#logo p { styl }, div#logo h2 { styl }
Kod
<div id="menu">
<ol class="menulist">
<li><a href="index.html">Aktualności</a></li>
<li><a href="http://forum.tkd-bielsko.pl/">Forum</a></li>
<li><a href="filmy.html">Filmy</a></li>
<li><a href="galeria.html">Galeria</a></li>
<li><a href="Zapisy.xhtml">Treningi</a></li>
</ol>
<div class="text1">
przykładowa tresc
</div>
<div class="text2">
przykładowa tresc
<div class="linia"></div>
</div>
</div>
<ol class="menulist">
<li><a href="index.html">Aktualności</a></li>
<li><a href="http://forum.tkd-bielsko.pl/">Forum</a></li>
<li><a href="filmy.html">Filmy</a></li>
<li><a href="galeria.html">Galeria</a></li>
<li><a href="Zapisy.xhtml">Treningi</a></li>
</ol>
<div class="text1">
przykładowa tresc
</div>
<div class="text2">
przykładowa tresc
<div class="linia"></div>
</div>
</div>
Do menu mogłeś odwołać się poprzez div#menu ol { }, a te divy o klasie text1 i 2 eh... masakra
Kod
<div class="newsbar">
<div class="newstitle">
Lorem ipsum dolor sit amet
</div>
<div class="newsinfo">
<div class="zegar"></div>
28/04/2009, 13:46
</div>
</div>
<div class="newsinside">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel velit sed odio aliquet suscipit. Integer tincidunt augue at dui. Morbi leo. Quisque quis sem sed ipsum rutrum aliquam. Suspendisse potenti. Suspendisse potenti. Praesent dapibus adipiscing justo. Sed consequat. Quisque consequat. Morbi venenatis dapibus libero. Nam nec nisl. Duis quis purus non nibh varius viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In facilisis, urna et imperdiet tempus, mauris tellus ornare tellus, id semper odio leo sed ipsum. Nunc suscipit dignissim erat. Vestibulum rhoncus magna eu dolor sagittis imperdiet. Proin aliquam. Vivamus ante arcu, faucibus non, mollis ac, scelerisque eu, metus. Nam ornare pellentesque nisi.
<div class="clearboth"></div>
</div>
<div class="newsend"></div>
<div class="newstitle">
Lorem ipsum dolor sit amet
</div>
<div class="newsinfo">
<div class="zegar"></div>
28/04/2009, 13:46
</div>
</div>
<div class="newsinside">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel velit sed odio aliquet suscipit. Integer tincidunt augue at dui. Morbi leo. Quisque quis sem sed ipsum rutrum aliquam. Suspendisse potenti. Suspendisse potenti. Praesent dapibus adipiscing justo. Sed consequat. Quisque consequat. Morbi venenatis dapibus libero. Nam nec nisl. Duis quis purus non nibh varius viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In facilisis, urna et imperdiet tempus, mauris tellus ornare tellus, id semper odio leo sed ipsum. Nunc suscipit dignissim erat. Vestibulum rhoncus magna eu dolor sagittis imperdiet. Proin aliquam. Vivamus ante arcu, faucibus non, mollis ac, scelerisque eu, metus. Nam ornare pellentesque nisi.
<div class="clearboth"></div>
</div>
<div class="newsend"></div>
Znów pominąłeś h, nie używasz span a przydałoby się do zegara, no i tekst bardziej w p...
Kod
<div id="zwiazki_kluby">
<a href="http://www.pztkd.lublin.pl/" id="obr03" class="rollover"><img src="images/png/pztkd_szary.png" alt="Polski Związek Taekwon-Do" /></a>
<a href="http://www.ksdragon.pl/" id="obr01" class="rollover"><img src="images/png/dragon_szary.png" alt="Klub Sportowy Dragon" /></a>
<a href="http://www.tkd-itf.org/" id="obr02" class="rollover"><img src="images/png/itf_szary.png" alt="International Taekwon-Do Federation" /></a>
</div>
<a href="http://www.pztkd.lublin.pl/" id="obr03" class="rollover"><img src="images/png/pztkd_szary.png" alt="Polski Związek Taekwon-Do" /></a>
<a href="http://www.ksdragon.pl/" id="obr01" class="rollover"><img src="images/png/dragon_szary.png" alt="Klub Sportowy Dragon" /></a>
<a href="http://www.tkd-itf.org/" id="obr02" class="rollover"><img src="images/png/itf_szary.png" alt="International Taekwon-Do Federation" /></a>
</div>
To też jest lista. Dodaj width i height do obrazków.
Cytat(webber @ 15.05.2009, 09:17:06 ) 
Pierwszy spojrzenie i... divitis. Ale jedziemy po kolei.
Może jakaś sugestia na rozwiązanie ;>
?
przecież masz mnóstwo innych tagów niż div...
A co złego jest w DIV? One są najbardziej uniwersalne...
moze i uniwersalne ale do formatowania tekstu uzywa sie czegos innego niz DIV!
czego się używa?
kurshtml.boo.pl, zobacz
Cytat(sebekzosw @ 15.05.2009, 15:41:47 )
czego się używa?
To Ty na pewno wiesz co robisz?
Pytasz o podstawy podstaw...
Generalnie rzecz biorąc. DIVów powinno być jak najmniej - bo nie niosą one sobą żadnej semantycznej treści.
Wybierałem między <table> a <div>
Wybrałem div i teraz jeszcze jakieś wyjątki...
to jest konkretna odpowiedź, a nie jakieś podawanie linków itp :|
Wybrałem div i teraz jeszcze jakieś wyjątki...
Cytat(Crozin @ 15.05.2009, 20:40:45 )
Generalnie rzecz biorąc. DIVów powinno być jak najmniej - bo nie niosą one sobą żadnej semantycznej treści.
to jest konkretna odpowiedź, a nie jakieś podawanie linków itp :|
Właśnie dlatego strasznie denerwuje mnie jak słysze "strona na divach" czy coś podobnego. Bo w tym nie chodzi o to by strona była robiona przy użyciu DIV. Chodzi o to by korzystać z całej palety dostępnych znaczników XHTMLa. By gdy potrzebujesz przedstawić listę zawodników, ich wiek, płeć, ilość czegoś tam i czegoś jeszcze byś skorzystał z TABLE. Gdy potrzebujesz cytatu z Q, BLOCKQUOTE, listy DL, UL czy OL, a gdy masz zwykły tekst P.
np. nagłówki muszą być pisane w h1, h2 itd. pomaga to np w pozycjonowaniu.
Apropo uniwersalności, każdy tag może być taki sam. Sam link (a) może działać jak div, jeśli przypiszesz mu display:block;
Apropo uniwersalności, każdy tag może być taki sam. Sam link (a) może działać jak div, jeśli przypiszesz mu display:block;
To ja może trochę z innej strony - obok loga klubu masz "wycinki pracowe", a powinno być chyba prasowe . Generalnie czcionka, której użyłeś do tych czterech buttonów na górze jest bardzo ładna, ale (może tylko ja mam takie zboczenie na tym punkcie) przecież piszesz stronę po polsku więc powinieneś użyć takiej która ma te wszystkie ą i ę. Tak samo w logo jest "sekcja klubu oswiecim". Nie wiem jak innych ale mnie to strasznie bije po oczach.
. Generalnie czcionka, której użyłeś do tych czterech buttonów na górze jest bardzo ładna, ale (może tylko ja mam takie zboczenie na tym punkcie) przecież piszesz stronę po polsku więc powinieneś użyć takiej która ma te wszystkie ą i ę. Tak samo w logo jest "sekcja klubu oswiecim". Nie wiem jak innych ale mnie to strasznie bije po oczach.
Poprawiłem wg Waszych sugestii, oto link:
Link
Proszę o komentowanie...
Wyniki Walidatora CSS W3C - Dokument ten jest poprawnie napisanym arkuszem CSS wersja 2.1 !
Wyniki Walidatora (x)HTML - This document was successfully checked as XHTML 1.0 Strict!
Link
Proszę o komentowanie...
Wyniki Walidatora CSS W3C - Dokument ten jest poprawnie napisanym arkuszem CSS wersja 2.1 !
Wyniki Walidatora (x)HTML - This document was successfully checked as XHTML 1.0 Strict!
Menu w Twoim przypadku jest listą nieuporządkowaną (UL). Ale dlaczego #nadlogiem nie jest listą? Poza tym identyfikator "nadlogiem"? XHTML to struktura dokumentu, nie jego prezentacja.
Cierpisz na syndrom przedawkowania atrybutu class.
Tak na pierwszy rzut oka
Kod
<div style="width:88px; float:left;"> </div>
Takie cuda...Kod
<div class="text1"> przykładowa tresc </div>
<div class="text2"> przykładowa tresc
<div class="linia"></div>
</div>
</div>
A od tekstu to jest chyba P? A od linii CSS, ew. jeżeli ma ona semantyczne znaczenie HR - tu nie ma.<div class="text2"> przykładowa tresc
<div class="linia"></div>
</div>
</div>
Cierpisz na syndrom przedawkowania atrybutu class.
Kod
<div class="news">
<h3 class="tytul_newsa">Lorem ipsum dolor sit amet</h3>
<span class="data">28/0/2009, 13:45</span>
<p class="tresc_newsa"> .....</p>
</div>
<h3 class="tytul_newsa">Lorem ipsum dolor sit amet</h3>
<span class="data">28/0/2009, 13:45</span>
<p class="tresc_newsa"> .....</p>
</div>
Kod
<ol id="dol_menu">
<li><a href="#">Aktualności</a> / </li>
<li><a href="#">Filmy</a> / </li>
<li><a href="#">Treningi</a> / </li>
<li><a href="#">Galeria</a> / </li>
<li><a href="#">Historia klubu</a> / </li>
<li><a href="#">Wycinki prasowe</a> / </li>
<li><a href="#">Kontakt</a> / </li>
<li><a href="#">Linki</a></li>
</ol>
Ale po co te "/" jako tekst?<li><a href="#">Aktualności</a> / </li>
<li><a href="#">Filmy</a> / </li>
<li><a href="#">Treningi</a> / </li>
<li><a href="#">Galeria</a> / </li>
<li><a href="#">Historia klubu</a> / </li>
<li><a href="#">Wycinki prasowe</a> / </li>
<li><a href="#">Kontakt</a> / </li>
<li><a href="#">Linki</a></li>
</ol>
Tak na pierwszy rzut oka
Cytat(Crozin @ 16.05.2009, 16:04:39 )
Cierpisz na syndrom przedawkowania atrybutu class.
Pozbyłem się zbędnych "class" ;p więcej to chyba nie da się usunąć
Cytat(Crozin @ 16.05.2009, 16:04:39 )
Ale po co te "/" jako tekst?
No a co mam dać? Musi to być...
Jakieś inne sugestie?
Cytat
No a co mam dać? Musi to być...
Jakieś inne sugestie?
Jak dla mnie ten ukośnik jest elementem dekoracyjnym czyli powinien być wstawiany za pomocą CSS. Ale lepiej jest wstawić to nie jako tekst tylko zwykły obrazek tła.Jakieś inne sugestie?
Aktualności na stronie tworzą listę.
Z własnego doświadczenia podpowiem Ci, że warto coś takiego:
Kod
<div class="news">
<h3><a href="#">Lorem ipsum dolor sit amet</a></h3>
<span>28/0/2009, 13:45</span>
<p>...</p>
</div>
Zamienić na:<h3><a href="#">Lorem ipsum dolor sit amet</a></h3>
<span>28/0/2009, 13:45</span>
<p>...</p>
</div>
Kod
<div class="news">
<.. class="meta">tytuł, data</>
<... class="body"><p>tresC</p></>
</div>
Prędzej czy później obecny podział stanie się problematyczny
<.. class="meta">tytuł, data</>
<... class="body"><p>tresC</p></>
</div>
W górnym menu masz zamiast wycinki prasowe, to masz wycinki pracowe
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.