Neznana napaka pri izdelavi spletne

Pozdravljeni

To stvar sem že pisal v drugi temi, ampak nisem dobil nobene pomoči. Pomoč rabim čimprej.
Imam vprašanje glede HTML/CSS. Torej, učim se izdelavo spletne (pretvorba PSD v HTML/CSS), ter uporabljam 960 grid system. Z HTML seveda nisem imel problemov (ali pač?), problem je nastal že kar precej na začetku.
Torej ko sem naredil markup sem ubral img replacement z h1, da mi namesto besedila kaže .png sliko (logotip). Potem sem v navigaciji list item dal v display: inline. Nato sem dal tem dvem elementom (h1 in nav) float: left in right. Nakar se mi je sesul vase header (po logiki štima). Vendar videl sem problem...footer je bil pred .main, .main se sploh ni videlo. To sem rešil z overflow:hidden na elementu header ter .main da jih prikaže. Ampak sedaj se mi je pa pokvaril grid na .banner in .box in ne vem zakaj. .box je skočil spodaj in si ne znam razložit zakaj se je to tako premaknilo...nebi se smelo, saj imasta oba podano širino...pred overflow je blo ok, po overflow se pa pokvari.

Me pa še posebej zanima, kdaj točno daš overflow:hidden in kdaj clear:both? Nekaj se mi sanja, v tem primeru naprimer če bi bil samo clear, header nebi pokrival do konca, če me razumete.

Malo težko mi je pisat takšne stvari, lažje je če direktno pokažem in povem problem:). Tukaj je slika končnega izdelka iz PS:


In tukaj je slika mojega problema:


Stran bom pa kar poslal v .rar ker so notri še reset.css, 960 grid, itd. Zelo bom hvaležen tistemu ki bo pogledal tole stran in malo razložil kaj je narobe. Da še povem, to stran ne bom objavljal nikjer, gre se samo za učenje HTML/CSS in pretvorbo iz PS. Link do .rar datoteke:
http://dl.dropbox.com/u/27999537/PDS%20...



Še 1x proim če lahko kdo to malo pregleda:).

Hvala in lp

banner ne more bit poravnan na sredino...saj ga nisem postavil na sredino...saj sem napisal, je štimalo use pred overflow, torej dimenzije nebi smele bit problem

A si sploh prebral moj post? Maš spodaj link od dropbox kjer so datoteke. Na spletu nimam te strani ker se učim HTML/CSS.

Zadevo sem sicer že sam pogruntal, margin-bottom je bil nastavljen za h1 in so se zato pomakli elementi, upam da je to dobra rešitev. Mam pa drugo vprašanje sedaj. Glede navigacije, kako naredim da ob hover, element postane bold ter da se drugi elementi ne premikajo? Pa nevem kako (sem pozabil) narediti presledek med elementi...ok lahko bi z margin-right, ampak potem dobi margin-right tudi zadnji element, ampak za zadnjega pa nočem da ima margin-right!

Tukaj je primer:
http://jsfiddle.net/T6gMU/1/

4kik4 je 24. jan 2013 ob 17:33 izjavil:

besedilo za hover daj npr v div s fiksno širino

clear:both men se zdi pomeni, da niti na levi niti na desni strani tega diva se ne sme nahajati drug element; npr imaš float:left, zadnji element v tej vrsti ima clear:right, potem prvi element v naslednji vrsti pa ima float:left in clear:left, itd

torej moram vsak li dat v div oziroma class? Teoretično mi je jasno, moram še probat, hvala:).
Za clear je pa tko, kolikor do sedaj vem...če bom znal napisat:D. Torej ko element1 daš na float, se ta element1 odstrani iz flowa...se pravi lebdi, in usi drugi elementi ki so spodaj element2 in element3 se prestavijo višje ker si "odstranil" element1. V točno tem primeru bi dal clear, ker mi s tem potisne element2 in element3 nižje oziroma tam kjer sta bla prej (kot ta bi bil tam element1). Overflow:hidden bi pa uporabil če bi bili vli te elementi v nekem div-u in ko bi vse elemente dal na float bi se div sesu samga vase, torej podana bi bila samo širina, višina bi pa bila 0px. Z overflow:hidden ti div "povečaš" da tudi če so vli elementi flat-ani, se div obnaša kot da so v flowu.
Je to nekako tako? Upam da nisem prezakompliciran napisal:)

Potem je prav v mojem primeru prišel overload hidden? Ker sem razmišljal tako, če bi dal naprimer v main ozadje...ce mi z clear nebi videl ker ima višino 0px (ali bi se ozadje pojavilo?). Z overflow pa se mi je main prikazal. Vsaj tko je blo ko sem ga debugal v chrome.

če ima div višino 0px in je ozadje v njem, se pomoje ne bo videlo (če prav razumem sploh, kaj si mislil). overflow:hidden je samo to, da če je vsebine več, kot je določena velikost diva, se ne bo videlo cele vsebine; pa splača se ti določiti par splošnih stvari na začetku, predvsem zaradi ie-ja:

html {
height:100%;
width:100%;
margin:0px;
padding:0px;
border-spacing:0px;
border:none;
border-collapse:collapse;
}
body {
height:100%;
width:100%;
margin:0px;
padding:0px;
border-spacing:0px;
border:none;
border-collapse:collapse;
}
table, tr, td , div{
padding:0px;
border-spacing:0px;
border:none;
border-collapse:collapse;
}
a:visited, a {
border:none;
outline:none;
}
img {
border:none;
outline:none;
}

Kaj noben drug noče pomagat? Js sm pa mislu da bom dobil še kakšno pomoč na tem forumu, saj zato je...

http://dl.dropbox.com/u/27999537/PDS%20...


Ta dela?

... v glavnem... razporeditev bo zdaj ok,sloge pa si popravi...

kam ti tole uploadnem ker tukaj ne morem not pisati kode...

Skopirano? Od nikjer ni skopirano, le gryd system sem uporabil in dodal...seveda d so 4 css zraven, 1 za grid, 1 za reset, 1 za font in en moj style:). Doctype pa tko ne rabiš več kot pa !doctype_html to je pa prednost pri HTML5 in ne rabiš tistih dolgih špagetu pisat;). A lhk uprašam sam kaj se je popravilo? Ker se je tooliko časa tole vleklo da sem že malo pozabil -.-

Um...kako slikco?

hm hm...ja vidm da je dost krajše napisan...ampak logo ni tam kjer mora bit, main ti kaže tm kjer je logo...kar nebi smelo bit. Main ne morš določt background ker se je sesu samga vase....0px višine, tudi če background dodaš, bo še vedn 0px. Z overflow sm pa dosegu da ma višino .main in da je block ter v flow-u. Zaenkrat se (še) ne obremenjujem z ie, prvo moram pokapirat vso to zadevo, me pa vseeno zanimajo stvari kako oin kaj pol popraulat za IE.

Hvala za popravilo:) vendar nisem tko mislil. Ampak kako lahko da IE kar navpično...sam pa inline ni nekaj nova opcija...al je? Kako pa naprimer popraviš to?

pa še za navigacijo: zbriši oznako nav, tega ne rabiš, in samo na vsak li daj display:inline

- Zakaj bi pa h1 in nav dal v svoj div? - zato, da divu lahko določiš float in se potem pravilno obnaša

- Pa banner je tko floatan ker uporablja grid:) ? tole nevem kaj misliš

zakaj pa v divu dela v h1 pa ne, ti pa ne znam točno povedat, sem tud js začetnik :) pomoje določene lastnosti veljajo samo za določene elemente, tko kot npr. za linke a ne dela višina pa to, kaj pa vem...

float pomeni, v katero smer se bodo gibali div-i, če float ni določen, se pač ne bodo gibali nikamor. Clear pomeni, da na levi ali desni ali obeh straneh div-a ne bo nobenega drugega div-a. Recimo, če hočeš, da je nek div prvi na levi, mu daš clear:left, zato da na njegovi levi ne bo nobenega drugega div-a. Če hočeš, da je nek div sam v svoji vrsti, recimo daš clear:both.

Pa če (še) ne uporabljaš Firebug-a, ta je sicer za mozillo, ga začni! ful pomaga! ;)

teh nav, footer, header jaz sploh ne poznam, pa na tvoji strani ti je lih to delal probleme. na tvojem mestu bi rajši dala kar div, pa mu določiš lastnosti, kakor jih hočeš.

Pa za to stran... jaz kar v googla napišem, pa mi najde.... in na tej strani so ponavad dobri odgovori, da ti dejansko kaj pomagajo :)

header,nav,aside,section in footer so html5 elementi, ki jim moraš obvezno dodati razrede, če želiš da delujejo v starejših brskalnikih. Po teh razredih jih lahko potem v CSS urejaš.

Za leplenje kode uporabljajta jsfiddle ali http://chopapp.com/

Jerry000 je 29. jan 2013 ob 17:30 izjavil:

Hm...to pa nism vedu da starejši ne podpirajo teh html5 tagov...ampak ok, itq prvo da se naučim prav narediti spletno na modernih pol ko bom mel trdno podlago se bom pa lotil starih.

Hvala za page

Malo se umiri s tem HTML5. Zaenkrat uporabljaj še lepo div značke namesto nav, header, footer... ker ni čisto nobene potrebe po njih. SEO pa tudi ni tak problem. Google brez težav izlušči strukturo strani. Če se mu pa zatakne, mu pa lahko sam podaš sitetree.

Še glede clear. To je tak težko razumljiv in tudi ne vedno enako implemetiran atribut. Osebno ga uporabim vedno po koncu divov, ki so bili floatani. Včasih tudi ustvarim nov div samo za to, da lahko nastavim clear. Razloženo na tak idiot-proof način: Quirksmode.

Glede količine includanih dokumentov se ne obremenjuj preveč. Brskalniki te stvari itak shranjujejo, tako da se bo počasi naložila samo prva stran. Najdeš pa na spletu dosti minimizerjev.

Je pa precej grdo od tebe da tako hodiš naokoli in obtožuješ ljudi, da nočejo pomagat. Pomagali bomo, samo zastavi konkretna vprašanja s konkretnimi problemi. S tem predvsem mislim na obseg problema. Tvoj naslov teme bi moral bit: pomoč z float pri css oz. clear. Ne pa cele strani limat itd. Pa še z pokvarjenim linkom.

Še vprašanje, a je kak program da lahko testiram stran na več browserjih kako zgleda? Gledal sem Adobe Browserlab ampak kokr sm js vidu ni za lokalne datoteke. Ko hočm lokalno pregledat mi javi da morm met firebug verzije 1.5.4 ali več...js mam pa najnovejši 1.11.1 al kok je. Nekaj je narobe. Je še kaka druga opcija? Inštaliral nebi rad browserje...mam FF in Chrome zaenkrat:)

googleg1 je 29. jan 2013 ob 21:28 izjavil:

Jerry000 je 29. jan 2013 ob 17:30 izjavil:

Hm...to pa nism vedu da starejši ne podpirajo teh html5 tagov...ampak ok, itq prvo da se naučim prav narediti spletno na modernih pol ko bom mel trdno podlago se bom pa lotil starih.

Hvala za page

Malo se umiri s tem HTML5.

A ti delas za Microsoft da dajes take nasvete? HTML5 je trenuten (in prihodnji) standard ko se povecini uporablja, in ne vem zakaj bi nekomu odsvetoval, da se nauci pravilne semantike HTMLja. Za starejse brskalnike pa se lepo uporabi html5shiv pa je to to.

Jerry, ti se kar lepo nauci HTML5, mas ogromno resourcev na netu, en boljsih recimo html5doctor. Res je, da bos sprva verjetno imel tezave ampak vecja je muka, vecja je nagrada ;)

In zakaj bi moral delat za MS, če je odsvetoval HTML5? Zgleda da še nisi preizkusil IE10, ki je top.

Glede HTML5, te zadeve ki bodo standardne, torej značke, validacija, geolocation itd. se lahko že komot uporablja, ampak za vsako uporabljeno stvar moraš naredit fallback, ali v javascriptu ali v kodi ki zadevo poganja. Recimo zelo simpl je naredit datepicker input type = date, ampak kaj ko ga je FF kar neenkrat izklopil? In zato moraš naredit ali nek jq datepicker, ki je kar neka skripta iz googla in zna zmrdat druge stvari, ali pa da ponovno narediš validacijo vnosa podatkov kar je spet dodatno delo.

In če delaš neko veliko zadevo je teh dodatnih del kar nekaj, zato se je potrebno odločit
a) plačati dodatno delo
b) odrezati browserje ki niso posodobljeni

p.s. če pa mi kdo dokaže da nove značke vplivajo na izboljšanje SEO pa mu dam za pivo.

HardPhuck hvala za odgovore. Me pa zanima naprimer če naredim neko stran...a se naj obremenjujem z IE? Moje mišlenje, danes tko večina uporablja se mi zdi FF, chrome ali novi IE ki podpira večino teh novih zadev.
Drugače pa hvala za link od htmlshiv. Je še kaj treba dodat za starejše brskalnike al je to to?


@googleg1, responsive ja, sm že bral o tem vendar nič probal. Vendar pa bom v prihodnjosti probal kaj.


Zanima me še, če je uredu/pametno uporabljati že narejene sisteme (framework?) kot so grid960, ali pa mogoče katerega za responsive in ostalo.

?

Kdorkoli?

Kot ti je rekel HardPhuck, trenutno je ZURB foundation najboljši. Spet, odvisno za kaj rabiš. Ampak v večini primerov zadostuje, ker pokriva kar veliko zadev.

Finta je v tem, da če se boš že od začetka učil delati responsive strani boš znal naredit tudi fiksne, velik plus je tudi, da se boš naučil nekih "standardov" kako zadeve stojijo, kako se določajo razredi(poimenovanje), oblikovanje le teh itd..

Ti je že hardphuck dal link do zurb foundation. To je responsive framework. Imajo tudi dokumentacijo.
P.S. poskusi čim več naredit s CSS oz. čim manj s slikami(gumbi,sence,gradienti, barvna ozadja, zaobljene robove...)

Responsive so vsi elementi oziroma vsi tisti katerim to določiš. Zato pa se pri responsive dizajnih in uporabi frameworkov upoštevajo določena pravila pisanja kode. Ja, v bistvu se gre za %,em in dosti js/jq zadev.

Nisem nič dobil v inbox...