Позиционирование объекта

Тема в разделе "Веб-дизайн", создана пользователем yeaahhh, 11 фев 2011.

Модераторы: zek24
  1. yeaahhh

    yeaahhh

    Регистр.:
    8 май 2008
    Сообщения:
    278
    Симпатии:
    11
    Ребят, подскажите, пожалуйста.
    Какие стили задать объекту <div>sdfsf</div>, чтобы он всегда был впритык к нижнему краю браузера?

    К примеру, mail-агент в почте mail.ru..
    Вообщем своего рода пейджер, который находится всегда снизу браузера..
    Заранее спасибо.
     
  2. UDAV

    UDAV

    Регистр.:
    22 июн 2007
    Сообщения:
    780
    Симпатии:
    153
    Код:
    <div style="position: fixed; bottom: 0; right: 0;">sdfsf</div>
     
    yeaahhh нравится это.
  3. bork75

    bork75 Д☼брая собака )

    Регистр.:
    21 июн 2008
    Сообщения:
    1.449
    Симпатии:
    716
    HTML:
    <style> 
    body{
    background: url('1px.gif') no-repeat fixed; 
    }
    .fixed {  
    position: fixed; bottom: 0px; left: 0px; // position: absolute; bottom: expression( eval(document.body.scrollTop) + "px");}
    </style>
    
    <div class="fixed"> Тут что угодно</div>
    
          
    
    background: url('1px.gif') no-repeat fixed; - это для плавности в ie
     
    yeaahhh нравится это.
  4. SUVEREN

    SUVEREN

    Регистр.:
    13 фев 2008
    Сообщения:
    360
    Симпатии:
    175
    Помогите пожалуйста, как сверстать такую штуку.

    div1 слой фиксированный по ширине, а по высоте зависит от высоты див2

    div2 Слой фиксированной высоты и ширины, (там картинка будет стоять)

    div3 должен быть или привязан к низу див1 (там текст будет, и он должен быть на одной линии с картинкой)


    Заранее спасибо, ничего не получается блин :(.
     

    Вложения:

    • div.jpg
      div.jpg
      Размер файла:
      9,2 КБ
      Просмотров:
      6
  5. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.130
    Симпатии:
    668
    высота слоя 3 известна?
     
    SUVEREN нравится это.
  6. Kub

    Kub

    Регистр.:
    5 июн 2009
    Сообщения:
    612
    Симпатии:
    477
    Как то так

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    * {
    	margin: 0px;
    	padding: 0px;
    }
    .wrap {
    	background: #F66;
    	width: 700px;
    	margin-right: auto;
    	margin-left: auto;
    	position: relative;
    	padding: 10px;
    }
    .img {
    	background: #3F9;
    	height: 280px;
    	width: 280px;
    }
    .txt {
    	background: #0CF;
    	width: 400px;
    	position: absolute;
    	bottom: 10px;
    	right: 10px;
    }
    </style>
    </head>
    <body>
    <div class="wrap">
      <div class="img"></div>
      <div class="txt">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus.</div>
    </div>
    </body>
    </html>
    
    
     
    SUVEREN нравится это.
  7. puma.mcqueen

    puma.mcqueen Создатель

    Регистр.:
    15 июл 2009
    Сообщения:
    14
    Симпатии:
    6
    Вот полезная ссылка на будущее с вариантами построения блоков на странице. Сам постоянно пользуюсь.

    http://blog.html.it/layoutgala/
     
    bork75 нравится это.