Volite web dizajn?

Zašto ne podijelite svoje znanje s cijelim svijetom? Svatko može pisati za Kroativ i na taj način se promovirati.

Pomoć potrebitima

http://www.hck.hr

Hrvatski Crveni križ

u službi humanosti od 1878.

09.12.2008 u izdvojeno | 22 komentara

Dodaj u favorite

Kako napraviti magazin style dizajn?

Autor/ica Webmaster

Autor Kroativ mreže. Web dizajnom se bavi već nekih desetak godina i trenutno radi u Web Inkubator dizajn studiju. Kreativac u duši stalno željan novog znanja, a u slobodno vrijeme farba pixele i šeće web stranice po Internetu.

Dragi posjetitelji ovo je naš prvi veliki tutorial. Prvo pa muško rekli bi naši stari. Po toj uzrečici i mi ćemo probiti led sa kapitalcem. Upoznat ćemo vas sa CSS frameworks, naučit ćete kako koristiti jedan od njih i prateći ovaj tutorial napravit ćete super dizajn za magazin.

CSS Frameworks su unaprijed napravljeni css kosturi. Fleksibilni su i praktički naprave više od polovice posla za vas. Cijela konstrukcija stranice je već napravljena i vi samo slažete kockice. Razmišljajte o njim kao o lego kockama no ipak je na kraju presudna vaša kreativnost. Nemojte sada pomisliti da ćete sa CSS frameworkom postići čuda. Oni su jednostavno alat kojem je cilj pomoći vam u procesu dizajniranja stranica. Odlični su jer imate gotov kostur, rade u svim browserima i jednostavno su rođeni za brzu produkcija.

Sa druge strane problem nastaje ako želite izraditi malo kompleksniji dizajn, tada ćete ipak morati upregnuti moždane vijuge i baciti se na posao. Po mom mišljenju trebali bi gledati na njih kao i na svaki drugi alat, ponekad vam dobro dođe, a ponekad od njega nemate koristi…

CSS frameworks-a ima stvarno puno i mi ćemo se ovdje fokusirati samo na jedan, po mišljenju autora najbolji. Pogledajte njegove specifikacije.

960 Grid System je kao što ćete vidjeti vrlo jednostavan za korištenje, a dobiti su višestruke. Grid 960 radi na principu tokova klasa, međusobno povezanih u cjelinu. Imate dvije opcije na korištenje, verziju sa 12 i 16 kolumni. Glavni wrapper je uvijek širok 960px jer svi danas imaju barem 1024×768 rezoluciju. Pogledajte 960gs demo stranicu za grafički prikaz i bit će vam malo jasnije.

Za lakše snalaženje napravili smo vam i tablicu sa veličinama layera i njihove pripadajuće klase, ostalo ćete naučiti tokom tutoriala.

**960gs CSS Framework tablica, svaki layer ima 10px marginu sa desne i lijeve strane. grid_xx označava klasu**
12 Grid Sistem	16 Grid Sistem
1. 60px – grid_1	1. 40px – grid_1
2. 140px – grid_2	2. 100px – grid_2
3. 220px – grid_3	3. 160px – grid_3
4. 300px – grid_4	4. 220px – grid_4
5. 380px – grid_5	5. 280px – grid_5
6. 460px – grid_6	6. 340px – grid_6
7. 540px – grid_7	7. 400px – grid_7
8. 620px – grid_8	8. 460px – grid_8
9. 700px – grid_9	9. 520px – grid_9
10. 780px – grid_10	10. 580px – grid_10
11. 860px – grid_11	11. 640px – grid_11
12. 940px – grid_12	12. 700px – grid_12
	13. 760px – grid_13
	14. 820px – grid_14
	15. 880px – grid_15
	16. 940px – grid_16

Pogledajmo kako to izgleda u stvarnosti:

<div class="container_12">
    <div class="grid_12">940px - header</div>
    <!-- nakon jednog reda uvijek dolazi klasa clear -->
    <div class="clear">&nbsp;</div>
    <div class="grid_9">700px - sadržaj</div>
    <div class="grid_3">220px - sidebar</div>
    <div class="clear">&nbsp;</div>
    <div class="grid_12">940px - footer</div>
    <div class="clear">&nbsp;</div>
</div>

Samo imajte na umu da vam zbroj brojeva klasa (grix_XX + grid_XX = 12) uvijek mora biti 12 i to je to, imate savršenu strukturu.

Za kraj samo da napomenemo, veličina kompresirane css datoteke je samo 4kb! Sada krenimo na malo konkretnije stvari…

Skinite 960gs CSS framework, napravite novu stranicu i uključite css datoteke iz grid 960 paketa.

Pogledajte demo ili skinite source

Ok, započnimo sa izradom kostura za naš magazin

<div class="container_12">
 
     <div class="grid_12">940px - Dobrodošli poruka</div>
     <div class="clear">&nbsp;</div>
 
     <div class="grid_12">
          <div class="grid_3 alpha">220px - Datum</div>
          <div class="grid_6">460px - Logo</div>
          <div class="grid_3 omega">220px - Search Forma</div>
     </div>
     <div class="clear">&nbsp;</div>
 
     <div class="grid_12">940px - Navigacija</div>
     <div class="clear">&nbsp;</div>
 
     <div class="grid_12">
          <div class="grid_4 alpha">300px - Vijesti</div>
          <div class="grid_4">300px - Centralni projekti</div>
          <div class="grid_4 omega">300px - Sidebar</div>
     </div>
     <div class="clear">&nbsp;</div>
 
     <div class="grid_12">940px - Footer</div>
     <div class="clear">&nbsp;</div>
 
</div>

Ako imamo dva ili više layera u jednom redu onda prvom moramo dodati klasu alpha, a zadnjem omega

Dobro, kostur smo napravili i sada možemo kreirati naš CSS, on se nalazi u source datoteci koju ste skinuli, folder css i pod imenom moj_style.css. Podijelili smo CSS na segmente za lakše snalaženje.

Krenimo redom, prvo ćemo dodati dobrodošli (.naslov_ad) poruku u header.

<div class="grid_12 light_bg_color" style="border-bottom:1px dotted #ccc">
     <div class="naslov_ad">Dobrodošli na stranice kroativ magazina • Svakodnevno služimo svježi sadržaj iz područja web dizajna</div>
</div>

Klasi grid_12 dodali smo klasu light_bg_color za pozadinsku boju i dodali smo stil za donji border style=”border-bottom:1px dotted #ccc”. Mogli smo koristiti i klase za bordere no imamo 2 različita bordera koji se ne mijenjaju.

Pogledajmo css koji smo koristili za dobrodošli header dio:

.naslov_ad {
	font-family: "Gill Sans", Verdana;
	font-size: 10px;
	line-height: 14px;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: normal;
	text-align:center;
	margin:5px auto;
	color:#000;
}
.light_bg_color {
	background-color:#f8f4e8;
}

Krenimo na datum, logo i formu za pretraživanje.

Ovdje smo koristili 3 horizontalno poredana layera te kao što smo već i rekli, prvom moramo dodati klasu alpha, a posljednjem klasu omega.

<div class="grid_12">
 
     <div class="grid_3 alpha">
               <div class="datum"><em>Danas,</em>
                    <script type="text/javascript">document.write(cijeli_datum);</script>
                    <noscript><div class="datum"><em>Danas,</em> <br />Poslužujemo samo kroativnost</div></noscript>
               </div>
     </div>
 
     <div class="grid_6"><a href="http://www.kroativ.net" target="_self"><img title="Kroativ.NET web dizajn and development blog" src="http://www.kroativ.net/images/kroativ_logo.gif" border="0" alt="Kroativ Magazin" /></a></div>
 
     <div class="grid_3 omega">
          <form id="searchf" method="get">
               <h5>Pretraživanje</h5>
               <input class="search_box" name="search" type="text" value="upišite pojam" />
          </form>
     </div>
 
</div>

Klasi grid_3 (datum – lijeva strana) dodali smo klasu alpha, grid_6 (logo) je u centru i onda dolazi grid_3 (forma – desna strana) sa dodatnom klasom omega. U sourcu našeg tutoriala imate i PSD file za logo. Logo je veličine 460x128px.

Za prikaz datuma uzeli smo ovaj JavaScript i prilagodili ga za prikaz hrvatskog vremena.

<script type="text/javascript">
	var dani = new Array("Nedjelja","Ponedjeljak","Utorak","Srijeda","Četvrtak","Petak","Subota");
	var mjeseci = new Array("Siječanj","Veljača","Ožujak","Travanj","Svibanj","Lipanj","Srpanj","Kolovoz","Rujan","Listopad","Studeni","Prosinac");
 
	var vrijeme = new Date(); //vrati trenutno vrijeme
 
	var dan = vrijeme.getDay();	//izvuci dan u tjednu
	var datum = vrijeme.getDate(); //izvuci dan u mjesecu
	var mjesec = vrijeme.getMonth(); //izvuci ime mjeseca
	var godina = vrijeme.getYear();	//izvuci godinu
 
	if (godina < 1000)
	{
		godina+= 1900; //fix Y2K problem
	}
	if (godina == 101)
	{
		godina = 2001; //fix Netscape browsers - pokazuje godinu kao 101!
	}
 
	var cijeli_datum = dani[dan] + ", " + datum + " " + mjeseci[mjesec] + ", " + godina;	//spoji sve i ispiši datum
 
</script>
</script>

Skriptu pozivamo na sljedeći način:

<script type="text/javascript">document.write(cijeli_datum);</script>

CSS stilovi koje smo koristili za datum, logo i pretragu:

h5, h6 {
	font-family:"Gill Sans", Arial, Sans, serif;
	font-size:10px;
	font-weight:bold;
	letter-spacing:2px;
	text-transform:uppercase;
	margin:0;
}
.datum {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 10px;
	line-height: 18px;
	color:#999;
	text-align:center;
	margin:40px 10px 0 auto;
	width:200px;
}
.datum em {
	font-family: "Gill Sans", Verdana;
	font-size: 10px;
	letter-spacing:2px;
	font-style:normal;
	text-transform:uppercase;
	margin:0;
	padding:0;
	color:#333;
}
#searchf {
	text-align:center;
	margin-top:35px;
}
 
.search_box {
	width:150px;
	height:16px;
	font-size:10px;
	color:#e43a3a;
	padding:0 16px 0 0;
	margin-top:5px;
	background:url(../images/srch.gif) no-repeat right 1px;
	border-top:1px solid #999;
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
	border-left:1px solid #999;
}

Nekih posebnih napomena nema, ovo su praktički osnove CSS-a no da se lakše snađete sada znate koje su klase korištene.

Sada dolazimo do navigacije.

Navigaciju smo napravili kao horizontalno poredanu listu.

<div id="navigacija" class="grid_12 light_bg_color">
<ul>
	<li class="no_border"><a href="javascript:void(null);">Članci</a></li>
	<li><a href="javascript:void(null);">O Nama</a></li>
	<li><a href="javascript:void(null);">Download</a></li>
	<li><a href="javascript:void(null);">Autori</a></li>
	<li><a href="javascript:void(null);">Kontakt</a></li>
	<li><a href="javascript:void(null);">Suradnja</a></li>
	<li><a href="javascript:void(null);">Izdvojeno</a></li>
	<li><a href="javascript:void(null);">Linkovi</a></li>
	<li><a href="javascript:void(null);">Sponzori</a></li>
</ul>
</div>

Opet smo dodali klasu light_bg_color za malo boje i dodali smo ID navigacija. Prvom LI elementu dodali smo klasu .no_border da bi maknuli lijevi border. javascript:void(null); je samo fancy način stavljanja praznih linkova, bolja zamjena za #.

Pogledajmo css za navigaciju:

#navigacija {
	padding: 5px 0;
	border-top:1px dotted #ccc;
}
#navigacija ul {
	list-style: none;
	display: block;
	margin: 0 auto;
}
#navigacija ul li {
	float: left;
	margin: 0;
	font: bold 12px Georgia;
	color:#e43a3a;
	text-transform:uppercase;
	border-left:1px dotted #ccc;
	width:102px;
	text-align:center;
}
#navigacija ul li a:link, #navigacija ul li a:visited  {
	color:#e43a3a;
	text-decoration:none;
	border-bottom:2px solid #f8f4e8;
}
#navigacija ul li a:hover, #navigacija ul li a:active {
	color:#000;
	text-decoration:underline;
	border-bottom:2px solid #000;
}
#navigacija ul li.no_border {
	border-left:medium none;
}

Ovdje je u principu sve jasno, UL (unordered list) elementu maknuli smo stilove, definirali prikaz i margine. LI elementu dodali smo lijevi border, veličinu od 104px i lijevi float. Klasičan CSS horizontal list menu.

Sa navigacijom smo završili header i on sada izgleda ovako:

Gotov header sa pripadajućim 960gs klasama

Centralni Sadržaj

Sadržaj je dosta velik pa ćemo ovdje proći samo njegov kostur i neke dijelove, a cijelu working verziju možete pogledati u DEMU ili u sourcu kojeg ste skinuli.

<div class="grid_12 center_bgimage">
 
     <div class="grid_4 alpha">
          <h6>Vijesti</h6>
          <div class="vijest">
               <h4><a href="#">Naslov Vijesti</a></h4>
               <div class="post_meta">Autor i Datum</div>
               Sadržaj vijesti
          </div>
     </div>
 
     <div class="grid_4">
          <div class="pade_ten">
               <div class="sample_pic"><img src="http://www.kroativ.net/images/sample_pic1.jpg" alt="Sample" /></div>
               <div class="post_meta">Naslov Izdvojenih Vijesti</div>
               Sadržaj izdvojenih vijesti<a title="Pročitajte cijeli članak" href="javascript:void(null);"><img src="http://www.kroativ.net/images/more.gif" border="0" alt="saznajte više..." /></a>
          </div>
     </div>
 
     <div class="grid_4 omega">
 
          <h6>Naš RSS feed</h6>
          <div class="rss">Tekst i link na RSS sa pozadinskom RSS ikonom</div>
 
          <h6>Izdvojeno</h6>
          <div class="pade_ten">Izdvojeni tekst</div>
 
          <h6 class="flikr">Naš <span>Flick<span>r</span></span> stream</h6>
          <div id="flickr">
               <div class="fix"></div>
               <script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=9&amp;display=latest&amp;size=s&amp;layout=x&amp;source=user&amp;user=29734147@N07"></script>
               <div class="fix"></div>
          </div>
 
          <h6>Linkovi</h6>
          <div class="pade_ten">
               <ul>
	          <li>Link</li>
	          <li>Link</li>
	          <li>Link</li>
               </ul>
          </div>
 
     </div><!-- kraj grid_4 omega -->
 
</div><!-- kraj grid_12 center_bgimage -->

grid_12 klasi wrappera našeg centralnog sadržaja dodali smo klasu center_bgimage koja sadrži pozadinsku sliku i top/bottom bordere. Iz razloga što nam se sadržaj neravnomjerno širi po dužini u tri kolone i zato što imamo statičnu širinu dodali smo ovdje pozadinsku sliku. Jednostavan gif (images/bg.gif u sourcu) sa drugom pozadinskom bojom i borderima centralne kolumne. Na taj način smo izbjegli komplikacije sa ravnomjernim širenjem svih triju kolumni.

Lijevi Sidebar

Između linija 3 i 10 nalazi se naša lijeva kolumna odnosno vijesti. <h6>Naslov</h6> koristimo za glavne naslove kategorija. Koristimo <h6> sa stiliziranim tekstom i 3px donjim borderom. Sve vijesti spremamo u klasu vijesti (od 5. do 9. linije) i ponavljamo koliko god vijesti imamo. Klasa post_meta sadrži ime autora i datum objave, <h4> sadrži naslov vijesti sa linkom na cijeli tekst ako je to potrebno.

Lijeva kolumna

Pogledajmo kako nam izgleda css za lijevi kolumnu:

h4 a:link, h4 a:visited {
	color: #000;
	text-decoration: none;
}
h4 a:hover, h4 a:active {
	color: #e43a3a;
	text-decoration: none;
}
 
h4 {
	font-size:16px;
	margin-bottom:5px;
	color:#333;
}
h5, h6 {
	font-family:"Gill Sans", Arial, Sans, serif;
	font-size:10px;
	font-weight:bold;
	letter-spacing:2px;
	text-transform:uppercase;
	margin:0;
}
h6 {
	border-bottom:3px solid #ccc;
	margin:5px 0;
	padding:0 0 5px 0;
}
.vijest {
	margin:10px 0 20px 0;
}
.post_meta {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 10px;
	line-height: 22px;
	text-transform: uppercase;
	letter-spacing: 2px;
	color:#e43a3a;
}

Kolumna Centar

Centar smo namijenili za izdvojene stvari koje želimo naglasiti i držati u centru pažnje.
Pozadinskom slikom bg.gif izdvojili smo tu kolumnu te je ujedno i naglasili. Sve centralne vijesti stavljamo u klasu pade_ten koja ima 10px paddinga sa svake strane (od 13. do 17. linije). Male slike moraju biti široke 276px, a visina nije bitna. Stavljamo ih unutar klase sample_pic koja daje border i padding te pozadinsku boju. Za naslov opet koristimo klasu post_meta i ispod nje dolazi sadržaj vijesti. Umjesto standardnog linka saznajte više uključili smo sliku strelice (images/more.gif)

<a href="javascript:void(null);" title="Pročitajte cijeli članak"><img src="http://www.kroativ.net/images/more.gif" alt="saznajte više..." border="0" /></a>

Sadržaj centralne kolumne

Pogledajmo CSS stilove za centralnu kolumnu:

.sample_pic {
	background:#fff none repeat scroll 0 0;
	border:1px solid #cecfc6;
	display:block;
	margin:0 0 5px 0;
	padding:1px;
}
.pade_ten {
	padding:10px;
}

Desni Sidebar

U desnu kolumnu smjestili smo link za RSS kanal, izdvojeni/uvod tekst, Flickr stream i linkove.

    <div class="grid_4 omega">
 
      <h6>Naš RSS feed</h6>
      <div class="rss">Tekst i link na RSS sa pozadinskom RSS ikonom</div>
 
      <h6>Izdvojeno</h6>
      <div class="pade_ten">Izdvojeni tekst</div>
 
      <h6 class="flikr">Naš <span>Flick<span>r</span></span> stream</h6>
      <div id="flickr">
          <div class="fix"></div>
          <script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=9&amp;display=latest&amp;size=s&amp;layout=x&amp;source=user&amp;user=29734147@N07"></script>
          <div class="fix"></div>
        </div>
 
        <h6>Linkovi</h6>
        <div class="pade_ten">
          <ul>
            <li>Link</li>
            <li>Link</li>
            <li>Link</li>
          </ul>
      </div>
 
</div>

Sadržaj desne kolumne

Opet koristimo <h6> tag za naslove, napravili smo klasu rss koja sadrži RSS pozadinsku sliku i stilski uklopljen broj pretplačenih korisnika. Ovu je izradila Maja Benčić za Smashing Magazin.

Ako imate svoje radove na Flickr servisu možete ih uključiti na sljedeći način. Koristit ćemo njihov Flickr badge kod sa malo našeg formatiranja

<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=9&amp;display=latest&amp;size=s&amp;layout=x&amp;source=user&amp;user=29734147@N07"></script>

count=9 definira koliko slika želimo prikazati i user=29734147@N07 je ID našeg računa. Da bi saznali svoj id potrebno je otići na http://idgettr.com/ i upisati adresu vašeg streama. Naš je npr. http://www.flickr.com/photos/2bpxcom/. Na ovaj način možete prikazivati i grupe. Princip je isti samo morate promijeniti source=user&user=29734147@N07 u source=group&group=921758@N20. U tom slučaju svoj ID na http://idgettr.com/ tražite tako da upišete npr. http://www.flickr.com/groups/kroativ/

Pogledajmo CSS za desnu kolumnu:

#flickr a:hover img {
	border:2px solid #A8AA99;
}
#flickr a img {
	background:#FFFFFF none repeat scroll 0 0;
	border:2px solid #CECFC6;
	display:block;
	float:left;
	margin-bottom:10px;
	margin-left:10px;
	padding:3px;
}
.flikr {
	margin-bottom:10px
}
.flikr span span {
	color:#FF1183;
}
.flikr span {
	color:#0061D8;
}
 
.fix {
	clear:both;
	height:1px;
	margin:-1px 0 0;
	overflow:hidden;
}
.rss {
	background:url(../images/rss_abeja_org.png) no-repeat 240px 0px;
	padding-left:10px;
	padding-right:60px;
	margin:10px 0;
}

Za Flickr stream napravili smo hover efekt i ravnomjerni razmak, rss klasi dodali smo pozadinsku sliku. Ništa posebno, osnove CSS-a.

Ovako nam sada izgleda cijeli sadržaj

Footer

Došli smo do kraja stranice odnosno footera. Za ovaj tutorial smo u njega stavili samo copyright informacije no vi po želji možete konstruirati i puno kompleksniji footer.

Kako izgleda footer

Pogledajmo html za footer:

  <div class="grid_12 light_bg_color" style="border-top:2px solid #ccc;margin-top:1px;">
    <div class="pade_ten">&copy; 2008 Naš MAGAZIN, Sva prava pridržana &#8226; Ovaj tutorial i dizajn možete slobodno koristiti za sve vaše potrebe &#8226; Ako želite možete postaviti i link na <a href="http://www.kroativ.net" title="Web dizajn and developmnnt blog">Kroativ</a></div>
  </div>

Dodali smo klasu light_bg_color za pozadinsku boju, kreairali inline css border te smo cijeli sadržaj footera stavili u klasu pade_ten za 10px razmak na sve strane.

Pogledajte kako izgledaju naše stranice ako to već niste učinili.

Zaključak

U ovom ste tutorijalu naučili što su to CSS frameworks i kako se njima koristiti. Izradili ste svoj magazin i naučili poneku stvar o CSS. Vjerujem da ste i vi sada uvidjeli koliku korist možete izvući iz ovih alata, opet napominjem da se ne bi trebali striktno i samo osloniti na CSS frameworks no u svakom slučaju dobro dođu. Ako želite pogledati i elastičnu verziju 960gs frameworka pogledajte ove stranice…

Slični sadržaj:

Kako napraviti moderni Web 2.0 dizajn? (Jako slično)
Naučite CSS u par minuta... (Jako slično)
Kako napraviti dizajn ovisan o vremenu? (Jako slično)
Top postovi na kroativu (Jako slično)
Veliko otvaranje Kroativ.net dizajn bloga (Slično)

Označeno s: css, kroativ, tutorial, web dizajn

Za ovaj članak možete glasati na CroPortalu i tako pomoći u njegovoj promociji. Ako članak još nije objavljen vi možete biti prvi!

Stavovi i mišljenja izrečena u ovome članku i/ili komentarima odnose se samo na autora/icu članka i/ili komentara, a ne i cijele Kroativ mreže. Zabranjeno je neovlašteno prenošenje članaka u cjelosti bez prethodnog dogovora ili bez istaknutog povratnog linka na www.kroativ.net stranicu te imena autora.

Oglas

22 komentara

pratite komentare putem RSS kanala

Tomislav Bilic kaže:

12.12.08 u 18:17 h

Jebeno dobar tutorial. Svaka čast na trudu i doprinosu zajednici. Volio bih da sve ovo ne znam, pa da uživam u prolasku kroz cijeli tutorial 😉

Negdje oko 1. godinu koristim 960gs kod kreiranja Magento ili WordPress thema te mogu reći da se ne mogu zamisliti kako se vraćam na normalni prijelom.

Još jednom, svaka čast!

odgovori
Webmaster kaže:

12.12.08 u 19:11 h

Hvala na lijepim riječima, trudimo se i ovo je tek početak 🙂 Želimo napraviti kvalitetan web dizajn / development portal po uzoru na svjetske modele. Ideja nije nova ali je realizacija originalna i domaća.

odgovori
weberica kaže:

12.12.08 u 19:21 h

joj vidla sam taj sajt sa grid sistemom al mi se nije dalo s tim gnjavit … čekala sam da mi to neko ovak lijepo objasni na hrvackom 😉 … i sad pišem komentar i skužim krticu u footeru heh :))))

odgovori
Webmaster kaže:

12.12.08 u 19:38 h

A kad bi ljudi znali zašto je ta krtica ovdje 🙂

odgovori
weberica kaže:

12.12.08 u 23:27 h

ajde krtica,iskopaj rješenje 🙂 baca mi omegu 3 u novi red. šljaka samo ak je zbroj 11 il manje. zakaj?

html————————-(preskačem head itd)

LOGO
recimo da je ovo podlogo

The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz,

css————————————————

.header
{
background: #cccccc;
height: 200px;
}

.logo
{
color: #ff0000;
font-family: georgia;
padding-top: 50px;
font-size:90px;
line-height: 60px;
}

.podlogo
{
margin-left: 130px;
}

.img
{
height:150px;
margin-top: 25px;
}

odgovori
Webmaster kaže:

12.12.08 u 23:47 h

A daj mi cijeli html posalji iz ovog ne vidim nish. webmaster (at) ovaj site. Zakaj margin-left 130px? Probaj sa absolute position, float… ne vidim iz ovog nish. Treba mi konkretan kod i velicine slika.

Uglavnom pazi na tocan width, brijem da te ta velika margina zeza, probaj na drugi način pozicionirat.

odgovori
weberica kaže:

13.12.08 u 00:06 h

ok, šaljem za minutu (nije vic u velikoj margini,probala)

odgovori
Webmaster kaže:

13.12.08 u 00:32 h

Ok našli smo typo grešku, desi se nije bed 🙂 Pripazite da nazivate generalne klase koje koristimo za konstrukciju točno kako je definirano u 960gs frameworku. Znači grid_XX, alpha, omega itd…

odgovori
weberica kaže:

13.12.08 u 00:45 h

ajoooj, sad vidim !.. tak je to kad nešt pokušavam skužit u petak oko ponoći umjesto da gledam serije ili idem spavat 😛 tnx lega

odgovori
Andrej kaže:

15.01.09 u 10:43 h

Glavni meni bi možda trebalo drugačije srediti CSS, naime, ako dovoljno povećate font (Firefox, Ctrl+Scroll) stvari se prestanu vidjeti jer izcure van LIjeva.

Sada nije to strašno da ne pazite na accessibility na npr. vlastitoj stranici no ako to stavite u tutorial koji ce većina početnika samo kopirati, well to je po meni onda problem.

Dovoljno bi bilo iz #navigacija ul li izbrisati “width:102px” te u #navigacija ul li a:link, #navigacija ul li a:visited dodati padding:0 18.5px pa da sve izgleda jako slicno a da je zadovoljen accessibility.

Eto, moje 2lipe kada vec radite tutoriale 🙂
PS. Ovo mi prvi komentar no inace Thumbs up za stranicu

odgovori
Webmaster kaže:

15.01.09 u 10:49 h

Odlično, hvala na komentaru. Ako primijenimo vaše rješenje onda dolazi do raspadanja menu-a (već na +1), a naša solucija funkcionira do normalnog povećanja fonta (x4). Vaše rješenje ostati će u komentarima pa neka korisnici isprobaju ali kao što već rekoh vjerujemo da je ovaj naš način efikasniji.

odgovori
Andrej kaže:

16.01.09 u 14:09 h

Pa je, zgodno je no pada u vodu kada je menu dinamički generiran (tj. user vulgaris može tamo upisati što želi) ili npr. jedan od linkova mora sadržavati dvije ili više riječi….
No, ovu diskusiju bi možda mogli pretvoriti u neki tutorial o menijima pošto ima tona opcija i verzija…

odgovori
Webmaster kaže:

16.01.09 u 14:14 h

Ma da, u potpunosti se slažem s vama, ovaj tutor je namijenjen kao temelje za nešto više i uvod u grid 960 sistem. Vi se to nudite za pisanje tutora o menijima? 🙂

odgovori
Sanny kaže:

16.05.09 u 18:45 h

Predobar tutorijal! Znam neke osnove sintakse css-a, al nisam jos uspio da ga optimalno vezem za sadrzaj. Svaka cast na trudu, bice od velike pomoci. bookmarkirano za poslije;)

odgovori
amir_ kaže:

30.08.09 u 01:29 h

imam jedno pitanje u vezi css frameworka..posto sam napravio “izgled” kakav zelim mogu li to kako koristiti kako template za neki od cms-ova..znaci da se sadrzaj dinamicki mijenja??

tnx za tutorial 😉

odgovori
- Webmaster kaže:
  
  30.08.09 u 10:01 h
  
  Pa naravno da možete samo trebate napraviti temu za željeni CMS na bazi tog css-a. Izrada teme se razlikuje od CMS-a do CMS-a i to nadilazi ovaj tutorijal. Ja sam osobno na taj način već radio neke teme za WordPress, Drupal itd. kada sam bio u žurbi. Na kraju krajave i ovaj naš Kroativ je napravljen od Grid-a 960 koji je odličan za produkciju i brzu izradu. U principu izrada svake teme počinje s izradom HTML stranice koju možete napraviti kako god želite, nakon toga tu HTML stranicu pretvarate u CMS temu.
Alek kaže:

26.11.09 u 13:00 h

Svaka cast

odgovori
Mario kaže:

29.09.12 u 00:26 h

Damn it, cini se da budim komentare na temi staroj nekoliko godina ali trebam pomoc 🙂
Znaci, imam:

U mom stilu sam definirao pozadine za ove 2 moje klase (top header i navigacija) i to radi.No, izmjedu i imam jednu horizontalnu liniju koja dijeli ta dva DIVa.Kako imaju razlicite background boje, to poprilicno bode u oci…

Evo da bolje vidite : http://oi48.tinypic.com/2mwht9i.jpg
Nadam se da dobivate obavijest na mail o novim komentarima, nebih volio cekati par godina na novi komentar 😀

odgovori
- Weberica kaže:
  
  03.10.12 u 08:03 h
  
  Ako ti je bg img onda bijela crta neka bude dio slike zajedno sa crnom ( i / ili narančastom) pozadinom
  
  Ako je bg boja određena u css-u onda ti je jedan div sa crnom bojom, jedan sa bijelom i jedan sa narančastom. Svaki ima svoju visinu pa tako i bijeli (1 px)
- Weberica kaže:
  
  03.10.12 u 08:07 h
  
  … ili npr crni div može imati bijeli border 1px

Trackbacks & Pingbacks

Kako napraviti moderan Web 2.0 dizajn? | Kroativ says:

16.12.08 at 16:59

[…] za kostur stranica koristili smo 960gs CSS Framework. Ako još niste, svakako pročitajte naš prošli tutorial te se pobliže upoznajte sa tim CSS […]

Reply
12 korisnih CSS framework, template i "snippet" stranica. | Kroativ says:

12.01.09 at 20:49

[…] velika, vremena je malo, a pomoći na web-u tako puno. Od raznih CSS frameworka (pisali smo već o grid 960 sistemu), gotovih predloška za stranice ili komadića koda, sve je tu i samo treba potražiti. Vaša […]

Reply

Ostavite komentar

Autori s više od 10 komentara nemaju tag nofollow na svojim linkovima! Zabranjeno je vrijeđanje, omalovažavanje ili na bilo koji drugi način ometanje normalnog toka komentara. Također je zabranjeno oglašavanje u komentarima i sve druge vrste spam-a.