Jump to content
  • 0

Бекграунд дива в зависимости от высоты и без скриптов


Tokolist
 Share

Question

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

i778142_forum.jpg

высота которого (дива) изменяется при изменении размеров окна (разрешения монитора).

Нужно сделать так, чтобы все было красиво :)

Я сделал это с помощью скриптов: поставил обработчик события onload, onresize и меняю класс дива в зависимости от его высоты (двох картинок хватает). Вариант, в принципе нормальный, но хотелось бы сделать без скриптов.

Без скриптов придумался такой вариант:

1. в див кладем еще один див, в которого бекграунд - небольшой прямоугольник цвета такого же как и цвет нашего дива и расположен в нижнем левом углу

2. позиционируем бекграунд по точным координатам, вместо left center

теперь при меньшей высоте наши "линии" снизу будут перекрыватся "прямоугольничком", но это будет выглядеть не совсем красиво из-за особенностей макета (см. скриншот).

Был также другой вариант - более обьемный и не лучше первого, поэтому я даже его не привожу.

Есть ли другие варианты?

Спасибо.

Link to comment
Share on other sites

10 answers to this question

Recommended Posts

  • 0

Честно говоря - не понял чего нужно такого сделать. Можно же сделать div с фоном и он будет сам увеличиваться и уменьшаться по тексту...

<div style="background: url(картинка) repeat-y top left;">
<p>текст</p>
</div>

Link to comment
Share on other sites

  • 0
  yopopt said:
Честно говоря - не понял чего нужно такого сделать. Можно же сделать div с фоном и он будет сам увеличиваться и уменьшаться по тексту...

Обрати, пожалуйста внимание на скриншот.

То есть надо чтобы так было всегда (одинаково), НЕ зависимо от высоты слоя.

repeat-y там не подходит, к сожалению :)

Link to comment
Share on other sites

  • 0
  yopopt said:
То есть фон должен быть всегда одной высоты?

Нет. Ты не совсем правильно понимаешь...

Просто у этих "стрелочек" должно быть одинаковое растояние от верха слоя и от низа слоя.

И они нарисованы таким образом, что нужно (скорей-всего) именно изменение картинки при уменьшении высоты слоя...

Завтра выдру кусок кода и покажу, ибо счас мозги не варят :)

Link to comment
Share on other sites

  • 0

Ну как вариант можно вырезать маленький кусочек этого рисунка(к примеру в 9px). Все его неровности сделать прозрачными. И для текста установить line-height:18px;. Тогда при изменении высоты блока будет прибовляться ровно два маленьких изображения.

<div style="background: url(картинка.гиф) repeat-y top left;">
<p style="line-height:18px;padding-left:10px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

Ну а высоту сверху и снизу подрегулировать padding'ами и margin'ами

Link to comment
Share on other sites

  • 0

Можно сверху (и снизу) накладывать рисунок, но не прямоугольный, а с вырезанным уголком под линии на фоне. Сам рисунок должен быть того же цвета, что и фон, а уголок прозрачным. Что-то вроде этого

| |

--

Тогда сохранится и структура - палок и сверху их не будет.

Link to comment
Share on other sites

  • 0

2 All

Для того чтобы стало лучше понятно чего я хочу добиться (хотя большинство уже поняло) взгляните, пожалуйста, по ссылке (код сильно упрощен):

_http://whativedone2007.narod.ru/

если у вас разрешение 1024х768, то все нормально, если же разрешение больше, то будет выглядеть не так как на скриншоте в первом посте. Меньшие разрешения не важны.

Можно также попробовать просто изменять размеры окна или же margin-right, если большие разрешения недоступны.

repeat-y не совсем подходит из-за особенностей макета (см. скриншот). Если сделать таким образом, то верхняя и нижняя черточка будет выглядеть не так как на макете

i782234_screen1.jpg

Вариант, предложенный Vlad очень хорош. Можно даже применить repeat-y. Сделал пример:

_http://whativedone2007.narod.ru/vlad/test.html

единственное, как уже было сказано yopopt, не всегда полностью перекрывается нижняя черточка (см. скриншот)

i782250_screen2.jpg

но тут (как уже также было сказано yopopt) можно корректировать все это с помощью margin, padding и line-height (line-height все-равно я устанавливаю, поэтому только нужно подобрать необходимое значение)

Но есть еще одно НО - юзверь может масштабировать шрифт.... ну и флаг ему в руки! :)

вариант со скриптами все-равно останется, но хотелось на будущее...

всем спасибо.

вроде это и есть наилучший вариант, но если есть еще, пожалуйста, поделитесь :)

тема пока не закрыта...

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