2011. december 29., csütörtök

Gyakorlat - Menü kicsinosítása

A "menüsávunk" a jelenlegi állapotában elég ramatyul néz ki. A mai napon viszonylag "széppé" varázsoljuk. A végeredmény a következő lesz:


Gyakorlat - Fejléc finomítása


A mai leckében finomítunk a fejléc kinézetén. Az eredeti tervet megváltoztatjuk, mert nem úgy néz ki, hogy ... jól néz ki :D. Szerintem a fejlécnek ne legyen fehér színe, magasságát csökkentsük le, a szöveg függőlegesen és vízszintesen legyen középre igazítva és növeljük a betűméretet is.


A végeredmény így fog kinézni.

2011. december 25., vasárnap

Gyakorlat - A CSS megírása

Üdvözlök minden olvasót újra. Elnézést, hogy ilyen sokáig nem volt új lecke, csak technikai gondok merültek fel. A mai leckében folytatjuk a félkész oldalunkat. Igazából a legfontosabb részeket be is fejezzük. Álljunk is neki!

2011. december 13., kedd

Gyakorlat - A HTML kód megírása

Most, hogy az oldal kinézetét megterveztük, neki kell állnunk a váz felépítésének. Az oldal semleges témájú egyelőre, a szöveget a nemes és nagymúltú Lorem Ipsum szolgáltatja.

2011. december 12., hétfő

Gyakorlat - az oldal megtervezése

Rövid szünet után újra folytatódik a blog. Mint mondtam, a szünetig, a megszerzett tudásunkkal készítünk el 2 weboldalt. Minden oldal elkészítése a tervezéssel kezdődik. A mai rövid leckében az oldal kinézetét fogjuk megbeszélni, főbb részeit "felismerni".

2011. december 3., szombat

CSS Átlátszóság, médiatípusok

Elérkeztünk az utolsó CSS leckénkhez, melyben az átlátszóságot és a különböző médiatípusokat foglyuk megnézni. Kezdünk is neki...

2011. december 2., péntek

CSS Menüsáv és képgaléria

A mai nap elérkeztünk az utolsó előtti CSS leckéhez :D Jee, most mindenki boldog. Miről is fogunk ma beszélni? A W3-as tananyag egyetlen (igazából 2) olyan leckéje, amivel gyakorlatban is CSS-ezhetünk (:D). Egy menüsávot és egy nagyon kezdetleges képgalériát fogunk ma elkészíteni.


Egyelőre még ne a kódot nézzétek. Erről a menüsorról beszélek :D
Először is nézzük meg, hogy hogyan csinálnánk meg.
Menüket általában listával, felsorolással készítünk el. Minden listaelem egy link. A listánk vízszintes, a többi pedig formázás. Neki is állhatunk az elkészítésnek.

Tehát létrehozunk egy listát HTML-ben, ahol minden listaelem egy link.


<ul>
<li><a href="#">Kezdőoldal</a></li>
<li><a href="#">Hírek</a></li>
<li><a href="#">Kapcsolat</a></li>
<li><a href="#">Rólunk</a></li>
</ul>

Ezután pedig vízszintessé alakítjuk a listánkat CSS-ben. Ezt az lebegtetés leckében tanultuk.


li{
float:left
}


Ha ezzel megvagyunk, akkor nézzük meg az eredeti menüsoron a "gombokat". A linkek nem csak a szövegen kattinthatók, tehát a linkeket be kell dobozolnunk, hogy az egész területére kattinthassunk.


ul li a{
display:block;
}


A következő lépésben pedig formázzuk a menüpontokat.
Beállítunk neki egy háttérszínt, középre igazítjuk a szöveget, félkövérré tesszük, a szövegszínt fehérre állítjuk, arial betűtípusúra tesszük, eltüntetjük az aláhúzást:


ul li a{
display:block;
width:100px;
background-color:green;
color:white;
padding:10px 0; /*Így a szöveg függőlegesen is középre lesz igazítva*/
text-align:center;
text-decoration:none;
font-weight:bold;
font-family:arial;
font-size:18px;
}


A menüsor magassága a következő lesz: 18px a betű + alul, felül 10px eltartás --> 38px.

Tök más mint az eredeti, de színek, betűtípusok "másolásával" hasonlóvá tehető, de nem az volt a cél, hogy egyformát készítsünk.

A másik feladatunk egy képgaléria elkészítése. Pontosan erről beszélek :D
Nem valami látványos, de a célnak megfelel.
Nézzük meg, hogyan épül fel a galéria. Először is áll 4 részből, mindegyik ugyan az, csak a kép más. Tehát elemezzünk most csak egyet.
Van egy terület kék kerettel, benne egy kép, ami ha ki van választva, ugyan olyan keretet produkál, mint a terület. Meg persze van egy képleírásunk.

Készítsük el a HTML kódot. Egy terület kell, benne egy "linkképpel" és egy leírással.

<div id="terület">
<a href="#"><img src="kep"/></a>
<div id="felirat">Képaláírás HTML kezdőknek módra :D</div>
</div>


Formázzuk a "terület"-et 1px-es kék kerettel, automata szélességgel és magassággal (a kép szélességéhez és a kép+leírás magasságához igazodik). Lebegtessük balra, mert több kép lesz egymás mellett. A szöveg (és kép :D) legyen középre igazítva. Adjunk neki 10px margót is, hogy legyen köz a képek között.

#terület{
border:1px solid blue;
width:auto;
height:auto;
float:left;
text-align:center;
}


A "feliratnak" adjunk 130px szélességet, hogy elférjen a kép alatt. A kép meg legyen 110 px széles és 90px magas. A keret színe a képnek fehér és 1px-es.



img{
width:110px;
height:90px;
margin:3px;
border:1px solid #fff;
}
#felirat{
width:130px;
}


Ha ráviszem az egeret a képre, akkor a keret színe legyen kék.


img:hover{
border-color:blue;
}


A link helyének bármit megadhatunk.

A mai leckének ennyi :], holnap befejezzük CSS tanulmányainkat egy talán hosszabb leckével, a további tennivalókat majd akkor ismertetem :D

2011. december 1., csütörtök

CSS látszólagos osztályok és elemek

A mai napon megismerkedünk az egyik "legbonyolultabb" CSS "dologgal". Ezek nem mások, mint a látszólagos osztályok és elemek. A linkek formázásánál beszéltünk a a :hover, :active, :visited stb. dolgokról. Akkor még nem tudtuk, hogy ezek látszólagos osztályok.