Layout, div ?

Obstajajo kaksne knjige o tem... da ne omenjam internet/google

Drugace pa si se zmotil ze na zacetku... Namesto tabel se uporabljajo LAYER-ji. DIV pa samo oznacuje / definira predel z neko vsebino.

lp

Besedo layer lahko kvečjem uporabljaš pri absolutnem pozicioniranju, ki pa se v praksi uporablja zelo malo, ponavadi za kakšne manjše koščke, ki morajo stati nad vsem. Nikakor pa ne za oblikovanje strani z div-i in cssom.

Div je generičen block-level container. To pomeni, da če boš v dva zaporedna diva nekaj dodal, se bo drugi div pojavil pod prvim. Span je generičen in-line container, kar pomeni da če boš besedilo dal v dva zaporedna spana, se bo pojavilo eno za drugim in ne vsako v svoji vrsti. To je edina razlika med dvema različnima containerjema. Dive uporabljaš za to, da ločiš posamezne dele kode, ki se morajo ločiti po stilu oziroma jih ne moreš ločiti drugače.

Nekaj časa nazaj je bilo popularno vsako najmanjšo stvar stavit v dive in spane, da je bila na koncu struktura html dokumenta skoraj tako zapletena kot tabele, kar pa je v bistvu zgrešen namen. Zato se načeloma priporoča, da za css najprej uporabiš id in class v posameznih elementih, če imaš pa večje bloke, pa uporabiš še kakšen div.

Se pravi, na začetku si zamisliš nekaj blokov (na primer glava, zgornja navigacija, stranska navigacija, vsebina, noga). Vsak blok predstaviš z nekim divom, ki mu dodaš id, da mu lahko določiš stil. Tako nekako na grobo. Seveda je tu še nekaj detajlov, par fint, kaj lahko in česa ne smeš uporabljati da bo v vseh brskalnikih enako, ampak to te čaka s prakso.

V glavnem, cilj je čim bolj čista in pregledna html struktura, s čim manj hacki za brskalnike (veliko večino se da narediti brez). Treba je nekaj prakse (par projektov), ampak ko pogruntaš nekaj fint se boš čudil, zakaj si sploh se trudil s tabelami.
lp

aha, hvala

me zanima ce je tak nacin v redu:
- sliko strani naredimo v photoshopu oz fireworksu
- vgradimo sliko v dokument (page propetries..background image)
- cez dodajamo DIV-e (naprimer divglava, divvsebina, divnoga)- divom določimo točno širino in višino
- v dive vstavljamo elemente, ki jih oblikujemo s CSS (css ne znam dobro uporabljat tako da tu ne vem kaj še napisat..)
- za dodatne elemente dodamo layerje, ki jih pozicioniramo z uporabo pikslov (npr- 200px od roba ipd)

bi tak način deloval?
ali se da kaj od tega še enostavnejše?

Meni je bil za CSS ful dober ta tutorial http://movielibrary.lynda.com/html/modPage.asp?ID=216. (Preglej kak javni travnik z rožicami ;))

Noben page properties. Vse s css. Jaz uporabljam izključno tekstovne urejevalnike, ti pa nimajo nobenih okenc za nastavljanje lastnosti strani. Torej vsa vsebina in struktura dokumenta gre v html, vse kar je povezano z obliko gre v css (margini in vse majhne sličice ki niso vsebinsko polne tudi!).
lp

in ce je html koda css-ja taka

body {
background-color: #FFFFFF;
}


kako se poveze div in css? ce delamo samo z belezko?

Po dolgem iskanju razumljive razlage uporabljanja DIVov, kako se stran razdeli na lajerje, podroben pristop Layout in dejstva, da je tabela kot špageti, sem končno prišel do razumljivega primera, ki mi je nadzorno in preprosto razširil obzorje DIVov. Meni je z njim končno postalo jasno, upam, da bo pomagal tudi vam.

Testna stran, na kateri sem se učil novih potez, je s tabelami imela pribl. 150 vrstic kode. Zdaj jih ima le 50, pa da sploh ne omenjam števila razrezov grafične zasnove strani, ki so bili potrebni pri tabelah. Res se je splačalo, koda je veliko preglednejša in naloži se veliko hitreje.

Evo, link do zaklada ;)

LINK