CSS trükkök első rész – Háromszögek, sokszögek

Üdvözlök mindenkit!
Egy érdekes megoldást szeretnék bemutatni css segítségével, mellyel különböző alakzatokat tudunk létrehozni. Példánkban egy háromszöget fogunk szerkeszteni. Hozzunk létre egy HTML fájlt, amiben helyezzünk el két <div>-et egy harmadik <div>-ben.

Float fix

Sok gondot okozott, hogy a float-olt div -ek nem növelik FF alatt a konténer elem magasságát. Erre találtam egy egyszerű megoldást. Annyi a teendőnk, hogy a css-be definiálunk egy új osztályt, aminek a tulajdonsága egyetlen sor. Itt található a példa css-kód részlet:

Középre igazítás CSS-el

A css-ben a középre igazítás mindig is nehéz feladat volt, mert a böngészők máshogyan értelmezik a CSS tulajdonságokat, ráadásul vertikális középre igazítás nincs a CSS-ben, ám ezt mégis meg lehet oldani…
Tegyünk fel, hogy szeretnénk teljesen az oldal közepére zárni egy 440*400 pixeles divet, amibe később az oldalunk tartalma kerül. Táblázatos módszerrel ez viszonylag egyszerű, egy [...]

Menü lista segítségével

Menüt listával? Sokaknak ez már régóta természetes, mások meg vakarják a fejüket, hogy most mi van? Pedig ha belegondolunk miről is van szó? egy menülistáról, azaz tényleg van valami köze a listához :)
Általában megszoktuk, hogy listát felsorolásokhoz használjuk, de hogy lesz ebből menü, pláne vízszintesen?

Gördíthető DIV-ek létrehozása

A fórumon egyre gyakrabban előfordul a kérdés, hogy hogyan lehet weblapon gördíthető (scroll-ozható) sávot létrehozni IFrame nélkül. Ezt legegyszerűbben css segítségével lehet megcsinálni…
Ha a weblapunkon egy gördíthető sávot akarunk létrehozni (például hogy ne csússzon szét a design egy-egy szélesebb elem miatt), akkor a következő CSS kóddal ezt egyszerűen megtehetjük például az IFrame-s megoldás helyett (amit [...]

legördülő listák formázása

A minap újfent bebizonyosodott, hogy a css segítségével milyen jó dolgokat lehet elérni a weben. :) Listát kellett formázni hogy a legördülő tartalom vmi struktúrált formában jelenjen meg, és – bár ezelőtt emlékeim szerint ilyet még nem használtam – örömmel láttam hogy simán működik a dolog, szépen lehet vele formázgatni a menü elemeit.
Akkor nézzük hogy [...]

Pozícionálás CSS-sel

A honlap elemeinek pozícionálása megoldható többféleképpen is. Az egyik módszer a táblázatos, ezt használják a leggyakrabban de nem azért meg jobb, hanem mert ez a megszokott illetve a vacak böngészőprogramoknak (IE is rossz) köszönhetően a css-t (rivális megoldás) a böngészők hol így, hol úgy értelmezik. Mint az előbb már kiderült a másik megoldás a CSS. [...]

Template váltása PHP-val

A php segítségével könnyen megoldható, hogy egy lapon váltogatni lehessen a stílusok és template-k között (attól is függ hogy a css-ben csak a formázásra vonatkozó részeket tartjuk, vagy mondjuk CSS segítségével építettük fel az egész lapszerkezetet), erre találsz az itt következő leírásban egy lehetséges megoldást.

CSS átlátszóság

Az opacity tulajdonságot a w3c a második css specifikációban vezette be, viszont csak a css3-ban lett tökéletes. Én Firefox1.0.2, Mozilla1.7.5 böngészõkön teszteltem.
Az általános szintaxis az opacity: 0.5;, ahol a 0.5 az átlátszóság mértéke és ez 50%-os átlátszóságot jelent.
Mozillánál az 1.6-os verziószám alatt a -moz-opacity:0.5; szintaxist kell használni.
Az ie a filter:alpha(opacity=50); szintaxist használja, értelemszerûen az 50 [...]

Honlap tartalmának középre igazítása

Alapvetően 2 módja van a css alapú lapok tartalmának középre igazításához attól függően, hogy a lap rugalmas vagy fix szélességű.
Rugalmas lapszélesség
Ez esetben %-osan adod meg a méreteket, pl. a lap szélessége legyen 80%-a a mindenkori böngészőablak szélességének. Ez azt jelenti, hogy a lap mellett pl. 10-10% hely kell hogy maradjon. A kódot így add meg:

CSS rollover trükk

A képek váltakozását egy menüben (rollover effekt) a legtöbben javascript segítségével oldják meg, talán a régi beidegződésnek köszönhetően. Pedig van már erre egy sokkal szebb, könnyebb megoldás is css felhasználásával, amihez mindössze az alábbi leírást kell elolvasni és kipróbálni. :) – kiegészítés: Harder
A feladat az, hogy JavaScript nélkül hozzuk létre demo oldalon is látható [...]

Vízszintes menü CSS segítségével

css segítségével könnyen és gyorsan lehet a későbbiekben pillanatok alatt módosítható vízszintes menüt készíteni. Első körben a HTML (vagy php) oldal HEAD részébe illeszd be az alábbi CSS kódot (Természetesen ez a CSS külső fájlban is lehet!)

1
2
3
4
5
6
7
8
9
10
11
12
13
#navcontainer ul {
float:left;
width:100%;
margin:0;
padding:0;
font-size:11px;
font-family:verdana, arial, helvetica, sans-serif;
color:#fff;
background:#ccc;
}
#navcontainer ul li {
display:inline;
}

Amint ezzel megvagy, a <body> </body> tag-ek közé illeszd be az [...]