Как сделать ? Верстка div

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

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

    Muntik

    Регистр.:
    3 июн 2008
    Сообщения:
    451
    Симпатии:
    87
    [​IMG]

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

    Прошу тему не удалять и не закрывать.
    Пустые сообшения потипу "о еще один" не писать.
     

    Вложения:

    • div.jpg
      div.jpg
      Размер файла:
      36,8 КБ
      Просмотров:
      146
  2. ashotik

    ashotik

    Регистр.:
    7 авг 2008
    Сообщения:
    176
    Симпатии:
    20
    Напиши какой цвет как должен тянуться.
     
  3. funest

    funest Постоялец

    Регистр.:
    2 июл 2007
    Сообщения:
    145
    Симпатии:
    38
    css:
    Код:
    #header {
    	width:100%;
    }
    #top_l {
    	background: #00CCCC;
    	width:20%;
    	height:200px;
    	float:left;
    }
    #menu {
    	background: #3399CC;
    	width:80%;
    	height:50px;
    	float:right;
    }
    #top_r {
    	background: #333;
    	width:80%;
    	height:150px;
    	float:right;
    }
    #body {
    	clear:both;
    }
    #left {
    	background:#CC3366;
    	width:17%;
    	height:600px;
    	float:left;
    }
    #main {
    	background:#000099;
    	width:83%;
    	height:600px;
    	float:right;
    }
    #footer {
    	background:#000000;
    	clear:both;
    }
    
    div:
    Код:
    <div id="header">
    	<div id="top_l">&nbsp;</div>
        <div id="menu">&nbsp;</div>
        <div id="top_r">&nbsp;</div>    
    </div>
    <div id="body">
    	<div id="left">&nbsp;</div>
        <div id="main">&nbsp;</div>
    </div>
    <div id="footer">&nbsp;</div>
    
     
    latteo, IgVan и Muntik нравится это.
  4. funest

    funest Постоялец

    Регистр.:
    2 июл 2007
    Сообщения:
    145
    Симпатии:
    38
    Помог в "подробностях" :bk: Можно и не копировать код - написать самому. Суть проста, выравнивание слоев по сторонам, для чего и служит свойство float. А для того чтобы сделать размер нижних столбцов отличным от верхних, убираем свойство float при помощи другого свойства -- clear, которое применям к следующему слою, значение both в данном случае означает отмену выравниваний с какой-либо стороны.
     
    Muntik нравится это.
  5. bumbu

    bumbu

    Регистр.:
    17 окт 2007
    Сообщения:
    233
    Симпатии:
    28
    это хорошо если ширина везде нужна в процентах, а если один блок имеет фиксированую ширину?
    тогда на помощь приходят они...
    собственно ссылка _http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm

    тут показаны живые примеры создания разных комбинаций фиксированных и не фиксированных блоков.

    также по посту что написал funset - нужно проверить в ие6 если не будет вредничять, если будет то у меня както такаяже проблема решилась когда я задал для ие6 ширину левого блока не 70% а 69.999% если у нас правый был в 30%(специальные стили ток для ие6 задаются так width:70%!important;width:69,999%; тут просто после ввода данных нужного класса дописываем ещё !important и ещё раз пишем наш класс, который уже будет прочитан ток ие6)
     
  6. lifediz

    lifediz Yii Framework developer

    Регистр.:
    7 июн 2008
    Сообщения:
    385
    Симпатии:
    507
    хм...меня тоже заинтересовало!
    Как сделать в один div засунуть 4 картинки? и как бэкграунд прописать? для этого же div.
     
  7. funest

    funest Постоялец

    Регистр.:
    2 июл 2007
    Сообщения:
    145
    Симпатии:
    38
    А что мешает использовать несколько слоев, или слой с вложенной таблицей? Засунуть несколько картинок в один слой вообще не проблема, другое дело как эти картинки должны располагаться...
    Применить фон к div?! ну это уж вообще :eek:
     
  8. lifediz

    lifediz Yii Framework developer

    Регистр.:
    7 июн 2008
    Сообщения:
    385
    Симпатии:
    507
    идут так:
    1,2,3,4(она должна тянутся),5;
    ниже слой почти также..
    как это сделать?
     
  9. funest

    funest Постоялец

    Регистр.:
    2 июл 2007
    Сообщения:
    145
    Симпатии:
    38
    Ну можно ведь применить такую конструкцию:
    Код:
    <div id=main>
      <div id=pic1><img></div>
      <div id=pic2><img></div>
      <div id=pic3><img></div>
      <div id=pic4>&nbsp;</div>
      <div id=pic5><img></div>
    </div>
    
    css выглядит приблизительно так:
    Код:
    #main {
     background: url_pic;
     width:100%;
    }
    #pic1, #pic2, #pic3, #pic5 {
     width:...;
     height:...;
    }
    #pic4 {
     background: url_pic;
     width:50%;
     height:..;
    }
    
    вместо &nbsp; я ставлю 1px gif с прозрачностью.

    Возможно код и не подойдет, я себе не визуализировал задачу и не совсем понял ее требования )))

    Добавлено через 2 минуты
    А если картинки 1 2 3 4 5 идут каждая с новой строки, можно двумя дивами обойтись:
    Код:
    <div>
      <img><br />
      <img><br />
      <img><br />
      <div><img></div>
      <img><br />
    </div>
    
     
    lifediz нравится это.
Статус темы:
Закрыта.