Jump to content
  • 0

позиционирование картинки от правого края


paska
 Share

Question

Всем здрасте.

Задача:

Есть двуколонный шаблон. Слева контент, справа - sideBar. Необходимо разместить картинку отсчитывая справа на 250px влево, т.е. расположить на границе контента и сайдБар, потому как картинка уходить по градиетну влево и будет являть собой границу между левой и провой частью шаблона.

Ширина сайвБар - фиксированная.

Ширина блока для контента - не фиксированная.

		<div id="box">
<div id="head">
<h1>The header is gonna be here</h1>
</div><!--HEAD-->

<div id="wrapper">
<div id="content"><div id="content_box">
The content to be here
</div></div><!--CONTENT-->

<div id="side_bar">
<ul>
<li><a href="#">A first link</a></li>
<li><a href="#">A second link</a></li>
</ul>
</div><!--SIDE_BAR-->

<p class="clear"/>
</div> <!--WRAPPER-->

<div id="footer">
<h2>Here will be some footer information</h2>
</div><!--FOOTER-->

</div><!--BOX-->

Можно поставить картинку в фон элемента <div id="content_box"> и спозиционировать ее справа, но тогда если контент будет меньше по высоте чем sideBar - то картинка будет не на всю высоту и на оборот, что не по задумманому сценарию. Что бы она была на все высоту, ее надо ставить в фон к элементам <div id="wrapper"> или <div id="content"> и было бы замечательно, если бы можно было сделать что вроде:

"позиция: справа - 250px".

Всем заранее СПС.

п.с. добавил бы архивчик, но не нашел управления файлами.

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0

Увы, задать "в лоб" фиксированный отступ фоновой картинки от правого края в CSS2.1 невозможно. Самое тривиальное решение - добавить эти 250px самой картинке (в виде белого поля справа), в PNG это не сильно скажется на размере файла. Альтернатива посложнее - сделать общую обертку шириной с левую колонку, а сайдбару визуально вынести из него наружу отрицательным маргином (на всю его ширину).

Link to comment
Share on other sites

  • 0
Увы, задать "в лоб" фиксированный отступ фоновой картинки от правого края в CSS2.1 невозможно. Самое тривиальное решение - добавить эти 250px самой картинке (в виде белого поля справа), в PNG это не сильно скажется на размере файла. Альтернатива посложнее - сделать общую обертку шириной с левую колонку, а сайдбару визуально вынести из него наружу отрицательным маргином (на всю его ширину).

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

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