Резиновый дизайн на Div-ах

Тема в разделе "Веб-дизайн", создана пользователем slavbase, 25 сен 2008.

Статус темы:
Закрыта.
Модераторы: zek24
  1. slavbase

    slavbase Создатель

    Регистр.:
    21 мар 2008
    Сообщения:
    20
    Симпатии:
    29
    [​IMG]
    С помощью таблиц и div-ов без проблем такой дизайн сделать реально, вопрос как сделать без применения таблиц? Подскажите кто знает, ваши ответы могут пригодиться не только мне :ay:

    --------------------------------------------------------
    Все что придумано человеком - достояние всего человечества.
    Делитесь Знаниями - это путь к совершенству...
     
  2. shell

    shell Прохожие

    Не понятно в чем именно проблема.
    Тот же принцип - указать ширину в процентах.

    Или ты хочешь что бы тебе сверстали по твоему рисунку ?
     
  3. HalliK

    HalliK Постоялец

    Регистр.:
    4 фев 2007
    Сообщения:
    117
    Симпатии:
    166
    Тут есть нюансы, дело в том что указать нужно оба дива процентами, тогда проблем не возникнет, но если боковая колонка фиксированная? Как тогда быть? Сам сталкивался с подобным, будет интересно увидеть примеры
     
  4. venetu

    venetu

    Регистр.:
    28 мар 2007
    Сообщения:
    735
    Симпатии:
    261
    Ну вот сходу, например, так:

    Код:
    <style>
    div {border:#333 1px solid;}
    #bleft {width:40px; float:left} 
    #bright {width:40px; float:right; } 
    #big {margin-left:41px; margin-right:41px;} 
    #sidebar {width:200px; float:left;}
    #content { margin-left:201px;}
    #footer {clear:both;}
    </style>
    
    <div id=bleft>g1</div>
    <div id=bright>g2</div>
    <div id=big>
      <div id=top>top</div>
      <div id=sidebar>sidebar</div>
      <div id=content>content </div>
    </div>
    <div id=footer>footer</div>
    
    Только еще придется их пораскрашивать еще, погугли faux columns.



    А лучше сядь и на секундочку подумай, действительно ли нужно на это тратить время?

    "Пока в вилларибо верстают дивами, в виллабаджо уже давным-давно все сверстали на таблицах и шпилят в кваку" (с).

    Реально, будет у тебя там одна таблица, не будет ни одной - никто и не заметит. Ни поисковики, ни "альтернативные ридеры", все это чес для бедных.

    Возьми выдачу гугла по любому слову (не относящемуся к css) и посмотри, как сверстаны сайты из топа.
     
    vadoru, mxa и slavbase нравится это.
  5. olen

    olen Постоялец

    Регистр.:
    30 окт 2007
    Сообщения:
    128
    Симпатии:
    33
    slavbase нравится это.
  6. slavbase

    slavbase Создатель

    Регистр.:
    21 мар 2008
    Сообщения:
    20
    Симпатии:
    29
    Хорошо. Спасибо за пример :-]
    Лучше так:
    Код:
    <html>
    <head>
    <style>
    div {border:#333 1px solid;}
    #bleft {width:40px; height:100%; float:left} 
    #bright {width:40px;height:100%; float:right; } 
    #big {margin-left:41px; margin-right:41px;} 
    #sidebar {width:200px; float:left;}
    #content { margin-left:201px;}
    #footer {clear:both;}
    </style>
    </head>
    <body>
    <div id=bleft>g1</div>
    <div id=bright>g2</div>
    <div id=big>
      <div id=top>top</div>
      <div id=sidebar>sidebar</div>
      <div id=content>content </div>
    </div>
    <div id=footer>footer</div>
    </body>
    </html>
     
  7. slavbase

    slavbase Создатель

    Регистр.:
    21 мар 2008
    Сообщения:
    20
    Симпатии:
    29
    [​IMG]
    Ладно все бы хорошо в коде из топика #4 в этой теме но есть одно но как сделать колонки g1 и g2 резиновыми до footer-а
    вот код:
    Код:
    <html>
    <head>
    <style>
    div {border:#333 1px solid;}
    body { margin:0;}
    #bleft {width:40px; height:100%; float:left} 
    #bright {width:40px;height:100%; float:right; } 
    #big {margin-left:41px; margin-right:41px;height:90%;} 
    #sidebar {width:200px; float:left;}
    #content { margin-left:201px; height:100%;}
    #footer {clear:both;}
    </style>
    </head>
    <body>
    <div id=bleft>g1</div>
    <div id=bright>g2</div>
    <div id=big>
      <div id=top>top</div>
      <div id=sidebar>sidebar</div>
      <div id=content>content <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br></div>
    </div>
    <div id=footer>footer</div>
    </body>
    </html>
     
  8. falc00n

    falc00n Прохожие

    не пойму чем они тебе не резиновые? ты же не будешь их двигать. они в коде резиновые или сделай 100%
     
  9. kotarosan

    kotarosan

    Регистр.:
    29 дек 2007
    Сообщения:
    169
    Симпатии:
    60
    Ты путаешь. Резиновая верстка - это по ширине. Колонки до футера - это высота. Решение, не такое простое, как может показаться.

    _http://www.google.com/search?q=%D0%BF%D1%81%D0%B5%D0%B2%D0%B4%D0%BE+%D0%B2%D1%8B%D1%81%D0%BE%D1%82%D0%B0+%D0%BA%D0%BE%D0%BB%D0%BE%D0%BD%D0%BE%D0%BA+css&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ru:eek:fficial&client=firefox-a
     
  10. venetu

    venetu

    Регистр.:
    28 мар 2007
    Сообщения:
    735
    Симпатии:
    261
    Вот специально для тебя написал: погугли по faux columns

    Выровняет тебе твои колонки по высоте как надо.
     
Статус темы:
Закрыта.