Un curat HTML markup, aspecte multe ...

Source: http://tjkdesign.com/articles/one_html_markup_many_css_layouts.asp

xhtml.ru are o copie a acestui articol în limba rusă

Acesta este acestfir(titlu: "un şablon pentru a le regula toate"), pe CSS-Discutaţi Lista de faptul că a iniţiat acest articol.

The original post a inclus o legătură într-un document de care conţinea un set de imagini care reprezintă diferite aspecte, întrebarea a fost:"Este posibil să aibă un singur fişier HTML, şi stilul de aceste pagini în acest fel numai cu CSS?".

Deci, aici vom merge...

(X) HTML markup:

Să începem cu strictul necesar:
<div id="header"> antet </ div>
<div id="menu"> meniul </ div>
<div id="content"> conţinut </ div>
<div id= "sub-secţiunea"> sub-secţiunea </ div>
<div id="footer"> subsol </ div>

Cu unele culori de fundal, acestea arata ca acest lucru:

Aspecte:

Jumătate din imaginile de mai jos se potrivesc cu aspectele publicate pe GeoCities, am venit doar cu alţi câţiva.

În timp ce navighează pe aceste pagini, ţineţi cont de faptul că aceste documente nunu conţin nicio:

• înveliş.
• element pentru compensare.
• Condiţionat comentariu.
• CSS filtru.
• Poziţia declaraţie.

Toate paginile ar trebui să valideze caXHTML Strict, dar nu va asteptati foaia de stil pentru a treceValidator. În cazul în care "insigna" este important pentru tine, apoi utilizati uncomentariu condiţional pentru a ascunde remedieri IE.

Înainte de a vă întreb, vă voi spune ce aceste două declaraţii- prezent în fiecare foaie- sunt utilizate pentru:

overflow:hidden

Aceasta este pentru a evita apariţia unor probleme cu Microsoft Internet Explorer, precum şi cu browsere moderne, în cazul în care un element într-un container este/ devine "prea mare", sau care se micsoreaza prea mult container. Cu browsere moderne, elementul-ar lipi exteriorul containerului, cu Microsoft Internet Explorer, ar putea forţa o "picătură", a containerului.

display:inline-block

Aceasta este pentru a preveni un bug pictură MSIE. Este de a face culorile de fundal că nu sunt vopsite in afara de elemente.

Galerie:

Vă rugăm să reţineţi că acest lucru nu este un exerciţiu à laGradina Zen, aspectul estetic este lipsită de relevanţă aici, obiectivul a fost de a realiza mai multe aspecte fluid cu minimul necesar:

• 5 conţinut divs.
• unscurt stil.
• nu hacks.

Iniţial, nu am folosit nici o imagine de fundal cu aceste aspecte. Intenţia mea a fost pentru a arăta diferenţele între unele containere, pentru a demonstra cum se comporta DIVisons comparativ cu celulele de tabel. Dar aceste lacune făcut unii oameni, mai puţin familiarizaţi cu CSS, cred că aceste aspecte au fost viciate. Deci, pentru a scăpa de spaţii albe, am decis să includă o câteva declaraţii de fundal. Deoarece aceste norme nu sunt legate de aspect, ci la "design", acestea nu sunt listate cu ceilalţi(a se vedea codul sursă pentru a afla mai multe despre declaraţiile de fundal).
Aş sugera imagini dezactivarea din browser-ul preferat de a asista la relaţia dintre containerele, şi pentru a înţelege mai bine comportamentul flotoare.

Faceţi click pe oricare din aceste imagini se va deschide o pagină care arată aspectul corespunzătoare(este posibil pentru a naviga de la un aspect la altul în cadrul documentelor). Făcând clic pe link-ul de mai sus Browsercam miniaturile va arăta capturi de ecran ale aspectului selectate într-o varietate de versiuni de browser şi platforme(se deschide în fereastra de browser).

Browsercam: Layout# 1

Browsercam: Aspect # 2

Browsercam: Aspect # 3

Browsercam: Aspect # 4

Browsercam: Aspect # 5

Browsercam: Aspect # 6

Browsercam: Aspect # 7

Browsercam: Aspect # 8