Pierwsza strona, błędy, poprawa.

Question

Cześć!
Ostatnio zainteresowałem się budową stron. Trochę poczytałem i obejrzałem filmików na ten temat, w wyniku czego zrobiłem pierwszą stronę. Nie jest ona zbyt specjalna oraz piękna, ale od czegoś trzeba zacząć. Podczas tworzenia stronki natrafiłem na kilka problemów, które chciałbym rozwiązać. Również na stronie zrobiłem kilka sztuczek, które jak mi się wydaje nie powinny mieć miejsca podczas tworzenia stron.
Link do strony:
testowastrona222.cba.pl
kod html:
http://pastebin.com/PSxbyyHD
kod css:
http://pastebin.com/shugSmii

Lista problemów:
1.Całą stronę dałem jako jeden wielki div i w nim tworzyłem mniejsze. Nie mogłem jednak zrobić, aby 3 małe divy po lewej współgrały z dużym po prawej gdzie jest tekst. Zastosowałem do tych kolumn margin-top: -x; i dlatego to w miarę działa. Jak powinno być poprawnie.
2.Kolejny problem natrafiłem gdy dodałem do małych divów po lewej zdjęcia. Dodając zdjęcie w pliku html nie mogłem na nim pisać, natomiast dodając go w pliku css mogłem dodawać na nim pisać, lecz nie mogłem/potrafiłem zmieniać wielkości obrazu. Jak powinno wyglądać to poprawnie?
3.Czy da się w funkcji css rozmazywać obrazek?
4.Kiedy dodałem do małych divów hiperłącze to rozciągały się one na całą szerokość strony mimo, że divy miały określone wymiary. Dopiero po zastosowaniu float: left; problem ustał. Dlaczego takie coś miało miejsce?

Ogólnie to jakie macie rady przy tworzeniu stron dla początkującego? Robić dowolną tematykę i dosyć dużo, aby zapoznać się dobrze z najbardziej użytecznymi funkcjami? Kiedy zabrać się za javescript?

Comments

Jako, że sam dopiero zaczynam z samym html i css nie będę oceniał, niech się inni wypowiedza. Jednak, kiedy ją otworzyłem na telefonie tło renderowalo się w 2 częściach co jest dziwne. Obraz tła wstawiales w 2 divy, czy podwójnie w 1 ?

 

Edit. Już widzę background repeat. Nie dałoby się jakoś tego połączyć?

Answer 1

Ode mnie super duży plus za tematykę bmw, cud nie samochody <3 :D

1. Co to znaczy, żeby te 3 małe divy współgrały z tym dużym? Chcesz żeby były w środku, na tym żółtym tle?
2. Co dokładnie jak powinno wyglądać? Bo trochę namieszałeś :P
3. Da się. Wystarczy poszukać na necie, http://stackoverflow.com/questions/20039765/how-to-apply-a-css-3-blur-filter-to-a-background-image
4. Hiperłącze też ma określone wymiary, tzn tyle ile "tekst" w nim to tyle ono zajmuje, może coś z tym był problem? W sumie nie wiem do końca o co Ci chodzi :D ale zaraz zobaczę kod

Comments

• ogólnie to powinieneś raczej dać w środku containera jedno miejsce osobne na te 3 zdjecia po lewej i osobne na treść po prawej.
• chociaż brakuje tu znaczników html5 więc to raczej one powinno być użyte
• za dużo <br> używasz, zamiast tego daj padding lub margin
• do tych 3 zdjęć po lewej mógłbyś dać taką samą klasę i w CSS je wystylizować jednocześnie, bo dużo kodu Ci się powtarza
• stylizuj po klasach, a nie po id

A co do tego hiperłącza to zbadaj sobie stronę w przeglądarce, bo ja nawet nie mogłam ich znaleźć ;p