Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów
Rozjeżdżające się menu+ogólna ocena kodu - Wersja do druku

+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: Rozjeżdżające się menu+ogólna ocena kodu (/thread-rozjezdzajace-sie-menu-ogolna-ocena-kodu)

Rozjeżdżające się menu+ogólna ocena kodu - swing - 04-04-2011



RE: Rozjeżdżające się menu+ogólna ocena kodu - Kartofelek - 04-04-2011

Od początku:
--------------------------------------------------------
nagłówek:
<?xml version="1.0" encoding="iso-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">

Pisaliśmy o tym ostatnio. Używaj nagłówka z html5. Jest prostszy i przyjemniejszy. + daje nowe mozliwości
----------------------------------------------------
<title> [tytuł strony] </title>

tia...
-------------------------------------------------------
<body><!--]>-->
co to za komentarz....
--------------------------------------------------------
<div id="TOP">
Niby ok, ale lepiej z mały nazw stosować nazwy ID. To w końcu też atrybut, a atrybuty piszemy z małej. Kod lepiej się poza tym czyta jak są małe. Poza tym baaardzo polecam stosować klasy zamiast ID. Id stosuj tylko dla tych elementów na których używasz JavaScript. Dzięki temu kod CSS jest bardzo czytelny (szczególnie gdy piszesz style w 1 linijce) Smile

--------------------------------------------------------
<div id="LOGO2">
<img src="images/logo_2.jpg" alt="logo_2" width="193" height="40" />
</div>
Kiepsko. Ten element nie jest potrzebny dla treści. To typowy "zapchaj-dziura". Czyli powinieneś go dać jako background dla LOGO2. Czyli:
#logo2 {background:url(.....) no-repeat; width:193px; height:40px; float:left; overflow:hidden;}

<div id="logo2"></div>
--------------------------------------------------------
id="OSTATNIWMENU"
Używaj CamelCase albo Podkreslen_oddzielajacych_wyrazy
--------------------------------------------------------
MENU&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Bardzo zle!
Używaj marginesów lub padding-right
Przez takie spacje u ciebie MENU to nie MENU a MENU+spacje. Treść, treść, treść! Wygląd to CSS - Pamiętaj o tym!
--------------------------------------------------------
<div>
<img src="images/logo_3.jpg" alt="logo_3" />
</div>
nie ma atrybutów. width i height :]
poza tym ten div jest nie potrzebny. wystarczy img dać style clear:both; display:block; :}
--------------------------------------------------------
<div id="STOPKA" class="LNKSTOPKA">
&copy; Copyright by <a href="http://www.swing1.cba.pl">swing1.cba.pl.</a>&nbsp;&nbsp;&nbsp;

to co wyżej
--------------------------------------------------------
<div style="text-align:center;font-size:11px" class="cbalink">
style inline Smile

--------------------------------------------------------
Ogólnie:

# Używaj wcięć tak by kod był łatwy do czytania.
# Używaj komentarzy na końcu divów - dzięki temu łatwo będziesz mógł zlokalizować końce diwów (ten punkt opcjonalny)
# używaj klas zamiast id. Id tylko dla javascript
# co nie jest treścią styluj w CSS, nie jako IMG
# używaj CSS gdzie się da. Nie używaj spacji - używaj paddingów i marginesów.
# możesz stworzyć dokument bez stylowania. Pusta czarnobiała treść bez wyglądu. Wtedy postaraj się ostylować to za pomocą samego CSS, backgroundów w css itp.
# poznaj znaczenie tagów. Gdzie używać DIV, gdzie spanów itp.


Jak na 1 stronę jest całkiem dobrze. To co ci wymieniłem to tylko czepianie się o które prosiłeś Smile
Pozdrawiam i życzę dalszej owocnej nauki. Niech moc będzie z tobą ;}

RE: Rozjeżdżające się menu+ogólna ocena kodu - swing - 04-04-2011

@Kartofelek: Dzięki za bardzo szybką i wyczerpującą ocenę kodu.

Proszę jeszcze tylko o wskazówki odnośnie odjeżdżania menu od obrazka je opływającego podczas zmiany rozmiarów strony, oraz będę wdzięczny za podpowiedź jak naprawić kod, aby szerokość menu nie była zależna od długości treści odnośników w samym menu.

RE: Rozjeżdżające się menu+ogólna ocena kodu - Kartofelek - 04-04-2011

Ustaw konkretne wymiary width + height dla wszystkich elementów listy, dla samej listy i obrazka z lewej strony.