как сделать постоянный отступ независымый от размера окна браузера

Gloft · January 29, 2008

прочитав статью на этом сайте "Фиксированный дизайн. Наложение слоев"

решил попробовать на практике

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
body {
 margin: 0px; /* Убираем отступы */ 
}

a {
 cursor: hand;
 cursor: hand;
 border: 0;
 white-space: nowrap;
 text-decoration: none;
}

#top { 
 /* Верхняя часть с заголовком страницы */
 background: #e3e8cc; /* Цвет фона */
 border: solid 1px black; /* Параметры рамки */
 padding: 15px 0px 15px 10px; /* Поля вокруг текста */
 margin-bottom: 15px; /* Расстояние между заголовком и колонками */
 font-size: 24px; /* Размер шрифта */
 font-weight: bold; /* Жирное начертание */
 color: black; /* Цвет символов */
}

#menu {
 float: left;
 position: relative; /* Относительное позиционирование */
 width: 150px;
 left: 50px; /* Сдвиг слоя */
 top: 50px; /* Смещение слоя вниз */
 background: #e0e0e0;
 border: solid 1px black; /* Параметры рамки */ 
 padding: 3px;
 z-index: 2;
}

#content {
 /* Основное содержание страницы */
 background: #e3e8cc;
 border: solid 1px black;
 margin-left: 120px;
 margin-bottom: 15px;
 margin-top: 15px;
 margin-right: 50px;
 height: 80%;
 z-index: 1;
}

#content p {
 padding-left: 60px; /* Значение поля слева */
 padding-right: 20px; /* Значение поля справа */
 padding-top: 20px /* Значение поля сверху */
}
</style>
</head>
<body>

<!-- #top Верхняя часть с заголовком страницы -->
<div id="top">Заголовок</div>

<div id="menu">
 <p>
 Ссылка 1 

 Ссылка 2 

 Ссылка 3 

 Ссылка 4 

 </p>
</div>

<!-- #content Основное содержание страницы -->
<div id="content">
 <p>Левая колонка. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</p>
</div>
</body>
</html>

Как зафиксировать чтобы текст в основном содержании всегда отступал от края слоя нависающего над ним на фиксированный размер?

подобное желание возникло т.к. в IE и Opere % считаются поразному и в результате отображение разное

Vlad · January 30, 2008

Для начала обнули отступы у P и задай его самостоятельно. Браузеры считают отступы для абзацев по умолчанию по разному.

Sign In

как сделать постоянный отступ независымый от размера окна браузера

Question

Gloft

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information