Тянущийся фон

Boris.d · June 8, 2009

Собственно вопрос. При разрешении монитора 1024*768 пользователь должен видеть только картинку center. Пользователь с разрешением выше, чем 1024*768 должен видеть уже картинки left_1, center, right_1. Пользователь, у которого разрешение ещё больше, видит left_2, left_1, center, right_1, right_2. Если у пользователя разрешение ещё больше, то он видит все картинки, а картинка left_3 и right_3 должны полностью замощать оставшееся пространство

Кода не требую. Просто хочу понять, как это можно сделать

Спасибо

AjiTae · June 8, 2009

Простое решение: с вложенными дивам с заданным max-width, но в ие6 не будет работать. Хмм наверняка должно быть простое красивое решение, но что-то в голову лезут громоздкие бяки.)

У, ужас какой. У меня есть решение через 7 вложенных в друг друга дивов, что имхо - бяка. Мож то предложит что по-красивей?

Edited June 8, 2009 by AjiTae

s0rr0w · June 8, 2009

А не выпендриватся и сделать одной картинкой слабо?

AjiTae · June 8, 2009

Ах-ха-ха-хаха, бьётся головой о стену, жесть. Вот что значит включать моск.))) Решпект.

Edited June 8, 2009 by AjiTae

Boris.d · June 8, 2009

Много ув. Sorrow, нет. Нет. И ещё раз нет. Я не выпендриваюсь. Это необходимость. Вы бы поняли, что я хочу сделать и что это надо делать именно так, как на картинке, но я экономлю жизнь моей клавиатуры ( :lol: ) и глаза, наконец мозги ( :lol: ) многоуважаемых формучан пытаясь написать только самое необходимое. Самое необходимое я написал. Других решений неизвестной вам задачи нет. Если вы не можете предоставить ничего стоящего, пожалуйста, не оффтопте! И в конце-концов, не грубите!

AjiTae, хе, интересно посмотреть на этот вариант с 7-ю вложенными тэгами, может, пригодиться!

Напишите, пожалуйста, в личку!

Собственно, решение я нашёл. Точнее мне помог один добрый человек с восьмизнаком.

Недоделанный код:

 <table width="100%" border="0" cellspacing="0" cellpadding="0" style="height: 100%;">
   <tr>
	 <td height="100%" style="width:auto; background-color: #555555;"> </td>
	 <td height="100%" style="width:800px; background-color: #777777;"> </td>
	 <td height="100%" style="width:auto; background-color: #555555;"> </td>
   </tr>
 </table>

Тему, пожалуйста, не закрывайте! Может, ещё напишу по этому вопросу!

Boris.d · June 8, 2009

Ну вот и сдержал своё обещание опять появилась очередная проблемочка проблема. Собственно, вот невалидный проблеммный подопытный код, с которым я так долго уже не могу справиться

Умоляю вас помочь Очень прошу помочь, так как уже ничего не понимаю не знаю что делать...

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

...

//--//

...

<center>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="height: 100%;">
  <tr>
	<td height="100%" style="width: auto; background: url(left.png); background-position: 100% auto;"> </td>
	<td height="100%" style="width: 1024px; background: url(center.png); background-position: 100% auto;"> </td>
	<td height="100%" style="width: auto; background: url(right.png); background-position: 0% -1px;"> </td>
  </tr>
</table>
</center>

Проблема заключается в том, что в браузерах, отличных от IE таблицко отображается... м... в одну строку.

Подозреваю, что я упустил какую-то мелочь, а всезнающий ИЕ на эту мелочь наплевать....

Что можно сказать?

AjiTae · June 8, 2009

Эээм, а как вы в табличном варианте собираетес добавлять left/right 1/2? Ибо если как td прмо здесь - то они не будут исчезать при сужении, а как иначе, не нагромождая? Если вы left/right 1/2 таки обьеденили в просто left/right, то как добавите left/right 3.

Edited June 8, 2009 by AjiTae

s0rr0w · June 8, 2009

Много ув. Sorrow, нет. Нет. И ещё раз нет. Я не выпендриваюсь. Это необходимость. Вы бы поняли, что я хочу сделать и что это надо делать именно так, как на картинке, но я экономлю жизнь моей клавиатуры ( ) и глаза, наконец мозги ( ) многоуважаемых формучан пытаясь написать только самое необходимое. Самое необходимое я написал. Других решений неизвестной вам задачи нет. Если вы не можете предоставить ничего стоящего, пожалуйста, не оффтопте! И в конце-концов, не грубите!

А чем мой вариант плох? Все, что не влезет в экран - не будет показано. У кого какой монитор, у того столько и будет показано. В чем проблема?

AjiTae · June 9, 2009

s0rr0w +1

Я тож не втыкаю)

Edited June 9, 2009 by AjiTae

Boris.d · June 9, 2009

А чем мой вариант плох? Все, что не влезет в экран - не будет показано. У кого какой монитор, у того столько и будет показано. В чем проблема?

AjiTae, теперь уже я "нивтыкаю".

Sorrow, как вы собираетесь это реализовать? Мне не понятно.

AjiTae, я склеил left 1 + left 2 и right 1 + right 2

А 3-ие - я просто создам ещё одну таблицко и положу её вниз существующей.

Но всё-таки главный вопрос: что происходит с браузерами, кроме ИЕ, когда они парсят такую таблицко? Почему она становиться..."в одну строку"? Повторяюсь:

Подозреваю, что я упустил какую-то мелочь, ...

Кто что скажет по второму вопросу?

AjiTae · June 9, 2009

Т.е. так чем плохо?

<div style="width:100%;height:2000px;background:url(http://s60.radikal.ru/i168/0906/59/640724df6ee9.png) 50% 0 repeat-y;"></div>

а left 3\right 3 добавить в бг...

Вот собсно как-то так:

<html>
<head>
<style type="text/css"> * {margin:0;padding:0;}</style>
</head>
<body style="background:#505; /* здесь должна быть right_3 */">

<div style="position:relative;right:50%;background:#500; /* здесь должна быть left_3 */ width:100%;">
	<div style="position:relative;left:50%;width:100%;height:2000px;background:url(http://s60.radikal.ru/i168/0906/59/640724df6ee9.png) /* эта кртинка должна быть: center + left_1 + right_1 + left_2 + right_2 */ 50% 0 repeat-y;">

	<center>сюда по центру класть собствено сайт,<br> в диве или таблице с заданной шириной(1024px?),<br> тогда оно не будет сужаться дальше нужного</center>

	</div>
</div> 

</body>
</html>

Работает так.

Edited June 9, 2009 by AjiTae

s0rr0w · June 9, 2009

Реализовывается путем установки

body { background: url(bg.jpg) repeat-y center top }

AjiTae · June 9, 2009

Реализовывается путем установки
body { background: url(bg.jpg) repeat-y center top }

Дык! Там же ещё left3\right3 замстить надобно.

Edited June 9, 2009 by AjiTae

s0rr0w · June 9, 2009

Дык! Там же ещё left3\right3 замстить надобно.

Надо на фон смотреть, как он тайлится.

Решение - добавить еще один див

Boris.d · June 9, 2009

Люди, спасибо конечно за множество решений, но скорее всего сейчас более приоритетен второй вопрос.

Почему таблицко

<center>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="height: 100%;">
  <tr>
	<td height="100%" style="width: auto; background: url(left.png); background-position: 100% auto;"> </td>
	<td height="100%" style="width: 1024px; background: url(center.png); background-position: 100% auto;"> </td>
	<td height="100%" style="width: auto; background: url(right.png); background-position: 0% -1px;"> </td>
  </tr>
</table>
</center>

растягивается во всю страницу только при отсутствии доктайпа? С XHTML1.0 или 1.1 - в одну строку?

Кажется даже здесь, в справочнике тэга table было написано, что этот тэг не имеет атрибута height, о браузеры его понимают при отсутствии доктайпа. Но стилевой height - это не атрибут тэга! Так как валидно растянуть таблицко на всю высоту странички?

P.S. Я, кончно, согласен, что вёрстка таблицками - пережиток прошлого, но проблема остаётся проблемой, даже не смотря на то, что в первом посту тема топика диктовалась абсолютно по-другому.

Edited June 9, 2009 by Boris.d

Sign In

Тянущийся фон

Question

Link to comment

Share on other sites

14 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information