Jump to content
  • 0

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

Boris.d

Asked by Boris.d,

 Share

Question

Boris.d Explorer

Boris.d

Posted
Posted

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
AjiTae Explorer

AjiTae

Posted
Posted (edited)

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

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

Edited by AjiTae
Link to comment
Share on other sites
  • 0
Boris.d Explorer

Boris.d

Posted
  • Author
Posted

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

Boris.d

Posted
  • Author
Posted

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

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

<?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
AjiTae Explorer

AjiTae

Posted
Posted (edited)

Эээм, а как вы в табличном варианте собираетес добавлять 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
s0rr0w Explorer

s0rr0w

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

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

Link to comment
Share on other sites
  • 0
Boris.d Explorer

Boris.d

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

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

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

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

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

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

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

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

Link to comment
Share on other sites
  • 0
AjiTae Explorer

AjiTae

Posted
Posted (edited)

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

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

Boris.d

Posted
  • Author
Posted (edited)

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

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

<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
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • 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

  I accept