Pytanie o klasy

[Pozycjoner.pro]

W jednym z szablonów z którego się uczę, jest taki zapis w html

<div id="footer">

<div class="footer">Page created by Water Design © all rights reserved</div>

</div>

a w css

#footer {

background:url(images/footer.jpg) no-repeat;

width:764px;

height: 26px;

clear:both;

}

.footer {

margin:0 0 0 450px;

padding:6px 0 0 0;

color:#173E5F;

}

I nie rozumiem, dlaczego to trzeba tak rozbić w pliku html na ID i na class="footer", i podobnie w stylach #footer i .footer. Dlaczego nie można tego zapisać w jednym ID="footer" (xhtml) i #footer (css) ?

Może znacie jakieś fajne strony z przykładami do nauki ?

[sh0tek]

hm pewności nie mam ale chyba jakbyś przerabiał stopkę czyli dodał coś po

<div class="footer">Page created by Water Design © all rights reserved</div>

jakiegoś następnego diva czy sam text, żeby całość miała styl stopki i te same tło tam było no i reszta....

w sumie chyba możesz to sobie przerobić jeśli bardzo ci to przeszkadza

[gawith]

I nie rozumiem, dlaczego to trzeba tak rozbić w pliku html na ID i na class="footer", i podobnie w stylach #footer i .footer. Dlaczego nie można tego zapisać w jednym ID="footer" (xhtml) i #footer (css) ?

Dało by się zakładając że, że nie będziesz zmieniał stylów, marginesów i pozycji. Ogólnie w tym wypadku id pozycjonuje diva na stronie a class nadaje mu pożądany wygląd itp, dając dużo większe możliwości manewru niż skorzystanie z samego #footer

[misieq]

cały kod jest napisany niepoprawnie - to jest głównie nie semantycznie.

identyfikator służy głownie do wyodrębniania większych części strony i powinien być unikalny na stronie.

Identyfikatorami może być np: top, menu, tresc, stopka

Klasy służą do opisywania danych elementów większej częsci.

Załóżmy:

<div id="stopka">
  <div class="logosy> tu jakies obrazki </div>
  <div class="linki"> <a href="" > link </a> </div>
</div>

CSS:

#stopka .logosy {tu style}

#stopka .linki {tu style}

A to co masz napisane - sematycznie powinno wyglądać tak:

<div id="footer">
 <p>Page created by Water Design ? all rights reserved</p>
</div>

#footer {

background:url(images/footer.jpg) no-repeat;

width:764px;

height: 26px;

clear:both;

}

#footer p {

margin:0 0 0 450px;

padding:6px 0 0 0;

color:#173E5F;

}