Forum Debian Users Gang

pink · 2011-10-23 10:17:29

znowu was chce troche pomeczyc
jako ze buduje sobie strone w html i css, chcialbym usluszec jakies slowa krytki (konstruktywnej oczywiscie)
licze na jakies sugestje i poprawe bledow.

tutaj link
http://pinkflood.uphero.com/

tutaj kod .css

Kod:

body 
  {
  #padding: 2;
  #margin: 2;
  background: url(images/background.gif) 50% 50% no-repeat;
  background-position: center;
  #display: table;
  background-attachment: fixed;
  }
div 
  {
  border: 1px solid black;
  padding: 06px;
  #width: 1250px;
  }
  navigation 
  {
  float: left;
  max-width: inherit;
  }
  content 
  {
  float: centre;
  max-width: inherit;
  }
  footer 
  {
  float: center;
  max-width: inherit;
  #clear: both;
  }
ul  
  {
  list-style-type:none;
  margin:0;
  padding:2;
  padding-top:2px;
  padding-bottom:2px;
  }
li 
  {
  display:inline;
  }
a:link,a:visited  
  {
  font-weight:bold;
  background-color:#323232;
  text-align:left;
  padding:5px;
  text-decoration:none;
  text-transform:uppercase;
  color: white; text-shadow: black 0.2em 0.2em 0.2em;
  border-radius: .5em; box-shadow: 0 4px 2px rgba(0,0,0,.3);
  }
a:hover,a:active  
  {
  background-color:#a40022;
  #background-color:#000000;
  position: relative;  
  top: 1px;
  }
h1  
  {
  margin:30px 40px;
  color: black;
  font: bold "Arial";
  position: relative;
  text-align: left;
  text-shadow: 0.1em 0.1em 0.05em white;
  #text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;
  #text-shadow: 0.1em 0.1em 0.2em #ea24cc;
  }  
h2    
  {
  margin:30px 40px;  
  #color: white;
  color: black; 
  #text-shadow: white 0.1em 0.1em 0.2em;
  font-weight: bold;
  }
p    
  {
  color: black; text-shadow: white 0.1em 0.1em 0.2em;
  font-weight: bold;
  }  
div    
  {
  font-weight: bold;
  text-align: left;
  font-family:verdana;
  }
div.transbox
  {
  width: auto;
  height: auto;
  margin:30px 50px;
  background-color:#ffffff;
  border:1px solid black;
  opacity:0.7;
  filter:alpha(opacity=60); /* For IE8 and earlier */
  }
div.transbox p
  {
  margin:20px 40px;
  font-weight:bold;
  color:#000000;
  }
#div.transbox img
  {
  opacity:1.0;
  filter:alpha(opacity=100); /* For IE8 and earlier */
  }
#img
#  {
#  opacity:0.7;
#  filter:alpha(opacity=40); /* For IE8 and earlier */
#  }
img:hover
  {
  opacity:1.0;
  filter:alpha(opacity=100); /* For IE8 and earlier */
  }

#zdjecia
#{
#div.img {
#  margin: 2px;
#  border: 1px solid #0000ff;
#  height: auto;
#  width: auto;
#  float: left;
#  text-align: center;
#}    
#div.img img
#{
#  display: inline;
#  margin: 6px;
#  border: 4px solid #ffffff;
#}
#div.img a:hover img {border: 1px solid #0000ff;}
#div.desc
#{
#  text-align: center;
#  font-weight: normal;
#  width: 120px;
#  margin: 2px;
#}

na pierwszy front: to zdjecia, mam je w polprzezroczystosci bo cale okno "transbox" jest tak ustawione a chcalbym ze by po najechaniu kursorem pokazywaly sie w pelni?????.

radziojedi · 2011-10-23 10:30:29

Ogólnie, to fajny motyw, ale to, co rzuciło mi się w oczy, to przeskalowane zdjęcia, które lepiej zmniejszyć i wtedy wrzucić na serwer.
Tak jakby mały brak spójności pomiędzy stroną główną i podstronami (widać, że tapeta się rusza:)), ale to szczegół.

Ostatnio edytowany przez radziojedi (2011-10-23 10:32:10)

pink · 2011-10-23 10:47:24

to mruganie minie wpienia, ale chcialbym miec ten efekt przezroczystosci,
macie jakis pomysl na ten hover tylko nad zdjeciami?????

ArnVaker · 2011-10-23 10:51:27

Nie wiem czy to podchodzi pod krytykę, ale mnie przekierowuje na www.000webhost.com/admin-review. ;)

pink · 2011-10-23 11:01:23

no wlasnie zauwazylem admini robia reviev strony bedzie dostepna za jakis czas.
SORRY.

thalcave · 2011-10-23 20:47:31

Stronka już działa... logo troche się rozjeżdza przy mniejszym oknie przeglądarki...

BiExi · 2011-10-23 20:52:32

To tło w body jest tragiczne wizualnie i chyba plik jest dość duży

pink · 2011-10-23 21:44:26

a co zrobic z tym bannerem co sie rozkracza raz w jedna raz w druga strone???
mozecie zasugerowac jakies konkretne wielkosci (grafik) i najlepsze formaty plikow, to ma byc prosta i szybka strona.
bez zbednych wodotryskow, ale z charakterem.

kamikaze · 2011-10-23 22:02:19

Możesz wyciąć środek bannera, który jest kolorowy. Po bokach możesz dać elementy z czarnym tłem o zmiennej szerokości. Będzie dobrze się zachowywać przy rozszerzaniu okna. Ale mimo wszystko trzeba by ustawić minimalną szerokość na elemencie zawierającym banner i czarne dodatki po bokach żeby banner nie wychodził.

pink · 2011-10-23 22:04:48

a dla czego tlo jest tragiczne, to jest zdjecie mojej cory wypraszam sobie!;-)

Huk · 2011-10-23 23:11:06

Dodam że stronka po powiększeniu jej w operze chodzi tragicznie wolno czytaj scroling jest bardzo powolny i zasobożerny - obciąża na full jedno jajco mojego C2D!! W Iceweasel jest jeszcze gorzej... to samo na Konquerorze - nie wiem czemu tak ale wypadało by to naprawić.

Jacekalex · 2011-10-24 03:46:12

Huk napisał(-a):
Dodam że stronka po powiększeniu jej w operze chodzi tragicznie wolno czytaj scroling jest bardzo powolny i zasobożerny - obciąża na full jedno jajco mojego C2D!! W Iceweasel jest jeszcze gorzej... to samo na Konquerorze - nie wiem czemu tak ale wypadało by to naprawić.

A ja na FF nie mam żadnych kłopotów ze stroną, duży plus za to, że działa pomimo noscripta, browser-protect, i kilku innych kfiatków. :xD
W Operze również wszystko ok.

Też mam C2D, także moim zdaniem spostrzeżenia Huka, nie są regułą, tylko wyjątkiem.
Albo jakimś stricte "Debianowym" folklorem.

Pozdro
;-)

Ostatnio edytowany przez Jacekalex (2011-10-24 04:01:40)

pasqdnik · 2011-10-24 10:00:27

Ja ekspertem od tworzenia stron nie jestem (vide mój podpis ;-) ), ale tło jest "za ciężkie" i nie bardzo współgra z resztą strony. Poza tym nic się nie rozjeżdża i działa w miarę płynnie.

pink · 2011-10-24 10:57:04

wiec te grafiki (zdjecia) sa za duze???

kamikaze · 2011-10-24 11:15:34

background.gif ma 632.2 kb przydałoby się go odchudzić, jakaś kompresja. Sam obrazek ściąga się u mnie 3,71 s. Spowalnia to znacznie ładowanie strony. Doinstaluj firebuga do przeglądarki i sam sprawdź jak to się przedstawia. Dla porównania strona główna onet.pl zajmuje 395 kb ze wszystkimi obrazkami.

Ostatnio edytowany przez kamikaze (2011-10-24 11:17:17)

pink · 2011-10-24 11:49:02

jest pare poprawek.
i galerie powinny dzialac

tylko nie wiem dlaczego link do tweelijners nie dziala

http://www.tweelijners.com/tom/tomskitesite-en/Home.html

Ostatnio edytowany przez pink (2011-10-24 11:51:37)

kamikaze · 2011-10-24 12:07:42

Przez / na końcu urla.

pink · 2011-10-24 12:48:19

i dalej nie dziala nie dziala.

juz dziala, dzieki.

jeszcze cos????.

Ostatnio edytowany przez pink (2011-10-24 14:03:15)

kamikaze · 2011-10-24 13:06:30

U mnie zaczeło działać, link do http://www.tweelijners.com/tom/tomskitesite-en/Plan.html, nie widzę nigdzie linku do Home.html.

hello_world · 2011-10-24 20:02:54

@pink
Masz zapchaną witrynkę wielkością tych zdjęć(a na pewno background1.jpg), widać to przy wejściu na stronkę.
Kiedyś słyszałem taką opinię od speców od dostepności, że główna strona nie powinna być cięższa niż 60-70KB.
Zamiast całego obrazku potnij go na mniejsze.
W gimpie jest fajna opcja że możesz odchudzić obrazek na potzreby www (gdzieś w narzędziach albo filtrach)

Ja bym też zastoswał tlo dzieci dla ogolnego pojemnika a nie dla body zobacz co się dzieje przy Ctrl+- tlo body Ci sie rozjeżdza
Czyli opakowałbym wszystkie divy jednym nadrzędnym.

Ostatnio edytowany przez hello_world (2011-10-24 21:36:34)

pink · 2011-10-24 20:49:21

no wlasnie tu sie motam bo nie rozumiem tej kaskadowosci css mozesz jakis kodzik zapodac i druga sprawa na duzym ekranie zamiast na srodku to mam wszystko po lewo, tylko tlo zostaje na srodku - jak to poprawic.

moze ktos sproboje sie troche pobawic tym kodem u gory?? prosze.

hello_world · 2011-10-24 21:35:25

Aby opakować jednym divem wszystkie inne definiujesz sobie taki kontener:

Kod:

<html>
<body>
<div id = "contener_calosci">
    <div id = "contener_header">
        Jakies znaczniki
    </div>
    <div id = "kontener_central">
      Jakieś znaczniki
    </div>
   <div id = "contener_footer">
     Jakies znaczniki...
   <div>
</div>
</body>
</html>

A teraz css

Kod:

/*definiujesz sobie*/ 
body {margin:0;padding:0;font-family:Verdana,Helvetica,Sans;}
/*Teraz sobie zdefinuj najważniejsze znaczniki, które mają przybierać domyślne wartośći(tzn takie jakie chcesz)*/
h1,h2,h3,h4 {...;}
p{...;}
a {...;}

/* Teraz aby wszystko miec na środku*/
#kontener_calosc {margin:0px auto;} /*W przypadku IE<=7 musisz jeszcze dodać font-align:center; */

/*Reszta jak Ci się podoba */

Generalnie polecam mojego guru w dziedzinie css
http://meyerweb.com/eric/css/edge
http://meyerweb.com

Naprawdę przedstawia css bardzo profesjonalnie

Ostatnio edytowany przez hello_world (2011-10-24 21:44:36)

pink · 2011-10-24 21:55:39

o wlasnie, o taka pomoc mi chodzi THnX

to sie troche pobawie teraz.

Minio · 2011-10-24 23:28:12

hello_world napisał(-a):
Kiedyś słyszałem taką opinię od speców od dostepności, że główna strona nie powinna być cięższa niż 60-70KB.

Kiedyś uważano, że cała witryna (z obrazkami, zewnętrznymi stylami etc.) nie powinna zajmować więcej niż 50kB.

Przy czym należy pamiętać, że łącza są coraz szybsze, a i ograniczenie ilości transferu (np. miesięcznie) powoli staje się tylko złym wspomnieniem, dotyczącym jedynie urządzeń przenośnych.

Z drugiej strony, urządzenia przenośne mają coraz wyższe rozdzielczości i coraz lepiej dopracowane silniki przeglądarek — taka Opera Mini wyświetla większość stron właściwie identycznie jak jej siostra na „zwyczajne” komputery.

Z pewnością warto dbać o to, żeby strona zajmowała jak najmniej miejsca na dysku twardym serwera (i jej przesyłanie do klienta trwało jak najkrócej), jednak przyjmowanie jakichkolwiek ścisłych ograniczeń mija się z celem. Należy zachować zdrowy rozsądek i zastanowić się, ile strona faktycznie musi zajmować.

Van · 2011-10-25 09:43:32

http://ranking.pl/pl/rankings/screen-resolutions.html

Przypominam, że rozdzielczości ekranu o szerokości 1024 pikseli i mniejsze wciąż stanowią te 20% w naszym kraju. Mógłbyś to uwzględnić.

Forum Debian Users Gang

Ogłoszenie

#1 2011-10-23 10:17:29

pink - Użytkownik

Strona w budowie

Kod:

#2 2011-10-23 10:30:29

radziojedi - Gambini

Re: Strona w budowie

#3 2011-10-23 10:47:24

pink - Użytkownik

Re: Strona w budowie

#4 2011-10-23 10:51:27

ArnVaker - Kapelusznik

Re: Strona w budowie

#5 2011-10-23 11:01:23

pink - Użytkownik

Re: Strona w budowie

#6 2011-10-23 20:47:31

thalcave - prawie jak admin

Re: Strona w budowie

#7 2011-10-23 20:52:32

BiExi - matka przelozona

Re: Strona w budowie

#8 2011-10-23 21:44:26

pink - Użytkownik

Re: Strona w budowie

#9 2011-10-23 22:02:19

kamikaze - Administrator

Re: Strona w budowie

#10 2011-10-23 22:04:48

pink - Użytkownik

Re: Strona w budowie

#11 2011-10-23 23:11:06

Huk - Smoleńsk BULWA!

Re: Strona w budowie

#12 2011-10-24 03:46:12

Jacekalex - Podobno człowiek...;)

Re: Strona w budowie

Huk napisał(-a):

#13 2011-10-24 10:00:27

pasqdnik - Pijak ;-P

Re: Strona w budowie

#14 2011-10-24 10:57:04

pink - Użytkownik

Re: Strona w budowie

#15 2011-10-24 11:15:34

kamikaze - Administrator

Re: Strona w budowie

#16 2011-10-24 11:49:02

pink - Użytkownik

Re: Strona w budowie

#17 2011-10-24 12:07:42

kamikaze - Administrator

Re: Strona w budowie

#18 2011-10-24 12:48:19

pink - Użytkownik

Re: Strona w budowie

#19 2011-10-24 13:06:30

kamikaze - Administrator

Re: Strona w budowie

#20 2011-10-24 20:02:54

hello_world - Członek DUG

Re: Strona w budowie

#21 2011-10-24 20:49:21

pink - Użytkownik

Re: Strona w budowie

#22 2011-10-24 21:35:25

hello_world - Członek DUG

Re: Strona w budowie

Kod:

Kod:

#23 2011-10-24 21:55:39

pink - Użytkownik

Re: Strona w budowie

#24 2011-10-24 23:28:12

Minio - Użyszkodnik

Re: Strona w budowie

hello_world napisał(-a):

#25 2011-10-25 09:43:32