blokk elrendezés

Hello, kedves blog olvasói KtoNaNovenkogo.ru. Aztán elkezdték vizsgálni létrehozását szakaszos két hasábos elrendezés blokk alapon. Úgy gondolom, hogy kezdeni tanulni az elrendezés a helyszínen. amelynek alapja a használata Cascading Style Sheets (CSS), a legjobb, ha csak egy konkrét példa, de nem unalmas elmélet vizsgálata.

Nem, persze, a tudásbázis a formázó is szükség van, de ez a tudás jobban asszimilálódott, és megértette, miután egy nagyon egyszerű példát, hogy hogyan lehet kötni a HTML kódot a CSS tulajdonságokat, és hogyan kell használni őket, akkor az ellenőrzés a megjelenését elemeket a helyszínen .

Térjünk vissza a mi elrendezés. Az első cikk, amit még nem is kezdődött, hogy fontolja meg a lényeget, mert sok időt töltött az alapvető kérdéseivel elrendelése. Erre azért volt szükség, különösen azok számára olvasók, akik még csak most kezdenek süllyedni vebmastering.

Ezért, ha nem az összes helyére kerül kérdésekben elrendezését, majd futtassa az átló mentén az első cikket ebben a sorozatban. A második, még csak most kezdjük a verstaniyu, bár az elején, én ismét a visszavonulást a téma, hogy a gyökér mappát, hogyan kell nézni a saját tárhely (lásd. A fenti linkre csak a fent meghatározott).

Így már regisztrált a mi még üres index.html fájlt alapelemek (test, meta tagek, stb), valamint a kód a blokk alkotja majd az elrendezés a helyszínen.

Ezután már regisztrált a még üres fájlt Cascading Style Sheets style.css első CSS tulajdonságokat, többek között arra kértük a rögzített szélességű elrendezést és igazítsa vonatkoztatva középen a képernyő szélein.

Azt is figyelembe vette a lehetőségét, hogy a régebbi verziójú böngészőt, például az Internet Explorer 5 Aztán festett illusztráció különböző színű minden v blokkot alkotják a két oszlop elrendezés, valamint a korlátozott szélessége a bal oldali oszlop (ez általában a menüben) .

Nos, a végén az előző cikk kértük a CSS fájlban, csomagolja a bal oldali oszlopban blokk más tartály alatt található HTML index.html fájlt kódot (ebben az esetben a „Tartalmi oldalak (tartalom)” és „Pince (lábléc)”).

Miután ezeket a lépéseket, megkaptuk:

Ebben Index.html fájlban:

És style.css fájlt már regisztrált:

Hasonlítsuk össze ezt az eredményt, amit kellett volna történnie:

némi javulás

Úgy tűnik, hogy a hasonló modellek, de van egy bökkenő. Lábjegyzet (pince) blokk ne körbe a bal oldali oszlopban a jobb oldalon, meg kell alján az elrendezés és elfoglalják a teljes szélességben. Ez az egyik probléma.

De azon kívül, van egy másik probléma. Ha ehhez hozzátesszük a szöveget Div tartalom (a tartalmát a cikk):

Ez lehet egy olyan helyzetet, az elrendezés:

Ie Tartalom tartály tartalmát veszi az összes rendelkezésre álló tér a kitöltött baloldal. Ez annak a ténynek köszönhető, hogy a benne wrapper div által hagyott az összes többi egység található alatta a HTML kódot, de miután a bal oldalát, az összes többi konténerek már kezdenek sajtó ellen, a bal szélén.

Van egy ilyen helyzetben tartalma nem teljesül, ezért annak érdekében, hogy elkerüljék ezt, kérünk ezt a tartályt rögzített behúzás balra (a szélén az elrendezés) egyenlő a blokk szélessége Bal (bal oldali oszlop).

mert bal oszlop szélessége (bal) amit korábban kérte, hogy 200px, a bal francia Tartalom definiáljuk ugyanaz, lehetővé teszik, hogy akár pár pixel inkább a rövid távolság az egységek között megjelent.

Minden style.css fájlt kód most így néz ki:

És mi elrendezése Div elrendezés válik:

Most egy olyan helyzetet utánoznak egy jelentős növekedése magassága bal blokk (bal oldali oszlop):

Az ábra azt mutatja, hogy egyre nagyobb a magassága a bal oldali oszlopban, pince (lábléc) kezdődik körülveszi, mivel Balra style.css folyni a tömb körül beállított tulajdonát float: left.

Ennek következtében minden Div konténerek található az alábbi HTML kódot a Bal, elkezd folyni köré, és a lábléc sem kivétel. És ez nem áll jól nekünk egyáltalán, hiszen mindig kell elhelyezni az összes többi egység a két hasábos elrendezés. Meg kell megjavítani.

Ez a funkció lehetővé teszi, hogy gondoskodjon lábléc az összes lebegő blokkal, azaz azok, akik kérték, a float tulajdonság (tekerje jobbra vagy balra). Így kihagyja a pincében, hogy az alján a elrendezését.

Style.css most így néz ki:

És a két oszlop elrendezés a blokk elrendezés kap footer (pince), amely minden igényt kielégít:

Ha kell helyezni a Bal (menü oszlop) elrendezés nem bal kézzel, a jobb oldalon, akkor megteheti, hogy egy pár változás style.css. A Left szükséges cserélni a float tulajdonság: left; a float: right;. és a Content egység - távolítsa el a bal margó a bal tartály szélessége, és adjunk hozzá pontosan ugyanazt a behúzás a jobb oldalon.

Ie Tartalom szükség CSS tulajdonság margin-left: 202px; helyébe margin-right: 202px;. Ennek eredményeként style.css formájában:

És mi elrendezés a menü a jobb oldali oszlop, így fog kinézni:

Létrehozása három oszlopos elrendezés alapján a 2. oszlopban

Vissza az összes szóba, ha a bal blokk található, a bal oldalon. Ahhoz, hogy hozzon létre egy három oszlopos elrendezés alapján a már létrehozott két oszlopban, csak kell hozzá egy további Div-Container index.html fájlt kódja után leírja a baloldal.

Nevezzük egyszerű - jobb. C figyelembe véve az új Div, a kód lesz:

A tartály tartalmát a jobb, tettem hozzá egy kis szöveget, hogy a blokk volt összehasonlítható a bal és a tartalom magasság méretét. Most meg kell írni egy külön szabály a fájlt style.css lépcsőzetes stílusok pontos helymeghatározás jobb, mint a többi tartályban a három hasábos elrendezés a site:

Nos, a float tulajdonság: right lehetővé teszi, hogy nyomja meg a jobb a jobb oldalon, és ezzel egy időben az összes következő a kódot mögötte div fog folyni körül, hogy a bal (a kerületi ez csak a tartalom, lábléc hiszen létrehozni úgy, hogy fekszik az összes lebegő blokk).

De ez nem elég. A cikk elején már megoldotta a problémát a tartalom zalezaniya Div tartalom ért véget Bal Block. Annak érdekében, hogy azonnal a probléma elkerülhető, a jobb, mi határozza meg a CSS Content nem csak a szélessége a bal szélén maradt, de a szélessége a padding a jobb jobb:

A végleges változat a style.css három hasábos elrendezés a következő:

És az elrendezés a helyén, előírni Div, így nézne ki:

Átalakítás a fix elrendezés gumi

Két oszlop, valamint három hasábos elrendezés, hogy megtanultuk, hogy hozzon létre ebben a sorozatban, az úgynevezett fix, mert szélességük nem függ a felbontás a felhasználó képernyőjén, böngészni az oldalon. De van egy másik típusú úgynevezett gumi. Ebben az esetben, az elrendezés a helyén a blokk elrendezés elfoglalja a teljes szélességében a felhasználó képernyőjén.

Ha a képernyő felbontását, hogy lesz 800 pixel széles, és a modell-egy gumi hely egyenlő lesz a szélessége 800 pixel, és ha a felbontás 1920, akkor a minta nyúlik teljes szélességét a képernyőn.

Bizonyos esetekben, a használata a gumi változata is indokolt lehet, ezért érdemes megnézni, hogy hogyan ki a rendes fix szélességű elrendezés, hogy a gumi. Bár elvileg minden nagyon egyszerű.

Ez csak akkor szükséges a tartály Div, amely megállapította az egész elrendezés (ebben az esetben Maket), meg a fájlt a Cascading Style Sheets nem egy fix méretet a tulajdonság szélesség: 800px;. és a relatív mérete szélessége, az ingatlan szélesség: 100%; :

Gumi változata a következőképpen néz ki:

Problémák megoldására a régebbi böngészők

Első pillantásra úgy tűnik, minden rendben van, de ha megpróbáljuk csökkenteni a böngésző ablakot, majd egy bizonyos ponton fut át ​​egy blokk a másik, ami vezet a teljes összeomlás a tervezés (mondjuk több - elment elrendezés).

De ez a baj is viszonylag könnyen lehet semlegesíteni. Elég, ha beállított egy tartályt, amelyben a gumi egy elrendezést (ebben az esetben Maket), egy speciális CSS tulajdonságok lehető legkisebb szélessége, amelyhez lehetőség van, hogy csökkentse annak méretét.

Miután elérte ezt a minimális szélesség elrendezés akkor szűnik meg, gumi és nem fog változni a szélessége további csökkentését a böngésző ablakot.

Ez a tulajdonság a következő:

Digitális pixel 600 ebben az esetben meghatározza a minimális minta szélessége a gumi, ami után a mérete már nem mozog. A csökkenés a böngésző ablak alatt ez a minimális szélessége része akkor egyszerűen megszűnik látható:

Most a feladat csapódik le, hogy a szélessége 600 pixel a webhely nem sodrott, valamint a nagy felbontású, hogy biztosan nem fog megtörténni. De aztán megint, van egy „de”, és újra ez a „de” van kötve mindannyian kedvenc Internet Explorer 6 böngészőt.

Még egy csomó ember használja ezt a barlanglakó, hogy erőfeszítései ellenére mérjük még nem fogja észrevenni a korlátozásokat a minimális szélességű gumi elrendezése és makacsul törés design.

Annak érdekében, hogy megoldja ezt a ajtófélfa gumi sablon az Internet Explorer 6, számos úgynevezett hack, amely lehetővé teszi, hogy ezt a korlátozást.

Megemlítem itt az egyik legstabilabb csapkod, amely nem okoz nyitjára böngészők és más bajok. Ez azon a tényen alapul, hogy a CSS tulajdonság szélesség: 100% -os Maket egység fogjuk cserélni a speciális kódot:

Négy helyen ezt a kódot bejegyzett számot 600, amely meghatározza a minimális szélessége a gumi elrendezést. Meg lehet változtatni ezt a számot az egyik úgy gondolja a legjobb. Style.css végső megjelenést az alábbiak lesznek:

Sok szerencsét! Hamarosan találkozunk a blogoldalakon KtoNaNovenkogo.ru