Jump to content
  • 0

Нестандартная верстка


Selen
 Share

Question

h_1318432455_7958748_308fa8411c.jpeg

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

Имеется фиксированный блок. Отцентрированный (margin: 0 auto;). Размер блока 900px;

Все бы ничего. Но справа, к шапке тянется рука, держит визитку.

Размер руки за пределами блока 270px;

С самой версткой вопросов нет. Но вот как можно прикрутить руку, что бы основной блок оставался в центре, при любом разрешении и рука прилегала к правому краю. И была видна в зависимости от разрешения.

Готового решения не смог найти. А моих знаний не достаточно для реализации.

Есть идеи ? :unsure:

Edited by Selen
Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

да код-то вы увидите, но толку от него. Я вам и на "пальцах" все рассказать смогу.

Есть основной блок header, к нему с помощью позиционирования цепляем псевдоэлемент, в самом ПЭ ставим фон. В итоге ваш кусок фона будет находиться в определенном месте. Всегда.

Link to comment
Share on other sites

  • 0

Selen,

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

Link to comment
Share on other sites

  • 0

да код-то вы увидите, но толку от него. Я вам и на "пальцах" все рассказать смогу.

Есть основной блок header, к нему с помощью позиционирования цепляем псевдоэлемент, в самом ПЭ ставим фон. В итоге ваш кусок фона будет находиться в определенном месте. Всегда.

Попробовал данное решение. С кодом можно ознакомиться здесь http://jsfiddle.net/9zJyy/

Получилось. Но есть два нюанса:

1. Появилась горизонтальная полоса прокрутки. На размер рисунка.

2. При добавлении контента в хедер, кусок фона смещается вниз. В зависимости от количества контента. + Растет высота хедера.

Вторую проблему решил: указанием фиксированной высоты. А смещение вниз - отрицательным значением значения top. А вот как с первой проблемой бороться ? :dash:

psywalker А разве при уменьшении окна рука не заедет под основной блок. Ты ведь предлагаешь ее (руку) сделать бекграундом ?

Link to comment
Share on other sites

  • 0

psywalker А разве при уменьшении окна рука не заедет под основной блок. Ты ведь предлагаешь ее (руку) сделать бекграундом ?

Конечно же нет. Отдельным блоком на абсолюте, прижатым к правому краю. С фоном руки.

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