Hivatkozáslistát tartalmazó blokk létrehozásakor általában javasolt a display tulajdonság használata a block vagy inline-block attribútumokkal együtt, ami növeli az aktív hivatkozásmező méretét. A nagy aktív linkmezők javítják az elemek használhatóságát, a nagy elemek könnyebben navigálhatók az egérrel.
Kijelzővel rendelkező elemek: blokk blokkelemként jeleníthető meg.
A display: inline-block elemet a rendszer olyan blokkelemként jeleníti meg, amely úgy körbeveszi a többi elemet, mintha inline lennének. A tartalom blokk elemként, maga az elem pedig soron belüliként van formázva.
Nézzünk egy egyszerű példát linklistával:
- Ezt a kicsit
- malacka odament
- piac
Ha nem változtatja meg a hivatkozások stílusát, akkor az aktív mezőik mérete megegyezik a bennük lévő szöveg méretével.
Ezen javíthatunk, ha az aktív mező méretét a szülőelem szélességére tesszük.
Ul a ( kijelző: blokk; ) 
Tudunk még jobbat is csinálni.
- Győződjön meg arról, hogy a listaelemek nem tartalmaznak mezőket, ellentétben a hivatkozásokkal.
- A hivatkozásoknak nincs margója, mert a margók nem az elemek aktív területei.
A cikk magától értetődő dolgokból áll, de elég gyakran találhatunk linkblokkokat az interneten, amelyeket nem „csúsznak el” a kinagyított aktív mezők.
Eredeti cikk: Margók kihagyása a linklistákból Írta: Chris Coyier, 2010.11.29.
Ebben a cikkben szeretném elmondani, hogyan kell helyesen elhelyezni mezőket(padding) és behúzás(margó) a CSS-ben.
Mindenekelőtt emlékezzünk a margók és a padding meghatározására a W3C specifikáció szerint. A dobozmodellben a margók a tartalom és a doboz szegélye közötti távolságot jelentik. A kitöltés pedig egy blokk határa és egy szomszédos vagy szülőelem szegélye közötti távolság.
Így ha az elem szegélye és háttere nincs megadva, akkor nincs különbség, használja a padding vagy margin tulajdonságot a behúzások beállításához, de feltéve, hogy az elem szélessége (szélessége) és magassága (magassága) nincs megadva valamint a tartalomméretek dobozméretezési tulajdonságok segítségével történő kiszámításának algoritmusa.
Mindenesetre ne feledje, hogy a margók beletartoznak az elem szélességébe vagy magasságába, vagy nem. A behúzások mindig az elemen kívül vannak beállítva.
Most nézzük meg, hogyan kell helyesen elhelyezni a margókat és az elemek közötti teret. Vegyük példaként a következő blokkot.
Ez a hírblokk. Ez egy fejlécből, egy hírlistából és egy „Egyéb hírek” hivatkozásból áll. Adjuk meg nekik a következő osztályneveket: news__title, news__list és news__more-link.
hírek
Egyéb hírek
Mivel ezeknek az elemeknek ugyanaz a bal és jobb margója van, jobb, ha a margókat a szülőblokkhoz állítja be, nem pedig az egyes elemek bal és jobb margóját külön-külön.
Hírek ( kitöltés: 20px 25px; )
Így, ha módosítani kell a jobb és bal oldali mezők értékét, akkor ezt meg kell tenni Egy helyen. Ha pedig új elemet adunk hozzá a hírblokkon belül, akkor már bal és jobb oldalon is meglesz a szükséges behúzás.
Gyakran előfordul, hogy egy blokkon belül minden elem bal és jobb oldalon azonos kitöltéssel rendelkezik, kivéve egyet, amelyen például a háttér miatt egyáltalán nem kellene kitölteni. Ebben az esetben negatív kitöltést állíthat be az elemhez. Ekkor nem kell eltávolítania a mezőket a blokkon belül más elemekhez.
Most be kell állítania az elemek közötti függőleges margókat. Ehhez meg kell határoznia, hogy az elemek közül melyik kötelező. Nyilvánvaló, hogy hírblokk nem létezhet hírlista nélkül, ugyanakkor előfordulhat, hogy nincs benne „Egyéb hírek” hivatkozás, a cím is eltávolítható például a design megváltoztatásakor.
Ezt figyelembe véve a címnél alul a behúzást, az „Egyéb hírek” hivatkozásnál felül a behúzást állítottuk be.
News__title ( margó-alsó: 10px; ) .news__more-link ( margin-top: 12px; )
Ugyanezt a külső eredményt érhetjük el, ha a hírlista tetejére és aljára párnázunk.
Hírek__lista ( margó: 10 képpont 0 12 képpont 0; )
Most be kell állítania a behúzásokat az egyes hírek között. Ismételten kérjük, vegye figyelembe, hogy a hírek száma változhat, és csak egy hír szerepelhet a listán.
Minden hírhez beállíthat felső behúzást, kivéve az elsőt, vagy alsó behúzást minden hírhez, kivéve az utolsót. Az első lehetőség előnyösebb, mert a:first-child pszeudoválasztót hozzáadták a CSS 2.1 specifikációhoz, és szélesebb támogatást élvez, ellentétben a:last-child pszeudoválasztóval, amely csak a CSS 3.0 specifikációban került hozzáadásra.
Hírek__lista-elem ( margó felső: 18 képpont; ) .hírek__lista-elem: első gyermek ( margó teteje: 0; )
Így a margók és behúzások helyes elhelyezése lehetővé teszi bármely blokk megjelenésének rugalmas megváltoztatását anélkül, hogy a stílusokon módosítanánk, és a tervezés megzavarása nélkül. A legfontosabb dolog annak meghatározása, hogy mely blokkelemek a főbbek ( kötelező), és melyek választható.
Néha nem támaszkodhatunk a szükséges elemekre. Például van egy felugró ablakunk, amelyen belül néhány cím és szöveg jeleníthető meg. Sőt, bizonyos esetekben előfordulhat, hogy nincs szöveg, és néhány esetben nincs cím. Vagyis mindkét elem nem kötelező.
Ebben az esetben a következő módszert használhatja a behúzások beállításához.
Popup__header + .popup__text ( margó felső: 15 képpont; )
Ekkor a behúzás csak akkor jelenik meg, ha mindkét elemet használjuk. Csak a cím vagy csak a szöveg megjelenítése esetén nincs külön behúzás.
Függőleges margók összecsukása
Egy másik árnyalat, amelyről nem mindenki tud, a szomszédos blokkok közötti függőleges terekhez kapcsolódik. A behúzás fentebb megadott definíciója szerint a behúzás a közötti távolság határok jelenlegi és szomszédos blokkok. Így ha két blokkot egymás alá helyezünk és az egyiknek 30px alsó, a másiknak 20px felső margót adunk, akkor a köztük lévő margó nem 50px, hanem 30px lesz.
Vagyis a behúzások átfedik egymást, és a blokkok közötti behúzás egyenlő lesz a legnagyobb behúzással, nem pedig a behúzások összegével. Ezt a hatást "összeomlásnak" is nevezik.
Kérjük, vegye figyelembe, hogy a vízszintes behúzások a függőlegesekkel ellentétben nem „összecsukódnak”, hanem összegzik. A mezők (padding) összegzése is megtörténik.
A behúzások „összeomlásának” ismeretében ezt a funkciót előnyünkre használhatjuk. Például, ha egy cikken belül be kell húznunk a címsorokat és a szöveget, akkor az első szintű címsor alsó behúzását 20 képpontra állítjuk, a második szintű címsornál pedig a felső behúzást 20 képpontot, az alsót pedig 10 képpontot. minden bekezdés felső behúzását 10 képpontra állítjuk.
H1 (margó-alsó: 24px; ) h2 (margó-felső: 24px; margó-alsó: 12px; ) p (margó-felső: 12px; )
Most a h2 címsor a h1 címsor vagy a bekezdés mögé tehető. Mindenesetre a felső margó nem haladhatja meg a 24 képpontot.
Általános szabályok
Összefoglalva szeretném felsorolni azokat a szabályokat, amelyeket a margók és a behúzások elrendezése során követek.
- Ha a szomszédos elemek ugyanazzal a kitöltéssel rendelkeznek, akkor jobb, ha a szülőtárolóra állítja be őket, nem pedig az elemekre.
- Az elemek közötti behúzásnál figyelembe kell venni, hogy az elem kötelező vagy nem kötelező.
- A hasonló elemek listájához ne felejtse el, hogy az elemek száma változhat.
- Ügyeljen a függőleges párnázásra, és használja ezt a funkciót ott, ahol előnyére válik.
Feladat
Távolítsa el a felsorolásjeles vagy számozott listák körüli párnázást.
Megoldás
Használja a margó és kitöltési stílus tulajdonságot null értékkel az UL vagy OL választóhoz, a lista típusától függően, az 1. példában látható módon.
1. példa: Lista behúzás
HTML5 CSS 2.1 IE Cr Op Sa Fx
- Cseburaska
- Krokodil Gena
- Shapoklyak
Ennek a példának az eredménye az ábrán látható. 1.
Rizs. 1. Lista függőleges és vízszintes behúzások nélkül
Figyelje meg, hogy a weboldal bal szélén megjelenő listajelzők eltűnnek. Ha csak a felső és az alsó margót szeretné eltávolítani a lista balra mozgatása nélkül, használja a margó felső és alsó margó tulajdonságokat (2. példa).
2. példa: Lista behúzás
HTML5 CSS 2.1 IE Cr Op Sa Fx
- Cseburaska
- Krokodil Gena
- Shapoklyak
A CSS ritkán tárgyalt előnyei közé tartozik az átfedés képessége háttérképek különböző hatások elérése érdekében. A CSS2 szabvány szerint minden háttérképhez külön HTML elem szükséges. A legtöbb esetben a közös interfész-összetevőket leíró tipikus kód többféle lehetőséget biztosít számunkra HTML elemek. Az egyik ilyen eset a könyvjelző alapú navigáció. Ideje visszavenni az irányítást a könyvjelzők felett, amelyek egyre népszerűbbek, mint elsődleges navigációs eszköz. Most pedig a kiterjedt CSS-támogatásnak köszönhetően javíthatjuk a könyvjelzők minőségét és megjelenését webhelyeinken. Valószínűleg már tisztában vagy azzal, hogy a CSS segítségével megszelídíthető egy egyszerű rendezetlen lista. Valószínűleg még olyan listákat is láttál már könyvjelző-tervekkel, amelyek valahogy így néznek ki: Mi lenne, ha az előző példából pontosan átvennénk a kódot, és a könyvjelzőket ehhez hasonlóvá alakítanánk: Néhány egyszerű CSS-sel ez lehetséges. Mi újság? Az általam látott CSS-könyvjelzők közül sok (CSS-alapú könyvjelző) monotonitásban szenved: színes téglalapok, esetleg körvonallal, az aktuális könyvjelző körvonal nélkül, a lebegési állapot színe megváltozik. Tényleg ez minden, amit a CSS kínál? Több téglalap azonos színű kitöltéssel? Mielőtt a CSS elterjedt volna, sok új ötlet született a navigációs tervezésben: szeszélyes formák, ügyes színátmenetek, valós felületek emulálása. Ez a kialakítás azonban nagymértékben támaszkodott a raszterizált szöveg összetett szerkezetére és több beágyazott táblázatra. A szöveg szerkesztése vagy a könyvjelzők sorrendjének megváltoztatása nehézkes volt. A szöveg méretezése lehetetlen volt, vagy komoly problémákat okozott az oldalak összeállításában. Navigáció innen egyszerű szöveg könnyen szerkeszthető és sokkal gyorsabban betöltődik, mint a raszteres szövegen alapuló navigáció. Továbbá, bár minden képhez hozzáadhatunk egy alt attribútumot, az egyszerű szöveg továbbra is az több nyilvánosan elérhető, mert méretezhető. Így nem meglepő, hogy az egyszerű szöveges navigáció visszatér a webdizájnba. A CSS-könyvjelzők megjelenése azonban eddig visszalépést jelentett a dizájnban, és semmiképpen sem olyan, ami egy dizájnportfólióba foglalható. Az új technológiáknak (például a CSS-nek) lehetővé kell tenniük valami jobb és ugyanolyan tervezési minőség létrehozását, mint a bitmap alapú táblázatok és könyvjelzők használata. A tolóajtó módszer Két különálló háttérkép felhasználásával gyönyörű, igazán rugalmas UI elemeket készíthetünk, amelyek a szöveg mérete alapján bővülnek és összehúzódnak. Az egyik a könyvjelző bal oldalára, a másik a jobbra. Képzelje el, hogy ez a pár kép tolóajtó, amely egy ajtónyílást takar. Ezek az ajtók jobban csúsznak és fedik egymást, ha szűk az ajtónyílás, és fordítva, kevésbé csúsznak és fedik egymást, ha szélesebb teret kell bezárni. Ez látható az ábrán: E modell szerint az egyik kép átfedi a másik részét. Feltéve, hogy a képeink széle körül van valami egyedi, például egy könyvjelző lekerekített sarka, nem valószínű, hogy egyetlen képet szeretnénk teljesen mögött egy másikat borított. Hogy ez ne forduljon elő, az elülső (esetünkben bal oldali) képet a lehető legszűkebbre tesszük. Ugyanakkor a képnek elég szélesnek kell lennie ahhoz, hogy megőrizze látható egyediségét. Nálunk a lekerekített sarkok egyediek, így az elülső kép ennek a lekerekített képrésznek a szélessége lesz: Ha például a szöveg méretezése következtében megnő a könyvjelző mérete, akkor a képeink szétterülnek. oldalra, kellemetlen rést tárva fel. Ezért fel kell mérni az elfogadható bővítés mértékét. Mennyit nőhet egy objektum a szöveg méretezésekor a böngészőben? Reálisan akár 300%-os növekedésre is számítani kell. Ennek a növekedésnek a kompenzálásához meg kell nyújtania a háttérképeket. Példánkban egy hátsó képet készítünk ( Jobb oldal) mérete 400x150 pixel, az elülső pedig 9x150 pixel. Ne felejtse el, hogy a háttérképek csak annak az elemnek az "ajtójában" láthatók, amelyre alkalmazták ("ajtónyílás" - tartalomterület + kitöltés). Mindkét képünk a hozzá tartozó elem külső sarkaihoz van rögzítve. Ezeknek a képeknek a látható részei az ajtóban egyesülve egy könyvjelző alakját alkotják: A könyvjelző nagyításával a képek eltávolodnak egymástól, hogy kitöltsék a szélesebb nyílást, és a képek látható területe is nagyobb lesz: Példánkra , Készítettem két képet a Photoshopban lágy, háromdimenziós szimulációval , tonizálás. Az egyik könyvjelzőnél világosítottam a kitöltést és sötétítettem a körvonalat - ez az opció az „aktuális” könyvjelzőt fogja képviselni. A kiválasztott modellt követve a bal oldallal és a megfelelő képeket, két részre kell vágnunk a képet: Ugyanezt kell tenni az aktuális könyvjelző világos képével Ha megvan mind a 4 kép, (1, 2, 3, 4) elkezdhetjük a kód és a CSS létrehozását könyvjelzőinkhez.Könyvjelzők készítése Ahogy egyre jobban megismerjük a vízszintes listák készítését amikor CSS segítség Legalább két módot fog észrevenni az objektumok egy csoportjának sorba rendezésére. Mindegyiknek megvannak a maga előnyei és hátrányai. Mindkettő megköveteli a CSS meglehetősen összetett aspektusainak kezelését, és ennek eredményeként gyorsan összezavarodhat. Az első módszer inline elemeket, a második a float tulajdonságot használja. Az első módszer - talán a gyakoribb - a megjelenítési tulajdonság "inline"-re történő módosítását jelenti. A „vonal” módszer a maga egyszerűségében vonzó. Ez azonban problémákhoz vezet a módszerünk megvalósításában Tolóajtó egyes böngészőkben. A második módszer, amelyre összpontosítunk, használja lebegő modell a listaelemek vízszintes sorba rendezéséhez. A lebegő modell azonban csalódást is okozhat. Ellentmondásos viselkedése néha minden elképzelhető logikát megsért. Mindazonáltal csodákat művelhet annak általános ismerete, hogyan kell kezelni több lebegő elemet, és ismeri a megbízható módszereket a lebegő sorból való „kilépésre” (vagy annak egy tartályba helyezésére). Megpróbálunk több lebegő elemet elhelyezni egy másik lebegő konténerelemben. Ezt úgy kell megtenni, hogy a külső szülőúszó teljesen körülvegye a belső úszókat. Ezután háttérszínt vagy háttérképet adhatunk a könyvjelzőink mögé. Fontos megjegyezni, hogy a könyvjelzőket követő elem pozícióját a clear CSS tulajdonság segítségével kell visszaállítani. Ekkor a lebegő könyvjelzők nem lesznek képesek befolyásolni a többi oldalelem elhelyezését. Kezdjük a következő kóddal: · Főoldal · Hírek · Termékek · Névjegy · Kapcsolat A gyakorlatban a #fejléc blokk tartalmazhat például egy logót és egy keresési űrlapot. Példánkban az egyes hivatkozások href értékét „#”-ra rövidítjük. Nyilvánvaló, hogy a való életben ez az ikon helyett a fájl vagy mappa elérési útja jelenik meg. Kezdjük el a CSS-sel való munkát úgy, hogy hozzárendelünk egy float tulajdonságot a #header tárolóhoz. Ez biztosítja, hogy a tároló valóban „tartsa” a listaelemeket, amelyek szintén lebegnek. Mivel a #fejlécet lebegővé tettük, 100%-os szélességet kell megadnunk. Ideiglenes sárga hátteret is hozzáadunk, hogy megbizonyosodjunk arról, hogy ez a szülőelem teljes szélességben megnyúlik a könyvjelzők mögött. Végül pedig állítsunk be néhány alapvető betűtípus-tulajdonságot az egység biztosítása érdekében kinézet elemek: #header ( float:left; width:100%; background:yellow; font-size:93%; line-height:normal; ) Az ul és li elemek margóját és kitöltését is nullára állítjuk, és eltávolítjuk a listajelző. Minden listaelemhez írunk egy float:left deklarációt: #header ul ( margin:0; padding:0; list-style:none; ) #header li ( float:left; margin:0; padding:0; ) For linkekre beállítjuk a blokk megjelenítését, így ellenőrizhetjük, hogy mi történik anélkül, hogy aggódnánk a beépített modell miatt: #header a ( display:block; ) Ezután hozzáadjuk a megfelelő háttérképünket a listaelemhez (a változtatások és kiegészítések félkövérrel vannak szedve) : #header li ( float:left ; background:url("norm_right.gif") no-repeat right top; margin:0; padding:0; ) A bal oldali háttérkép hozzáadása előtt álljunk meg, és nézzük meg, mit csinálunk ez a pont az 1. példában. (Ne bánja, hogy a példafájlban a body elemre alkalmaztam a szabályt. Csak a margók, a kitöltés, a színek és a szöveg alapértékeit állítja be.) - - - Most elhelyezhetjük a bal oldali kép a jobb előtt a hivatkozásra (belső elemünkre) alkalmazva . Azonnal adjunk hozzá egy kitöltést, hogy elmozdítsuk a szöveget a könyvjelző széleitől: #header a ( display:block; background:url("norm_left.gif") no-repeat left top; padding:5px 15px; ) Az eredmény: a 2. példában látható. Könyvjelzőink kezdtek formát ölteni. Ezen a ponton szóljunk a zavarodott IE5/Mac felhasználókhoz, akik azt kérdezik maguktól: „Mi folyik itt? A könyvjelzők függőlegesen vannak egymásra rakva, és a teljes képernyőn ki vannak feszítve.” Ne aggódj, hamarosan jelentkezünk. Addig is csak figyelje, mi történik, vagy átmenetileg váltson másik böngészőre, és biztos lehet benne, hogy hamarosan megoldjuk az IE5/Mac problémát. - - - Most, hogy az egyszerű könyvjelzők képei átvették a helyüket, állítsuk be a képeket az aktuális könyvjelzőhöz. Ezt úgy tegyük meg, hogy elérjük a listaelemet az id="current" paraméterrel és a benne lévő hivatkozást. Mivel a háttérképeken kívül semmilyen háttértulajdonságot nem változtatunk, a background-image tulajdonságot fogjuk használni: #header #current ( background-image:url("norm_right_on.gif"); ) #header #current a ( background-image :url( "norm_left_on.gif"); ) A könyvjelzőink alján szükségünk van valamilyen vázlatra. De ha a border tulajdonságot a szülő #fejlécre alkalmazza, akkor nem engedi, hogy az aktuális könyvjelzőt „áteresztjük” azon a határon. Ehelyett létrehozunk egy új képet a kívánt körvonallal az alsó szélén. És miközben ezzel a képpel dolgozunk, adjunk hozzá egy enyhe színátmenetet, hogy így nézzen ki: Ezt a képet alkalmazzuk a #header tárolónk hátterére (a korábban beállított sárga szín helyett), mozgassuk a a tároló alján, és rendeljen hozzá egy háttérszínt, amely megegyezik az általunk létrehozott színátmenet felső színével . Eltávolítjuk a body elemhez eredetileg hozzáadott kitöltést is, és 10 pixeles kitöltést adunk az ul elem tetejére, balra és jobbra: #header ( float:left; width:100%; background:#DAE0D2 url ("bg.gif") ismételje meg a -x alját; font-size:93%; line-height:normal; ) #header ul ( margó:0; kitöltés:10px 10px 0; list-style:none; ) A munka befejezéséhez a könyvjelzőn marad a jelenlegi könyvjelző „kiszivárogtatása” a határon túlra, amint arról fentebb már szó volt. Azt gondolhatja, hogy a könyvjelzőinkre olyan alsó szegélyt alkalmazunk, amely megegyezik a #header elem háttérképének alsó körvonalának színével, majd az aktuális könyvjelző szegélyének színét fehérre változtatjuk. Ez azonban egy apró "lépést" eredményezne, amely a figyelmes szemmel látható. De ha megváltoztatjuk a hivatkozások kitöltését, akkor éles és derékszögű szögeket hozhatunk létre az aktuális könyvjelzőn belül, ahogy a kinagyított képen is látható: Ezt úgy érjük el, hogy egy normál hivatkozásnál az alsó párnázást 1 képponttal csökkentjük (5px - 1px = 4px), majd adja hozzá ezt a képpontot az aktuális linkhez: #header a ( display:block; background:url("norm_left.gif") no-repeat left top; padding:5px 15px 4px; ) #header #current a ( background-image:url(" norm_left_on.gif"); padding-bottom:5px; ) Ez a változtatás az alsó szegélyt láthatóvá teszi a normál könyvjelzők között, de elrejti az aktuális könyvjelzőnél. 3. példát kapunk. Utolsó lépések Egy óvatos szem az előző példában észrevehette a könyvjelzők sarkainál lévő fehér területeket. Ezek az átlátszatlan sarkok megakadályozzák, hogy a hátsó kép látható legyen az elülső kép bal sarkán keresztül. Elméletileg ezeket a sarkokat a mögöttük lévő háttér színével megegyező színűvé tehetjük. De a könyvjelzőink megnövekedhetnek, és ekkor a hátsó színátmenetes háttér lefelé mozdul el, ami a sarkok színének és a háttér színátmenetének eltéréséhez vezet. Ehelyett úgy változtatjuk meg képeinket, hogy átlátszóvá tesszük a sarkukat. Ha élsimítást alkalmazunk a könyvjelzők körvonalára, akkor a következőt állítjuk be átlátszó színű(matt) a háttér gradiens átlagos értéke. Most, hogy a sarkok átlátszóak, a jobb oldali kép egy része látható a bal oldali átlátszó sarkon keresztül. Ennek elkerülése érdekében adjon hozzá egy kis bal oldali kitöltést a listaelemhez, amely megegyezik a bal oldali kép szélességével (9 képpont). Ahhoz, hogy a szöveg középen maradjon a listaelemhez való behúzás után, el kell távolítania ugyanannyi bal oldali behúzást a hivatkozásból (15px - 9px = 6px): #header li ( float:left; background:url("right.gif ") nincs ismétlés, jobb felső; margó: 0; kitöltés: 0 0 0 9 képpont; ) #header a ( display:block; background:url("left.gif") nincs ismétlés, bal felső; kitöltés: 5px 15px 4px 6px ; ) De ez a lehetőség sem felel meg nekünk, mivel a bal oldali kép most a hozzáadott behúzás 9 pixelével el van távolodva a könyvjelző bal szélétől. Most, hogy a bal és a jobb oldali "ajtónyílások" belső élei találkoznak egymással, már nem kell a bal oldali képet elől tartanunk. A háttérképek sorrendjét pedig megváltoztathatjuk, ha ellentétes elemekre alkalmazzuk őket. Az aktuális könyvjelző képeit is módosítanunk kell: #header li ( float:left; background:url("left.gif") no-repeat left top; margin:0; padding:0 0 0 9px; ) #header a, #fejléc erős, #fejléc span ( display:block; background:url("right.gif") nincs ismétlés, jobb felső; kitöltés: 5px 15px 4px 6px; ) #header #current ( background-image:url(" left_on. gif"); ) #header #current a ( background-image:url("right_on.gif"); padding-bottom:5px; ) Ezt követően a 4. példát kapjuk. Figyeljük meg, hogy a létrehozás lépései átlátszó sarkok, ami egy kis „halott” zóna megjelenéséhez vezetett a könyvjelző bal oldalán, ahol nem reagál az egér lebegésére. A holt zóna a szövegen kívül van, de mégis észrevehető. Átlátszó képek Nem szükséges a könyvjelzőnk minden oldalához használni. Ha azt szeretnénk, hogy ne legyen holt terület a könyvjelzőnken, csak egy tömör kitöltést kell használnunk a könyvjelzők mögött, nem pedig színátmenetet, és a könyvjelzők sarkait azonos színűvé kell tenni. A sarkokat egyelőre átlátszóvá tesszük. [ Az IE/Winben az említett „halott” zóna már e lépések megtétele előtt is létezett, és a linkszöveg minden oldalán. A probléma megoldását a Sliding Doors of CSS sorozat következő cikke tárgyalja, II. rész - kb. fordító ] - - - És végül az utolsó simítások. Egyszerre: az összes szöveget félkövérre, a normál könyvjelzők szövegét barnára, az aktuális könyvjelzőket pedig sötétszürkére állítsa be, rendelje hozzá ugyanazt a színt a szöveghez a lebegő hivatkozás állapotához, távolítsa el a hivatkozások aláhúzását. Az idáig végzett összes kiegészítést és módosítást az 5. példa mutatja be. Egy másik módszer a kompatibilitás biztosítására A 2. példát megvizsgálva felismertük, hogy probléma volt az IE5/Mac rendszerrel, amely a könyvjelzőket az ablak teljes szélességére feszítette ki. függőlegesen egymás alá. Nem egészen az a hatás, amit várunk. A legtöbb böngészőben a float tulajdonság alkalmazása egy elemre a tartalma által meghatározott lehető legkisebb méretre zsugorítja azt. Ha a lebegő elem képet tartalmaz (vagy maga is kép), akkor azt a kép szélességére tömöríti. Ha csak szöveget tartalmaz, akkor a szöveg leghosszabb, kötőjeleket nem tartalmazó sorának szélességére zsugorodik. Problémák lépnek fel IE5/Mac rendszerben, ha egy automatikus szélességű blokkelemet helyeznek el egy lebegő elemen belül. Ebben az esetben minden böngésző a lehető legkisebb szélességre zsugorítja a lebegő elemet anélkül, hogy a belső blokkelemre figyelne. De az IE5/Mac ezt nem teszi meg a leírt helyzetben. Ehelyett a lebegő és a belső blokkelemeket a teljes elérhető szélességre nyújtja. Ennek a viselkedésnek a megkerüléséhez a hivatkozáson is lebegtetést kell alkalmaznunk, de csak IE5/Mac esetén, anélkül, hogy ez más böngészőket érintene. Először adjunk hozzá egy lebegőpontot egy meglévő szabályhoz. Ezután a Backslash módszerrel elrejtjük az IE5/Mac elől egy új szabályt, amely eltávolítja a lebegéseket más böngészőknél: #header a ( float:left; display:block; background:url("right.gif") no-repeat right top; padding:5px 15px 4px 6px; text-decoration:none; font-weight:bold; color:#765; ) /* A kommentált Backslash Hack elrejti az IE5-Mac szabályát \*/ #header a (float:none;) /* Az IE5-Mac feltörésének vége */ A 6. példának megfelelően az IE5/Mac mostantól a várt módon jeleníti meg a könyvjelzőket. Más böngészők esetében semmi sem változott. Az IE5/Mac rengeteg CSS-hibát tartalmaz, amelyeket az IE5.1 javított. A Sliding Door módszer is szenved ezektől a hibáktól az IE5/Mac rendszerben. Számuk minden elképzelhető határt túllép, és nem fogok velük harcolni. És mivel az 5.1-re való frissítés már jó ideje mindenki számára elérhető, az OS 9 és IE5/Mac operációs rendszerrel telepített Macek aránya folyamatosan csökken, és a nullához közelít. Opciók Most közelebbről megvizsgáltuk a Sliding Door metódust, amely lehetővé teszi, hogy egyszerű szövegen alapuló füles navigációt hozzon létre, számozatlan listával és hivatkozásokkal elhelyezve, és néhány CSS-szabállyal módosítva. Ez a navigáció gyorsan betöltődik, könnyen karbantartható, és a benne lévő szöveg bármely irányba jelentősen méretezhető anélkül, hogy a tervezés megzavarná. Mondanom sem kell, mennyire rugalmas ez a módszer bármilyen kifinomult megjelenésű navigáció elkészítésekor? E technika használatának csak a képzeletünk szab határt. Az utolsó példa csak egy lehetőséget mutat be. De ez a példa nem korlátozhatja elképzeléseinket. A könyvjelzőknek például nem kell szimmetrikusnak lenniük. Gyorsan elkészítettem a könyvjelzők második változatát, amely egyszerű színeket, szögletes formákat és szélesebb, összetettebb bal oldalt használt. Ahogy a 2. opció is mutatja, szabadon változtathatjuk a bal és jobb oldali képek sorrendjét a kialakítástól függően. Gondos tervezéssel és a képek ravasz kezelésével az alsó szegélyt elhagyhatja a háttérrel rendelkező képek stíluskombinációja érdekében, amint azt az általam létrehozott 3. lehetőség mutatja. Ha a böngésző támogatja az alternatív stílusok közötti váltást, láthatja a főfájl megnyitásával és a benne lévő stíluslapok közötti váltással elérhető összes lehetőséget. [ Az NN7.1-ben az alternatív stílusokhoz a Nézet>Stílus használata főmenüből, az Opera 7.20-ban a Nézet>Stílus főmenüből érhető el, IE/Winben nincs ilyen lehetőség - kb. fordító] Az alkalmazott technikához további hatások is hozzáadhatók, amelyeket itt nem veszünk figyelembe. Példánkban megváltoztattuk a lebegtetési állapot szövegszínét, de miért ne változtatnánk meg a teljes háttérképet az érdekes áthúzási effektusok érdekében. A kódunkban található két beágyazott HTML elemnek köszönhetően mindig használhatjuk a CSS-t háttérképek átfedésére, és olyan hatásokat érhetünk el, amelyekről álmodni sem mertünk. Példánkban vízszintes könyvjelzősort hoztunk létre, de a Sliding Door metódus sok más esetben is használható. Milyen alkalmazást javasolna ehhez a módszerhez?
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip exertaureit commodolorise in. te "Velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 1.10.32 "de Finibus Bonorum et Malorum" bekezdés, amelyet Cicero írt i.sz. 45-ben. "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae a dicta sunt explicabo. Nemoamnatturup vol. fu git, sedquia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora inciduntloup magneram a vol. minimum veniam , quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? tur?" Angol fordítás, 1914, H. Rackham "De el kell magyaráznom neked, hogyan született meg ez a téves elképzelés az öröm elítéléséről és a fájdalom dicséretéről, és teljes leírást adok a rendszerről, és elmagyarázom a nagy felfedező tényleges tanításait az igazságról, az emberi boldogság építőmesteréről. Magát az örömöt senki sem utasítja el, nem szereti vagy elkerüli, mert az öröm, hanem azért, mert aki nem tudja, hogyan kell racionálisan keresni az örömöt, az rendkívül fájdalmas következményekkel találkozik. ott van mindenki, aki szereti vagy üldözi, vagy meg akarja szerezni önmagában a fájdalmat, mert az fájdalom, hanem azért, mert időnként olyan körülmények adódhatnak, amelyekben az olaj és a fájdalom nagy örömet szerezhet. Hogy egy triviális példát vegyünk, melyikünk vállal valaha fáradságos fizikai gyakorlatot De kinek van joga hibát keresni egy olyan emberben, aki úgy dönt, hogy élvezi az örömet, amelynek nincs bosszantó következménye, vagy aki kerüli azt a fájdalmat, amely nem okoz örömet?" 1.10.33 "de Finibus Bonorum et Malorum" bekezdés, amelyet Cicero írt i.sz. 45-ben. "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias extrauri sint occaecati cupiditate non provident, similique sunt in culpa eteruganimint qui officiaestrum a laboratonimi qui blanditiaestrum. dem rerum facilis est et expedita differentio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo mínusz id quod maxime placeat facere possimus, omnis voluptas guessnda est, omnis dolor ne repellendus. Temporibus autem autem autem autem a eventificitarumcesm t "ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat." Angol fordítás, 1914, H. Rackham "Másrészt igazságos felháborodással és nem szeretjük azokat az embereket, akiket annyira elkápráztat és demoralizál a pillanatnyi élvezet varázsa, annyira elvakítja a vágy, hogy nem látják előre a fájdalmat és a bajt, Következzék, és egyenlően hibáztatják azokat, akik az akaratgyengeség miatt nem teljesítik kötelességüket, ami ugyanaz, mint a fáradságtól és a fájdalomtól való visszahúzódás miatt. Ezek az esetek teljesen egyszerűek és könnyen megkülönböztethetők. Egy szabad órában, amikor választási hatalmunk korlátlan, és amikor semmi sem akadályozza meg abban, hogy azt csinálhassuk, amit a legjobban szeretünk, minden örömet üdvözölni kell, és minden fájdalmat el kell kerülni, de bizonyos körülmények között, a kötelesség vagy az üzleti kötelezettségek miatt ez gyakran előfordul. Előfordul, hogy az élvezeteket meg kell tagadni és a bosszúságokat el kell fogadni. A bölcs ember ezért ezekben a kérdésekben mindig ehhez a kiválasztási elvhez tartja magát: elutasítja az örömöket, hogy más nagyobb örömöket szerezzen, vagy pedig elviseli a fájdalmakat, hogy elkerülje a rosszabb fájdalmakat."
Beállítások
