[html][css][javascript] edico pl Opcje

[Black-Berry]

link: edico.pl

Szablon pod którego bede podpinał własnego CMS'a. Chiałbym usłyszeć opinię na temat kodu i layoutu. Co sądzicie? Z góry dziękuję za komentarze

Ten post edytował Black-Berry 20.07.2007, 13:57:11

[LonelyKnight]

1.

[HTML] pobierz, plaintext 
<input class="logout_button" type="button" onclick="parent.location='index.php?logout=true'" name="login_panel_logout_button" value="wyloguj" />
[HTML] pobierz, plaintext 

Wyłączę JS i się nie wyloguję? Poza tym po co dajesz button 'wyloguj' użytkownikom, którzy nie są jeszcze zalogowani? Chyba wystarczy 'zaloguj' a gdy już to zrobię to zamiast 'zaloguj' chciałbym zobaczyć 'wyloguj' - jako 'submit' i bez problemów z JS.

2. Do formularzy: <fieldset>, <label>.

3. Dlaczego wszystko u Ciebie jest klasą jak tutaj:

[HTML] pobierz, plaintext 
<div class="contact_phone">
[HTML] pobierz, plaintext 

Używasz gdzieś jeszcze klasy "contact_phone" na tej podstronie? Chyba nie...

4.

[HTML] pobierz, plaintext 
<div class="page_top_menu">
 
        <div class="page_top_menu_beginning_pl"></div>
        <div class="page_top_menu_item_1"><a href="#"><img src="layout/top_menu_item_1_pl.gif" alt="edico_lite" onmouseover="this.src='layout/top_menu_item_1_hover_pl.gif'" onmouseout="this.src='layout/top_menu_item_1_pl.gif'" /></a></div>
        <div class="page_top_menu_item_2"><a href="#"><img src="layout/top_menu_item_2_pl.gif" alt="edico_pro" onmouseover="this.src='layout/top_menu_item_2_hover_pl.gif'" onmouseout="this.src='layout/top_menu_item_2_pl.gif'" /></a></div>
        <div class="page_top_menu_item_3"><a href="#"><img src="layout/top_menu_item_3_pl.gif" alt="edico_flash" onmouseover="this.src='layout/top_menu_item_3_hover_pl.gif'" onmouseout="this.src='layout/top_menu_item_3_pl.gif'" /></a></div>
        <div class="page_top_menu_ending_pl"></div>
    </div>
[HTML] pobierz, plaintext 

Takie menu spokojnie możesz zrobić jako listę, bez JS i ładnie sformatowane w CSS.

5. Mam wrażenie, że logo na pudełku CMSa już gdzieś widziałem.

6. Ogólnie jeśli chodzi o kod to moim zdaniem zdecydowanie za dużo DIV'ów (footer już całkowita DIVmania ) - praktycznie każdy element ładujesz w DIV'a - poza tym niepotrzebny JS. Całość (kod) nie do końca przemyślana, można byłoby to zrobić lepiej. Grafika ładna choć przesunąłbym wszystko o jakieś 15-20 px do góry.

Pozdrawiam

[Black-Berry]

Dzięki za rzeczowy komentarz to po pierwsze.

1) Jeśli chodzi o divy to faktycznie jest ich dużo, ale nie wiem czy da się to okroić. Weź pod uwagę, że planuję sporą rozbudowę, a poza tym jest to zaprojektowane tak, że części edytowalne rozsuwają się wraz ze zwiększeniem się tekstów.

2) Footer ma rzeczywiście sporo klas, ale każda klasa jak "contact_phone" czy "contact_mail" mają inne parametry, rózne wielkości itp. To ułatwia sprawę bo piszę kod a dopiero później formatuję w CSS.

3) Przycisk wyloguj może faktycznie będe musiał zmienić... Jest tsam javascript bo jak był jako zwykły input to za kazdym razem jak chciałes wylogować to przeglądarka pytała czy zapamietać hasło - troche bezsensu, ale popracuje jeszcze raczej nad tym.

4) co miałes na myśli pisząc o <label> i <fileset>

5) Da się za pomocą CSS zrobić menu z możliwością hoover ? Jak próboiwałem subklasy ":hover" to działało tylko w Firefox a pod Internet Explorer już nie.

Jeszcze raz dzieki za uwagi na temat kodu.

[LonelyKnight]

1) Myślę, że da się okroić. Tu nie chodzi nawet o rozszerzanie się pól tylko o to, że niektóre rzeczy możesz spokojnie formatować nie obejmując ich w DIVy. Wracając np. do tego footera:

zamiast:

[HTML] pobierz, plaintext 
<div class="w3c_html_valid"><img src="layout/w3c_html_valid.png" alt="w3c_html_valid" /></div>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
<div id="w3c_html_valid"></div>
CSS:
div#w3c_html_valid { background-image:url(layout/w3c_html_valid.png);
[HTML] pobierz, plaintext 

albo wywalając DIVa

[HTML] pobierz, plaintext 
<img src="layout/w3c_html_valid.png" alt="w3c_html_valid" id="w3c_html_valid" />
CSS: img#w3c_html_valid { tutaj wszystko co było w <div id="w3c_html_valid'> }
[HTML] pobierz, plaintext 

itd.

2) Chodzi mi o to, że klas powinno używać się wtedy kiedy na podstronie występuje ona kilka razy - w przeciwnym razie formatuj po ID. Zamiast

[HTML] pobierz, plaintext 
<div class="costam">
[HTML] pobierz, plaintext 

..daj

[HTML] pobierz, plaintext 
<div id="costam">
[HTML] pobierz, plaintext 

i w CSS

[HTML] pobierz, plaintext 
div#costam {}
[HTML] pobierz, plaintext 

4)

To:

[HTML] pobierz, plaintext 
<div class="login_panel">
		<div class="caption">panel logowania</div>
		<form action="index.php" method="post">
		<div>
		<input class="login_name" type="text" name="login_panel_login_name" value="nazwa użytkownika" onfocus="this.value=''" />
		<input class="login_password" type="password" name="login_panel_login_password" value="********" onfocus="this.value=''" />
		<input class="login_button" type="submit" name="login_panel_login_button" value="zaloguj" />
 
		<input class="logout_button" type="button" onclick="parent.location='index.php?logout=true'" name="login_panel_logout_button" value="wyloguj" />
		</div>
		</form>
		<div class="footer"><div><span class="nick">nick w systemie: </span><span class="user_title">anonim</span></div><div><span class="access_level">twój typ dostępu: </span><span class="user_access">wszyscy [0]</span></div></div>
	</div>
[HTML] pobierz, plaintext 

Pewnie dałoby się sformatować bez większości divów.

[HTML] pobierz, plaintext 
<fieldset id="login_panel">
<legend>panel logowania</legend>
<form>
<input ... />
</form>
</fieldset>
[HTML] pobierz, plaintext 

5) Faktycznie pod IE może być z tym problem ale to nie zmienia faktu, że powinieneś użyć listy. Pewnie da się jakość obejść problem z hover ale nie chce mi się kombinować

Ten post edytował LonelyKnight 21.07.2007, 23:04:50

[Black-Berry]

Dzięki za wskazówki LonelyKnight. Bez tego pewnie dalej trwałbym w błedzie. Postaram się wprowadzić zmiany

[LonelyKnight]

Nie ma o czym mówić

Powodzenia.

[koderrr]

na glownej

masz pudelka przy napisie aktualnosci

daty nie sa dobrze wypozycjonowane
dodalbym link do glownej w topie

[Black-Berry]

@koderrr Codziennie dodaję jakieś nowe elementy dlatego przez jakiś czas strona będzie w rozsypce. Napiszę jak będzie już można na to spojrzeć.

Postaram się też przygotować demo żeby można było zobaczyć to od strony administratora. Jestem bardzo ciekaw reakcji nowych użytkowników.

[LonelyKnight]

Poza tym polecam przeczytać: http://pornel.net/xhtml

[woj_tas]

[HTML] pobierz, plaintext 
<div class="page_top_menu">
        <div class="page_top_menu_beginning_pl"></div>
        <div class="page_top_menu_item_1"><a href="content.php?component=com_static_content&content=2"><img src="layout/top_menu_item_1_pl.gif" alt="edico_lite" onmouseover="this.src='layout/top_menu_item_1_hover_pl.gif'" onmouseout="this.src='layout/top_menu_item_1_pl.gif'" /></a></div>
        <div class="page_top_menu_item_2"><a href="content.php?component=com_static_content&content=3"><img src="layout/top_menu_item_2_pl.gif" alt="edico_pro" onmouseover="this.src='layout/top_menu_item_2_hover_pl.gif'" onmouseout="this.src='layout/top_menu_item_2_pl.gif'" /></a></div>
        <div class="page_top_menu_item_3"><a href="content.php?component=com_static_content&content=4"><img src="layout/top_menu_item_3_pl.gif" alt="edico_flash" onmouseover="this.src='layout/top_menu_item_3_hover_pl.gif'" onmouseout="this.src='layout/top_menu_item_3_pl.gif'" /></a></div>
        <div class="page_top_menu_ending_pl"></div>
    </div>
[HTML] pobierz, plaintext 

Zamień na:

[HTML] pobierz, plaintext 
<ul id="menu">
<li id="menu-1"><a href="" title="">Edico lite</a></li>
<li id="menu-2"><a href="" title="">Edico pro</a></li>
<li id="menu-3"><a href="" title="">Edico flash</a></li
</ul>
[HTML] pobierz, plaintext 

css:

[HTML] pobierz, plaintext 
ul#menu {overflow:hidden;}
ul#menu li {float:left; }
ul#menu li a {text-indent:-9999px;float:left;}
 
ul#menu li#menu-1 a {background:url(images/obrazek.jpg) no-repeat;width:xxpx;height:xxpx;}
ul#menu li#menu-2 a {background:url(images/obrazek.jpg) no-repeat;width:xxpx;height:xxpx;}
ul#menu li#menu-3 a {background:url(images/obrazek.jpg) no-repeat;width:xxpx;height:xxpx;}
 
ul#menu li#menu-1 a:hover {background:url(images/obrazek-hover.jpg) no-repeat;width:xxpx;hreight:xxpx;}
ul#menu li#menu-2 a:hover {background:url(images/obrazek-hover.jpg) no-repeat;width:xxpx;hreight:xxpx;}
ul#menu li#menu-3 a:hover {background:url(images/obrazek-hover.jpg) no-repeat;width:xxpx;hreight:xxpx;}
[HTML] pobierz, plaintext 

Pisane z palca wiec moze byc nie dokladne. Cala idea polega na tym zeby cale menu zrobic na listach. W lista wpisac zwykle odnosniki, a w css-ie wyrzucic z nich text (text-indent:-9999px;) oraz wstawić obrazki.
pseudoklada hover bedzie chodzic bo jest na odnosniku a nie na liscie.

Pozdrawiam

Ten post edytował woj_tas 23.07.2007, 08:57:26

[Kreton]

a w css-ie wyrzucic z nich text (text-indent:-9999px;) oraz wstawić obrazki.

Przecież gdy nie załadujesz obrazków to nic nie zobaczysz, ale gdy w momencie załadowania sie dokumentu i dobrych stylów ale nie ma obrazków cała witryna jest już w pewnym sensie widoczna! Wiadomo na cyzm oko skupić.

Tak wygląda strona gdy obrazki niee zostały załadowane ! http://picasaweb.google.com/lh/viewPhoto?u...325555541135970 W przypadku użycia backgroundu wszystko było by dobrze widoczne nawet bez obrazków.

Ten post edytował Kreton 23.07.2007, 10:46:00

[Black-Berry]

Czyli co ? Ładować wszystko do backgroundu tak jak mam ?

Poza tym polecam przeczytać: http://pornel.net/xhtml

Założyłem wątek na forum i napisali mi, że to podobno "bełkot"... chyba to trzeba sprawdzić

Ten post edytował Black-Berry 23.07.2007, 12:32:33

[woj_tas]

Przecież gdy nie załadujesz obrazków to nic nie zobaczysz, ale gdy w momencie załadowania sie dokumentu i dobrych stylów ale nie ma obrazków cała witryna jest już w pewnym sensie widoczna! Wiadomo na cyzm oko skupić.

Masz racje, bez obrazków jest lipa.

W przypadku użycia backgroundu wszystko było by dobrze widoczne nawet bez obrazków.

No tak, ale zauważ że jego menu niemozesz podzielic na background + tekst pociewaz nie uzyskasz takiej czcionki. Chciałem tylko pokazać jak można zbudować menu na liscie z grafikami. a to że bez grafiki nie zobaczymy menu to oczywiste... Pokazalem mu alternatywne menu bez uzywania JS.

[Black-Berry]

Pokazalem mu alternatywne menu bez uzywania JS.

I za to własnie wielkie dzieki przyda sie napewno.

[Kreton]

Co do kodu dodam, że to co zobaczyłem to jakieś divopolis.

No tak, ale zauważ że jego menu niemozesz podzielic na background + tekst pociewaz nie uzyskasz takiej czcionki. Chciałem tylko pokazać jak można zbudować menu na liscie z grafikami. a to że bez grafiki nie zobaczymy menu to oczywiste...

Może i nie takie oczywiste: http://www.stopdesign.com/articles/replace_text/
Chociaż z drugiej strony : http://www.alistapart.com/articles/fir/. Ehh.

Ten post edytował Kreton 23.07.2007, 15:18:37

[LonelyKnight]

Czyli co ? Ładować wszystko do backgroundu tak jak mam ?

Założyłem wątek na forum i napisali mi, że to podobno "bełkot"... chyba to trzeba sprawdzić

...to może to bardziej się spodoba: http://forum.php.pl/index.php?showtopic=42...ornel.net/xhtml

http://standards.blaut.biz/xhtml-faq/ (tutaj przeglądnij kod i pomyśl czy wrzucenie wszystkiego w DIV to "idea" XHTMLa tak jak pisałeś w tym temacie, który zamknęli)