Html in CSS

Adobe Dreamveawer classroom in a book

http://www.sitepoint.com/ Sicer se boš pa največ naučil, če boš naredil par spletnih mest ali jih vsaj predelal.

Slab vodič in napačna sintaksa. Znački za komentar morata imeti dva pomišljaja.

Pojdi na http://www.htmldog.com/ in predelaj vse!

Mislim da bo treba še enkrat čez vodič na W3School, ker tvoj zadnji post pokaže da nisi tistih zadev razumel.
Na W3S ti vse osnove povejo zelo dobro, vsaj za razne HTML, CSS, XML,... (ne za server side jezike, meni osebno so tam čisto falili).

MrBrdo je 11. apr 2010 ob 15:05 izjavil:

Drugače pa zdaj se pogosto tako dela, da se v HTML veliko uporabljajo DIV elementi, ki jim daš bodisi id ali class (id ima lahko isti samo en), potem pa v headu linkaš na CSS in jih postajlaš #id-diva {} oz. .class-diva {}. Pol pa še kakšen P pa SPAN vmes pa si zmagal :)

Tudi to ni najboljše! Bistvo je v tem, da ti lahko VSAKEMU html elementu določiš stil. In vsak element mora bit izbran pravilno - se pravi naslov mora biti h1, h2, h3, ...; odstavek mora biti p, seznam mora biti ul, ol ali dl, ... pač treba je te elemente poznat.
Šele ko moraš nekaj nujno združiti (recimo kak sidebar ali kakšen poseben blok vsebine) in ko ne gre drugače zaradi drugih razlogov (recimo kompatibilnost med brskalniki), uporabiš div.
Če tem smernicam ne slediš, lahko precej hitro narediš kodo tako slabo berljivo kot s tabelami, če pa elemeni niso pravilno izbrani, pa si zagotoviš slabše rezultate v iskalnikih.

lp

zacensi s top (v smeri urinega kazalca) top, right, bottom, left


poglej si kake tutoriale za css selectors, kaj to pomeni in kako s tem ciljas dolocene elemente na sajtu v bistvu je zadeva zelo preprosta... naceloma lahko s css stili ciljas element na 3 razlicne nacine


recimo, da imamo na strani element

<div id="moj_okvir" class="okvir"><div>

ta element lahko v css ciljamo tako:

div {border:1px solid red;}

ce v css dolocimo selector kot ime elementa (v tem primeru div).. bodo pravila dolocena znotraj veljala za VSE div elemente na strani (torej vkljucno s tistim nasim zgoraj)...

ce zelimo ciljati natancno tisti okvir, potem ga ciljamo prek njegovega IDja (ID je unikaten, 2 elementa na strani NE SMETA imeti isti ID)...

torej css selector za nas okvir je:

#moj_okvir{border:1px solid red;}

s tem smo ciljali direktno element na strani, ki ima za id dolocen moj_okvir

Se pa dogaja, da imamo vec podobnih elementov na strani, ki bi jim radi dodelili enake lastnosti... take elemente zruzimo v razrede. Zgoraj smo nasemu div elementu dodelili razred "okvir"

...class="okvir"

in ce zelimo ciljati na strani VSE elemente, ki so v istem razredu, to storimo tako:

.okvir{border:1px solid red;}

da bo zadeva se malo bolj jasna

recimo, da imamo na strani 3 div elemente

<div id="okvir1" class="okvir">test1</div>
<div id="okvir2" class="okvir">test2</div>
<div id="okvir3" class="banana">test3</div>

pa se css stili

 div{font-size:12px; padding: 3px;}
 .okvir{border:1px solid red;}
 .banana{border:1px solid yellow;}
 #okvir2{font-size:18px;}

tako, vsi DIVi na strani bodo imeli velikost pisave 12pik, razen id="okvir2", ki bo imel pisavo 18px... vsi, ki spadajo v razred okvir, bodo imeli rdec okvir, le razred banana pa rumenega

simpl ku pimpl

Pa še nekaj, velikosti pisave je bolje določiti v em, to bo omogočalo tudi IE userjem, da povečujejo in zmanjšujejo pisavo. Da se ne matraš in računaš koliko je velikost v pixlih, določiš najprej bodiju velikost 0.625em (ker je standardna velikost 16px, je torej 16 * 0.625 = 10px), potem lahko vsem ostalim elementom lažje določiš velikost (1.2em == 12px).

Seveda moraš paziti, ker so potem vse velikosti fontov elementov znotraj elementa [ki ima določen font-size], relativne glede na ta element, in ne več na body.

Torej je najbolj enostavno da določiš velikost šele tistemu elementu, v katerem dejansko izpisuješ tekst.

body {
   font-size: 0.625em;
}
.krneki {
  font-size: 1.2em;
}

Ja, sem zakompliciral, ampak ko se enkrat navadiš je to milina. Če dobro zdizajniraš so tudi margini in paddingi v em super stvar.

Ja hvala vsem za pomoč še mal pa bom že neki znal CSS-ja.

Danes mi je uspelo dokončati ta menu:
http://www.hv-designs.co.uk/tutorials/c...

Samo zanima me glede hoverja pač je tista modra slikca, da ko daš miško gor je tam modra črta spodaj samo kako je možno ta slikca je (100×40px) kako je možno, da deluje tudi če imam daljši text, ker v css nikjer ne piše, da naj se ponavlja edino, če je repeat že privzeta lastnost kar verjetno je?

Kako bi pri hoverju naredu, da bi dal slikco samo tisto, ki se spremeni v mojem primeru samo modro črto ne pa, da hover slikca vsebuje še celoten menu. Ali se to sploh, da ker če gre za velike slike je veliko prostora.

 .navigation li a em.home{
	 background-image:url(icon_images/prva.png);
	 background-repeat:no-repeat;
	 background-position:center center;
 }

<li class="current"><a href="http://www.hv-designs.co.uk"><em class="home"></em><strong>Home</strong></a></li>

Tukaj je za vstavljanje ikon pred tekst uporabljen kar em to je postrani tekst al nekaj takega kaj bi lahko uporabil tudi kar bold

<b> ali italic <i>

ali kako drugo funkcijo zakaj ravno em to je random ali kaj določeno?
Ubistvu sem probu ul pa ne funkcionira zakaj?

Sem naredu tako z ul pa ni delalo pa sem tam zamenu v HTML namesto em dal ul.

MrBrdo jap, se mi je zdelo da bi brez dodatnega pojasnila lahko marsikdo narobe razumel...
lp