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

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

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.

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ć

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

Nie ma o czym mówić

Powodzenia.

na glownej

masz pudelka przy napisie aktualnosci

daty nie sa dobrze wypozycjonowane
dodalbym link do glownej w topie

@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.

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

[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

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.

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ć

Masz racje, bez obrazków jest lipa.



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.

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

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



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

...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)