Projekt 1 HTML5/CSS3 początki! Opcje

[maiza]

Zacząłem edukować się w kierunku HTML 5 i CSS 3 (kiedyś coś tam pisałem w starszych wersjach, kilka lat temu).

Znalazłem na necie jakiś layout .psd i spróbowałem go zakodować w HTML 5 i CSS 3.

http://maiza.ct8.pl/projekty/patent/index.html

To jest oczywiście tylko strona głowna, bez odsyłaczy etc. Głównie mi chodzi o opinie kodu, tzn. czy prawidłowo zakodowałem ogolny zarys w HTML 5 i CSS 3, co zrobilem zle lub co moglem zrobic lepiej lub czego nie powinieniem zrobic?

Tu jest css:

http://maiza.ct8.pl/projekty/patent/css/style.css

A tu jest jpg szablonu:

http://maiza.ct8.pl/projekty/patent/patent.jpg

Mialem troche problem z menu, tzn. z jego tłem/przyciskami, zrobiłem to chyba w nie zbyt dobry sposób.. Dodatko jak widać na jpg w szablonie jest dość nietypowa czcionka, w PS zrobiona z tzw. Sharpem, dużo szukałem o tym i niestet nie udało mi się tak samo sformatować tej czcionki w CSS, nie mogłem znajść nic konkretnego na temat antyaliasingu..

Głównie proszę o ocene kodu html i css.

btw. przy okazji, jak widzicie, na dole strony, Ostatnie projekty, chciałbym zrobić tam galerię, tak jak to narazie przedstawiaja obrazki zrobione na sztywno, aczkolwiek nie wiem przez co moge uzyskac taka galerie? JS? jQuery ? czy cos innego? Ma ktoś jakiś pomysł, jak taką galerie z bocznymi przelacznikami i poziomym suwakiem moge zrobic?

[maiza]

Nie dodali jej do psd? (IMG:style_emoticons/default/ohmy.gif) Tekst powininen być wycentrowany w każdym boxie

Czcionke sobie znalazłem i dodałem @font-face, aczkolwiek nie o to chodzi. Była ona zrobiona w Photoshopie jako 'Sharp', zwykła wygląda tak jak ta na stronie, a z sharpem tak jak na jpg.
Chciałem uzyskać przez CSS czcionke maksymalnie wygładzoną, aby wyglądała tak jak w PS, ale niestety chyba tak się nie da.

Otworzyłem z ciekawości w IE8 i nie za ciekawie wygląda (IMG:style_emoticons/default/tongue.gif) ba, w ogóle nie wygląda

A możesz zarzucić screenem? Bo u mnie wszystko jest ok, może to przez rozdzielczość :/ aczkolwiek niestety musze poczytać, jak to wszystko ogarnac żeby działało w kazdej przegladarce, a pozniej jakis RWD

Nie no, kolego, bez jaj. Tak się nie wstawia obrazków tła. Już pomijając, że nie daj Boże zmieni się któryś napis w menu i będzie miał inną szerokość. To jest do poprawy w pierwszej kolejności.
<div id="bg_menu">
<img src="images/bg_menu.png" alt="bg"/>
</div>

Masz racje, tez mi sie wydawało jak to pisałem dosyć nie zbyt dobrze zrobione. Korzystałem z kursów ze strony Strefa Kursów .. Pan na filmie opisywał, żeby tak robić (IMG:style_emoticons/default/smile.gif) Ale to co Ty piszesz ma sens. Rozumiem, że wrzucić to do styli, jako bg dla diva bg_menu ?

<nav>
<ul>
<li><a href="#">Home</a> </li>
<li><a href="#">O Fundacji</a> </li>
<li><a href="#">Działalność</a> </li>
<li><a href="#">Wydarzenia</a> </li>
<li><a href="#">Nowe projekty</a> </li>
<li><a href="#">Kontakt</a> </li>
</ul>
</nav>[/html]

Druga sprawa, że linkó w menu nie powinieneś pozycjonować za pomocą padding-top. Wypozycjonowany powinien być element nadrzędny (w tym wypadku <nav /> albo <ul />).
(IMG:http://i.imgur.com/o0JMdge.png)

Fakt, tak coś czułem, że w tym menu coś skopałem, bo miałem własnie problem z wypozycjonowaniem go. Spróbuje to naprawić.

Po co na siłę stosujesz HTML5, powielając tym samym elementy HTML?

[HTML] pobierz, plaintext 
<section>
    <div id="artykuly">
        [...]
    </div>
</section>
<footer id="stopka">
    <div id="zawartosc_stopki">
        [...]
    </div>
</footer>
[HTML] pobierz, plaintext 

Wystarczyłoby:

[HTML] pobierz, plaintext 
<section id="artykuly">
    [...]
</section>
<footer id="stopka">
    [...]
</footer>
[HTML] pobierz, plaintext 

Wiem, że by tak wystarczyło i tak normalnie, sam bym zrobił, ale posługiwałem się kursem z HTML 5, tak jak wcześniej pisałem, bo chciałbym raczej bazować na HTML 5, niż bawić się w starego htmla czy xtmla. Poprostu próbuje zrozumiec strukture budowy strony w HTML 5. Tak robił 'gość' na kursie, myślałem, że kurs jest w miare prawidłowy :/ Dziwiła mnie własnie ilość nie potrzebnych divów czy selektorów ogólnie.

A to tylko błędy na pierwszy rzut oka, w kodzie HTML, który ma 150 linijek. Jak dla mnie trója z minusem.

Mogło być gorzej, ale nie o to chodzi. Dzięki, że przynajmniej poświęciłeś czas, żeby to sprawdzić. Dzięki za pomoc, lepiej eliminować błedy na poczatku, niż się do nich przyzwyczajić i robić je z każdym razem (IMG:style_emoticons/default/smile.gif) (IMG:style_emoticons/default/wink.gif)