Mastering css oldal elrendezés

* Vigye a kurzort a szünet görgetés.

CSS mesteri: oldal elrendezés

Az egyik legnagyobb előnye CSS - képes irányítani a megjelenése az oldal használata nélkül HTML design. Létrehozása azonban a CSS-sablonok méltatlanul híre valami bonyolult, különösen azok körében, a fejlesztők, akik csak mastering a technológiát. Ez részben annak köszönhető, hogy az a tény, hogy nem minden böngésző értelmezi ugyanazt a CSS, de még inkább - az a tény, hogy most már csak egy nagy szám a különböző technikákat létrehozására elrendezések jelent stíluslapok.

Úgy tűnik, minden web fejlesztőnek saját módszereket és technikákat, a CSS elrendezési és kezdő webmesterek gyakran néhány technikát anélkül, hogy megértenék, hogyan működik. Ez a megközelítés szerint a „fekete doboz”, hogy a használata CSS segít, persze, hogy gyors eredményeket, de végül megakadályozza a növekedés megértése a nyelv a fejlesztő.

Azonban, ezek a különböző technikák alapján három alapvető fogalmakat: helymeghatározás, csomagolás, és a manipuláció a külső behúzás. Különböző technikákat kiderülhet, hogy nem egészen így van, és más, és ha megtanulják az alapvető fogalmak és koncepciók, akkor viszonylag könnyen létrehozhatja saját CSS-oldal sablon.

Központosítása oldalnyi tartalom most széles körben elterjedt, így a tanulás, hogyan lehet létrehozni egy központú design CSS - az egyik első dolog, amit szeretnék elsajátítani a kezdő webfejlesztők. Két fő módja központosító design: az egyik esetben automatikus külső padding, a másik - a helymeghatározás és a negatív különbözet.

Központosító automatikus külső behúzás

Tegyük fel, hogy szembe egy tipikus probléma a vízszintes közepén a konténer div id borítás ( „wrap”).

Hogy ezt a gyakorlatban, csak be kell állítani a szélességét div wrapper és állítsa vízszintes külső padding auto.

Ebben a példában a szélesség beállítása pixelben. De, természetesen, az azonos test siker megadhatja a százalékos szélességét a dokumentum testület, vagy használja a mérete „em” a szöveg méretét.

Ez a módszer működik minden modern böngésző, de nem IE 6. Szerencsére az IE tévesen értelmezi az ingatlan text-align: center. összehangolása a központja mindennek, nem csak a szöveget. Akkor használja ezt a saját hasznukra központosító minden, ami a címke szervezetben. beleértve div wrapper. újraelosztására majd balra az igazításhoz tartalmi blokk wrapper.

A text-align tulajdonság ilyen módon lényegében egy hack, de ez teljesen ártalmatlan, és nem negatívan befolyásolná a kódot. Most a blokk átalakító központú IE 6, csakúgy, mint a többi böngésző, amelyek jobban barátok a leírás.

Központosítás tervezés helymeghatározási és negatív árrés

Módszerrel automata külső padding - a legnépszerűbb módszer, de ha használja az szükséges, hogy vegye igénybe a hack. Továbbá, mivel két stíluselemeket egy helyett. Ez az oka annak, hogy sok szívesebben használják a helymeghatározás és a negatív különbözet.

Kezdjük, mint az előző példában - a telepítési burkolat szélessége. Ezután állítsa be a pozícióját ingatlan a borítás és a relatív értéket hagyott ingatlan 50%. Ez lehetővé teszi számunkra, hogy helyezze a bal szélén a burkolat blokk közepén az oldalt.

Azonban meg kell egy kicsit - mi szeretnénk látni a központban az oldal közepén átalakító egységet. Ez úgy érhető el alkalmazásával negatív bemélyedést a bal oldalán a blokk wrapper felével egyenlő a szélessége a blokk. Ez fog mozogni a burkolat blokk szélességének a fele balra, mozdítva a képernyő közepén:

A módszer kiválasztása központosítás függ az ízlése. Azonban ez mindig hasznos tudni, hogy néhány módszerek és technikák, hiszen nem tudhatjuk, hogy mit lehet hasznos.

Sablonok alapján flow

Számos módja van, hogy hozzon létre a CSS sablonok, például abszolút pozicionálás és negatív különbözet. Azt hiszem, a legkönnyebben használható módszer alapján az áramlás más elemeket. Ahogy a neve is mutatja, az ilyen típusú sablon csak szélességének beállításához pozicionált elemek, majd kérje meg őket, hogy lezárja a balra vagy jobbra.

Mivel az ilyen „áramvonalas” ezeket az elemeket nem foglalnak el helyet a dokumentumban áramlás, nincs hatással a környező blokkot tartalmaz. Kerülő ezt a viselkedést, akkor meg kell szakítani a csomagolást a különböző referencia pontokat a sablon. Ahelyett, hogy a következetesen alkalmazott és csomagolja annak eltörlését, sokkal kényelmesebb használni egy kissé eltérő megközelítést: Alkalmazza a csomagolást szinte semmit, majd megszakítja egyszer vagy kétszer a „stratégiai” pontot a dokumentum, mint például a lábléc.

Két oszlop sablon flow

Ahhoz, hogy hozzon létre egy egyszerű két-oszlopon, mintázat, kezdve az alapvető szerkezete (X) HTML. A példánkban (X) HTML-frame áll zónák: branding, tartalom, területek navigációs és a lábléc. Mindez szerkezet van zárva a „wrapper” - wrapper. amely vízszintesen az egyik a fent leírt eljárások.

Általában, ha az emberek sablonokat és felhasználása áramlás, ezek adják az ingatlan úszó balra mindkét oszlopot, majd hozzon létre egy „mező” az oszlopok között a tőke vagy a szivacs. Ezt a megközelítést alkalmazva az oszlopot szorosan nyomni őket egy hozzáférhető helyen - így a „nem szabad belélegezni.” Általában ez nem okoz problémát, de egyes böngészők elpusztítani ilyen „szűk” design, a hangszórók vannak elrendezve egy oszlop - egymás alatt.

Ez akkor fordulhat elő, IE, mert az IE alapján a „méret” a tartalom és nem tartalmaz az elem tartalmát. A böngészők betartani az előírásokat, ha a tartalom nem fér el a dobozban, ez csak azt túl. Az IE, azonban, ha a tartalmuk nem kerül az azt tartalmazó elem, akkor „húzódik” az elem méretének növelése. Ha egy ilyen dolog történik, sűrű, szendvics design elemek, akkor nincs több hely marad, egymáshoz közel, és egyikük, mintha, „esik”, a másik pedig az alábbiakban.

Ahhoz, hogy elkerüljük az ilyen fejlemények óvatos ne töltse túl a készüléket tartalmazza a tervezési folyamat. akkor egy „virtuális mező”, amely egyben úszó használata helyett vízszintes külső és belső kárpitozás, (margin, padding): balra. és a többi - float: right.

Most, ha az egyik eleme egy kissé (pár pixel) növeli a méret, hanem elpusztítják a teljes tervezési, kiszorítva az egyik blokkot a másik alá, nem lesz „naplyvanie” egységet a „virtuális mező”.

CSS kódot e cél elérése érdekében magától értetődő. Csak állítsa be a kívánt szélességet minden oszlopban, majd adja meg a navigációs float: left. és a tartalom - float: right.

Majd annak érdekében, hogy helyesen pozícionálja a lábléc navigáció és a tartalom, meg kell szakítani a csomagolást neki.

Alapeset kész. Adjunk hozzá egy pár vonással. Padding felső és alsó részére a teljes blokkot a navigáció, és padding a bal és a jobb oldalon az elemek listáját a navigációs menüben.

Tedd le a behúzás jobb a tartalom területen:

Ennyi, most már készített egy egyszerű, két hasábos elrendezés CSS.

Három-oszlopon mintát egy áramlási

HTML-keret három oszlop sablon nagyon hasonlít az egyik, hogy mi használható a két oszlop, az egyetlen különbség az, hogy a benne található két további div blokk: az egyik a fő tartalmát, és egy másik - az extra.

Ugyanazt a szabályt a CSS, mint abban az esetben, két oszlopos template, tudunk adni a készülék fő tartalmát float: left. és egy további egység - float: right. Mindez belül kerül sor a már megfelelő helyzetben az alaptest tartalomra. Így osztják a második tartalmát két oszlopra, három oszlopos elrendezés.

Mint korábban, a CSS-kód nagyon egyszerű. Csak azt kell megadni a kívánt szélességet az egyes blokkok, és hogy minden annak csomagolása.

Akkor tiszta egy kicsit minta eltávolításával belső párnázás a tartalom blokk. alkalmazása közvetlenül a tartalom secondaryContent blokk.

Így neked itt van egy aranyos három oszlopos elrendezés.

Andy Budd, Cameron Moll és Simon Collison: "CSS Mastery: Advanced Web Standards Solutions"
webreference.com
Translation - Dmitry Naumenko