prosta strona z informacjami... Opcje

[topgun777]

Zapraszam do oceniania mojej stronki piotro.pdg.pl...(zagladaj.pl jak rozprogaguje siem;])
Obecnie jeszcze pracuje nad skryptem do ogłoszeń oraz skryptem z wynikami podobnym w działaniu jak livescore.pl, prosze też o ewentualne sugestie co dobrze by zmienic co poprawic itd... obecnie to php ucze sie sam od mniej wiecej wakacji (kiedys chwilowo cos robilem w nim ale potem odpuściłem gdyż pochłoneło mnie programowanie w javie i C++ ale teraz kiedy znajduje czas to bawie sie php:) )

Piotrek

Ten post edytował topgun777 24.08.2008, 20:33:31

[kavka]

Popracuj nad wyglądem strony - to co jest obecnie odrzuca.

[AjaxSrajax]

High,

Mnie wygląd nie odrzuca, ba nawet mi się podoba, tylko że....
Ludzie się ze mnie śmieją bo jak wchodzę na stronę, to zamiast czytać treść wciskam klawisz ctrl i kręcę kółkiem myszy (a mam włączoną opcję `zoom text only` w mojej ulubionej przeglądarce).
Potem wciskam ctrl+U.
I zazwyczaj nasuwają mi się smutne refleksje.
Refleksje for today:
Strona się rozjeżdża przy powiększaniu tekstu i cała magia ascetycznego szeryfowego layoutu, bez zbędnych obrazeczków dla dzieci znika. Kod HTML też słaby, ale jeszcze gorszy CSS pomimo tego, że W3C się nie pluje. Wszystko fixed, absolute, wielkości w pikselach. Taka strona powinna się powiększać bez uszczerbku na jakości aż firefox nie wydoli. A tu kapa.
Chciałbym Ci pomóc dlatego jedyna moja rada jest taka:
Jest taki pan co się zwie Eric A. Meyer i napisał parę książek. IMHO najfajniejsza to:
CSS leksykon kieszonkowy.
Polecam.

[topgun777]

AjaxSrajax:

dzis troszke popracowałem nad layoutem juz wogole nie ma pozycji absolute i tym podobnych zupełnie od nowa zrobiłem, książke jak tanio dostanę to z chęcią kupie narazie bazuje na googlach:) myśle tez nad jakąś grafiką.
ps mozesz mi powiedzieć jakiej przeglądarki używasz?


Kavka:
Mozesz mi konkretniej powiedziec co odrzuca, co razi co zmienic...?

[AjaxSrajax]

Chodziło mi o firefoxa 3 pod windę. Tak naprawdę to kod HTML u Ciebie też woła o pomstę do piekła.
Przykład tego co powinno być:
Na Twojej stronie jest prościutki header. Nagłówek h1 ( taki tu powinien być) zawarty w elemencie div.
Jego kod powinien brzmieć:

Kod

<div id="header">
<h1><a href="index.php">Wiadomości z kraju i ze świata</a></h1>
</div>

W css dajesz padding dla h1, width 100% dla div#header, text-align:center i tyle. Nie używaj height.

Wysokości muszą być niejako deklarowane automatycznie.
Dla Ciebie, kogoś kto koduje w C++ i w Javie, czyli ma pojęcie o logice maszynki polecam dwie książki.

Kuloodporne strony internetowe: autor Dan Cederholm, to dla HTML i CSS oraz ten leksykon Meyera.
Zainwestuj parę złotych w te pozycje, a gwarantuję, że będziesz pisał dobry kod.

Do dostania w każdym Empiku w każdym mieście jak mniemam.

Pozdrawiam (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

[kavka]

Kavka:
Mozesz mi konkretniej powiedziec co odrzuca, co razi co zmienic...?

Moje uwagi a propo wyglądu strony:
- czcionka przy pogodzie jest za mała (dla mnie mało czytelna) w porównaniu z czcionka użytą do treści wiadomości. Dodatkowo grafika przedstawiająca kierunki świata nachodzi na tekst:

(IMG:http://images38.fotosik.pl/5/012abca9d2a445ee.jpg)
- a to co za babol?
(IMG:http://images30.fotosik.pl/269/64b104b9a933c1bf.jpg)

- czcionka użyta do daty nieczytelna;
- wiadomości umieszczone na stronie od pewnego miejsca mają mniejsze wcięcie patrząc od prawej strony.

Ogólnie:
- zmniejszyłabym szerokość pola wiadomości;
- nadałabym wyraźniejszego graficznie rozróżnienia trójpodziału kolumnowego strony (może jakiś inny lekko odcień tła tudzież ramka - możliwości jest wiele);
- po co klamry przy pozycjach menu?;
- zmiana kroju czcionki...

Zależy też do kogo chcesz dotrzeć z tym serwisem. Poza tym o gustach się nie dyskutuje ale jeśli chcesz zainteresować musisz urozmaicić stronkę.

[topgun777]

To pozmieniałem znow troche w stylach dodałem ramke nad pogodą jeszcze poracuje ogolnie to zmienie skryp ze zamist jak jest teraz ze mi sciaga kawałek kodu przz curl z wp.pl to zrobie wyciaganie info do tablicy tak ze potem bedzie mi to łatwiej sformatować. Mam tez pytanie bo obecnie po moich zmianach mam na górze na divem header takie jakies puste białe pole i nie moge za bardzo zlokalizowac co to moze byc moze ktos z was bedzie wiedział czemu tak mam? ps. juz działą mi domena zagladaj.pl

pozdro

Ten post edytował topgun777 26.08.2008, 11:48:32

[AjaxSrajax]

chyba margin dla h1

spróbuj:

Kod

div#header h1{
margin:0;
}

Z takich mega podstaw to wiedz też, że jak robisz nawigację to używaj znacznika ul.
czyli zamiast:

Kod

<div id="center_menu">
<table class="menu" align="center">
<tr>

<td class="menu"><a href="#" class="menu_links">Informacje</a>|</td>
<td class="menu"><a href="http://ogloszenia.piotro.pdg.pl" class="menu_links">Ogłoszenia/forum</a>|</td>
<td class="menu"><a href="#" class="menu_links">Wyniki sportowe</a>|</td>                </tr>
</table>
</div>

dajemy:

Kod

<div id="center_menu">
<ul>
<li><a href="#" class="menu_links">Informacje</a></li>
<li><a href="http://ogloszenia.piotro.pdg.pl" class="menu_links">Ogłoszenia/forum</a></li>
<li><a href="#" class="menu_links">Wyniki sportowe</a></li>
</ul>
</div>

no to pozdro (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

Ten post edytował AjaxSrajax 26.08.2008, 13:44:03

[kavka]

Nie no ta ramka odpada (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

Masz jakiś pomysł wizualny na tę stronę czy to tworzenie metodą prób i błędów z główną dewizą: "a nuż się uda" (IMG:http://forum.php.pl/style_emoticons/default/questionmark.gif)

[topgun777]

zrobilem na ul i li ale nie wiem narazie jak zrobic zeby to bylo w poziomie a nie w pionie i zeby bylo obok siebie wsrodkowane tak jak bylo wczesniej.

ps. czemu ta ramka odpada?
co do pomyslu to rysuje mi sie pewien ale musze porobic różne rzeczy i popatrzeć aż osiagne to co się spodoba...

[AjaxSrajax]

Bardzo łatwo:

Kod

div#center_menu ul{
text-align:center;
}

div#center_menu ul li{
display:inline;
}

ewentualnie jakiś padding dla ul:

Kod

div#center_menu ul{
padding:0.5em 0;
}

Zarówno w HTML jak i w CSS mamy do czynienia z elementami blokowymi jak i liniowymi. Nie są one tożsame.
Blokowe przełamują linię tekstu, liniowe nie. W blokowych można umieszczać blokowe i liniowe, w liniowych tylko liniowe.
CSS pozwala na wyświetlenie elementów blokowych jako liniowe i liniowych jako blokowe poprzez

Kod

display:inline;

albo

Kod

display:block;

Jest jeszcze display:inline-block; , ale IE ich nie lubi, a szkoda...
Zapoznaj się z tym tematem np na tym kursie.
Te dwa rodzaje elementów i ich właściwości i zachowania to podstawa CSS, jak ją opanujesz przerobisz każdy PSD albo XCF na *x*html w moment (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

tymczasem (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

[topgun777]

dzięki za pomoc:) w wolnej chwili zapoznam się kursem.