--=REKLAMA=--

Beez/obszar all

Z Joomla!WikiPL

Element div id="all" obejmuje wszystkie elementy strony. Jego głównym zadaniem jest umożliwienie rozmieszczenia całej strony w stosunku o okna przeglądarki, określenie szerokości i położenia.

Beez body.png

Podstawowy styl

Miejsce przechowywania - w pliku: position.css

  1. #all
  2. {
  3. 	background: #FFFFFF;
  4. 	border: solid 1px #DBB0CD;
  5. 	color: #000000;
  6. 	font-size: 0.8em;
  7. 	margin: 0 auto;
  8. 	max-width: 1000px;
  9. 	padding: 0 3px 3px 3px;
  10. 	text-align: left;
  11. }

Trzy deklaracje mają tutaj szczególne znaczenie. Deklaracja margin: 0 auto; powoduje wyśrodkowanie pojemnika ze wszystkimi elementami strony - lewy i prawy margines pozostałe po odjęciu szerokości strony od szerokości okna przeglądarki ustalane są automatycznie. Deklaracja text-align: left; przywraca standardowe justowanie tekstu do lewej - jak pamiętamy, w stylu elementu body ustawialiśmy centrowanie tekstu, aby zapewnić wyśrodkowanie układu w przeglądarkach IE.

Własność max-width ustala maksymalną szerokość strony. Ponieważ starsze przeglądarki IE nie obsługują tej własności, w przeznaczonym dla nich arkuszu posłużono się rozumianym tylko przez te przeglądarki atrybutem expression(). Umożliwia on posłużenie się stworzonym przez Microsoft językiem JScript (wersją języka ECMAScript, czyli dobrze znanego, ale pod nazwą JavaScript). Atrybut expression() pozwala zastosować własność max-width (atrybutów min-width czy min-height nie trzeba niczym zastępować, ponieważ w IE własności width i height skutkują takim efektem, jaki standardowo powinny przynieść własności min-width i min-height): Miejsce przechowywania - w pliku: ieonly.css

  1. #all { width: expression(document . body . clientWidth > 980 ? "980px" : "auto"); }

Wyrażenie to spowoduje, że w przypadku gdy szerokość okna przeglądarki będzie większa niż 980px, to szerokość strony zostanie ustalona na 980px, a jeżeli będzie mniejsza niż 980px, to zostanie ustalona automatycznie.

Dodatkowe style

Miejsce przechowywania - plik: position.css

  1. body
  2. {
  3. 	background: #F2E3ED;
  4. 	color: #000000;
  5. 	font-family: arial, helvetica, sans-serif;
  6. 	font-size: 100.1%;
  7. 	padding: 0px;
  8. 	text-align: center;
  9. }

Ze stylu określonego dla body dziedziczona jest własność: font-family.


Dziękujemy za wkład

» Stefan Wajda [zwiastun],