Jump to content
  • 0

Приклеить img в sidebar внизу сайта


gasyoun
 Share

Question

В WordPress нужно приклеить снизу в боковой панели картинку CSS-ом. Не внизу окна браузера (как, например, http://www.cssstickyfooter.com/ или http://twitter.github.io/bootstrap/examples/sticky-footer.html или http://timothy-long.com/examples/responsive-sticky-footer/), а внизу самой страницы. Страница длинная, с прокруткой, и пока не докручу, картинку сбоку внизу не увижу.

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

Link to comment
Share on other sites

12 answers to this question

Recommended Posts

  • 0

Так пусть футер просто идет в потоке. Если контента больше области просмотра, футер всегда будет автоматически прижиматься к низу. Вы бы показали макет или ссылку дали. Тогда можно было точно сказать что делать в Вашем случае.

Link to comment
Share on other sites

  • 0

Так пусть футер просто идет в потоке. Если контента больше области просмотра, футер всегда будет автоматически прижиматься к низу.

Футер и так идет в потоке, но в футере будет другая картинка, с ней проблем нет, она будет прижата к низу, тут элементарно.

Вы бы показали макет или ссылку дали.

http://is.gd/ovXHGN - сайт.

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


<div style="position: absolute bottom;">
<img src="http://img195.imageshack.us/img195/2160/pilot27.gif" alt="Пилот"/></div>

Заранее спасибо.

Link to comment
Share on other sites

  • 0

Футер как я понял это параграф внизу с координатами мастерской. Для начала нужно создать <footer> или <div class="footer">, поместить туда параграф и изображение. Изображению добавить float:right; Футеру overflow:hidden; Параграфу ширину и отступ слева. Ну и дальше смотреть как все будет становиться.

Link to comment
Share on other sites

  • 0

Не, не, нельзя картинку (мальчика) всунуть в футер. Координаты мастерской иначе растянутся.

Мальчика нужно имеенно исходя из sidebar, в футер он своим ростом будет раздвигать то,

что ему не положено. Если бы можно было в футер небольшую картинку - таки да.

Но картинка парня высокая, и соответсвенно, только в боковую панель. Не могу его от

стрекозы отлепить, ну и черезе 20 br-ов совсем не кошерно, да ведь не надежно.

Link to comment
Share on other sites

  • 0

Засуньте футер под основной контент с помощью отрицательного отступа. Параграф также отодвинете с помощью отступа. Чтобы было кошерно нужно всю верстку переделать и будет Вам Ган-Эден

Link to comment
Share on other sites

  • 0

попробуйте так:

Если я правильно понял


<div style="position:relative;">
<div style="position: absolute; right:0; bottom:0;">
<img src="http://img195.imageshack.us/img195/2160/pilot27.gif" alt="Пилот"/>
</div></div>

Чувак ушел вверх, а не вниз :) Видно на сайте.

Link to comment
Share on other sites

  • 0

Переместите чувака в container (и container {position: relative}). Ну и потом с помощью абсолютного позиционирования подвигаете его.

Ваша мысль мне, увы, не понятна. Вот весь код

http://pastebin.com/nqnMZ7z1

Чувак уже так внутри id="container", то есть внутри 2 дивов. 3-й добавить? Не совсем Вас понял. Теперь ноги чувака расположены там, где его голова была раньше. Видимо к этому я его принудил, прописав код Ольги. Что дальше? :blink:

Edited by gasyoun
Link to comment
Share on other sites

  • 0

Код я видел через Firebug. Положение координат абсолютно позиционированного элемента отсчитывается от ближайшего предка которому задано позиционирование отличное от static. Так вот, Вы хотите чтобы паренек располагался внизу страницы. У Вас есть обертка (#container) которая задает ширину всего содержимого сайта. Получается Вам нужно разместить парня в нижнем правом углу. Для этого необходимо изображение переместить в #container, чтобы последний стал его родителем(один уровень вложенности). Теперь задаем position:relative для #container (этим самым задаем начало отсчета для всех позиционированных дочерних элементов), затем для изображения мальчика задаем


position: absolute;
bottom: 0;
right: 0;

Этим мы расположим изображение в нижнем правом углу #container'а что нам и требовалось. Профит!

P.S. Возможно Вам нужно будет изменить значения bottom и right чтобы выровнять изображение как Вам нужно

Link to comment
Share on other sites

  • 0

попробуйте так:

Если я правильно понял


<div style="position:relative;">
<div style="position: absolute; right:0; bottom:0;">
<img src="http://img195.imageshack.us/img195/2160/pilot27.gif" alt="Пилот"/>
</div></div>

Чувак ушел вверх, а не вниз :) Видно на сайте.

Не совсем верно поняли:



<div class=" span13 offset3" role="main" style="position:relative">

<!-- здесь есть еще другой див: leftcontainer, aside.span4, а затем идет ваш див с картинкой -->

<div>
<div style="position: absolute; right:0; bottom:0;">
<img src="http://img195.imageshack.us/img195/2160/pilot27.gif" alt="Пилот"/>
</div>
</div>
</div>

Т.е. относительное позиционирование нужно назначить не первому родителю дива с картинкой, его не трогаем, а тому, у которого класс offset3

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

  • Similar Content

    • By pryanya.darrrya
      Здравствуйте ! 
      Нужна ваша помощь . Не знаю как сделать такой стиль для меню ( отметила стрелочками на фотографии)
      Нужен стиль элементов меню   , вертикальной линии с маркерами как на фото . Буду рада любой помощи.

    • By Jericho
      Начал учить HTML для себя. Проблема в том, что сделал заголовок и таблицу, но, нужно чтобы текст был внизу таблицы. Сделал для этого подвал, но что-то не работает, все равно текст выше таблицы.
      —————--
       

      <!DOCTYPE html>
      <HTML>
      <HEAD>
          <meta charset="utf-8">
      <TITLE>Главная страница</TITLE>
      </HEAD>
      <BODY>
       <header>
          <H1> <center>Текст Заголовка ...</center> </H1>
      </header>
      <center>  
      <table border="100">
         <tr>
          <th>№</th>
          <th>Текст</th>
          <th>Текст</th>
          <th>Текст</th>
          <th>Время</th>
          <th>Текст</th>
         </tr> 
         <tr>
      <tr>
          <td>1.</td>
          <td>Текст</td><td>Текст</td><td>ОКР</td><td>17.20.34 - 18.07.2020</td><td>    </td>
      <tr>
          <td>2.</td>
          <td>    </td><td>    </td><td>    </td><td>    </td><td>    </td>
      <tr>
          <td>3.</td>
          <td>    </td><td>    </td><td>    </td><td>    </td><td>    </td>
      <tr>
          <td>4.</td>
          <td>    </td><td>    </td><td>    </td><td>    </td><td>    </td>
      <tr>
          <td>5.</td>
          <td>    </td><td>    </td><td>    </td><td>    </td><td>    </td>
      <tr>
          <td>6.</td>
          <td>    </td><td>    </td><td>    </td><td>    </td><td>    </td>
      <tr>
          <td>7.</td>
          <td>    </td><td>    </td><td>    </td><td>    </td><td>    </td>
        </tr>
      </center>
       </BODY>
        <footer>
         Тексdт
        </footer>
      </HTML>
    • By marriavass
      Помогите, пожалуйста, понять как разместить footer поверх map.  Я начинающий верстальщик и не могу понять как решить данную задачу.  Я пробовала с отрицательным margin-top для footer, тогда он залазит на div и в Chrome и Safari все отлично, но Firefox все съезжает.
      <main>
      /*много других тегов*/
        <section class="modal-map">
      /*форма*/
           <div>  <iframe src="https://www.google.com></iframe> </div>
         </section>
      </main>
        <footer>     
       </footer>
        
    • By serzh82saratov
      Всем привет! Я тут новичок, не пинайте сразу если что.
      Требуется аналог position sticky для IE (в режиме совместимости с 7).
      Надо чтобы в одну строку текст с кнопками и с пунктирной линией проходящей под ними посередине в любой ситуации прилипал к левой и правой границе окна, то есть чтобы не участвовал в горизонтальной прокрутке, но прокручивался вертикально. Также при растягивании окна, текст за которым следуют кнопки находились слева на 20%.

      То есть если сдвинуть скролл, строка с красной полоской должна остатся на месте, если растянуть окно, то красная полоса растягивается, "( Title )" немного сдвигается вправо.
      Надеюсь более менее объяснил, заранее спасибо.
      Забыл сказать, таких линий на форме 10 - 20 штук.
    • By iBars
      На сайте есть главное меню (где полоса поиска по сайту) и оно должно прилипать к экрану при прокрутке страницы. В HTML-файле на компьютере это работает, но на хостинге перестает, хотя это просто вёрстка.
      HTML:
      ... <body> <div class="box box-top sticky"> <div class="container"> <div class="menu_main"> ... </div> </div> </div> </body> ...  
      CSS:
      .sticky { position: sticky; top: 0; z-index: 11000; }  
×
×
  • 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