[C# ASP.NET] Izrada web stranice, stil

[PunkBastard]

Pozdrav,
evo kako naslov i tag kažu treba mi malo pomoći i objašnjenja oko izrade web stranice koju trebam izraditi kao projekt za faks (to se vidi iz ovog taga, radimo u tom nesretnom asp.netu), pa me zanimaju stilovi (CSS), kada mi treba nešto za stranicu, recimo navigacijski bar, dali tražim css (ili asp) navbar, navigation bar etc. styles ili tražim gotove template za web stranicu kompletno, to pitam jer mi search za navbar stilovima nije davao korisne rezultate, dok templatea ima, pa me zanima dali uopće mogu naći stilove samo za navbar.

[nicky]

Sve što ti treba su html, css i javascript. Sve boje, fontove, pozicije itd radiš u css-u. Navigacije su plain html koji na određenu akciju mjenjaš javascriptom. Postoji cijeli js framework, vrlo popularan jquery. Asp.net će opet završit u htmlu cssu i js-u.

Send from my Nokia 3110 using two fingers

[nicky]

Ak trebaš pojašnjenje kako nešto napravit slobodno pitaj.

Send from my Nokia 3110 using two fingers

[kljaja89]

Pogledaj si na ovoj stranici tutoriale http://www.dump.hr/dogadanja
Dečki odlično objašnjavaju i meni je bilo od velike pomoći.
Mislim da imaš sve što će ti trebati: html, css, asp.net...

[PunkBastard]

Sve što ti treba su html, css i javascript. Sve boje, fontove, pozicije itd radiš u css-u. Navigacije su plain html koji na određenu akciju mjenjaš javascriptom. Postoji cijeli js framework, vrlo popularan jquery. Asp.net će opet završit u htmlu cssu i js-u.

Send from my Nokia 3110 using two fingers

Kako to točno u css-u ? Misliš na ono kada trebam napraviti svoju css klasu za element ? Pod navigacijom mislim na ove navigacijske barove, gdje piše home/about/contact etc., navigacija kao buttoni, linkovi i to mi nije problem, samo možda stilovi svega toga. A konkretno što sam pitao u prvom postu i što me zanima za te navigacijske barove dali postoji neka stranica gdje mogu naći css stilove pojedinih HTML elemenata pa samo staviti u svoj kod i onda primjeniti ili moram kompletni template skinuti pa iz templatea izvlačiti samo bar koji želim ?

[nicky]

Da bi mogao uspješno odrediti stilove elemenata moraš znati par osnova.
Postoje dvije vrste elemenata u html-u: inline i block elemnti. Razlika ti je što će se inline prikazati u nastavku teksta dok će se block elementi prikazivati u sljedećem redu.

Npr ako napišeš

Kod: Označi sve

<a href>text</a> neki text ili <span>Text</span> Neki text 

rezultat će ti biti

Kod: Označi sve

 text neki text

u oba slučaja

Ako upotrijebiš block elemnt poput

Kod: Označi sve

<div>text</div> neki text ili  <ul><li>text</li></ul>neki text

rezultat će ti biti

Kod: Označi sve

text
neki text

Jako je važno znati da ne možeš primjeniti sve vrste stilova na sve elemente. Npr inline elementima ne možeš postaviti širinu (width).

Stil možeš pridružiti html elementima na 3 načina: (sva tri primjera će će dati svim linkovima sivu boju fonta u hex kodu)

preko html elementa npr

Kod: Označi sve

<a href="link">Neki text</a>
a {color:#313131}

preko id elementa

Kod: Označi sve

<a href="link" id="id_elem">Neki text</a>
#id_elem {color:#313131}

preko klasa

Kod: Označi sve

<a class="klasa_elem" href="link">Neki text</a>
.klasa_elem {color:#313131}

Id se koristi da se identificira određeni element u htmlu i, iako to prolazi, nije dobro da se ponavlja tj id treba biti jedinstven na razini html-a. Klase su predviđene upravo za situacije kad želiš isti stil primjeniti na više elemenata unutar jednog html dokumenta.

Ako hoćeš napravit izbornik, to možeš napraviti na zilijun načina u html-u. Najčešće ćeš naći kombinaciju:

Kod: Označi sve

<ul>
<li>Prvi node</li>
<li>Drugi node</li>
<li>Treći node</li>
</ul>

Ako hoćeš da svi budu plave boje fonta i sive podloge, možeš dodati ul elementu class="ul_lista" i u cssu opisati svoje stilove:

Kod: Označi sve

.ul_lista {color:blue;background-color:#313131}

Ako pak hoćeš drugi čvor bijelom bojom stavi samo njemu class="istakni" i dodaj u css

Kod: Označi sve

.istakni{color:#ffffff}

Ako hoćeš čvorove u jednom redu dodaj svakom class="cvor" i u cssu

Kod: Označi sve

.cvor {display:inline-block;}

Isto je dobro znati da se na jedan element može primjeniti više klasa. Klase se primjenjuju redom kojim su navedene i pobjeđuje zadnja.

Kod: Označi sve

<ul>
<li class="prva">Prvi node</li>
<li class="prva druga">Drugi node</li>
<li class="prva druga treca">Treći node</li>
</ul>

i css

Kod: Označi sve

.prva {color:#cecece}
.druga{color:#87ccaa;}
.treca {color:#998877;}

Veličinu fonta promjeniš sa

Kod: Označi sve

font-size:20px

Stil fonta sa

Kod: Označi sve

font-face:'Verdana';

Vanjsku marginu sa

Kod: Označi sve

margin:10px;

Unutarnju marginu sa

Kod: Označi sve

padding:25px

Margine možeš mjenjati pojedinačno sa npr

Kod: Označi sve

margin-top:50px;

Poravnanje teksta

Kod: Označi sve

text-align:center;

ili left ili justify ili right
Da makneš bullete ispred svakog čvora

Kod: Označi sve

list-style-type: none;

Ovo ti je dovoljno informacija da napraviš svoj izbornik

[PunkBastard]

E to me zanimalo, na predavanjima je ovaj samo radio sa "code-behind" što je najmanji problem, dodavati funkcionalnost elementima. Ali pošto nikada nisam radio sa web stranicama, HTML-om niti CSS-om meni je sve to bilo novo i nisam znao ni gdje da počnem, nisam imao pojma kako se zapravo koriste te klase niti da ustvari služe da opišu elementi na taj način umjesto sve posebno raditi direktno na stranici koju radimo. Hvala.

Ostaviti ću temu otvorenom, možda još nekome zatreba pomoć pa se možda i nakupi još pitanja i informacija.

[PunkBastard]

Pozdrav, sada me zanima kako napraviti ovo da je web stranica, "interaktivni dio" ovako stavljen na sredinu a ovo okolo da sve bude prazno/pozadina, ako gledamo kao primjer stranicu lzs foruma, kako da napravim ovaj sivi dio i ovaj plavi dio koji je koliko sam shvatio pozadina i na njega se može primjeniti pozadinska slika ?

[nicky]

Kod slaganja html elemenata, treba znati da se oni inicijalno ponašaju po principu parent - child. Da bi napravio sivu podlogu, treba ti parent element. On može biti <body> ili unutar body-ja div. div služi za grupiranje elemenata i na njemu se mogu primjeniti sve vrste stilova. Iz iskustva ti preporučam da složiš izgled sa div elementima.
Unutar body elementa napraviš

Kod: Označi sve

<div class="parent"></div>

div po defaultu ima širinu i visinu postavljenu na auto, pa ako se unutar njega ne nalazi ništa, bit će širok i visok 0px.

Za dodavanje srednjeg elementa, potreban nam je još jedan div ali unutar parent div-a.

Kod: Označi sve

<div class="parent"><div class="child">Ovo je centralni dio stranice</div></div>

U css-u ćemo zadati da je parent širok preko cijelog ekrana i tamno sive boje. Zbog toga što visinu poprima prema popunjenosti drugim elementima i njigovom visinom, postavit ćemo za ilustraciju minimalnu visinu od 500 px

Kod: Označi sve

.parent {background-color:#313131;width:100%;min-height:500px;}

Za child div ćemo postaviti svijetlo sivu boju, da je uži i manji od parent div-a.

Kod: Označi sve

.child {background-color:#cecece;width:80%;min-height:400px;}

Kad ovo primjeniš u html-u, dobit ćeš child pozicioniran lijevo. Za trik da ga pozicioniraš u centar parenta, bez obzira na
širinu parenta, dodaj childu

Kod: Označi sve

margin:auto;

Često se stranica sastoji od headera, body-ja i footera i najčešće je zadatak da footer bude na dnu bez obzira na visinu stranice. Za to postoji trik. Opet su potrebni parent i child element. Za ilustraciju ću navesti i header i body.

Kod: Označi sve

<div class="parent">
<div class="child header">Header</div>
<div class="child body">Body</div>
<div class="child footer">Footer</div>
</div>

Namjerno su postavljene takve visine da footer nije na dnu parent div-a

Kod: Označi sve

.parent {background-color:#313131;width:100%;height:1000px;}
.child {background-color:#cecece;width:80%;margin:auto;}
.header {background-color:#acadfc;height:200px;}
.body {background-color:#ffffff;height:400px;}
.footer {background-color:#787878;height:100px;}

Kako bi footer bio na dnu, potrebno je parent divu dati parametar padding bottom i to u željenoj visini footera i dati mu apsolutnu poziciju:

Kod: Označi sve

padding-bottom:100px;position:absolute;

a footeru je potrebno reći da mu je bottom udaljenost 0 i također zadati apsolutnu poziciju

Kod: Označi sve

.footer {background-color:#787878;height:100px;bottom:0;position:absolute;}

Apsolutno pozicioniranje footer div-a je poremetilo njegovu poziciju pa ga sa parametrom

Kod: Označi sve

left:10% 

vratimo na željeno mjesto.

Sad se možeš igrati sa parametrima visine, širine, bojama, dodavati elemente, itd.

[PunkBastard]

Hvala, sad onda ide teži dio a to je usklađivanje boja, layouta i svega da to sve izgleda dobro a ne odbojno.