Testovani CSS rozvrzeni pro 2 sloupce

Protozejsem dnes zazival problemy s nakodovanim stranek, z nichz jedna mela na vysku delsi #content a druha #vmenu a nepomahali ani JS/jQuery skripty, hledal jsem dalsi JS reseni.

Doted jsem si myslel(a uprimne jsem se tomu podivoval, ze to je mozne), ze ciste pres CSS to nejde resit, ale toto byl omyl. Pres CSS to jde resit naramne krasne, jednoduse a s minimem kodu.

Inspiraci mi byla stranka http://css-tricks.com/fluid-width-equal-height-columns/ .

Jedno reseni jsem odtamtud nezkousel, ktere bylo zalozeno na tabulkach, 2 reseni se mi nakonec ukazali jako totozne a byly slouceny do jednoho a zbylych 4 reseni jsem si stejne jako to sloucene jedno dal do weboveho projetku a ozkousel jsem ho na kodu ktery jsem mel uz napsany.

V prve rade tu uvedu sdilene kody, vsechno bylo testovano na ASP.NET, kdy v rootu webove aplikace byl soubor *.Master a v podslozce pak soubory BasesEarth.aspx a Bases.aspx.

Nebudu zde davat C# techto souboru, protoze je stejne prazdny. BasesEarth.aspx vypadal tedy nejak takto:

A Bases.aspx pak takto:

Pak jsem mel jeste soubor Shared.css, kde jsem mel tyto deklarace a na ktery jsem se odkazoval v kazdem souboru *.Master:

A ted uz k samotnym layoutum:

CSS Table

Nejjednodussi zpusob, simulujici HTML tabulky.

Kod CSS:

HTML kod .Master:

Vysledek je OK, zlute misto je volne misto ktere bude na vsech obrazcich, protoze obalujici div mel sirku 800px a tak jsem mel nastavit #content 600px misto 530px.


CSSTable Bases


CSSTable BasesEarth

One True Layout

Druhy a posledni, ktery dopadl stejne dobre jako CSS Table.

CSS Kod:

HTML Kod:

Obrazky:


OneTrueLayout Bases


OneTrueLayout BasesEarth

Doug Neiner

CSS Kod:

HTML Kod:

Obrazky:


DougNeinerThree Bases


DougNeinerThree BasesEarth

Nicolas Gallagher Method

CSS Kod:

HTML Kod:

Obrazky:


NicolasGallagher Bases


NicolasGallagher BasesEarth

Flexbox

Urcovani pomoci CSS poradi prvku.

Kod CSS:

Kod HTML:

Obrazky:


Flexbox Bases


Flexbox BasesEarth

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.