Problem sa header-om

Sve ti je puno grešaka u kodu…morat ćeš nanovo :krele:

<div class="ne_reg">
[INDENT] <ul>
 <li><a href="$LOGIN_LINK$"><img src="http://belmin96.ucoz.com/profil.png"/>Prijavi se</a></li>
 <li><a href="$REGISTER_LINK$"><img src="http://belmin96.ucoz.com/regaj_se.png"/>Registruj se</a></li>
 <div class="trazilica"><li><div id="search">
<?if($SEARCH_FORM$)?>
 <div class="search"><form method="get" action="/search/"><input type="hidden" name="t" value="0"/><input type="text" name="q" value="Ukucaj pojam za pretragu..." class="query"> <input type="submit" class="search-button" id="search-button" value="Traži"></form></div>
<?endif?></li>
 </div>
 </div>
 </ul>
 </ul>[/INDENT]
 </div>

totalni raspašoj, križanje DIV i LI tagova, viškovi tagova…dobro da radi uopće, za ovo popravit treba 5h za novo 1h…

PAZI OVO!

Evo ti ispravljen HTML, uff:
[HTML]

<?ifnot($USER_LOGGED_IN$)?>
<?endif?> <?if($USER_LOGGED_IN$)?>
[/HTML]

Hvala promjenio sam HTML kod al ista stvar sa chrom-om opet ii ovdje pola greski je od uCoza nisam ih ja napravio :stuck_out_tongue:

Ljudi, ljudi, alaj ste ga nadrobili tu, svega i svačega.

belom996 kada ti nešto ne valja i kada ti se layout raspada onda provučeš svoj kod kroz css i html validator i vidiš što se događa, druga stvar div element ne možeš staviti unutar li elementa. Zašto je to tako neću ti sada objašnjavati jer bi te to još dodatno zbunilo, ali ne možeš.

@Uber_Gosu, kakve ti priče prodaješ tu sa position relative i kontra struke??? Pa svaki element je po defaultu postavljen tako da je njegovo svojstvo position relative, i postavljanjem još jednom u toga istoga unuta CSS-a je nepotrebno.Što se tiče IE-a nema tu nikakvog problema, u zadnjih 7-8 godina koliko radim ovaj posao, naletio sam samo na 3-4 puta kada se stranica u IE-u raspadala. KOnstatirao bih da samo početnici i neznalice imaju problema sa IEom. Tvoje pisanje margina za svaku zasebno je defintivno nepotrebno, sa stajališta samih performansi, a i nekakvih općeprihvaćenih preporuka uvijek je bolje pisati: margin: 0 0 0 0, nego za svaku marginu posebno, tako je i sa border, tako je i sa padding i sa background i sa svime ostalim.

@belmo996 iako si promijenio html kod i dalje ti se pokazuje 17 grešaka i 27 upozorenja, a css validator čak njih 169, ja mislim da bi bilo dobro da ispraviš sve te greške ap da onda vidiš.

Šta nije po defaultu position static?

Isprika, je static je po defaultu. ali je to u biti isto kao i position relativ, jedina razlika je u tome što static elementu ne možeš odrediti poziciju sa top,left, right i bottom svojstvima što je kod elementa sa relative positionom moguće odraditi, ali po defaultu i jedan i drugi imaju normalan tijek na stranici, dakle ne izbacuju se iz konteksta stranice ili roditeljskog elementa što fixed i absolute elementi čine, ako nisu unutar elementa koji ima position relative. I jedini razlog zašto bi netko trebao deklarirati position relativ na nekom elementu je ako želi unutar njega imati element koji ima position absolute, a to se danas najćešče koristi za razno razne slidere.

Nije istina i bilo bi dobro staviti na početak svakog CSS-a ovo:

* {
	padding: 0;
	margin: 0;
	position: relative;
}

Tako kako se nebi dalje ponavljalo…

Stavi ovo gore u CSS pa neće bit ni tih 3-4 puta, barem ja tako radim…

Da, ali clusteri na HDDovima nikad nisu manji od 4KB a u doba nakon 56k modema mislim da par linija koda ne igra igu što se bandwidtha tiče, jedan jpeg to sve poništi, a kako sam i odgovorio “zerou” radim CSS u DWu i navikao sam da ga tako slaže, čak bi rekao da mi je preglednije jer ionako ne stavljam sav CSS u 1 fajl nego 7-8 komada…po meni je ovo uopće nebitno kako ko radi, stvar navike bitno je da nema greške i da IE radi normalno.

PS
I padding je kao po defaultu 0, lol, bolje ja stavim u *{} da je on nula pa me kasnije nije briga koji IE korisnik koristi :stuck_out_tongue:

Rekao bi da je u slučaju kada se ima:
[HTML]

[/HTML] i još ako ima floatova i absolute positioninga obavezno sve definirat, jer garant neće sve radit kako treba, kolko sam samo puta gotov menu (dropdown) koji u FFu leti vidio da se raspada u IE a u Chromeu čudni bugovi i koješta. Još kad se DIVu dodaju kakvi "data-" propertisi...lol.

Ja ili ne radim ili pazim da je sve barem 99% definirano, a 1KB veći CSS fajl me dira ko gaya playboy :misa:

PS
Dali netko od vas koristi “.clearfix” divove, mislim na ovo:
[HTML]
.clearfix {
margin: 0px;
padding: 0px;
clear: both;
height: 0px;
width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
position: relative;
}
[/HTML]
Ako da gdje i zašto?

[quote=“Uber_Gosu”]Nije istina i bilo bi dobro staviti na početak svakog CSS-a ovo:

* {
	padding: 0;
	margin: 0;
	position: relative;
}

Tako kako se nebi dalje ponavljalo…

Stavi ovo gore u CSS pa neće bit ni tih 3-4 puta, barem ja tako radim…
[/quote]

Hmmmm, jesi li siguran? Radilo se uglavnom o problemima sa IE6 koji nisu bili tako priprosti kao što ti misliš. I o dosta kompliciranim layoutima za izvesti samim po sebi. I taj position relative nisam nigdje koristio koliko se sjećam sad, bilo je to podosta davno.

[quote=“Uber_Gosu”]
Da, ali clusteri na HDDovima nikad nisu manji od 4KB a u doba nakon 56k modema mislim da par linija koda ne igra igu što se bandwidtha tiče, jedan jpeg to sve poništi, a kako sam i odgovorio “zerou” radim CSS u DWu i navikao sam da ga tako slaže, čak bi rekao da mi je preglednije jer ionako ne stavljam sav CSS u 1 fajl nego 7-8 komada…po meni je ovo uopće nebitno kako ko radi, stvar navike bitno je da nema greške i da IE radi normalno.[/quote]
Naravno da ti nije važno ako ti stranica ima godišnje 500 posjeta, ali za stranice koje imaju posjete od par desetaka tisuća dnevno je to važno, a to možeš i sam izračunati. 7-8 komada CSS fileova je vrlo neoptimizirano i nepotrebno razbacivanje resursima.

Preporučio bih ti onda da se kloniš DWa i da počneš s nekim editorom koji ti optimizira CSS file pa ćeš vidjeti kako to izgleda, možeš za početak uzeti SublimeText Sublime Text: The text editor you’ll fall in love with izvanredan editor s puno mogučnosti, od zen codinga, do optimiziranja fileova sve ima za njega.

[quote=“Uber_Gosu”]
PS
I padding je kao po defaultu 0, lol, bolje ja stavim u *{} da je on nula pa me kasnije nije briga koji IE korisnik koristi :p[/quote]
Nisam ništa govorio za padding, rekao sam samo za position, da je potpuno nepotreban, jer to i je. A i ovaj reset koji si ti pokazao je nešto što sam odavno izbacio iz upotrebe, i manje više koristim ili Eric Meyers CSS Tools: Reset CSS ili neki od ova četiri ostala CSS Reset | 2012’s most common CSS Resets to copy/paste, with documentation / tutorials, ali u 99% je ovaj prvi navedeni.

[quote=“Uber_Gosu”]Rekao bi da je u slučaju kada se ima:
[HTML]

[/HTML] i još ako ima floatova i absolute positioninga obavezno sve definirat, jer garant neće sve radit kako treba, kolko sam samo puta gotov menu (dropdown) koji u FFu leti vidio da se raspada u IE a u Chromeu čudni bugovi i koješta. Još kad se DIVu dodaju kakvi "data-" propertisi...lol.[/quote] Ovo je najobičniji menu koji nema nikakvih zafrkanicija, ovisno o tome da li želiš da bude vertikalni ili horizontalni. Nema se tu šta puno filozofirati i mudrovati, a što se tiče data propertiesa pa to nema veze s CSSom i pozicioniranjem elemenata i layoutom stranice, data-... je vezan uz novi HTML5 i handlanje elemenata s Javascriptom.

1KB veći file naočigled neizgleda puno, ali baci si na papir i vidi kako taj 1KB izgleda kada ti stranica ima 10k jedinstvenih posjeta dnevno.

[quote=“Uber_Gosu”]
PS
Dali netko od vas koristi “.clearfix” divove, mislim na ovo:
[HTML]
.clearfix {
margin: 0px;
padding: 0px;
clear: both;
height: 0px;
width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
position: relative;
}
[/HTML]
Ako da gdje i zašto?[/quote]

Ili ovaj: The New Clearfix Method : Perishable Press ili ovaj A new micro clearfix hack – Nicolas Gallagher ili ovaj CSS - Clearing floats ovisno od situacije do situacije. A zašto, pa zato što će u većini ovaj zadnji biti dovoljan za sve potrebe

eh i još jedno:
razlika u veličini ovog koda
[HTML]
*{
margin: 0;
padding: 0;
position: relative;
}

div {
margin-left: 10px;
margin-right: 5 px;
margin-top: 3px;
padding-top: 5px;
padding-bottom: 10px;
padding-right: 3px;
}
[/HTML]

i ovoga
[HTML]
*{margin:0;padding:0;}
div{margin:3px 5px 10px 0;padding:5px 3px 0 10px;}
[/HTML]

prvi pr. je 194 Byte,
drugi pr. je 74 Byte

razlika je u 120 Byte, a to je samo 2 CSS pravila, a sad daj jednu datoteku da usporedimo koja ima evo nećemo više nego 700 linija.

Pa ćeš vidjeti da se ne radi o 1KB nego par 10taka puta više.

Evo baš sam probao s jednom datotekom koja ima 6534 linije koda, nakon čišćenja uspio je smanjiti na 1204 linije koda.
Veličina prve je 192KB, a veličina druge datoteke je 109KB što je razlika od 83KB, odnosno na 1000 upita 81,05MB, pa ti reci da to nije ušteda. A recimo jedan posjetitelj odradi cca 10-tak učitavanja CSS datoteke. Računaj kolike su uštede!

[quote=“Uber_Gosu”]Nije istina i bilo bi dobro staviti na početak svakog CSS-a ovo:
čak bi rekao da mi je preglednije jer ionako ne stavljam sav CSS u 1 fajl nego 7-8 komada…[/quote]

to ti je 7-8 http requestova, što je za performanse stranice užas, jedino kako to može biti bolje je da svaki taj css bude na drugoj mašini, tako će to samo biti brzo…

Znači za svaki file browser šalje request, što više requestova = sporije učitavanje stranice
Pravi primjer ti je npr učitavanje jquery library-a, brže ćeš ga učitat ako ga učitavaš sa google servera(nebitna je sad brzina i blizina google servera) jer apache server na kojem se nalazi tvoja stranica mora odgovoriti na jedan manje upit…

[quote=“zerocoolos”]to ti je 7-8 http requestova, što je za performanse stranice užas, jedino kako to može biti bolje je da svaki taj css bude na drugoj mašini, tako će to samo biti brzo…

Znači za svaki file browser šalje request, što više requestova = sporije učitavanje stranice
Pravi primjer ti je npr učitavanje jquery library-a, brže ćeš ga učitat ako ga učitavaš sa google servera(nebitna je sad brzina i blizina google servera) jer apache server na kojem se nalazi tvoja stranica mora odgovoriti na jedan manje upit…[/quote]

To su takozvani CDNovi ili Content delivery networks, a s obzirom na njihovu mjesečnu cijenu iznajmljivanja oni su danas za većinu stranica još uvijek nepotrebi i neispativi. Ali se slažem s tobom.

[quote=“Uber_Gosu”]

* {
	padding: 0;
	margin: 0;
	position: relative;
}

Stavi ovo gore u CSS pa neće bit ni tih 3-4 puta, barem ja tako radim…[/quote]

Kolko’ vidim na onoj tvojoj stranici otkup zlata, to baš i nije istina, jer ti stranica u IE/ ne radi, nema nidje navigacije, nema nigdje onih info boxova u headeru.

Dečki, samo tražim da mi stranica radi u Firefoxu,Chromu i moztda Operi.IE me uopste ne zanima.CreatifCode pocet cu ispravljati CSS jer ima dosta nepotrebnih stvari,isprobavao sam neke skripte pa mi se nisu svidjele a uz njih je isao i neki CSS to cu prvo da očistim,a ostalo ide kasnije.Sada trenutno bih želio da sredim ovaj problem sa Chrome-om.

Evo ovako:
[HTML]
.ne_reg {
min-width: 100%;
height: 35px;
box-shadow: 0px 5px 5px red;
}

.ne_reg ul {
float:left;
}
.ne_reg li {
display:block;
float:left;
}
#search {
float:right;
}
.search {
margin-top: 38px;
}

.search .query {
width: 191px;
background:url(

) no-repeat 5px white;
padding-left: 25px;
color: #a1a1a1;
vertical-align: middle;
}

.search .search-button{
background: url(

) no-repeat;
width: 56px;
height: 21px;
border: 0px;
padding: 0 !important;
}
[/HTML]

i to je sve što ti treba, dakle postojeće klase koje su navedene u ovom kodu u svojoj css datoteci zamijeni kodom koji ti je ovdje napisan i trebalo bi sve štimati.

Dosad si najbliži :smiley: ,samo mi je tražilica otišla na sliku headera i height top menija je malo prevelik :smiley: btw CSS Validation mislim da je sad dosta bolje a i nema tu puno greški koje sam ja napravio to su vecinom uCoz-ove greške :slight_smile:

[quote=“zerocoolos”]to ti je 7-8 http requestova, što je za performanse stranice užas, jedino kako to može biti bolje je da svaki taj css bude na drugoj mašini, tako će to samo biti brzo…

Znači za svaki file browser šalje request, što više requestova = sporije učitavanje stranice
Pravi primjer ti je npr učitavanje jquery library-a, brže ćeš ga učitat ako ga učitavaš sa google servera(nebitna je sad brzina i blizina google servera) jer apache server na kojem se nalazi tvoja stranica mora odgovoriti na jedan manje upit…[/quote]
Opet nemora biti tako, evo kako to radim: LINK

Obrati pozornost na početak H1 u kodu i njegovo mjesto u onome što user vidi :njam:

Stranica radi perfektno u sva 3 browsera, barem na 4 računala na kojima ja radim :smiley:

Za ove css resetere sam čuo i prije, ali više volim sve sam odrediti, 100mb veći promet na serveru mi nije bitan, kamo sreće da mi to postane problem.

A što se tiće kompliciranih layouta, čistoće koda i sl volio bih vidjet neke vaše reference pa ih recimo usporedit sa gore danim linkom :edi:

@edit
napomena da je čitav layout sa linka ručni rad, logo, pozadina, sve, a gotovo sav Jquery je bitno peglan iz originalnih verzija baš zbog [email protected] o kojima je riječ u ovom threadu.

Creative nemoj mi zamjerit išta, ja se inaće ovako razgovaram jer jedino tako možeš od nekog izvuće neko znanje danas, inaće svi šute i postaju samo kad netko nešto treba i onda ode, to mi ide na kujac :stuck_out_tongue:

Ma gle, da ti sad netko napiše perfektan CSS neće ti radit jer je HTML rasipan i pun VELIKIH grešaka, “đaba is krečio” :stuck_out_tongue:

Odi složi neki layout od nule i pobacaj taj PHP unutra naknadno, ovak moš ispravljat do sudnjeg dana i nikad nećeš bit siguran da će ti radit…

Nemora bit HTML5, ja ih koristim i inače, a način (jedan od) da se prođe html validacija sa dotičnim propsima je:
[HTML]

[/HTML]

Tako naprimjer “camera slideshow” (po meni jedan od najboljih jer je free, obavezno isprobati) ne javlja greške.

PS
Hvala za preporuku editora, budem probao par dana da vidim kak mi leži, inače puno radim u notepadu++ ali mi nije praktičan za kompliciranije stvari ko DW jer nema auto unos, iako ima auto zatvaranje i farbanje tagova…

thx