Witajcie,

mam na ukończeniu stronke moją trzecią w życiu www.centrummaja.pl
jeszcze się nie waliduje także prosze tego nie oceniać. Przeraził mnie post któryś tam z kolei. Chłopak został zganiony za to, że użył za dużo DIVów. Powiedzcie czy ja też przesadziłem? Myślałem, że strona ma być oparta na divach.

wypowiedzcie sie tez co do wygladu. Tylko nie tej walidacji poprawię to jutro na tip top.

Pozdrawiam

Nie wszedzie masz zabezpieczony kod przed sqlInjection, np w podglądzie newsa.

... wlasnie widac, do ukonczenia to jeszcze jej troche zostalo:

1)nie uzywaj wygladzanych czcionek w grafikach, zwlaszcza ze dales czcionek "Comic" do tekstow- glupio i brzydko to wyglada.
2)popracuj nad wycinaniem grafik- zwlaszcza przy newsach "Wiecej newsow"
3)te pionowe paski w menu- troche rozmazane wyszly, chyba za bardzo to rozciagnales
4)uzywaj paddingow, bo teksty dotykaja krawedzi
5)beznadziejny dzial kontakt- rozplanuj go na nowo
6)top- te zdjecia jakos dziwnie wygladaja, nic dziwnego skoro zapisales go jako diva
7)zobacz jakie to poszarpane http://www.centrummaja.pl/pics/banner.gif
8)j.w http://www.centrummaja.pl/regulamin/index.php
9)masz blad w stopce: powinno byc bez kropki: Copyright © Centrum Rozwoju... 2008 All rights reserved.

1/10

Hejka,

Tak, też przesadziłeś, ale jak na trzecią stronę w życiu jest nieźle . Treść strony jest bardzo mała, a ilość bloków div jest zbyt duża. Chyba nie pomoże Ci wytykanie, w których miejscach są one niepotrzebne. Bardziej przyda Ci się informacja jak kodować strony nowocześnie, niż gdzie są błędy w Twojej nienajgorszej trzeciej stronie w życiu. Poczytaj o semantyce kodu XHTML, czyli o jego poprawności pod kątem prezentowanej treści. Nowoczesne pisanie stron nie polega na umieszczaniu wszędzie bloków div.
Pojęcie to wzięło się stąd, że do 'niedawna' layouty stron, czyli struktury graficzno-prezentacyjne opierały się na tabelach. Zastąpienie ich blokami div, nie czyni Cię lepszym programistą. Bloki div służą tylko grupowaniu treści ( czyli częśći strony) w logiczne fragmenty. Reszta to prawidłowe tagi XHTML. To one sprawiają, że martwa treść nabiera życia. Treść jest jak malowany obraz, a stosowanie odpowiednich tagów i struktur XHTML są niczym odpowiednie pociągnięcia pędzla mistrza. W mistrzowskim wykonaniu zachwyca nas martwa natura, portrety, pejzaże. Każda treść jest piękna. Pozdro & poćwicz, bo warto.  

flesz w menu zupelnie zbedny

przypatrz sie obrazkowi ktory sie dubluje w contencie na bgr

jest strasznie poszarpany

Dzięki Ajax jako jedyny odniosłeś się do tego o co prosiłem. Powiedz mi proszę jak mam rozkładać pociętą grafikę na www. Teraz pakowałem to w DIV, rozciągałem po osi X itp itd ale wszystko w DIV.

pozdrawiam

taka dziwna ta czcionka jest. nie wiem może mi sie wydaje ale nie pasuje, kolorystyk mi sie nie podoba, lekka kaszana dopracuj.

ocena 5/10

Nie chodzi tu o grafikę. A przynajmniej nie powinno chodzić, bo Twoją da się pociąć tak, żeby nadmiar kontenerów nie wystąpił.

Menu robi się standardowo na listach, bo jest to lista odnośników.
Tabele, które masz na stronie to z żadnego punktu widzenia nie są dane tabelaryczne.

Masz takie fragmenty:

[HTML] pobierz, plaintext 
<div id="bottom3"> </div>
  <div id="footer">  </div>
[HTML] pobierz, plaintext 

Jeśli coś jest puste, to nie ma sensu tego w ogóle w kodzie umieszczać. Jest to nadmiar elementów do niczego nie potrzebnych. Masz strasznie dużo takich pustych elementów. Rozumiem, że to w celu pocięcia grafiki, ale cały dół można spokojnie było zrobić na jednym divie i zamiast tekstu na obrazku dać po prostu zwykły tekst w tymże divie. Uważam, że nie powinno się ciąć grafiki na więcej części niż jest to wymagane - przy jakiejkolwiek zmianie jest potem sporo trudniej.

W galerii na przykład niepotrzebny jest ten dodatkowy div z linkami. Równie niepotrzebne są też znaczniki br - zapoznaj się z marginesami i paddingami - będzie bardziej elegancko.

Chodzi po prostu o to, żeby strona była możliwie jak najprostsza, ale jednocześnie poprawna. To znaczy, że jeśli jest jakiś element , ktory do danego miejsca pasuje lepiej niż div czy tabela, to należy go używać (patrz menu). Masz na przykład tabelę z jedną jedyną komórką - co to w ogóle za tabela?! Tabela ma służyć danym, które można pogrupować w wiersze, a każdy wiersz ma kilka komórek (niekoniecznie tą samą ich ilość), która jednoznacznie go opisuje w takiej tabeli. Div to po prostu kontener - wygodny do rozplanowywania układu strony i paru innych rzeczy, ale w pewnych sprawach są inne elementy - takie, które o wiele lepiej go zastąpią.

Ważne jest po prostu, żeby znać umiar i wiedzieć co nadaje się do czego.

Widzę, że starasz się pisać w standardzie strict - bardzo dobrze, im wcześniej tym moim zdaniem lepiej, chociaż masz dużo zdeprecjonowanych atrybutów na przykład. Ale nie zmieniaj cokolwiek by się nie stało na transitional, jak się już nauczysz pójdzie jak po maśle ;) Tylko staraj się od razu pisać poprawnie, żeby nie wyrabiać złych nawyków i nie musieć na sam koniec wszystkiego poprawiać.

http://www.centrummaja.pl/news/newsShow.ph...20limit%201,1/*
http://www.centrummaja.pl/news/newsShow.ph...20limit%200,6/*
Jak juz masz takie bledy postaralbys sie bardziej graficznie ale nie jest tak zle 5-5,5/10

P.S http://www.centrummaja.pl/gallery/showGall...0limit%200,10/*
Popraw to masz topic o sql injection w dziala PHP czy Przedszkole

chyba sam sobie przeczysz- to mamy wypowiadac sie o wygladzie, o kodzie czy o tematyce ? Bo juz glupieje.
Przecytaj dokladnie moj post- 3od gory.

nospor możesz luknąć czy teraz jest ok z SQL Injection?

juz jest ok

Siemka,

   Po pierwsze musisz pamiętać, że elementy div i span nie są złe. Oprócz tego, że dzielą stronę na części powodują, że ograniczasz niejednokrotnie liczbę klas i id. Dlatego, że nadając identyfikator id elementowi div dostajesz automatycznie dostęp do elementów w tym `bloku`. Czyli np. zamiast

<p class="klasa1">lalala</p><ul class="klasa2"><li id="id1">tralala</li>....... itp itd
użyjesz <div id="jakis_id"><p>lalala</p><ul><li>tralala</li>.......</div>, otrzymując dostęp do elementów w css jako div#jakis_id p{.....}, div#jakiś_id ul li{....} itp. itd.
Błędem jest zastępowanie rdzennych elementów XHTML np. blokami div (ale nie chodzi tylko o nie).
Strony (przynajmniej ja) piszemy tak, że najpierw testujemy gotową stronę BEZ CSS. Ona ma działać, prezentować treści, kiedy nie może być wyświetlony obrazek niosący treść, wypisywana jest wartość atrybutu alt itp...Tyczy się to wszelkich elementów graficznych niosących treść, np. elementów listy, czyli menu. Jeżeli masz bajerancki glossy web3.0 z odbiciem, gradientem itp. i z napisem np.HOME, (który też jest grafiką) przycisk,  bez css będzie wyświetlony jako... pusty element. (Czyli tło elementu, który nie ma treści- czyli go nie ma;)) Warto stosować np. taki zabieg:

<ul><li id="home"><a href="link.coś" title="Przejdź do strony głównej"><span>HOME</span></li><li>....</ul>

Daj w css background dla #li a, który będzie tym bajeranckim buttonem, a dla spana właściwość: display:none; Tu "zły" wujek span (liniowy kolega diva) nas ratuje...

Ten przykład pokazuje, jak można kombinować z grafiką, nie tracąc na jakości treści, dlatego, że ten kod zadziała i w lynxie i w Firefoxie.

Jak ciąć grafę, gdy nie ma bloków div? Tak samo Przecież tak samo jak blok div możesz stylizować każdy element blokowy ( liniowy też po daniu deklaracji display:block;). Nie wiem, czy o to Ci chodzi. Nie ma tu żadnej różnicy. Potem marginy, paddingi no i positiony.. Jak byś miał jakieś pytania, się nie krępuj Miłego kodowania

Ajax chodzi mi o to, że w moim kodzie mam tak:

[HTML] pobierz, plaintext 
<div id="bottom1"> <br /><br />   	
	<a href="trafTu/index.php">TUTAJ JESTEŚMY</a>
  </div>
  <div id="bottom0"> </div>
  <div id="bottom2">
	<br />
 
	<a href="news/news.php?page=0">
		Więcej newsów<img src="pics/news.gif" alt="" /> 
	</a>
  </div>
  <div id="bottom3"> </div>
[HTML] pobierz, plaintext 

i tak w css mam takie cos

[HTML] pobierz, plaintext 
#wrapper #bottom1 {
  width: 408px;
  height: 118px;
  background: url(../pics/trafTu.png);
  margin: 0px;
  color: black;
  font-size: 14px;
  font-weight: bold;
  float: left;
}
 
#wrapper #bottom2 {
  width: 258px;
  height: 118px;
  background: url(../pics/bottom2.png);
  float: left;
  margin: 0px;
  text-align: right;
}
 
 
 
#wrapper #bottom3 {
  width: 23px;
  height: 118px;
  background: url(../pics/bottom0.png) repeat-x;
  float: left;
  margin: 0px;
[HTML] pobierz, plaintext 

czyli pytanie jak zrobić to bez divów?
Ja ładuje to w div i jade sobie po X ileś tam pixeli. A inaczej? Kiedyś chyba ludzie robili podobnie ale w tabeli co było bez sensu bo nie po to sa tabelki.

#wrapper #bottom1 {
width: 408px;
height: 118px;
background: url(../pics/trafTu.png);
margin: 0px;
color: black;
font-size: 14px;
font-weight: bold;
float: left;
}

#wrapper #bottom2 {
width: 258px;
height: 118px;
background: url(../pics/bottom2.png);
float: left;
margin: 0px;
text-align: right;
}



#wrapper #bottom3 {
width: 23px;
height: 118px;
background: url(../pics/bottom0.png) repeat-x;
float: left;
margin: 0px;


Wydaje mi się że jesli już sa to elementy id nie trzeba odnosiś sie przez #wrapper #bottom3 , wystarczy #bottom3 {..}

rozciąganie grafiki parametrem width i height ? chyba lepiej wykonać grafikę 1:1 tak jak ma być na stronie

wspólne elementy można wyciągnąć np:

*{ margin: 0; padding: 0}
jak 0 to px już nie jest potrzebny

Hej,

Fragment kodu XHTML, który przytaczasz zamieniłbym na:



Masz źle pociętą tę grafikę.

Zanim Ci to wyjaśnię daję ogólny schemat strony głównej, taką jaką bym ja widział:

Klik!

Nie traktu jej jak wyrocznię, to przykładowy, sklecony na prędce kod.
Jednak przejrzyj sobie jej kod. Zauważ, że pisząc w ten sposób uzyskujesz walidację automatycznie, jest ona czymś oczywistym.

Jest tu kilka spanów, wynika to z tego, że masz graficzne elementy jako np. pozycję menu. Dla tych spanów dajesz w css display:none; stylizując np. ul#mainnav li a{ display:block, width...;height;... i background...;}

Znaczniki <br> zastąp marginami, paddingami, albo position:absolute, lub relative.

Ta grafika, którą ciągniesz w stopce powinna mieć rozdzielczość 1x118 i to ciągniesz w osi x:

div#footer{background url('pics/trafTu.png') repeat-x top left;

Dolna część prawej kolumny (pomarańczowy rounded-corner shit) powinna być jej elementem, a nie elementem footera. Ja bym dał to tło dla elementu <a id="more-news">, dodając ikonkę już jako img
i umieszczając ją w tym znaczniku <a id="more-news">.

Pamiętaj, że tak napisany XHTML działa dobrze także w przeglądarkach tekstowych i nie obsługujących CSS ( po to te spany, dla których dasz display:none;.
Więcej to już tylko CSS. Nie masz widzę zbyt mocnych podstaw, więc obadaj tę stronkę.
Jest to dobra strona, pisana przez kolesia, który wie co mówi. Jednak jest po angielsku.
Css ma się łączyć z XHTML, jest jak ubranie człowieka. To ono się musi dopasować do naszego ciała, a nie na odwrót. Nie można zapominać co jest priorytetem.
Jak by co to wal śmiało
Pozdro