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.
Sada je: 17 tra 2024, 22:27.
Moderator/ica: Moderatori/ce
Pravila foruma
U naslovu teme unutar uglatih zagrada navesti o kojem jeziku je riječ. Primjer: [Java]
U naslovu teme unutar uglatih zagrada navesti o kojem jeziku je riječ. Primjer: [Java]
17 post(ov)a
•
Stranica: 1/2. • 1, 2
I don't want to be a human. I want to see gamma rays, I want to hear x-rays and I want to smell dark matter. I want to reach out with something other than this prehensile paws and feel the solar wind of a super nova flowing over me.
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
Send from my Nokia 3110 using two fingers
Ak trebaš pojašnjenje kako nešto napravit slobodno pitaj.
Send from my Nokia 3110 using two fingers
Send from my Nokia 3110 using two fingers
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...
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...
nicky je napisao/la: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 ?
I don't want to be a human. I want to see gamma rays, I want to hear x-rays and I want to smell dark matter. I want to reach out with something other than this prehensile paws and feel the solar wind of a super nova flowing over me.
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š
rezultat će ti biti
Ako upotrijebiš block elemnt poput
rezultat će ti biti
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
preko id elementa
preko klasa
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:
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:
Ako pak hoćeš drugi čvor bijelom bojom stavi samo njemu class="istakni" i dodaj u css
Ako hoćeš čvorove u jednom redu dodaj svakom class="cvor" i u cssu
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.
i css
Veličinu fonta promjeniš sa
Stil fonta sa
Vanjsku marginu sa
Unutarnju marginu sa
Margine možeš mjenjati pojedinačno sa npr
Poravnanje teksta
Da makneš bullete ispred svakog čvora
Ovo ti je dovoljno informacija da napraviš svoj izbornik
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
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;
Da makneš bullete ispred svakog čvora
- Kod: Označi sve
list-style-type: none;
Ovo ti je dovoljno informacija da napraviš svoj izbornik
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.
Ostaviti ću temu otvorenom, možda još nekome zatreba pomoć pa se možda i nakupi još pitanja i informacija.
I don't want to be a human. I want to see gamma rays, I want to hear x-rays and I want to smell dark matter. I want to reach out with something other than this prehensile paws and feel the solar wind of a super nova flowing over me.
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 ?
I don't want to be a human. I want to see gamma rays, I want to hear x-rays and I want to smell dark matter. I want to reach out with something other than this prehensile paws and feel the solar wind of a super nova flowing over me.
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š
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.
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
Za child div ćemo postaviti svijetlo sivu boju, da je uži i manji od parent div-a.
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
Č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.
Namjerno su postavljene takve visine da footer nije na dnu parent div-a
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:
a footeru je potrebno reći da mu je bottom udaljenost 0 i također zadati apsolutnu poziciju
Apsolutno pozicioniranje footer div-a je poremetilo njegovu poziciju pa ga sa parametrom
vratimo na željeno mjesto.
Sad se možeš igrati sa parametrima visine, širine, bojama, dodavati elemente, itd.
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.
Hvala, sad onda ide teži dio a to je usklađivanje boja, layouta i svega da to sve izgleda dobro a ne odbojno.
I don't want to be a human. I want to see gamma rays, I want to hear x-rays and I want to smell dark matter. I want to reach out with something other than this prehensile paws and feel the solar wind of a super nova flowing over me.
17 post(ov)a
•
Stranica: 1/2. • 1, 2
Na mreži
Trenutno korisnika/ca: / i 4 gostiju.