Как позиционировать элементы?

Amadeus · May 9, 2009

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

Такая строка, относящаяся к тегу body позволяет зафиксировать только одну полосу (в данном случае нижнюю): {background-image:url(img/img4.gif); background-position:bottom; background-repeat:repeat-x; background-attachment:fixed;}, при этом вторую полосу разместить и зафиксировать не получается. Нет знаний. Помогите чайнику.

psywalker · May 9, 2009

Amadeus

Одну полосу ,верхнюю ты повесь на body, а нижнюю повесть на html , только незабудь задать body: для IE6 overflow: auto;

и height: 100%; на body

Код

body { background: url(../table-div/30.jpg) top left fixed repeat-x; overflow: auto; height: 100%;}

html { background: url(../table-div/43.jpg) bottom left repeat-x fixed; }

Edited May 9, 2009 by psywalker

Amadeus · May 9, 2009

psywalker, спасибо за помощь. Попробовал - получилось. Но возникли новые трудности: background-color теперь ограничивается последней строкой в теге body, т.е. фоновый цвет не разливается на всю страницу, а ограничивается последней строкой в body и дальше не идет. И нижняя рамка, заложенная в тег html не отражается при уменьшении окна броузера. Можно это как-то исправить или может есть другие способы?

Я пошарил по шаблонам сайтов и в коде одного нашел такое решение: нижняя полоса делается как я написал в первом сабже, а дальше создается тег div и в css делается примерно такая запись: {width:auto; height:90px; background:url(img/img3.gif);}. Получается верхняя полоса, но она прокручивается. Т.е. не совсем то, что нужно. Вот как бы ее заставить не прокручиваться?

Edited May 9, 2009 by Amadeus

psywalker · May 9, 2009

Amadeus

Слушай, я если честно не совсем понимаю,что именно ты хочешь получить, но вот попробуй этот код, скажи, типа того?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
*{ margin: 0; padding: 0;}
body {  background:  url(../xtrm/img/img1.jpg) top left fixed repeat-x; height: 100%; overflow: auto;}
html { background: url(../xtrm/img/img2.jpg ) bottom repeat-x fixed;} 
div.wrap { position: fixed; height: 100px; left: 0; top: 0; width: 100%; background:#900;}
</style>
</head>

<body>
<div class="wrap">
</div>

</body>
</html>

Или вот этот :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
*{ margin: 0; padding: 0;}
body {  background:  url(../xtrm/img/img1.jpg) top left fixed repeat-x; height: 100%; overflow: auto;}
html { background: url(../xtrm/img/img2.jpg ) bottom repeat-x fixed;} 
div.wrap { position: fixed; height: 100px; left: 0; top: 0; width: 100%; background:#900;}
div.wrap2 { position: fixed; height: 100px; left: 0; bottom: 0; width: 100%; background: #936;}
</style>
</head>

<body>
<div class="wrap">
</div>
<div class="wrap2">
</div>



</body>
</html>

Edited May 9, 2009 by psywalker

Amadeus · May 9, 2009

Рsywalker, твоя идея оказалась правильной. Во всяком случае после некоторой доводки получилось то, что требовалось. Вот запись хоть и поражающая своей убогостью, но работающая:

body {margin:0; padding:0; background:url(img/img3.gif); background-position:top left; background-attachment:fixed; background-repeat:repeat-x; background-color:#000000; overflow:auto; height:100%; margin-top:-90px;}

html {margin:0; padding:0; background:url(img/img4.gif); background-position:bottom left;background-attachment:fixed; background-repeat:repeat-x; background-color:#000000; height:100%; margin-top:-90px;}

Отступы сверху по 90 пикселей (высота картинки) оказались единственным вариантом довести идею до нужного результата (правда тестировал только в опере и в эксплорере). Иначе в броузерах разная херь вылазила. Но зато все теперь приходится сдвигать на энное количество пикселей вниз.

Теперь новый вопрос возник: как сделать непрозрачными эти полосы? Чтобы текст при прокрутке уходил как бы под них. В эксплорере по умолчанию все ништяк - текст уходит под полосу, а в опере идет поверх нее. Подскажите плиз.

ЗЫ Сейчас попробую то, что ты написал.

Edited May 9, 2009 by Amadeus

psywalker · May 10, 2009

Amadeus

А никак не сделать так, потому что ты задаёшь фон для body и html , а они всегда распологаются самым нижнем слоем, а сайт уже строится на них , поэтому есть вариант только с тем, что я привёл, чтобы Зафиксировать два div , один вверху, другой внизу и уже Им задать фон, вот тогда поидее всё должно работать, но опятьже косяки будут в ИЕ6, потому что это паганый броузер, забей на него )))

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
*{ margin: 0; padding: 0;}
body {  background:  url(../xtrm/img/img1.jpg) top left fixed repeat-x; height: 100%; overflow: auto;}
html { background: url(../xtrm/img/img2.jpg ) bottom repeat-x fixed;}
div.wrap { position: fixed; height: 100px; left: 0; top: 0; width: 100%; background:#900;}
div.wrap2 { position: fixed; height: 100px; left: 0; bottom: 0; width: 100%; background: #936;}
</style>
</head>

<body>
<div class="wrap">
</div>
<div class="wrap2">
</div>
</body>
</html>

Edited May 10, 2009 by psywalker

Amadeus · May 10, 2009

Юзеры обидятся. Они ж могут не сообразить, что это их браузер фаршмачит, а не криворукий деятель сайт верстал.

Я вот фреймами озадачился. В принципе при помощи фреймов как-то все очень легко получилось, аж подозрительно.

В этой связи вопрос: почему фреймы - не айс? Че-то сайтостроительный народ не очень их любит. Читал, что роботы поисковые их не очень жалуют и т.п. проблемы с их использованием связаны. И вроде не все браузеры их толково воспроизводят, хотя у меня в этом плане все нормально.

Sign In

Как позиционировать элементы?

Question

Amadeus

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

Amadeus

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Amadeus

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Amadeus

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information