Jump to content
  • 0

бэкграунд к правому краю


maritca
 Share

Question

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

Собственно, проблема и оказалась в том, чтобы этот бэкграунд прижать к правому краю навсегда, и чтобы при этом он был "бесконечным".

Ip43ZCgUA_Y.jpg

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

Также сложность состоит в том, что бг - рисунок, требующий при репите состыковки, то есть сделать в футере аналогичную ячейку, "продолжающую" бг, я не могу - высота подменю на разных страницах разная, следовательно, рисунок не всегда будет совпадать.

Я попробовала выкрутиться так:


body
{
padding: 0;
background-image: url(bg_menu.jpg);
overflow-y: scroll;
background-position: 100% 100%;
background-repeat: repeat-y;
float: right;
}

При такой раскладке вроде всё получилось, но с небольшим условием: пришлось задать ширину ячейки-градиента (где кнопки соцсетей) до 5000px. Иначе она автоматически ужималась до 4 px.

Вроде работает, но не в ie!

В IE при изменении размеров окна бэкграунд начинает ползти вместе с краем окна. В нормальных браузерах такого нет.

Как ещё можно решить задачу?

Подложить под таблицу див - тоже криво выходит.

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

_mPuhEn84qU.jpg

Собственно, вот препарируемая страница - dh-art.ru/index2.php?part=1⊂=1.

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0

а зачем Вам таблица? обойтись только div никак?

это же намного проще и логичнее, чем таблица. и для ie можно создать отдельный css, который будет ему объяснять как с этим работать, а если у вас проект на php, тогда вообще можно подставлять разные css в зависимости от браузера

Link to comment
Share on other sites

  • 0

а зачем Вам таблица? обойтись только div никак?

это же намного проще и логичнее, чем таблица. и для ie можно создать отдельный css, который будет ему объяснять как с этим работать, а если у вас проект на php, тогда вообще можно подставлять разные css в зависимости от браузера

мне кажется, что таблицы всё-таки удобнее как раз тем, что не надо разные css писать. Да и неуверенно я себя в дивах чувствую, вот даже бэкграунд нормально подложить не могу)) пробовала картинку фоновым дивом сделать - ещё хуже вышло...

вообще, при таблицах же тоже можно разные стили создать. знать бы ещё, что именно для ие прописывать...

Edited by maritca
Link to comment
Share on other sites

  • 0

просто дивом можно рулить как угодно, на что фантазии хватит =)

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

Там ничего сложного. попробуйте, это действительно намного проще, чем с таблицами.

Вы начните. а я если что подскажу.

P.S.: возможно, мои познания в Русском Языке не столь велики, как хотелось бы, объясните невежде что такое "без целлер" ?

Возможно имелось ввиду BestSeller - в смысле самый продаваемый?

Edited by McLotos
Link to comment
Share on other sites

  • 0

просто дивом можно рулить как угодно, на что фантазии хватит =)

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

Там ничего сложного. попробуйте, это действительно намного проще, чем с таблицами.

Вы начните. а я если что подскажу.

P.S.: возможно, мои познания в Русском Языке не столь велики, как хотелось бы, объясните невежде что такое "без целлер" ?

Возможно имелось ввиду BestSeller - в смысле самый продаваемый?

Без целер - это без цели, раздел о безцельном творчестве, просто фишка компании. Это не я придумала =)

Link to comment
Share on other sites

  • 0


body {background: repeat-y right;}

Немного подлиннее:


body {background-repeat: repeat-y;
background-position: right}

Да, собственно, так оно и есть, и даже ещё длиннее

Но всё равно нормально не работает в ИЕ:

ufgmC9xqlSo.jpg

Проблему с двиганием бг в ИЕ решила, просто прописав в свойствах таблицы флоат райт.

теперь бг ведёт себя как надо, но отображается не как надо - почему кажется более узким

Link to comment
Share on other sites

  • 0

просто дивом можно рулить как угодно, на что фантазии хватит =)

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

Там ничего сложного. попробуйте, это действительно намного проще, чем с таблицами.

Вы начните. а я если что подскажу.

P.S.: возможно, мои познания в Русском Языке не столь велики, как хотелось бы, объясните невежде что такое "без целлер" ?

Возможно имелось ввиду BestSeller - в смысле самый продаваемый?

Переверстала дивами, но всё равно проблема с бг осталась - никак не хочет растягиваться на 100% в высоту.

http://dh-art.ru/index.php

Сейчас оно вот так более или менее работает, но меня не устраивает, во-первых, 170%, во-вторых, при сворачивании страницы див этот всё равно ползает.


position: absolute;
background-image: url(http://dh-art.ru/bg_right.jpg);
background-repeat: repeat-y;
height: 170%;
width: 272px;
top: 380px;
right: 0%;
z-index: 1000;

Edited by maritca
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