Jump to content
  • 0

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


Boris.d
 Share

Question

640724df6ee9.png

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

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

Спасибо

Link to comment
Share on other sites

14 answers to this question

Recommended Posts

  • 0

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

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

Edited by AjiTae
Link to comment
Share on other sites

  • 0

Много ув. 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>

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

Link to comment
Share on other sites

  • 0

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

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

<?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 таблицко отображается... м... в одну строку.

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

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

Link to comment
Share on other sites

  • 0

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

Edited by AjiTae
Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

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

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

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

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

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

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

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

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

Link to comment
Share on other sites

  • 0

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

<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 by AjiTae
Link to comment
Share on other sites

  • 0

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

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

<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 by Boris.d
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