Jump to content
  • 0

Фиксированая ширина каркаса с резиновыми боками


VIRUS
 Share

Question

Здравствуйте, целый день промучался с версткой на дивах, цель такая:

Есть дизайн, фиксированая ширина 1000 пикселов по центру браузера. Но в дизайне есть слева и справа дополнительные блоки вокруг центра, ширина каждого блока 300 пикселов. Но они должны обрезаться слева и справа соответственно от ширины браузера. Горизонтальная прокрутка должна появляться только тогда, когда ширина браузера меньше 1000 пикселов. Должно быть валидно (XHTML), работать во всех браузерах (IE 6-8, Firefox, Opera, Safari, Chrome, Netscape Navigator) одинаково. Без использования JavaScript.

Вот что есть на данный момент: http://vws.com.ua/projects/test/

Link to comment
Share on other sites

  • Answers 70
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Recommended Posts

  • 0

Посмотри исходный код как сделано на этом сайте и разбери его.

UPS, не обратил внимание что ветка форума - "для начинающих".

Вобщем теоретически можно сделать так:

основному блоку, который по центру даешь размер 1000px.

в теге html прописываешь картинку бэкграунд и позиционируешь ее например слева и вверх.

в теге body прописываешь картинку бэкграунд и позиционируешь ее например справа и вверх.

Edited by rus
Link to comment
Share on other sites

  • 0
Да, но это фон, а интересно бы сделать что-бы по бокам были именно блоки :)

Хм..., мне самому интересно как они будут обрезаться слева и справа в соответствии от ширины браузера, если они будут заданного размера?

Мне кажется тут вариант только с процентами.

Edited by rus
Link to comment
Share on other sites

  • 0
Хм..., мне самому интересно как они будут обрезаться слева и справа в соответствии от ширины браузера, если они будут заданного размера?

Мне кажется тут вариант только с процентами.

Вуаля: http://psywalker.ru/Forum/Column/Column_1400px.html

Это набросок, надо усовершенствовать попробовать чуть позже :)

Edited by psywalker
Link to comment
Share on other sites

  • 0

В общем тему я старую так и не нашел, поэтому состряпал пример еще раз. Осталось только сделать колонки одинаковой высоты как я понимаю...

<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="en" lang="en">

<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}

.left,
.right {
width: 50%;
height: 500px;
}

.left {
float: left;
margin-right: -500px; /* 1000/2=500 */
background:#fedfed;
}

.left-inner {
margin-right: 500px;
height: 498px;
border: red 1px solid;
}

.right {
float: right;
margin-left: -501px; /* 1000/2=500 + 1px баг ИЕ */
background: #defdef;
}

.right-inner {
margin-left: 500px;
height: 498px;
border: green 1px solid;
}

.center {
position: relative;
z-index: 1;
float: left;
width: 1000px;
height: 500px;
background: #efdabc;
}
</style>
</head>

<body>

<div class="left">
<div class="left-inner"></div>
</div>
<div class="right">
<div class="right-inner"></div>
</div>
<div class="center">111</div>

</body>
</html>

Link to comment
Share on other sites

  • 0

А у меня круче :)

Я доктайп тупо скопировал отсюда: http://www.w3.org/QA/2002/04/valid-dtd-list.html

Ибо не помню как пишется доктайп. Все время лазить приходится туда и копировать. Хз зачем там эта строчка, но мне она не мешает.

Вообще по идее, чтоб все было кошерно должно быть так:

<meta http-equiv="content-type" content="text/xml;charset=utf-8" />

тогда и первая строка нужна, но т.к. ИЕ - пиписька, то наверное лучше без нее, хотя повторюсь мне она не мешает.

Edited by Great Rash
Link to comment
Share on other sites

  • 0
А у меня круче :)

хаахах, ну даа, ну ничё, ща я соберусь и чё нить придумаю :(

Ответь пожалуйста на вопросы:

1) Как для ИЕ6 прописать Минимальную и максимальную ширину ИМЕННО у контейнера, а не у body?

2) Как для ИЕ6 прописать Минимальную и максимальную высоту ИМЕННО у контейнера, а не у body?

Просто все у кого спрашиваю, какую то ересь дают, и ещё при ресайзе ИЕ6 виснет, скажи пожалуйста, как такого же эффекта без зависания добиться в ИЕ6?

		div.wrap { 
min-width: 1000px;
max-width: 1000px;

min-height: 1000px;
max-height: 1000px;
}

Link to comment
Share on other sites

  • 0
Про минимальную высоту все просто, надо просто для ИЕ6 задавать высоту. Типа:

.class {
min-height: 100px;
}

* html .class {
height: 100px; /* height в ИЕ6 работает как min-height */
}

Да это я знаю, но мне принципиально хочется знать, как сделать именно min-height и т. д. вобщем всё вот это, прошу, если будет возможность, напиши код именно для БЛОКА:

		div.wrap {
min-width: 1000px;
max-width: 1000px;

min-height: 1000px;
max-height: 1000px;
}

А если оферфлоу? )

А вот тут кстати есть выход, для ИЕ спецом поставить Оверфлоу: Визибл

Edited by psywalker
Link to comment
Share on other sites

  • 0
Гугль говорит, что тут лишь экспрешны помогут.

Вот я уже гуглил 50 раз и всё что он мне выдаёт, зависает в ИЕ6, тоесть Браузер зависает, я по этому к тебе и обратился, так как ты ересь не напишешь :)

Link to comment
Share on other sites

  • 0
Great Rash:

А зачем вверху эта строчка:

<?xml version="1.0" encoding="utf-8"?>

?

Ты ведь вроде не подгружаешь туда xml документ...

XHTML-документ по совместительству является и XML-документом, но XML-декларация, бывает, мешает ИЕ в стандартный режим переключиться.

Link to comment
Share on other sites

  • 0

rash - да это я знаю quirks mode и все такое... хотя у меня действительно ни разу с ИЕ проблем не было из-за XML-декларации.

psywalker - скрипты может? А я говорил, что экспрешны не гуд...

Edited by Great Rash
Link to comment
Share on other sites

  • 0
Great Rash:

А зачем вверху эта строчка:

<?xml version="1.0" encoding="utf-8"?>

?

Ты ведь вроде не подгружаешь туда xml документ...

Объявление XML (XML Declaration) является специальной инструкцией по обработке документа (processing instruction), определяющей версию стандарта XML и кодировку символов. В принципе, стандарт XML позволяет не указывать данное объявление, поскольку для любого XML-документа кодировка UTF-8 предусматривается по умолчанию. А если к тому же учесть, что любая инструкция по обработке документа неминуемо вгоняет шестую версию некоторого браузера в quirks mode, использовать данное объявление на сегодняшний день и вовсе не рекомендуется.

Great Rash

1)

psywalker - скрипты может? А я говорил, что экспрешны не гуд...

Дружище прошу тебя если можно и то и то, вот это будет вообще супер, а я уже выберу тогда сам :)

2) А вот кстати мой доработанный вариант, просто интересно, чем он хуже твоего, смотри какие плюсы:

1. Всего 4 блока (у тебя 5)

2. Явно меньше кода, чем у тебя

3. Колонки от друг друга не зависят, делай с ними чё хош, никаких высот и т. д.

4. Боковые колонки можно сделать любой ширины, как раз сколько нужно, как у автора

http://psywalker.ru/Forum/Column/Column_1400px2.html

Считаю мой способ лучше :(

Edited by psywalker
Link to comment
Share on other sites

  • 0

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

А вообще, товарищ топикстартер, рассудите нас и скажите чей способ лучше? Товарищи читающие (сочувствующие), прошу вашего мнения тоже.

psywalker попробуй сохранить этот файл как min-width.htc

<public:attach event="oncontentready" onevent="oncontentready('noname')" />
<script type="text/javascript">
function oncontentready(classID) {
if (!this.className.match(classID)) {
this.className = this.className.concat(' ', classID);
var curMW = parseInt(this.currentStyle.minWidth);

if (document.body.clientWidth < curMW) {
this.style.width = curMW + "px";
} else {
this.style.width = "auto";
}
}
}
</script>

и применить его вот так:

<!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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>template</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />

<style type="text/css">
* {
margin: 0;
padding: 0;
}

.test {
min-width: 500px;
behavior: url('min-width.htc');
}
</style>

<script type="text/javascript">

</script>
</head>
<body>

<div class="test"></div>

</body>
</html>

и скажи работает ли в ИЕ6 без глюков?

Можно нафигачить таких блоков побольше...

Link to comment
Share on other sites

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

Так это же ерунда всё, обычная хрень, тупо дописать пару строк и всё

	body { 
min-width: 1000px;
position: relative;

}

http://psywalker.ru/Forum/Column/Column_1400px2.html

Great Rash

Спасибо, щас попробую

Неа дружище, чё то ваще не работает, может я чё не так делаю, пусть медведь проверит, Мишка, проверь ты плиз:)

Делаю файлик, скопировал в него тупо:

<public:attach event="oncontentready" onevent="oncontentready('noname')" />
<script type="text/javascript">
function oncontentready(classID) {
if (!this.className.match(classID)) {
this.className = this.className.concat(' ', classID);
var curMW = parseInt(this.currentStyle.minWidth);

if (document.body.clientWidth < curMW) {
this.style.width = curMW + "px";
} else {
this.style.width = "auto";
}
}
}
</script>

Далее предложили сохранить, тупо скопировал: min-width.htc и сохранил, далее в 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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>template</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />

<style type="text/css">
* {
margin: 0;
padding: 0;
}

.test {
min-width: 500px;
behavior: url('min-width.htc');
background: red;
}
</style>

<script type="text/javascript">

</script>
</head>
<body>

<div class="test">
Сколько раз вы оказывались в ситуации, что печатая сложный пароль, вы путались, сбивались и забывали, на каком символе вы остановились? И что вы делали? Стирали уже набранные 14 знаков и набирали по новой, так ведь? А всё почему? Потому что ваш пароль скрывается за звёздочками. А нужны ли они?Сколько раз вы оказывались в ситуации, что печатая сложный пароль, вы путались, сбивались и забывали, на каком символе вы остановились? И что вы делали? Стирали уже набранные 14 знаков и набирали по новой, так ведь? А всё почему? Потому что ваш пароль скрывается за звёздочками. А нужны ли они?
</div>

</body>
</html>

Edited by psywalker
Link to comment
Share on other sites

  • 0
Вуаля: http://psywalker.ru/Forum/Column/Column_1400px.html

Это набросок, надо усовершенствовать попробовать чуть позже :)

Этот вариант не подходит, так как бока вдвигаются под основной контент, а они должны прятаться в край браузера.

Link to comment
Share on other sites

  • 0
Этот вариант не подходит, так как бока вдвигаются под основной контент, а они должны прятаться в край браузера.

Наверное ты имел ввиду этот: http://psywalker.ru/Forum/Column/Column_1400px2.html ,ну я понял, интересненькое у тебя заданьице тогда. Нужно подумать :)

Link to comment
Share on other sites

  • 0
Наверное ты имел ввиду этот: http://psywalker.ru/Forum/Column/Column_1400px2.html ,ну я понял, интересненькое у тебя заданьице тогда. Нужно подумать :)

Я придумал как левый див так сделать, правый тоже правильно отображаеться, но горизонтальный скроллинг из-за правого дива присутствует, а он должен быть только если ширина браузера меньше 1000 px

Уже второй день голову ломаю и всю ноч не спал.

Link to comment
Share on other sites

  • 0
Я придумал как левый див так сделать, правый тоже правильно отображаеться, но горизонтальный скроллинг из-за правого дива присутствует, а он должен быть только если ширина браузера меньше 1000 px

Уже второй день голову ломаю и всю ноч не спал.

Слушай, я даже пока ничё придумать не могу, но возможно мастер Great Rash сможет помочь, у меня то ещё опыта мало совсем. А покажи свой вариант кстати :)

Link to comment
Share on other sites

  • 0

как вам такой вариант?

Только есть минус - правый и левый блок не растягивается по высоте в зависимости от высоты центрального.

Делал ширину 800 так как у меня моник 17" и мне плохо тестить на 1000

<!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" xml:lang="en" lang="en">

<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
body{
margin:0;
min-width:800px;
}
.left,
.right{
float:left;
width:50%;
height:100px;
background:#f00;
margin:0 -50% 0 0;
}
.right{
float:right;
margin:0 0 0 -50%;
}
.center{
width:800px;
overflow:hidden;
position:relative;
margin:0 auto;
background:#ff0;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="center">
<p>Lorem ipsum dolor sit amet consectetuer malesuada pretium Maecenas Nunc elit. Quisque Morbi malesuada quis mi Phasellus vestibulum magna Mauris penatibus molestie. Suspendisse vel.</p>
<p>Vivamus mollis lacinia ut Vivamus convallis nunc Nam Vestibulum vel ante. Elit nisl et quam enim a neque ante at neque netus. Porttitor.</p>
<p>Lorem lobortis augue eros senectus id penatibus quis Phasellus semper ornare. Scelerisque nibh et consectetuer nec natoque Aliquam.</p>
</div>
</body>
</html>

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy