Основы работы с XHTML и CSS


Определение позиционного расположения элементов страницы - часть 3


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Newsletter</title>

<style type="text/css"> div#OUTER {position:relative; width:500px; height:420px; border:dotted 1} div#HEAD {position:absolute; left:0px; top:0px; width:500px; height:40px; border:dotted 1; text-align:center; font-size:24pt} div#COL1 {position:absolute; left:0px; top:50px; width:240px; height:260px; border:dotted 1} div#COL2 {position:absolute; left:260px; top:50px; width:240px; height:260px; border:dotted 1} div#FOOT {position:absolute; left:0px; top:320px; width:500px; height:100px; border:dotted 1} </style>

</head> <body>

<div id="OUTER">

<div id="HEAD"> Newsletter Layout </div>

<div id="COL1"> First Column </div>

<div id="COL2"> Second Column </div>

<div id="FOOT"> Footer </div>

</div>

</body> </html>

Листинг 6.37. Код компоновки информационного бюллетеня, использующий позиционированные элементы

Как легко видеть, можно позиционировать элементы страницы с точностью до пикселя. Это создает небольшие проблемы при определении расстояний в пикселях, но зато можно получить точный контроль над компоновкой страницы и над размещением ее контента.

© 2003-2007 INTUIT.ru. Все права защищены.




Начало  Назад