Blogfórum
 
 

(x)

 
 

Blogvilág java

  • Mi az a blog?
  • 23 kerdes jovobeni bloggereknek - Jo-e neked a bloggolas?
  • Hogyan alapozzuk meg a weben hírnevünket bármilyen témakörben?
  • 120 nap alatt a semmiből 2000 olvasó
  • Miért nem reagálnak egymásra a magyar blogok?
 
 

Linkek

Saját blogok:
  • Freeblog Sablonok
  • Geeklány
  • Focusize
Olvasásra ajánlott blogok:
  • SEO blog - Longhand
  • Link building blog
  • Marketing Izék
  • Bodzasfanta blogdolgai
  • Wyctim blogelete
  • Blogról | doransky
  • IT Megoldások
  • Keresőoptimalizálás, keresőmarketing, SEO blog
  • Webmánia
  • daily blog tips
  • doshdosh
 
 

Partnerek

Add to Technorati Favorites GeoURL Bloggers & Blogging Blogs - BlogCatalog Blog Directory

 
 

Szerzői jogok

Creative Commons License Blogvilág by xSolutions is licensed under a Creative Commons Attribution 2.5 Hungary License.
 
Follow this blog

Folytatódik Bobbyka iskolája a CSS-ről. Ez alkalommal a főleg a dobozokról, azaz a <div>-ekről lesz szó, ami azért is fontos, mert a freeblog sablonunk kizárólag ilyen elemekből áll, és ha új ruhát akarunk blogunknak varázsolni, akkor nem árt tisztában lenni a div alapfogalmaival.

Igazából az előző részben még nem adtunk ruhát weblapunknak, csak egy kis barnítókrémet meg egy kis sminket kapott. Itt az ideje, hogy tényleg ráadjunk valamit, de először nézzük meg közelebbről hogy is néz ki egy weblap/blog. Nézzük konkrétan a blogot, ha megfigyeljük a blogok "dobozokból" állnak szokott lenni fent egy kép, amin ott a blog neve vagy csak egy színes csík és azon a név ezt általában head-nek hívják, aztán ha lejjebb megyünk ott vannak a hasábok számuk általában az [1,3] intervallumon mozog és végül legalul is szokott lenni egy általában vékony doboz, amibe néhány információ található az oldalról(ki készítette a sablon meg ilyesmi). Ezek csak a főbb részei egy blognak amik a blog vázát adják, ezeken belül még rengeteg "doboz" és egy egyéb dolog található. Réges-régen ezeket a dobozokat egy táblázattal reprezentálták, ám ez már elég divatjamúlt módszer, helyette div-eket használnak.

Mi az div?

A legegyszerűbb szó rá, hogy doboz. Egyébként egy html elem. Html kódja meglepő módon a <div> lezáró tagje pedig </div>. Akkor szoktuk használni amikor egyes blokkokat szeretnénk egyben tudni.De inkább nézzük meg egy példán keresztül.

pelda1.html

A forráskódod még nem fontos érteni de azt lehet látni hogy amelyik formázást elkövettem a #doboz-ra az csak a <div> tagek közötti részre vonatkozott.Így tehát összefüggő dolgokat tudunk egyként kezelni.

A div-ekre és a többi html tag-re több módon is ráhúzhatjuk sablonunkat. A különbség nem sok, de fontos. Az első lehetőség ha a html kódban a tagen belül elhelyezünk egy id-t pl így:<div id="valami">.A második esetben nem id hanem class="valami". A stíluslapon a következőképp kell eljárni ha id-t használtunk akkor #valami{tulajdonság:érték;}, ha class-t használtunk akkor .valami{tulajdonság:érték;}.
A harmadik esetben a html kódban semmit nem kell csinálni a css kódban pedig hasonlóan az előző cikkben leírtakhoz kell eljárni csak a body helyett azt írjuk, hogy div vagy h1,a,p,img stb. ha ezt használjuk, attól később felültudjuk írni a tulajdonságokat pl ha megadom hogy

body {color:white}
p {color:red}

Elvileg a bodynak azt mondjuk, hogy a betűk színe fehér de ha a szöveg a <p></p> tagek között van akkor piros lesz. Akkor szoktam használni ezt a megadási módod ha tudom előre, hogy csak kevés esetben fog változni az adott tulajdonság.

Mikor melyiket?
Class: akkor használjuk amikor több elemre is használni akarjuk a stílust pl. ha azt akarjuk, hogy az oldalunkon az általunk kiválasztott képeknek legyen kerete ilyenkor a class-t használjuk.

Id: Csak akkor használjuk ha az adott id-vel csak egy elem fog szerepelni az oldalon.

A három megadási módot lehet keverni is.
pl. ha van doboz id-jű div amiben van egy másik div aminek pedig van egy class értéke ami bal.

ebben az esetben a dobozon belül lévő bal "class-ű" elemben a <h2></h2> tagek között lévő szöveg piros lesz.

#doboz .bal h2{
color:red;
}

 

A legfontosabb dolog amit most meg kell érteni az a pozicionálás.

Három féle módszer van a pozicionálásra: Statikus, abszolút, relatív.
Ezen kívül létezik még a fixed pozíció is de azt az ie7 alatti böngészők nem ismerik, működése hasonló az abszolúthoz de itt fixen elhelyezi az elemet ami nem fog elmozdulni görgetésre, ha nem az említett böngészőt használod akkor a lenti képen láthatod működés közben:)

Statikus pozicionálás: az alapértelmezett, az elemeknek nincs megszabva a helyzete ahogy a html kódban következnek úgy jelennek meg a böngészőben.Használata: {position:static;}

példa statikus pozícióra: itt

Abszolút pozicionálás: a legközelebbi olyan szülőhöz képest lesznek pozícionálva aminek a pozíciója nem static ez elsőre nem biztos, hogy érthető ez.

Mi is az a szülő?

Minden elemnek van egy szülője. Az ősanya a body.Úgy kell elképzelni az egészet mint egy matrjoska baba.

Példa a szülőre:

<div id="doboz_1">
<div id="doboz_2"></div>
</div>
<div id="doboz_3"></div>

 

A doboz_2 szülője a doboz_1, láthatjuk hogy a doboz_1 lezáró div tagje a doboz_2 után van és ezzel "örökbefogadja" azt.

A doboz_1 és doboz_3 szülője a body, mivel jelen esetben ők nincsenek semmi más tagen belül.A body pozicioját staticnak kell tekinteni.

Használata: {position:absolute;}

példák abszolút pozicionálásra: itt

Relatív pozícionálás: Az alapértelmezett pozícióhoz képest tolhatjuk el az elemet.

Használata: {position:relative;}

Példa relatív pozícióra: itt

Szorosan a pozicionáláshoz tartozik a clear és a float.

Lebegés: három lehetséges értéke van none,right,left. Az elemeket tolhatjuk el vele

jobbra vagy balra. Használata:{float:left;}

példa: itt

Clear: számomra nehezen érthető volt a clear használata. A clear tulajdonság megtiltja azt, hogy az adott elem jobb,bal vagy mindkét oldalán float elem legyen.

Használata:{clear:both;}

példa clear nélkül: itt
példa clear használatával: itt

Ami most még kell nekünk az a méretezés, két érték van a width(szélesség) és a height(magasság).
Lehetséges értékek: auto,%,px,em

Most már eleget tudunk ahhoz, hogy megpróbáljunk egy kis blog vázat kovácsolni.
Először is gondoljuk át, hogy hány "doboz" fog kelleni. Mi most egy olyan vázat csinálunk aminek lesz egy head része amiben mondjuk lesz egy logo, lesz alatta egy doboz amiben a postok jelennek meg lesz a szokásos oldalsáv, lesz egy lábjegyzet rész és lesz még egy doboz amibe az egészet bele tesszük kivéve a headet. Összesen tehát 5 dobozunk van ez alapján a html kód valahogy így fog kinézni(csak a body részt írom le):

<div id="head"></div>
<div id="doboz">
<div id="main"></div>
<div id="sidebar"></div>
<div id="foot"></div>
</div>


Ha ezt megnézzük a böngészőnkben még nem látunk semmit.Nézzük most a css-t!
Először is nézzük a body-t, legyen mondjuk az oldal háttere valami sötét szín, a betűszín pedig fehér.

body{
background:#191919;
color:white;
}

Ha az meg van már is van egy lapunk, aminek nem fehér a háttere:).
Nézzük a dobozokat sorba:

#head{
background: url("hbg.png");
width:100%;
height:100px;
}

 

A kép letölthető innen.

#doboz{
margin:0 auto;
width:801px;

background:black;
}

#main{
float:left;
background:black;
width:600px;
}
#sidebar{
float:right;
width:200px;
background:black;
}

#foot
{
background:black;
}

margin-t még nem ismerjük egyelőre annyit róla ha a "0 auto" értéket kapja akkor legtöbb esetben középre igazítja az elemet. Egy dolog van még hátra a foot főlé beszúrni ezt sort <div style="clear:both;"></div>.Tehát végül így fog kinézni a html kód body része

<div id="head"></div>
<div id="doboz">
<div id="main"></div>
<div id="sidebar"></div>
<div style="clear:both;"></div>
<div id="foot"></div>
</div>

és kész is vagyunk igaz még szinte semmi nem látszik de ha feltöltöd adatokkal a diveket látni fogod mit alkottunk.Az enyém így néz ki.

A következő alkalommal megnézzük hogyan tudjuk a szövegeket megformázni meg egy kicsit igazítani a távolságokat. Ha valami hiány érzeted van, kihagytam valami vagy nem jól írtam valamit szólj nyugodtan.

 

További érdekes témák, ötletek a Blogfórumon.

Tetszett a bejegyzés? Iratkozz fel az RSS értesítőre, a hírlevélre vagy ajánld barátaidnak a Twitteren vagy a freeblogon.
Utolsó bejegyzések:

Eddig 9 komment érkezett ()

 
 
  •  

    1.  Dobos István 2008. 05. 23. 18:33

    "csak kapot egy kis barnítókrémet meg egy kis sminket kapott"

    Nem akarok én kötözködni csak gondolom neked is jó ha nincsa bejegyzéseidben hiba. ^_^ Tisztelettel. :)

     
  •  

    2.  Dobos István 2008. 05. 23. 18:35

    Nézd már és erre én hibázok. xD

    "nincs a" :)

     
  •  

    3.  Varsányi Martina 2008. 05. 23. 19:05

    István: igazad van, nem korrigáltam Bobbyka bejegyzését, hanem copy-paste módon másoltam át.

     
  •  

    4.  lemegyek 2008. 05. 23. 21:34

    Jó dolog a CSS, csak tűnne már el az Internet Explorer a föld színéről!

     
  •  

    5.  bobbyka 2008. 05. 23. 23:13

    @ Dobos István az én bűnöm, sajnos gyári hibás helyesíró vagyok, próbálok küzdeni ellene :)
    @ xsolutions bocsi a hibáért és még egyszer köszi a lehetőséget

     
  •  

    6.  Varsányi Martina 2008. 05. 24. 6:54

    @Bobbyke: előfordul, majd legközelebb átolvassuk jobban :)

     
  •  

    7.  Dobos István 2008. 05. 24. 17:30

    Ezen a blogon nem lehet módosítani a bejegyzéseket? :D (költői kérdés volt)
    Csak azért kérdem mert még nincs kijavítva a bejegyzés és a legújabb cikkben is vannak hibák. :) Ha már tudjátok hogy rossz helyesírók vagytok akkor miért nem olvassátok el legalább kétszer azt amit leírtok? :)

    Ajánlom a magyar szótárat Firefoxhoz. Aláhúzza a hibákat. ^_^
    http://href.hu/x/5smq

    Igen ez már kicsit kötözködés mert annak ellenére hogy megemlítettem sz*rtatok rá és ki se javítottátok. :)

     
  •  

    8.  Varsányi Martina 2008. 05. 25. 10:23

    István a sz*runk rá egy kicsit durva, mint kifejezés.
    Másrészről, ha jól értem, akkor épp arra bíztatsz, hogy nyúljak bele egy írásba, amit nem én írtam.

     
  •  

    9.  Dobos István 2008. 05. 25. 23:05

    Akkor kérj engedélyt a hibák kijavítására de így hibásan nem rakunk ki bejegyzést mert igen negatív hatást kelt szerintem.

     

Mondj valamit

A szövegben nem lehet HTML-t használni, a linkeket pedig automatikusan aláhúzzuk. Az email cím megadása kötelezõ, de az oldalon nem jelenik meg. Ha van felhasználóneved, itt bejelentkezhetsz.






Az IP címedet megjegyezzük, de ezt csak a komment spam jellegének vizsgálatához használjuk fel.