» »

Html in CSS

Html in CSS

BlueBerry ::

Pozna kdo kako fajno CSS knjigo ali kaj w3school sem že predelu pa še vedno pojma nimam, da bi sam kej naredu.

LP

JayKay ::

Adobe Dreamveawer classroom in a book

Zgodovina sprememb…

  • spremenil: JayKay ()

KoMar- ::

Tody ::

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

Zgodovina sprememb…

  • spremenil: Tody ()

BlueBerry ::

<style type="text/css">
<!-
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
->
</style>


Zakaj gre ta koda v head in ne v CSS? Delal sem po vodiču: http://hv-designs.co.uk/2007/10/10/codi... in, če jo dam v head se nič ne zgodi, če pa jo dam v CSS se pa stran podre?

Hvala
LP

KoMar- ::

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

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

Tody ::

CSS se ponavadi daje v zunanjo datoteko in v glavo samo pot do nje.

taneon ::

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 ::

Ker si začetnik lahko uporabiš tudi Adobe Dreamweaver AMPAK zaradi tega ker dobro barva in ima code-completion (napišeš začetek pa ti ponudi kaj vse bi to lahko bilo). Drgač pa ja zgleda boš moral še enkrat W3S prebrat :)
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 :) Sam ne se navadit za obliko uporabljat tabel...
MrBrdo

mte ::

MrBrdo je 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

BlueBerry ::

.silver #nav ul li{
	display:block;
	float:left;
	margin:0 1px 0 0;
}

.silver #nav ul li a{
	display:block;
	float:left;
	color:3A3A3A;
	text-decoration:blink;
	padding:14px 22px 0 22px;
	height:28px;
}


Danes sem se lotil izdelovanja menu-ja s PS in CSS tale vodič sem si izbral:
http://hv-designs.co.uk/2008/09/09/simp...
vse mi dela je fajn in jasno razložen zlo fino teče in res lepa rešitev samo par zadev mi ni jasno kot npr. tista koda zgoraj.

.silver = razred silver
#nav = id nav

samo kako kar vse v enem?

padding:14px 22px 0 22px;
tole pa verjetno pomeni vse 4 smeri začenši z bottom (abeceda)...?

Opažam, da je tale CSS zlo hinavski, saj ko ga enkrat uporabiš lahko na HTML pozabiš kar je vredu ampak milijon stvari je zraven, ki jih sploh ne rabiš pa še vedno vse dela (beri:tebi) tko, da moraš res vse predvidet in napisat kar nekaj na videz odvečnih vrstic, da vse funkcionira vsem kot je treba.

Kter kurac se je spomnu več brskalnikov delat?

Zgodovina sprememb…

Lion29 ::

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
Founder and CTO @ Article-Factory.ai

Hair ::

.silver #nav ul li a {}

ta koda ne predpisuje kakšen je .silver niti kakšen je #nav, ampak kakšen je a v li v ul v #nav v .silver. sepravi:
<div class="silver"><div id="nav"><ul><li><a></a></li></ul></div>


če bi bilo:
<div class="silver"><div id="nav"><ul><a></a></ul></div></div>

ali pa:
<div class="silver"><div id="nav"><li><a></a></li></div></div>

potem zgornja koda ne bi določala ničesar.

upam da nisem preveč zapletel :D
lp, HairMan
Whenever people agree with me, I feel I must be wrong.

Zgodovina sprememb…

  • spremenil: Hair ()

msjr ::

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.

msjr ::

Aja, pa izogibaj se več div-om z istim imenom v html-ju, to ni pravilno, čeprav deluje.

Drugače css deluje takole:

- osnova: css na html tag

div {
   background: #ff0000;
}


- class prepiše lastnosti css na html tag

.mojdiv {
   background: #00ff00;
}


- id prepiše lastnosti class-a

#mojdiv {
   background: #0000ff;
}


- style direkt v html tagu prepiše vse prejšnje lastnosti

<div class="mojdiv" id="mojdiv" style="background: #ffff00;">Ta je rumen</div>
<div class="mojdiv" id="mojdiv">Ta je moder</div>
<div class="mojdiv">Ta je zelen</div>
<div>Ta je rdeč</div>


Je fino, če moraš postajlat kakšen sajt, ki ga nisi sam delal.

BlueBerry ::

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?

msjr ::

Point je tukaj:

.navigation li a em.home{

Če zamenjaš tag, moraš zamejat tudi tukaj. Če uporabiš <b> se glasi vrstica potem:

.navigation li a b.home{

BlueBerry ::

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

MrBrdo ::

mte: tako kot praviš... želel sem bolj poudarit, da se divi uporabljajo za obliko, ne pa tabele (razen takrat, ko res želimo tabelo). sicer pa ja, še kakšen unordered list za menu in hN-i za naslove.
MrBrdo

mte ::

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


Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
!

Vse, kar ste si želeli vprašati o CSS, pa si niste upali. (strani: 1 2 3 423 24 25 26 )

Oddelek: Izdelava spletišč
1297335410 (59559) htmltroubles
»

meni razporejen po celotni dolžini

Oddelek: Izdelava spletišč
72053 (1921) XzupanX
»

HTML in CSS težava pri razporeditvi DIV elementov

Oddelek: Izdelava spletišč
14916 (736) RockyS
»

poravnava li elementov

Oddelek: Izdelava spletišč
82034 (1899) boss-tech
»

CSS problemi (strani: 1 2 )

Oddelek: Izdelava spletišč
519492 (7291) nuuush

Več podobnih tem