A probléma: az Internet Explorer 7 a háttérnek beállított repeat-y tulajdonságú kép áttetsző png részét randomra megduplázta, mintha többször egymásra tette volna. Ahogy görgettem az oldalt, ez a duplázódás el-elcsúszott, megrövidült, megnagyobbodott, ahogy az neki tetszett. És hogy néz ki? Így:

Bal oldalon lehet látni, hogy mit csinál az IE7, jobb oldalon pedig egy normális böngésző, esetünkben a Mozilla Firefox 3.5.5.

És akkor hogy lehet megoldani?

Hosszú utánaguglizás után megtaláltam a megoldást: arra a div-re (vagy bármi másra), aminek be van állítva az áttetsző png-s háttér, adni kell egy ilyen stílust:

.divclass {
background: url(/images/transparent.png) center repeat-y;
min-height:0;
}

És hogy miért? Az ún “haslayout” probléma miatt, ami a kedvenc böngészőnk, az IE fantasztikus tulajdonsága. És igen, továbbra is ironikusan írom ezt. Aki szeretne további részleteket megtudni erről, itt talál: hasLayout – Webmaster World.com. Aki meg az egyszerű megoldásokat keresi, annak ott a min-height: 0; És élünk tovább boldogan :)

http://upfront.hu

Négy különböző stílusban jelenik meg az oldal, és annyira szép, hogy muszáj megnézni!

http://cegleditermal.hu

Saját weboldalam, melyre igen büszke vagyok. Most kapott egy kis modernizálást, már nem tűnik első ránézésre blognak, annál inkább egy kellemes szakmai oldalnak.

Kedvenc elemem benne a vektorrajz a fejlécben, melyet fénykép alapján magam rajzoltam.

A ceglédi közmű cégnél az volt az elsődleges feladat, hogy a személyes és telefonos ügyfélszolgálatot részben internetre tereljük át, ahol az ügyfelek megtalálnak minden adott információt, amire szükségük lehet. Wordpressre épül az oldal, melynek segítségével az aktuális híreket mindig gyorsan és egyszerűen meg tudják jelentetni.

Mai napra több száz aloldallal rendelkezik, de a megfelelő háttérendszernek köszönhetően semmifajta lassulás nem érzékelhető rajta.

Drop Shadow – Adjunk a képnek árnyékot

A lényeg, hogy egy nagy, árnyékkal ellátott képet beteszünk háttérképnek. Mivel az IE6 nehezen kezeli az átlátszó png-t, ezért érdemes testreszabott gif-et használni. Minél nagyobb a háttérképünk, annál nagyobb képeknél lehet használni. A példában egy 1000×1000 pixeles kép is árnyékkal jelenne meg.

HTML

<img class="shadow" src="sample.jpg" alt="" />

CSS

img.shadow {
   background: url(shadow-1000x1000.gif) no-repeat right bottom;
   padding: 5px 10px 10px 5px;
}

Dupla keret

Az egyik legegyszerűbb és legelterjedtebb technika. Háttérszínt és bordert, azaz keretet adunk a képnek

HTML

<img class="double-border" src="sample.jpg" alt="" />

CSS

img.double-border {
   border: 5px solid #b4c842;
   padding: 5px; /*Belső keret mérete*/
   background: #fff; /*Belső keret színe*/
}

Vízjelezett kép

Mintha csak photoshoppal raktuk volna rá a vízjelet. Az IE6 hibájának köszönhetően nem átlátszó png-vel oldottam meg, hanem egy jpeg kép css átlátszóságával játszottam. Szerintem üt :)

HTML

<div class="transp-block">
   <img class="transparent" src="sample.jpg" alt="" />
</div>


CSS

.transp-block {
   background: #000 url(watermark.jpg) no-repeat;
   width: 420px;
   height: 177px;
}
img.transparent {
   filter:alpha(opacity=75);
   opacity:.75;
}

Kép felirattal

Áttetsző csík a kép alján, rajta a felirat – akár keresőoptimalizálás szempontból is tökéletes lehet. Egy hátránya van, hogy nem lehet tetszőleges méretű képre alkalmazni, annak előre tudni kell a méretét. De egyébként mutatós :)

Budapest – The dark city

HTML

<div class="img-desc">
   <img src="sample.jpg" alt="" />
   <cite>Budapest - The dark city</cite>
</div>

CSS

.img-desc {
   position: relative;
   display: block;
   height:177px;
   width: 420px;
}
.img-desc cite {
   background: #111;
   filter:alpha(opacity=55);
   opacity:.55;
   color: #fff;
   position: absolute;
   bottom: 0;
   left: 0;
   width: 400px;
   padding: 10px;
   border-top: 1px solid #999;
}

A képeket acs.com-tól loptam.

Hack a stíluslapon belül

Bár a legjobban használható technika az ún. Conditional Comments, ez sajnos csak a HTML fájlokban használható, a stíluslapon belül nem. Sokan szeretik tisztán tartani a HTML forrást, ílyenkor a stíluslapon belül kell elkövetnünk néhány “csalást”.


.iehackpelda1 {
background-color:#b4c842;
padding: 2px !important; /* Firefox/Safari */
padding: 10px; /* IE6 */
}
 


Itt a példa szöveg. Most nézd meg IE6-tal. Lepődj meg :)

A fenti esetben minden böngésző 2 pixelt fog tenni a szöveg köré, az IE6 pedig tizet. Tegyük az !important szót a pontosvessző elé, majd adjuk meg még egyszer ugyanazt a tagot, az már csak az IE-nek fog szólni.


.iehackpelda2 {
color:green; /* Zöld szöveg */
}
html>body .iehackpelda2 {
color:red; /* Piros szöveg, de ezt az IE6 nem látja, zöldnek mutatja */
}
 


Itt a példa szöveg. Piros. Most nézd meg IE6-tal. Zöld :)

Itt egyszerűen annyit csináltunk, hogy annak a stílusnak, amelyiket nem az IE6-nak szánjuk, elé teszünk egy olyat, hogy html>body. Pont fordított logikával, mint kellene, de ez is működik.

Hack a HTML oldalból

Ha sok olyan formázási elem van, melyet hackelni kell, mert egyszerűen sz@r az IE6 (hála égnek az IE5-tel már nem nagyon kell foglalkozni), vagy egyszerűen elegánsak szeretnénk lenni, akkor készítünk egy külön lapot az IE-nek. A HTML head részébe ültetjük be azt a részt, ami minden egyéb böngészőben a normál stíluslapot hívja meg, IE esetén pedig a neki szántat. Így:


<head>
   <title>ZINA LEMMIKKI</title>
   <link rel="stylesheet" type="text/css" href="styles.css" />
 
   <!--[if IE]>
   <link href="all_IE.css" rel="stylesheet" type="text/css" />
   <![endif]-->
 
   </title>
</head>
 


A kiemelt rész mutatja, hogy kell meghívni az IE böngészőknek szánt stíluslapot. Ha nem az összes IE böngészőben gondolkodunk, akkor lehet specializálni:

<!–[if IE 5.5]>
<![endif]–>

<!–[if IE 6]>
<![endif]–>

<!–[if IE 7]>
<![endif]–>

Kellemes IE vadászatot!

A white space alapbeállítása

Az összes böngésző máshogy értelmezi a margin és padding alapértékket. Ezt nullázzuk le, hogy ne érjen minket meglepetés.

* { margin: 0; padding: 0; }



Egy kicsit bővebben

Ha nem akarjuk törni az agyunkat a resetelésen, akkor megfoghatjuk a jó előre elkészített nullázó css lapunkat. Ha még nincs ilyened, akkor itt van:


/* linkek aláhúzásának törlése */
:link,:visited { text-decoration:none }
 
/* listák elől töröljük a pöttyöket és számokat */
ul,ol { list-style:none }
 
/* az automatikus címsor méret beállítás törlése */
h1, h2, h3, h4, h5, h6, pre, code { font-size:1em; }
 
/* töröljük az egyéb elemek köré berakott paddingot és margint is */
ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input
{ margin:0; padding:0 }
 
/* szedjük ki a linkelt képek köré rakott keretet */
a img,:link img,:visited img { border:none }
 


Természetesen ezt bővíthetjük igény szerint, de a legtöbb dizájnnál ez megfelelő kindulópont. Az ötleteket szívesen várom!

A következetes felépítés profizmusra vall. A következetlenség hasonló, mint a helyesírási hibák egy esszében. A minőség rovására mennek. Teljesen mindegy, hogy melyik stílust, milyen dizájnt választottunk, ha szem előtt tartjuk ezt az elvet, ott leszünk a szeren. Még ha nem is olyan jó a dizájn. Legalább legyen következetes :)

Az elv betartásának legegyszerűbb módja, ha a tervezés korai szakaszában kitalálunk valamit, és ahhoz végig tartjuk magunkat. Egy nagyobb oldal összerakása közben persze változhat néhány elem, de ilyenkor is érdemes visszamenni az elejére, és azokat hozzáigazítani az időközben megváltoztatott oldalakhoz, hogy a lehető legtökéletesebben egyezzenek.

Sokat segíthet ebben a folyamatban, ha a CSS stíluslapunkban már az elején rögzítünk néhány alap elemet, pl. a

vagy

tagokat. Mivel ezeknek nincs külön neve, így a hosszú folyamat során sem lesz nehéz előkeresni őket és hozzá igazítani a többit.

]]> http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-9/feed/ 3 http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-4/ http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-4/#comments Thu, 14 Aug 2008 06:30:31 +0000 Zina http://lemmikki.hu/?p=58 Mióta a a dizájnerek áttértek a CSS-sel való építkezésre, hála égnek, kicsit könnyebb lett az élet. Ennek ellenére vannak dolgok, amit figyelembe kell venni még akkor, amikor az oldalt a Photoshopban építgetjük.

Például:

Meg lehet-e csinálni?

Kiválasztottunk egy nagyon szép betűtípust, de vajon közte van-e a HTML-ben használtak közt? Mindenki látni fogja-e azt a típust? Még a leggyakoribbaknál is az alábbi módon érdemes a betűtípust megadni:

 
body {font-family: Verdana, Arial, Sans-Serif;}
 


Ha van Verdana betű a gépén, azzal fog látszani. Ha nem, akkor Arial-lal. Ha netalántán az sincsen, akkor az alapértelmezett Sans-Serif típussal fog megjelenni.

Figyelni kell arra is, hogy bár gyönyörűnek tűnhet az 1100px széles dizájn, az viszonylag sok látogatóknál kilóg a képből, és vízszintesen is görgetniük kell majd a képernyőt. Fontos tudni, mit tudunk megcsinálni és mit nem.

Mi történik, ha a böngésző ablakot átméretezik?

Ismétlődő hátterünk lesz? Hogyan fognak azok működni? Középre van igazítva vagy balra?

Vágjunk-e bele technikailag bonyolult dolgokba?

Még a CSS-ben is adódnak nehézségek, pl. a pozícionálás, ott is leginkább a függőleges igazítás. Nehézkes, bonyolult, így jobb azt kihagyni.

Az apró változtatások megkönnyíthetik az építő munkánkat?

Ha egy objektumot különböző helyekre téve próbálkozunk annak elhelyezésével, gondoljunk arra is, hogy azt később hogy kell majd lekódolnunk a CSS-ben. Pl.: Ha egyes elemek keresztezik egymást, már egy fokkal nehezebb dolgunk lesz. Meg kell találni az egyensúlyt a szép dizájn és a kódolás között. Erre is gondoljunk, amikor elhelyezzünk a Photoshopban az elemeket.

Hogyan egyszerűsítsük meg a dolgunkat, különösen a nagy oldalaknál?

Régebben az oldalaimhoz még én is csináltam kép alapú gombokat. Ha például volt egy letöltés gomb, akkor csináltam neki egy kis ikont, és azt szúrtam be a megfelelő helyekre. Mostanában, ha már ilyesmiről van szó, akkor CSS-ben elkészítem a gombot, aztán onnantól kezdve nem is foglalkozom vele. Lehet, nem olyan rugalmas így csinálni, de nem kis időt meg lehet vele spórolni.


.letoltes {
   background: url(images/download.png) no-repeat left;
   width:50px;
   height:50px;
   display:block;
}
 
<a class="letoltes" href="trapt.mp3"></a>
 


]]> http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-4/feed/ 1 http://lemmikki.hu/kezdoknek/bongeszesi-elmeny-mire-figyeljunk/ http://lemmikki.hu/kezdoknek/bongeszesi-elmeny-mire-figyeljunk/#comments Sun, 09 Dec 2007 12:43:45 +0000 Zina http://lemmikki.hu/alapok/a-bongeszesi-elmenyt-befolyasolo-tenyezok/ Nem tudjuk, honnan jöttek

Persze statisztikából utólag megtudhatjuk, előre nem tudjuk, milyen úton érkezett el hozzánk, hogy direkte minket akart látni, avagy egy keresőből.

Tegyük tisztába, miről is szól az oldal: legyen minden oldalon elegendő információ ahhoz, hogy tudja, miről szól az oldal, pontosan hol is van az oldalon belül, mit talál az adott oldalon, hogyan juthat tovább, és hogy szeretheti meg azt, amit akar.

Internet kapcsolat sebessége

Igen, még mindig vannak lassú internet kapcsolatok! Bár a modem egyre kihal, de terjedőben van a mobilos internet, ami 3G nélkül lehet akár 0,5 KB/másodperc. Ott vannak még a munkahelyről netezők, ahol általában azért rendesen be van lassulva a forgalom a sok felhasználó miatt. Igen, gondoljunk rájuk is, mert megérdemlik. Mindig a lehető legalacsonyabban tartsuk az oldal méretét.

• Ne pakoljunk fel felesleges képeket, a fontos kép elemeket optimalizáljuk (pl háttérkép: legyen kicsi, ismétlődő, ne egy nagy másfél megás kép). A lehető legtöbb helyen használjunk szöveget a képek helyett (pl menük)
• Használjunk css fájlokat, amit az alap oldalból hívjunk meg, így annak mérete alacsony marad, a css-t pedig ha már egyszer betöltötte, többször nem kell, és így még gyorsabb lesz
• A html-t ne bonyolítsuk, maradjunk egyszerűek.

Betűtípusok variálása

Nem mindegyik számítógépen van feltelepítve ugyanaz a betűtípus. A MAC és PC felhasználóknál ez pl. teljesen más. A PC felhasználóknál megjelenő Verdana, ami egyébként népszerű webes betűtípus, nincs a MAC gépeken. Egyes fontok, melyekről azt gondoljuk, hogy elterjedtek, ott vannak mindenhol mégsincsenek.

A probléma úgy orvosolható, hogy nem a betűtípusra építjük a dizájnt. Válasszunk egyszerű sans serif betűt és ennyi. A css fájlban ezt az alábbi módon jelenítsük meg (pl.)

font-family:verdana,helvetica,arial,sans-serif;

Ennek a lényege: ha van Verdana típus, akkor azzal jelenik meg. Ha nincs, akkor a Helveticat (alap MAC sans serif font) keresi. Ha az sincs, akkor az Arialt (alap PC sans serif font). Ha az sincs, akkor az alapértelmezettként beállított sans serif fontot. Ezzel elkerülhetjük a legtöbb kellemetlenséget.

Más betűtípusokat leginkább csak akkor használjunk, ha a gyors olvashatóság nem fontos, pl. serif típusokat használhatunk nagybetűvel kiemelt címsorokban, vagy egységnyi szélességű betűket, pl. courier kódok leírása esetében. Normál esetben mindenképp maradjunk a talp nélküli betűknél, és a kreativitásunkat adjuk ki magunkban valahol máshol.

HTML/CSS/JavaScript/Flash

Nem mindegyik böngésző támogatja a legújabb HTML és CSS verziókat. Egyes gépeken nem fut a flash (nem tudják telepíteni, vagy nem telepíthetik), aztán van egy olyan geek csoport is, akik a JavaScriptet kikapcsolják, mert csak.

Csak olyan elemeket használjunk, melyekről bizonyosan tudjuk, hogy célcsoportunk rendelkezik vele, használja. Rendszeresen ellenőrizzük a statisztikánkat, és ha azt látjuk, hogy látogatóink jelentős része (10% körüli) nem tudja elérni adott technikálat, akkor alakítsuk át az oldalt, hiszen ők is legalább olyan fontosak, mint a többiek. Céltalanul soha ne használjuk ezeket a technikákat. Sőt ezek nem célok, hanem eszközök. Ha meg tudjuk ezek nélkül valósítani célunkat, csak azért ne használjuk, hogy megmutassuk, milyen menők vagyunk. Tényleg.

Hozzáférhetőség

• A szövegekre betűket használjunk, ne képeket (ahol lehet). A CSS-sel egyszerűen alkalmazhatunk szép megoldásokat a hátterekre, gombokra stb., és az ún. mouseover effektek kialakítására is alkalmas.
• Használjuk a szöveges részeknél a betűméret változtatásának lehetőségét. A gyengénlátóknak jól jöhet, ha nem tudják elolvasni az alapból kicsire beállított betűméretet.
• Használjuk az alt attribútumokat a képek esetében, röviden, tömören, odaillően. Ha bármilyen okból nem jelenne meg a kép, akkor is tudják, mi van ott.

Forrás: Webdesign from Scratch

]]> http://lemmikki.hu/kezdoknek/bongeszesi-elmeny-mire-figyeljunk/feed/ 0 http://lemmikki.hu/design/honlap-hatter/ http://lemmikki.hu/design/honlap-hatter/#comments Sat, 24 Nov 2007 07:40:34 +0000 Zina http://lemmikki.hu/uncategorized/honlap-hatter/ Épp most néztem a statisztikában, hogy ez volt az első guglis kifejezés, amivel rátaláltak az új zina.hu-ra, de gondolom meglepődhetett emberünk, hogy túl sok infót nem talált, így elhatároztam, hogy összegyűjtögetem, milyen háttereket hogyan érdemes használni.

Gradient (átmenetes):

Igen divatos és vonzó, választunk két egymáshoz illő színt, fentről lefelé készítünk belőle egy átmenetet (pl: http://mint.com vagy http://www.ronpaul2008.com), és kész. Egyébként itt az egész háttér ennyi: body-background.png. A css fájlunkba ezt valahogy így kell aplikálnunk.

body {background: #fff url(/images/body-background.png) repeat-x top;}

A háttér színeként azt a színt határozzuk meg, ami alul van, így hosszabb oldal esetén is szép egybefüggő hátteret kapunk.

Egyszínű:

Manapság a letisztult hátterek a használatosak, így bátran használhatunk egyetelen egy színt háttérként. Természetesen fontos, hogy egyébként illeszkedjen az oldal hangulatához. Amennyiben ilyen egyszínű a háttér, akkor figyelnünk kell arra, hogy amit rá rakunk, az szólaljon meg. Mint a vörös szőnyegen egy egyszerű estélyi ruhához gyönyörű gyémánt nyakék illik. Legyen benne különlegesség, legyen figyelemfelkeltő. Néhány példa erre:

• http://keasone.de
• http://www.intervisual.de
• http://www.ftofani.com
• http://alexsancho.name
• http://mstefan.com

Mintás:

A mintához bátorság és ügyesség kell, az biztos. Egyrészt azért, mert a mintás hátterek nagyon erős karaktert adnak az oldalunknak, így csak olyat szabad választanunk, mely valóban illik a weblap hangulatához. Példaként az egyik alkotásomat, a cegleditermal.hu-t hoznám fel: fürdőről van szó, így próbáltam olyasmi mintát keresni, mely hasonlít egy medence aljához. Megpróbáltam a lehető legvisszafogottabbá tenni amellett, hogy egy adott hangulatot szerettem volna vele tükrözni. Érzésem szerint jól sikerült.

A minták igen népszerű csoportja a csíkos. Pl. http://www.vitastil.se/ Úgymond tipikus web 2.0-s háttér. Van egy weboldal (http://www.stripegenerator.com/), ahol az igényeinknek megfelelő csíkos háttért csinálhatunk, aztán el is menthetjük a képet png formátumban, melyet az alábbi formátumban tudunk css fájlunkba betenni:

body {background: #fff url(/images/stripes.png) }

Ide nem kell külön attribútumot írni a háttérkép mellé, mint pl az átmenetesnél, mert itt vízszintesen és függőlegesen is ismétlődni fog a kép, és ezt automatikusan beállítja a css.

Legyen itt még egy jó pár oldal, ahol böngészhetünk a kedvenc mintánk után:

• http://www.dinpattern.com – kb 50 különböző háttérminta, többféle stílusból
• http://squidfingers.com/patterns – több, mint 150 különböző minta, a legtöbb a jó fajtából való
• http://www.k10k.net/pixelpatterns – itt közel ezer minta van, a legtöbbet a látogatók töltötték fel
• http://peachinparis.livejournal.com – kifinomult háttérgyűjtemény
• http://www.kollermedia.at/pattern4u – jelenleg 260 egyedi háttérminta kap itt helyet. Mindenképp érdemes átnézni őket!
• http://bgmaker.ventdaval.com – igazi móka, próbáld ki te is, milyen a háttérminta tervezés :)
• http://www.tartanmaker.com – a csíkgenerátor terítőmintás párja

Azért arra figyeljünk, hogy a mintáknak is van határa. Felejtsük el tehát ezeket: http://www.crazyeddy.com/plp Már nem 1998-ban vagyunk!

]]> http://lemmikki.hu/design/honlap-hatter/feed/ 0