За последние 24 часа нас посетили 17755 программистов и 1621 робот. Сейчас ищут 1862 программиста ...

высота дива

Тема в разделе "HTML и CSS", создана пользователем Шаман, 29 окт 2009.

  1. Шаман

    Шаман Активный пользователь

    С нами с:
    13 июн 2009
    Сообщения:
    67
    Симпатии:
    0
    Адрес:
    СПб
    немогу сделать чтобы основной див менял высоту в зависимости от того сколько в нем элементов.
    вот код
    Код (Text):
    1. <!-- HUT -->
    2. <div style="width:550px; height:28px; background:url(../img/template/header.jpg); margin:auto;">
    3.    <div style="padding:5px 15px;">привет</div>
    4. </div>
    5.  
    6. <!-- MAIN -->
    7. <div style="width:550px; background:url(../img/template/body.jpg); margin:auto;">
    8.    <div style="width:339px; float:left; background-color:#FFFFFF;">
    9.   <div style=" width:339px; height:25px; background:url(../img/template/nav.jpg);">
    10.      <div style="padding:5px 10px;">привет</div>
    11.   </div>
    12.   <div style="padding:5px 10px;">привет</div>
    13.    </div>
    14.    <div style="width:211px; float:left; background:url(../img/template/menu_top.jpg); background-repeat:no-repeat;">
    15.   <div style="padding:5px 10px;">привет</div>
    16.    </div>
    17. </div>
    18.  
    19. <!-- FOOTER -->
    20. <div style="width:550px; height:32px; background:url(../img/template/footer.jpg); margin:auto;">
    21.    <div style="padding:15px 15px;">привет</div>
    22. </div>
    все это добро отображается вот так
    [​IMG]
    а надо вот так
    [​IMG]
    подскажите, что поделать?
     
  2. Simpliest

    Simpliest Активный пользователь

    С нами с:
    24 сен 2009
    Сообщения:
    4.511
    Симпатии:
    2
    Адрес:
    Донецк
    Что-то оно не отображается даже как на 1й картинке :)
    IE
    [​IMG]
    FF & Chrome
    [​IMG]

    HTML:
    1. <style type="text/css">
    2.     div {
    3.         border:1px solid;
    4.     }
    5. <div style="width:550px; height:28px; background:url(../img/template/header.jpg); margin:auto;">
    6.    <div style="padding:5px 15px;">Header</div>
    7. </div>
    8.  
    9. <!-- MAIN -->
    10. <div style="width:550px; background:url(../img/template/body.jpg); margin:auto;">
    11.     <div style="width:339px; float:left; background-color:#FFFFFF;">
    12.         <div style=" width:339px; height:25px; background-color:orange;">
    13.             <div style="padding:5px 10px;">привет</div>
    14.         </div>
    15.         <div style="padding:5px 10px; background-color:fuchsia">привет</div>
    16.     </div>
    17.     <div style="width:211px; float:left; background-color:green; background-repeat:no-repeat;">
    18.         <div style="padding:5px 10px;">привет</div>
    19.    </div>
    20. </div>
    21.  
    22. <!-- FOOTER -->
    23. <div style="width:550px; height:32px; background-color:aqua; margin:auto;">
    24.    <div style="padding:15px 15px;">Footer</div>
    25. </div>
     
  3. Шаман

    Шаман Активный пользователь

    С нами с:
    13 июн 2009
    Сообщения:
    67
    Симпатии:
    0
    Адрес:
    СПб
    именно так и отображается) в пяти разных браузерах при загруженных бэкграундах и такой css'ке
    Код (Text):
    1. body
    2. {
    3. margin:25px;
    4. font-family:Tahoma, Verdana, Arial;
    5. font-size:11px;
    6. color:#8BA1AE;
    7. background-color:#8BA1AE;
    8. }
    и таким доктайпом
    Код (Text):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     
  4. Simpliest

    Simpliest Активный пользователь

    С нами с:
    24 сен 2009
    Сообщения:
    4.511
    Симпатии:
    2
    Адрес:
    Донецк
    Уже лучше - везде одинаково, но футер все-равно уехал вбок от 3х элементов :)

    header

    привет footer
    привет
    привет

    И если я правильно помню :) то бэкграунды не растягивают контейнер вовсе :)

    Ты обрати внимание приветов у тебя 5ть, а на картинках только 4ре :)
    Чего-то ты не договариваешь...

    А касательно выравнивания соседних div по высоте....
     
  5. Шаман

    Шаман Активный пользователь

    С нами с:
    13 июн 2009
    Сообщения:
    67
    Симпатии:
    0
    Адрес:
    СПб
    последний "привет" сливается с фоном на скрине... там типо копирайт должен быть слева от значка xhtml. я реально код из дримвивера прямо копирнул, и мне все выводится как на первом скрине во всех браузерах
     
  6. Simpliest

    Simpliest Активный пользователь

    С нами с:
    24 сен 2009
    Сообщения:
    4.511
    Симпатии:
    2
    Адрес:
    Донецк
    Шаман
    Я понимаю.
    Но у меня выводится как я написал.

    header

    привет footer
    привет
    привет

    Как делать колонки одинаковой высоты - примеров масса. Ссылку я дал.

    Есть даже решения на javascript.
     
  7. Шаман

    Шаман Активный пользователь

    С нами с:
    13 июн 2009
    Сообщения:
    67
    Симпатии:
    0
    Адрес:
    СПб
    ок спасибо