Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [kod css/xhtml] kod xHTML
Forum PHP.pl > Inne > Oceny
sebekzosw
Proszę o ocenę kodu xHTML

Link
webber
Pierwszy spojrzenie i... divitis. Ale jedziemy po kolei.

Kod
class="floatleft"


Ciekawa nazwa klasy winksmiley.jpg

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>


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>


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>


Do menu mogłeś odwołać się poprzez div#menu ol { }, a te divy o klasie text1 i 2 eh... masakra smile.gif

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>


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>


To też jest lista. Dodaj width i height do obrazków.
sebekzosw
Cytat(webber @ 15.05.2009, 09:17:06 ) *
Pierwszy spojrzenie i... divitis. Ale jedziemy po kolei.


Może jakaś sugestia na rozwiązanie ;> smile.gif?
osl
przecież masz mnóstwo innych tagów niż div...
sebekzosw
A co złego jest w DIV? One są najbardziej uniwersalne... smile.gif
Poker
moze i uniwersalne ale do formatowania tekstu uzywa sie czegos innego niz DIV!
sebekzosw
czego się używa? smile.gif
pyro
kurshtml.boo.pl, zobacz
webber
Cytat(sebekzosw @ 15.05.2009, 15:41:47 ) *
czego się używa? smile.gif


To Ty na pewno wiesz co robisz? smile.gif

Pytasz o podstawy podstaw...
Crozin
Generalnie rzecz biorąc. DIVów powinno być jak najmniej - bo nie niosą one sobą żadnej semantycznej treści.
sebekzosw
Wybierałem między <table> a <div>

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 :|
Crozin
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.
MWL
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;
230005
To ja może trochę z innej strony - obok loga klubu masz "wycinki pracowe", a powinno być chyba prasowe smile.gif. 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.
sebekzosw
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!
Crozin
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.
Kod
<div style="width:88px; float:left;">&nbsp;</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.

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>


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?


Tak na pierwszy rzut oka
sebekzosw
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?
Crozin
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.

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:
Kod
<div class="news">
                          <.. class="meta">tytuł, data</>
                          <... class="body"><p>tresC</p></>
                      </div>
Prędzej czy później obecny podział stanie się problematyczny
PawelC
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.
Invision Power Board © 2001-2019 Invision Power Services, Inc.