[Tutorial] CSS izdvojena tema

poruka: 26
|
čitano: 26.897
|
moderatori: Danny_HR, Lazarus Long, XXX-Man
1
+/- sve poruke
ravni prikaz
starije poruke gore
11 godina
offline
[Tutorial] CSS tutorial

Evo pošto ovakvog tutoriala na forumu nema odlučio sam ga napraviti! Smijeh

 

Moglo bi sticky. Namigiva

 

UVOD

 

CSS je skraćenica od Cascading Style Sheets. Style (stil) definira kako prikazati HTML elemente. CSS vam može uštedjeti mnogo vremena i uz to poboljšati izgled i funkcionalnost vaših web stranica.

Style možemo pisati unutar <head> i </head> tagova ili u eksternim style stranicama. Češće korištena varijanta je pisanje CSS-a u eksternim stranicama. Ali mi ćemo prvo koristiti unutar <head> i </head> tagova radi lakšeg učenja, a kasnije ću vam objasniti kako se prebaciti na eksterni način rada. Ako želite imati CSS unutar head tagova, napišite ovo između <head> i </head>

 

<style type="text/css">

</style>

 

Između toga pišete vaš CSS kod. Npr. kao najjednostavniji primjer koristit ćemo ovo. Između dodajte ovaj kod:

 

body{color: red;}

 


S ovime ste promijenili boju teksta u crveno na cijeloj stranici. Sada probajte nešto napisati na vašu web stranicu. Gdje god nešto probate napisati bit će napisano crvenom bojom. To je bio najjednostavniji primjer. Evo sada primjer kako vam CSS može olakšati posao. Između <style type="text/css"> i </style> napišite sljedeće:

 

#primjer{
background-color:#003366;
padding: 20px;
border: 1px;
color: #FFFFFF;
height: 200px;
width: 400px;
}

 

i zatim između <body> i </body> upišite:

 

<div id="primjer"> CSS tutorial </div>

 

 

VRSTE STILOVA

 

Postoje interni, externi inline CSS style.


Interni style
- Piše se u head dijelu stranice. Evo primjera:

 

<html>
<head>
<style type="text/css">
.tablica {
background-color: #006699;
color: #FFFFFF;
font-family: Tahoma; }
</style>
</head>
<body>

<div class="tablica"> Tutorijali.Net </div>

</body>
</html>

 

Eksterni style
- Ovaj način je najčešći. Piše su u externom fajlu. Otvorite notepad i napišite isto kao gore.

 

.tablica {
background-color: #006699;
color: #FFFFFF;
font-family: Tahoma; }

 

Imenujte taj fajl npr. style.css

Sada u HTML fajlu moramo povezati taj externi CSS Style sa našom stranicom. To ćete napraviti tako da dodate ovu liniju koda u head dijelu stranice:

<link href="style.css" rel="stylesheet" type="text/css" />

HINT: ako ćete tako povezati onda style.css mora biti u istom folderu u kojem je i stanica s kojom se povezuje inače morate ispred style.css dodati putanju do fajla.


Inline style
- Inline style se koristi na sljedeći način:

 

<td style="background: blue; color: white;">Plava pozadina sa bijelim tekstom.</td>

 

 

 

BACKGROUND

 

Background color

Sa Backgroundom color možete promijeniti boju pozadinu bilo kojem elementu. Napravimo jedan css style za pozadinu koji ćemo primjeniti na raznim elementima.

.pozadina {
background-color: #006699;
}



Evo primjera kako to možete iskoristiti:

<table class="pozadina"></table>
<td class="pozadina"> </td>
<p class="pozadina">




Background Image

CSS ima mogućnost da umjesto boje postavite neku sliku kao pozadinu. Evo primjera:

.pozadina {
background-image: url(neka-slika.jpg);
}



ili sa punim pathom do slike npr.

.pozadina {
background-image: url(http://www.krizevci.hr/joomladir/images/stories/google.jpg);
}

 

 

FONTOVI

 

Definiranje fontova

 


Za prvi primjer koristit ćemo bojanje fonta po veličini fonta. Boju možemo promijeniti na sljedeće načine:

 

h4 { color: red; }
h5 { color: #9000A1; }
h6 { color: rgb(0, 220, 98); }

 

 


Ako vam to bude u style sheetu onda ćete kod h4, h5, i h6 fonta imati različite boje.

Font family

Evo kako možete promijeniti vrstu fonta:

h4 { font-family: Verdana; }
h5 ( font-family: Arial; }
h6 { font-family: Tahoma; }

Naravno ne morate postaviti h4, h5 i slično, možete i za određenu tablicu, npr:

.nekatablica {
font-family: Verdana;
}

Font size

Veličinu fonta možete odrediti u postotcima i pixelima. Npr.

.nekatablica {
font-size: 120%;
}

.drugatablica {
font-size: 10px; }
}


Font style

Font style odnosno nakošeni, podebljani ili normalni font definirate ovako:

.tablica {
font-style: italic;
}

.tablica2 {
font-style: oblique;
}

.tablica3 {
font-style: normal;
}

Font Variant

Ako napišete npr:

 

.nekatablica {
font-variant: small-caps;
}



Dobti ćete "mala - velika slova" odnosno caps lock slova ali manja nego normalno.

 

IZRADA MENIJA POMOĆU LISTE

 

 

Ovo napišite između <head> i </head>:

<style type="text/css">
#lista li
{
display: inline;
padding-right: 20px;
font-weight: bold;
}

#lista a:hover {
color: #FF9933;
}
</style>



Znači definirali smo CSS-om kako da se prikazuje lista pod ID-om "lista".

Sa

 

display: inline;


smo naredili da se lista pod ID-om "lista" prikaže horizontalno.

Sa

 

padding-right: 20px;


smo odmakuli desno svaki stavak u listi da nebi bili sljepljeni jedan na drugi.

Sa

 

font-weight: bold;


smo naravno definirali da nam tekst bude Bold.

I na kraju smo samo još dodali #lista a:hover odnosno kako će se ponašati linkovi kada se pređe strelicom miša preko njih.

To je sve što se tiče CSS dijela. Sada još moramo napraviti listu. Napravimo onda najprije jedan <div> u kojem ćemo držati naš menu odnosno listu i zatim unutar tog div-a napravimo listu koja će nam služiti kao menu.

<div>
<ul id="lista">
<li><a href="bla1.html">Link 1</a></li>
<li><a href="bla2.html">Link 2</a></li>
<li><a href="bla3.html">Link 3</a></li>
<li><a href="bla4.html">Link 4</a></li>
<li><a href="bla5.html">Link 5</a></li>
</ul>
</div>



Vidite da smo listi dali id "lista". Znači da će se ta lista prikazat onako kako smo odredili CSS-om.

 

OVERFLOW TEKSTA

 

Overflow Teksta Unutar Div-a


Pravimo div #overflwed

<style type="text/css">
#overflwed {
width: 400px; /* definiramo sirinu div-a*/
height:200px; /* definiramo visinu div-a*/
border-bottom:1px solid silver; /* donji rub*/
border-top: 1px solid silver; /* gornji rub*/
margin:0 auto; /* centriramo div na sredinu stranice*/
overflow: scroll; /*Omogucavamo overflow */
overflow-x:hidden;/* Sakrivamo kliznu traku po x-osi*/
}


Opis imate poslije svake linije koda

Uredjujemo paragraf i Zatvaramo </style>

p {
margin-left:5px;
color:blue;
font-family: tahoma;
font-size:10px;
}
</style>


Ubacujemo ga u html


<div id="overflwed">
<p>Ovaj kod objasnjava kako napraviti div,koji ce ako se upise previse teksta sam od sebe napraviti scroll.
Klizne trake se naravno mogu modificirati,moze im se mjenjati boja,ali to je podrzano samo u Internet Exploreru.
Dok u Firefoxu ne radi,iako je Firefox trenutno na mnogo boljem glasu.Sad cu upisati mnogo slova tek toliko da vidite,kako ce se napraviti scroll!

-<br>-<br>
-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>
By:Goran
</p>
</div>

 

Cijeli kod od <div id="overflwed"> do </div> morate ubaciti u body dio. Namigiva

 

 

Hvala na čitanju i sretno! Smijeh

 

 

 

 

 

Da se Facebook server sruši 90% mladih palo bi u tešku depresiju. Ako si u onih 10% koji bi im se smijali stavi ovo u sign.-----Što se dogodi Facebook profilu kad čovik krepa?
Poruka je uređivana zadnji put sri 9.6.2010 21:21 (lzgr).
 
30 0 hvala 30
9 godina
neaktivan
offline
[Tutorial] CSS tutorial

Nice tutorial...........

The quieter you become, the more you are able to hear...
Moj PC  
3 0 hvala 1
9 godina
offline
[Tutorial] CSS tutorial

Hvala! Dobar tutorial.

Ako slučajno pomognem molimo pritisnite gumb hvala.
 
3 0 hvala 1
9 godina
neaktivan
offline
[Tutorial] CSS tutorial

Super je tutorial! Puuno hvala dugo sam to tražio! Smijeh

 
1 0 hvala 1
11 godina
offline
[Tutorial] CSS tutorial

Predlažem za početnike ovu stranicu:

 

http://www.w3schools.com/css/default.asp

 

BTW:

Ovo smo trebali napraviti na prošlim vježbama iz Uvoda u HTML i CSS na faksu, dobio sam minus XD

Tek sam je kod kuće dovršio.

 

1. okvir(ovaj s linkovima) smo trebali zaoblit sa 2 div-a unutar kojih je slika sa zaobljenim rubom, te slike smo u paintu radili. Druga 2 div-a smo radili pomoću CSS3.0 naredbe npr. border-radius: 25px;

http://border-radius.com/  -> zgodan generator bordera

Living in a world of dreams...
Poruka je uređivana zadnji put čet 19.5.2011 4:15 (Hyperion).
Moj PC  
2 0 hvala 1
11 godina
offline
[Tutorial] CSS tutorial

Kada pišete CSS zgodno je na početku staviti css reset, npr:

 

Jednostavan primjer:

 

*{margin:0; padding:0; border:0; text-size:100%; font: inherit; vertical-align: baseline;}

 

ili

 

koristiti ovaj mega popularni:

http://meyerweb.com/eric/tools/css/reset/

 

 

All software has bugs.Any developer who claims that his or her software is always bug-free is living in a fantasy world.
Moj PC  
2 0 hvala 0
8 godina
neaktivan
offline
[Tutorial] CSS tutorial

odlican tutorial hvala

 
0 0 hvala 0
11 godina
offline
[Tutorial] CSS tutorial

Kako sa CSS div elementima simulirati tabelu?

 

// CSS

.okvir {
   widht:100%;
   display:table
}


.lijevo {
   widht:240px;
   background-color: red;
   display:table-cell
}


.desno {
   background-color: grey;
   display:table-cell}


//HTML


<html>
<head>
.....
</head>
<body>
<div class="okvir">
<div class="lijevo"> Navigacija </div>
<div class="desno"> Sadržaj </div>
</div>
</body>

 

Na ovaj način izbjegavamo uporabu float properitija i neugodnosti vezane za izgled stranice, posebno u slučaju kada želimo da lijeva i desna strana budu jednake visine, bez obzira na količinu sadržaja.

Rezultat primjene display:table i display:table-cell Rezultat primjene display:table i display:table-cell
All software has bugs.Any developer who claims that his or her software is always bug-free is living in a fantasy world.
Moj PC  
1 0 hvala 2
8 godina
neaktivan
offline
Re: [Tutorial] CSS tutorial
Nix kaže...

Kako sa CSS div elementima simulirati tabelu?

 

// CSS

.okvir {
   widht:100%;
   display:table
}


.lijevo {
   widht:240px;
   background-color: red;
   display:table-cell
}


.desno {
   background-color: grey;
   display:table-cell}


//HTML


<html>
<head>
.....
</head>
<body>
<div class="okvir">
<div class="lijevo"> Navigacija </div>
<div class="desno"> Sadržaj </div>
</div>
</body>

 

Na ovaj način izbjegavamo uporabu float properitija i neugodnosti vezane za izgled stranice, posebno u slučaju kada želimo da lijeva i desna strana budu jednake visine, bez obzira na količinu sadržaja.

a zašto ne jednostavno koristit tag table i njegove elemente?

treba jedino preeko css odredit da td element centrira text po vertikali odozgora, a ne od cetra koje mu je defoultno.Samo da znate neke stvari morate za tabele kodirati preko html tagova jer vam css ekvivalenti neće radit uvjek (odnosise na samo dva taga vezane za razmaku imeđu bordera čelija, ostalo sve radi kak treba)

//CSS

td {vertical-align:text-top;//iili centriraj po vertikali kak ti paše defaoult mu je centar}

.okvir{//dizajn koji trebaš}

.ljevo{//dizajn koji trebaš}

.desno{//dizajn koji trebaš}

// HTML

<table class="okvir">

<tr>

<td class="ljevo"> navigacija</td>

<td class="desno" sadržaj></td>

</tr>

</table>

 

Tabele imaju još neke napredna svojstva u koja mi se neda sad ulazit. riješio se float i njegofih problema. Ljudi koristite elemente za što su napravljeni.

Poruka je uređivana zadnji put sub 17.3.2012 23:52 (NoorMomento).
8 godina
offline
[Tutorial] CSS

Zato što je div standard..

Moj PC  
0 0 hvala 0
11 godina
offline
Re: [Tutorial] CSS tutorial
NoorMomento kaže...
Nix kaže...

Kako sa CSS div elementima simulirati tabelu?

 

// CSS

.okvir {
   widht:100%;
   display:table
}


.lijevo {
   widht:240px;
   background-color: red;
   display:table-cell
}


.desno {
   background-color: grey;
   display:table-cell}


//HTML


<html>
<head>
.....
</head>
<body>
<div class="okvir">
<div class="lijevo"> Navigacija </div>
<div class="desno"> Sadržaj </div>
</div>
</body>

 

Na ovaj način izbjegavamo uporabu float properitija i neugodnosti vezane za izgled stranice, posebno u slučaju kada želimo da lijeva i desna strana budu jednake visine, bez obzira na količinu sadržaja.

a zašto ne jednostavno koristit tag table i njegove elemente?

treba jedino preeko css odredit da td element centrira text po vertikali odozgora, a ne od cetra koje mu je defoultno.Samo da znate neke stvari morate za tabele kodirati preko html tagova jer vam css ekvivalenti neće radit uvjek (odnosise na samo dva taga vezane za razmaku imeđu bordera čelija, ostalo sve radi kak treba)

//CSS

td {vertical-align:text-top;//iili centriraj po vertikali kak ti paše defaoult mu je centar}

.okvir{//dizajn koji trebaš}

.ljevo{//dizajn koji trebaš}

.desno{//dizajn koji trebaš}

// HTML

<table class="okvir">

<tr>

<td class="ljevo"> navigacija</td>

<td class="desno" sadržaj></td>

</tr>

</table>

 

Tabele imaju još neke napredna svojstva u koja mi se neda sad ulazit. riješio se float i njegofih problema. Ljudi koristite elemente za što su napravljeni.

Tabele služe za prikaz tabelarnih podataka. Objasni mi kako ćeš stranicu čiji je dizajn strpan u tabele prilagoditi prikazu na različitim rezolucijama, npr na desktopu i na mobitelu???

 

Pogledaj ove primjere http://designshack.net/articles/css/20-amazing-examples-of-using-media-queries-for-responsive-web-design    prvo u pregledniku preko čitavog ekrana, onda polako počni smanjivati dimenzije preglednika kako bi simulirao manje rezolucije, sve do veličine mobilnog uređaja...

 

ps, floating je  odavno riješen, potraži sebi neki css framework i uvjeri se :)

All software has bugs.Any developer who claims that his or her software is always bug-free is living in a fantasy world.
Poruka je uređivana zadnji put ned 18.3.2012 23:53 (Nix).
8 godina
neaktivan
offline
Re: [Tutorial] CSS tutorial
Nix kaže...
NoorMomento kaže...
Nix kaže...

Kako sa CSS div elementima simulirati tabelu?

 

// CSS

.okvir {
   widht:100%;
   display:table
}


.lijevo {
   widht:240px;
   background-color: red;
   display:table-cell
}


.desno {
   background-color: grey;
   display:table-cell}


//HTML


<html>
<head>
.....
</head>
<body>
<div class="okvir">
<div class="lijevo"> Navigacija </div>
<div class="desno"> Sadržaj </div>
</div>
</body>

 

Na ovaj način izbjegavamo uporabu float properitija i neugodnosti vezane za izgled stranice, posebno u slučaju kada želimo da lijeva i desna strana budu jednake visine, bez obzira na količinu sadržaja.

a zašto ne jednostavno koristit tag table i njegove elemente?

treba jedino preeko css odredit da td element centrira text po vertikali odozgora, a ne od cetra koje mu je defoultno.Samo da znate neke stvari morate za tabele kodirati preko html tagova jer vam css ekvivalenti neće radit uvjek (odnosise na samo dva taga vezane za razmaku imeđu bordera čelija, ostalo sve radi kak treba)

//CSS

td {vertical-align:text-top;//iili centriraj po vertikali kak ti paše defaoult mu je centar}

.okvir{//dizajn koji trebaš}

.ljevo{//dizajn koji trebaš}

.desno{//dizajn koji trebaš}

// HTML

<table class="okvir">

<tr>

<td class="ljevo"> navigacija</td>

<td class="desno" sadržaj></td>

</tr>

</table>

 

Tabele imaju još neke napredna svojstva u koja mi se neda sad ulazit. riješio se float i njegofih problema. Ljudi koristite elemente za što su napravljeni.

Tabele služe za prikaz tabelarnih podataka. Objasni mi kako ćeš stranicu čiji je dizajn strpan u tabele prilagoditi prikazu na različitim rezolucijama, npr na desktopu i na mobitelu???

 

Pogledaj ove primjere http://designshack.net/articles/css/20-amazing-examples-of-using-media-queries-for-responsive-web-design    prvo u pregledniku preko čitavog ekrana, onda polako počni smanjivati dimenzije preglednika kako bi simulirao manje rezolucije, sve do veličine mobilnog uređaja...

 

ps, floating je  odavno riješen, potraži sebi neki css framework i uvjeri se :)

Vrlo jednostavno koristit ću CSS i media Query {#}.

11 godina
offline
[Tutorial] CSS

Sretno :)

All software has bugs.Any developer who claims that his or her software is always bug-free is living in a fantasy world.
Moj PC  
0 0 hvala 0
9 godina
neaktivan
offline
[Tutorial] CSS

Koji program mi treba u kojeg cu ubacit taj CSS kod ili sto vec, jeli mi treba web mjesto, domena? Kako da zakupim web mjesto i domenu, koji program, kako? sta? 

U svakom zlu ima malo dobrog, u svakom dobru ima malo zla. Budimo optimisticni.!
Poruka je uređivana zadnji put pon 23.4.2012 22:40 (IvanV).
Moj PC  
0 0 hvala 0
8 godina
neaktivan
offline
Re: [Tutorial] CSS

Domena ti je ko broj telefona tako razmišljaj o njoj imaš komercijalne tipa (com, net, org, info itd.) dok imaš unas i hr domenu no nju samo pravne osobe mogu imat (moraš bit firma il slično). Domenu dobiješ kad zakupljuješ hosting, ako je slobodna postoje i freehostinzi i domene no oni obično loše kotiraju u tražilicama i znaju vuć neke probleme sa sobom.

 

ako trebaš php i mysql moj savjet infoit oko 200kn godišnje ti je sa domenom to je naravno naj jeftiniji paket.

 

CSS je jezik koji služi za dizajniranje stranice da se odvoji dizajn od strukture koda on se obićno stavlja u neku eksternu datoteku (obićni text fajl sa .css extenzijom), a ti preko FTP(filezila ni loš besplatan je) prebaciš na srver zajedno sa svojom stranicom i potrebnim datotekama i resursima.

 

Ako radiš ćistu HTML stranicu netrebaš zakupit server dovoljan ti je notepad++.

9 godina
neaktivan
offline
Re: [Tutorial] CSS
NoorMomento kaže...

Domena ti je ko broj telefona tako razmišljaj o njoj imaš komercijalne tipa (com, net, org, info itd.) dok imaš unas i hr domenu no nju samo pravne osobe mogu imat (moraš bit firma il slično). Domenu dobiješ kad zakupljuješ hosting, ako je slobodna postoje i freehostinzi i domene no oni obično loše kotiraju u tražilicama i znaju vuć neke probleme sa sobom.

 

ako trebaš php i mysql moj savjet infoit oko 200kn godišnje ti je sa domenom to je naravno naj jeftiniji paket.

 

CSS je jezik koji služi za dizajniranje stranice da se odvoji dizajn od strukture koda on se obićno stavlja u neku eksternu datoteku (obićni text fajl sa .css extenzijom), a ti preko FTP(filezila ni loš besplatan je) prebaciš na srver zajedno sa svojom stranicom i potrebnim datotekama i resursima.

 

Ako radiš ćistu HTML stranicu netrebaš zakupit server dovoljan ti je notepad++.

 

Puno hvala na informacijama, a jeli postoji kakva besplatna domena koju mogu uzeti i na nju ubaciti samo web dizajn i da to bude moja web stranica, i da, koliko kosta .net, hr. ili com. domena? I gdje se to kupi, odnosno zakupi to web mjesto?
I jeli se to godišnje plača ili kad jednom platiš imaš uvijek?
Možeš mi reci naziv programa da skinem ili mi dati link za download na PP? 

U svakom zlu ima malo dobrog, u svakom dobru ima malo zla. Budimo optimisticni.!
7 godina
neaktivan
offline
[Tutorial] CSS

Pozdrav,

 

napravio sam web stranicu.

I sada bih htio dodati jedan blok na tu stranicu, ali tako da bude neovisan o svim ostalim blokovima tj. neovisan o ostatku stranice.

Kako u CSS-u to napraviti ? Znam da treba staviti z-index da to bude na vrhu, ali neznam kako postaviti x i y i ostale atribute, a da se ne poremeti ostatak stranice.

 

Hvala

 

EDIT:RIJEŠENO...

Poruka je uređivana zadnji put čet 17.1.2013 21:33 (Hrvojeee).
Moj PC  
0 0 hvala 0
6 godina
offline
[Tutorial] CSS

Pozz, imam problem kod vanjskog css-a, kada stavim u vanjski css ne prikazuje mi ovu sliku back, ali mi radi dok je unutar head djela? Mani treba da mi slika radi dok je css postavljen kao vanjski, zna li itko do čega može biti problem?

 

#back { width: 100%; height: 50px; background-image: url("slike/Back.png"); background-repeat: x;

}

 
0 0 hvala 0
6 godina
offline
[Tutorial] CSS

Pozz, imam problem kod vanjskog css-a, kada stavim u vanjski css ne prikazuje mi ovu sliku back, ali mi radi dok je unutar head djela? Mani treba da mi slika radi dok je css postavljen kao vanjski, zna li itko do čega može biti problem?

 

#back { width: 100%; height: 50px; background-image: url("slike/Back.png"); background-repeat: x;

}

 
0 0 hvala 0
9 godina
odjavljen
offline
Re: [Tutorial] CSS
Xyloto kaže...

Pozz, imam problem kod vanjskog css-a, kada stavim u vanjski css ne prikazuje mi ovu sliku back, ali mi radi dok je unutar head djela? Mani treba da mi slika radi dok je css postavljen kao vanjski, zna li itko do čega može biti problem?

 

#back { width: 100%; height: 50px; background-image: url("slike/Back.png"); background-repeat: x;

}

Jedan post bi bio dovoljan. Pošto ne vidim strukturu tvoje web stranica, pretpostavit ću da gore navedeni file nemaš u navedenoj lokaciji, ili si krivo napisao putanju. Pokušaj otkriti sa Firebugom, ili jednostavno dodaj ispred slike, ../ da ti gleda jedan folder unatrag.

6 godina
offline
Re: [Tutorial] CSS

Hvala pokušat ću, ovo za dva puta pukla mi je veza pa sam mislio da mi nije objavilo :/

 

Edit: Ipak nije uspjelo, problem mi je isti kao i ovdje ne znam do čega mi nece da otvori kada je vanjski?

 

http://forums.macrumors.com/showthread.php?t=1331079 

Poruka je uređivana zadnji put ned 10.2.2013 22:10 (Xyloto).
8 godina
neaktivan
offline
Re: [Tutorial] CSS
Xyloto kaže...

Pozz, imam problem kod vanjskog css-a, kada stavim u vanjski css ne prikazuje mi ovu sliku back, ali mi radi dok je unutar head djela? Mani treba da mi slika radi dok je css postavljen kao vanjski, zna li itko do čega može biti problem?

 

#back { width: 100%; height: 50px; background-image: url("slike/Back.png"); background-repeat: x;

}

Imaš grešku unutar CSS krivo si deviniro reapet evo ti link usput provjeri za putanju, da nebi bilo da je do toga.

6 godina
neaktivan
offline
[Tutorial] CSS

Nebi bilo loše navesti block elemente (što su i kako funckioniraju), float (iznimno koristan), CSS3 itd...:)

Imaš tu posla cijeli dan samo za osnove pisati :). 

 
0 0 hvala 0
10 godina
neaktivan
offline
[Tutorial] CSS

Evo malo štiva i za naprednije CSS ljubavnike - http://blog.dump.hr/clanak/16/em-drugaciji-em-jednostavniji--em-baziran-css

http://msacademic.hr/ - Ne gubi vrijeme guglajući o prilikama koje učenicima i studentima nudi Microsoft, ovdje je sve što ti treba! Ako sad nemaš vremena, msacademic.hr je tu i sutra :)
Moj PC  
2 0 hvala 1
4 godine
neaktivan
offline
[Tutorial] CSS

Jedan trik koji sam nedavno naucio, a dobar je za organiziranje i lakse snalazenje u kodu.

Pravljenje novog HTML taga i dizajniranje istog.

Naprimjer umjesto <h1> mozete napravit svoj tag poput <glava> te ga i uredit.

Tagovi se rade kao i dizajn, primjer za glavu.

http://i.imgur.com/IIEKeIb.png

Isprike ako je ovo vec negdje spomenuto, a koliko sam primjetio nije.

Poruka je uređivana zadnji put sub 14.2.2015 11:16 (walwuus).
 
1 0 hvala 0
10 godina
neaktivan
offline
[Tutorial] CSS

Pošto predpostavljam da se radi o editovanju CSS-a, vjerujem da sam na pravom mjestu. Naime želim da logo na ovoj stranici bude veći http://bestmeinthree.com/ . U pitanju je Wordpress. Na koji način da povećam logo. Zelim da izgleda kao na ovoj stranici http://www.tinkeringmonkey.com/.

Da li trebam najprije opvećati visinu headera ili....kako da to odradim? Hvala

 

Skontao....potrebno je manipulisat ovim dijelom koda 

.et_fixed_nav #logo {
margin-bottom: 0;
max-height: 100px;
}

 

Poruka je uređivana zadnji put sub 14.2.2015 16:28 (mornar).
Moj PC  
0 0 hvala 0
1
Nova poruka
E-mail:
Lozinka:
 
vrh stranice