Засунуть один блок под другой

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

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

    Madmess Создатель

    Регистр.:
    18 ноя 2008
    Сообщения:
    29
    Симпатии:
    0
    Есть относительно стандартная блочная верстка
    HTML:
    
    <div id="container"> - фиксированной ширины
      <div id="HEADER"></div>
      2 колонки - меню и основной текст страницы
    </container>
    <div id="FOOTER></div>
    
    Первый вопрос - футер должен быть в блоке контейнера или после него идти? Или это в принципе все равно?
    Плюс после закрытия контейнера у меня идет div со стилем
    .clearfloat {
    clear: both;
    }
    Важно ли ставить его после двух колонок и перед закрытием контейнера или ставить его после контейнера, т.е.
    Первый вариант:
    HTML:
    
    <div id="container"> - фиксированной ширины
    <div id="HEADER"></div>
    2 колонки - меню и основной текст страницы
    <div class="clearfloat"></div>
    </container>
    <div id="FOOTER"></div>
    
    Второй вариант:
    HTML:
    
    <div id="container"> - фиксированной ширины
    <div id="HEADER"></div>
    2 колонки - меню и основной текст страницы
    </container>
    <div class="clearfloat"></div>
    <div id="FOOTER></div>
    
    Ну а теперь основной вопрос - футер у меня широкий и у него фоном стоит картинка, которую надо подсунуть под основной текст.
    Т.е. надо блок футера поднять выше, чтобы он залез под основной блок.
    Т.е. либо под блок container, если он футер идет после его закрытия.
    Или под блок с тектом, если футер находится внутри блока container.
    Смог приподнять блок футер этим, он налез на текст сверху, но я-index'ом я поставил его под текст.
    position: relative;
    bottom: -100px;
    z-index: 1;

    Но при этом возникает проблема, которую я никак не могу устранить.
    После футера появляется пустое место.
    Как его убрать?


    На рисунке - в белой рамке - это футер, который засунулся под текст.
    Салатовый прямоугольник - это то, что надо убрать.
    Т.е. футер надо прижать к низу экрану.
    [​IMG]

    Пробовал всякие варианты из статей типа - прижимаем футер к низу экрана - но это всё не то
     
  2. troop3r

    troop3r Постоялец

    Регистр.:
    14 ноя 2009
    Сообщения:
    138
    Симпатии:
    22
    все равно.

    лучше поставить этот блок после двух колонок.

    bottom: -100px; - убираешь, потом добавляешь стили:

    HTML:
    #container { position: relative; margin-bottom: -100px; z-index: 2; }
    #footer { position: relative; z-index: 1; }
    отступа внизу не будет.
     
  3. Madmess

    Madmess Создатель

    Регистр.:
    18 ноя 2008
    Сообщения:
    29
    Симпатии:
    0
    А это для какого случая?
    Когда футер внутри контейнера или после него?

    Добавлено через 11 минут
    Есть футер идет после контейнера, то нормально отображается только в Opera 10.01 и Chrome

    в IE 8 и Opera 9.24 - футер не заезжает под основной контент сайта, а контент футера поднят на 100px вверх от нижнего края футера

    ---------- Post added at 16:06 ---------- Previous post was at 14:53 ----------

    Очень нужна помощь, готов кто-нибудь помочь в ICQ за небольшое вознаграждение?
     
  4. troop3r

    troop3r Постоялец

    Регистр.:
    14 ноя 2009
    Сообщения:
    138
    Симпатии:
    22
    после него.

    убери clear: both;

    приведи весь код и все стили, видимо у тебя полно ненужного шлака, что-то мешает.
     
  5. Madmess

    Madmess Создатель

    Регистр.:
    18 ноя 2008
    Сообщения:
    29
    Симпатии:
    0
    Сделал немного иначе.
    Футер сделал узким - 75px и фон разрезал на 2 части
    Одну часть засунул в футер, другую в контейнер
    Все получилось, но есть одно НО!
    Когда контента много - всё ок
    А когда мало, футер не прижимается к низу экрана, а улезает вниз на 75px и появляется прокрутка. Хотя если делать без этого фона злополучного, то все нормально сним, прилипает к низу.

    HTML:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
    <head>
      <meta http-equiv="content-type" content="text/html; charset=windows-1251" />
      <meta name="description" content="Эмми.ру - Интернет-магазин готовых комплектов штор, карнизов, аксессуаров для штор." />
      <meta name="keywords" content="шторы, дизайн штор, пошив штор, интернет магазин штор, купить шторы, дизаин штор, рулонные шторы, каталог штор, римские шторы, шторы для кухни, салон штор, модели штор, шторы на кухню, ткани для штор, шторы карнизы, магазин штор, журнал шторы, шторы фото, шторы для ванной, шторы портьеры, шторы тюль, шторы гардины, японские шторы, шторы жалюзи, шторы на заказ, интерьер штор, готовые шторы, эскизы штор, фотогалерея штор, шторы занавески, шитье штор, кухонные шторы, изготовление штор, шьем шторы, фотографии штор, шторы для спальни, образцы штор, шторы в детскую, шторы и карнизы, шторы и жалюзи, шторы для детской комнаты, продажа штор, виды штор, блиц шторы, дизайн штор для кухни, модные шторы, детские шторы, карнизы, карнизы для штор, потолочные карнизы, шторы карнизы, карнизы уют, деревянные карнизы, шторы и карнизы, карнизы металлические, карниз для ванной, алюминиевые карнизы, профильные карнизы, продажа карнизов, интернет магазин карнизы" />
      <link rel="stylesheet" href="style.css" type="text/css" />
      <title>Интернет-магазин готовых штор: купить шторы, пошив штор, ткани для штор. Каталог штор: карнизы, жалюзи, заказ штор, доставка. Салон штор Эмми.ру</title>
      <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
    </head>
    <body>
      <div id="wrapper">
      <div id="container">
        <div id="topadress">143986, г. Железнодорожный, ул. Юбилейная, д.1а<img src="images/spacer.gif" alt="" width="80" height="1" />(495) 748-28-17, (926) 295-63-39</div>
        <div id="header"></div>
        <div id="topmenu">
          <object type="application/x-shockwave-flash" data="images/topmenu.swf" width="940" height="69">
            <param name="allowScriptAccess" value="sameDomain" />
            <param name="movie" value="images/topmenu.swf" />
            <param name="menu" value="false" />
            <param name="quality" value="high" />
            <param name="wmode" value="transparent" />
            <param name="pluginspage" value="http://www.macromedia.com/go/getflashplayer" />
          </object>
        </div>
        <div id="menu"><a href="#">Вызов дизайнера</a><img src="images/emmi_40.png" alt="" width="53" height="5" /><a href="#">Бесплатное изменение размеров готовых комплектов</a><img src="images/emmi_40.png" alt="" width="53" height="5" /><a href="#">5% скидка</a></div>
        <div id="nav">
            <a href="#">Главная</a><br />
            <a href="#">Интернет-магазин</a><br />
            <a href="#">Консультации</a><br />
            <a href="#">Наши услуги</a><br />
            <a href="#">Корзина</a><br />
            <a href="#">Контакты</a><br />
            <a href="#">Полезные статьи</a><br />
            <a href="#">Карта сайта</a><br />
        <div id="banner">
            <a href="#"><img src="images/emmi_14.png" alt="Купить шторы" title="Купить шторы" width="167" height="261" /></a>
        </div>
        </div>
        <div id="content">
          <p class="subcaption">Интернет-магазин готовых штор "Эмми.ру"</p>
          <p>Приветствуем Вас на "Эмми.ру" – сайте специализированного интернет-магазина, где можно купить шторы, карнизы, рулонные шторы-жалюзи, подобрать текстиль, ткани для штор, а также многое другое для оформления окон. Кроме того, салон штор "Эмми.ру" принимает заказы на <a href="http://emmi.ru/html_page.php?id=3" title="Пошив штор любого стиля">пошив штор</a> любого стиля.</p>
          <p class="headline">Каталог штор, карнизов, аксессуаров к ним</p>
          <p>В <a href="http://emmi.ru/html_page.php?id=2" title="Интернет-магазине готовых штор Эмми.ру">интернет-магазине готовых штор</a> можно купить шторы, карнизы, аксессуары для них. Помимо готовых комплектов каталог штор содержит следующие виды товаров:</p>
          <ul>
            <li><a href="http://emmi.ru/catalog.php?id=1" title="Каталог готовых штор">готовые шторы</a> – комплекты штор, разнообразие цветов, стилей, дизайнов,</li>
            <li><a href="http://emmi.ru/catalog.php?id=3" title="Шторы, карнизы">кронштейны, наконечники, карнизы для штор</a> – большой выбор,</li>
            <li><a href="http://emmi.ru/catalog.php?id=2" title="Аксессуары для штор">аксессуары для оформления штор</a>.</li>
          </ul>
          <p class="headline">Дизайн, пошив штор на заказ</p>
          <p><a href="http://emmi.ru/html_page.php?id=5" title="Салон штор Эмми.ру">Салон штор</a> принимает заявки на разработку дизайна и изготовления штор на заказ. Мы располагаем значительной подборкой тканей для штор разнообразных типов. Заказ штор, жалюзи выполняется опытными дизайнерами интерьеров и портными.</p>
          <p>За 9 лет мы накопили большой опыт. Поэтому без труда выполним самые сложные задачи по дизайну, пошиву штор. Будем рады видеть Вас в ряду наших постоянных клиентов, которыми уже являются многие жители Москвы, Подмосковья, а также покупателей нашего интернет-магазина.</p>
          <p><strong>ВНИМАНИЕ!</strong> Теперь наш салон штор так же предлагает квалифицированную помощь специалистов: архитекторов-дизайнеров и художников-дизайнеров! Они помогут превратить в шедевр красоты, удобства, уюта, гармонии помещения любой сложности.</p>
          <p><strong>НОВАЯ УСЛУГА!</strong> Роспись по ткани. <del class="hide"><![CDATA[<noindex>]]></del><a href="http://emmi.ru/html_page.php?id=5" title="Салон штор Эмми.ру" rel="nofollow">Смотрите образцы работ наших дизайнеров</a><del class="hide"><![CDATA[</noindex>]]></del>.</p>
          <p class="headline">Доставка готовых штор</p>
          <p>Доставка готовых штор на дом осуществляется по Москве и Подмосковью. Кроме того, возможна отсылка покупки по почте в любую точку России. <del class="hide"><![CDATA[<noindex>]]></del><a href="http://emmi.ru/html_page.php?id=2" rel="nofollow">Читать далее…</a><del class="hide"><![CDATA[/<noindex>]]></del></p>
          <p>Более подробная информация об интернет-магазине штор, работе салона, услугах и товарах доступна по данным ссылкам:</p>
          <ul>
            <li><del class="hide"><![CDATA[<noindex>]]></del><a href="http://emmi.ru/html_page.php?id=2" rel="nofollow">Интернет-магазин</a><del class="hide"><![CDATA[</noindex>]]></del>,</li>
            <li><del class="hide"><![CDATA[<noindex>]]></del><a href="http://emmi.ru/html_page.php?id=3" rel="nofollow">Наши услуги</a><del class="hide"><![CDATA[</noindex>]]></del>,</li>
            <li><a href="http://emmi.ru/read.php" title="Статьи о дизайне интерьеров">Полезные статьи</a>,</li>
            <li><del class="hide"><![CDATA[<noindex>]]></del><a href="http://emmi.ru/html_page.php?id=5" title="Образцы работ дизайнеров-архитекторов" rel="nofollow">Образцы работ дизайнеров-архитекторов</a><del class="hide"><![CDATA[</noindex>]]></del>,</li>
            <li><a href="http://emmi.ru/html_page.php?id=4" title="Контакты: телефоны, адреса">Контакты</a>.</li>
          </ul>
          <p>В разделе <a href="http://emmi.ru/consul.php" title="Консультации по вопросам дизайна">консультаций</a> любой посетитель сайта может задать интересующие его вопросы, а затем получить профессиональный совет от специалистов салона.</p>
          <div class="thumbnail" style="background: url(http://emmi.ru/img/goods/508.jpg) no-repeat">
            <div class="border"></div>
          </div>
          <div class="thumbnail" style="background: url(http://emmi.ru/img/goods/506.jpg) no-repeat">
            <div class="border"></div>
          </div>
          <div class="thumbnail" style="background: url(http://emmi.ru/img/goods/502.jpg) no-repeat">
            <div class="border"></div>
          </div>
          <div class="thumbnail" style="background: url(http://emmi.ru/img/goods/499.jpg) no-repeat">
            <div class="border"></div>
          </div>
          <div class="thumbnail" style="background: url(http://emmi.ru/img/goods/491.jpg) no-repeat">
            <div class="border"></div>
          </div>
        </div>
      <div class="clearfloat"></div>
      </div> <!-- Закрытие container -->
      </div> <!-- Закрытие wrapper -->
      <div id="footer">
        <div id="counter">
          <del class="hide"><![CDATA[<noindex>]]></del>
            <!--LiveInternet counter--><script type="text/javascript"><!--
            document.write("<a href='http://www.liveinternet.ru/click' "+
            "target=_blank><img src='http://counter.yadro.ru/hit?t14.6;r"+
            escape(document.referrer)+((typeof(screen)=="undefined")?"":
            ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
            screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+
            ";"+Math.random()+
            "' alt='' title='LiveInternet: показано число просмотров за 24"+
            " часа, посетителей за 24 часа и за сегодня' "+
            "border='0' width='88' height='31'><\/a>")
            //--></script><!--/LiveInternet-->
            <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
            <a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Правильный CSS!" /></a>
          <del class="hide"><![CDATA[</noindex>]]></del>
        </div>
        <div id="copyright">
           <p>All right reserved © emmi.ru<br />Разработка сайта: <a href="http://gigo.ru/">gigo.ru</a><br /><a href="mailto:emmi.ru@gmail.com">emmi.ru@gmail.com</a><br /><a href="http://validator.w3.org/check?uri=http://emmi.ru/pages/index.html">XHTML</a> | <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://emmi.ru/pages/style.css">CSS</a></p>
        </div>
      </div>
    </body>
    </html>
    
    Код:
    * {
      margin: 0;
      padding: 0;
      border: 0;
    }
    html {
      height: 100%;
    }
    body {
      height: 100%;
      background: #2B0202 url(images/bg.png) repeat;
      color: #BF9579;
      font-family: Tahoma, Geneva, sans-serif;
    }
    a {
      text-decoration: none;
    }
    #wrapper {
      min-height: 668px;
      background: url(images/emmi_02.png) repeat-x;
      min-height: 100%;        
      height: auto !important;
      height: 100%;
    }
    #container {
      width: 940px;
      background: url(images/emmi_46.png) bottom right no-repeat;
      margin: 0 auto 75px;
      min-height: 100%;
      height: auto !important;
      height: 100%;
    }
    #topadress {
      color: #F5DEA7;
      font-size: 12px;
      text-align: center;
      background: url(images/emmi_04.png) no-repeat;
      height: 24px;
      padding-top: 8px;
    }
    #header {
      background: url(images/emmi_06.png) no-repeat;
      height: 231px;
    }
    #topmenu {
      background: url(images/emmi_07.png) no-repeat;
      height: 69px;
    }
    #menu {
      background: url(images/emmi_08.png) no-repeat;
      height: 20px;
      text-transform: uppercase;
      color: #CBB5B4;
      font-size: 10px;
      text-align: center;
      padding-top: 10px;
    }
    #menu a {
      color: #CBB5B4; 
      text-decoration: none;
    }
    #menu a:hover{
      color: #FFF; 
      text-decoration: none;
    }
    #nav {
      background: url(images/emmi_10.png) no-repeat;
      width: 209px;
      height: 299px;
      color: #9A7721;
      font-size: 14px;
      line-height: 26px;
      float: left;
      padding-top: 16px;
    }
    #nav a {
      color: #B9963E;
      background: url(images/emmi_41.png) no-repeat;
      margin-left: 52px;
      padding-left: 28px;
    }
    #nav a:hover {
      color: #FFCC50;
      background: url(images/emmi_42.png) no-repeat;
    }
    #banner {
      width: 167px;
      height: 261px;
      margin: 60px 0 0 42px;
    }
    #banner a {
      background: none;
      margin: 0;
      padding: 0;
    }
    #banner a:hover {
      background: none;
    }
    #content {
      background: url(images/emmi_11.png) no-repeat;
      width: 731px;
      min-height: 299px;
      float: right;
      padding: 20px 0 75px;
      font-size: 12px;
      line-height: 18px;
    }              
    #content p {
      text-align: justify;
      text-indent: 15px;
      padding: 0 70px 0px 15px;
    } 
    #content .subcaption {
      color: #F5DEA7;
      font-size: 14px;
      font-weight: bold;
      text-indent: 0;
      padding-bottom: 10px;
    }
    #content .headline {
      color: #F5DEA7;
      font-size: 12px;
      font-weight: bold;
      text-indent: 0;
      padding-top: 10px;
    }
    #content .thumbnail {
      width: 120px;
      height: 132px;
      margin: 6px;
      overflow: hidden;
      float: left;
    }
    #content .border {
      width: 120px;
      height: 132px;
      float: left;
      background: url(images/border.png) no-repeat;
    }
    #content ul {
      padding: 0 50px;
      list-style-type: none;
    } 
    #content a {
      color: #F0D4C3;
    } 
    #content a:hover {
      color: #FFF;
      border-bottom: #FFF dotted 1px;
    }
    #footer {
      background: url(images/emmi_45.png) no-repeat;
      width: 940px;
      height: 75px;
      margin: -75px auto 0;
      clear : both;
    }
    #footer p {
      font-size: 11px;
      line-height: 14px;
    }
    #footer #counter {
      float: left;
      padding-left: 300px;
      padding-top: 36px;
    }
    #footer #copyright {
      float: right;
      text-align: right;
      padding-right: 80px;
      padding-top: 16px;
    }
    #footer a {
      color: #F0D4C3;
    } 
    #footer a:hover {
      color: #FFF;
    }
    .clearfloat {
      clear: both;
    }
    .hide {
      display: none;
    }
    
     
  6. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    Я не в курсе как кому, но мне читать подробное описания картинки сложнее чем посмотреть на саму картинку. Можно выложить схематическое изображение того, что тебе нужно? а мы уже скажем как лучше в виде кода изобразить потребованное...
     
  7. Madmess

    Madmess Создатель

    Регистр.:
    18 ноя 2008
    Сообщения:
    29
    Симпатии:
    0
    Пожалуйста

    Вот примерный образец того что надо
    [​IMG]

    Т.е. есть шапка, слева меню, справа контент, внизу футер.
    Но футер высокий и он дожен быть под контентом.
    Т.е. текст который идет в блоке контент налезает на футер.
     
  8. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    HTML:
    <div class="footer"></div>
    <div class="block">
    здесь и хеадер и меню и контент и тд...
    </div>
    Код:
    .footer{position:absolute; bottom:0;}
    .block{position:absolute; top:0;}
    точно не скажу, но по-моему так...
     
  9. omgnull

    omgnull Писатель

    Регистр.:
    21 сен 2009
    Сообщения:
    3
    Симпатии:
    0
    Вообще интересный тег "container", не в этом ли касяк?)
    HTML:
    
    <div id="container">
       <div id="header"></div>
       <div id="content">
          <div id="leftCloumn"></div>
          <div id="mainColumn"></div>
          <div class="clearFloat"></div>
       </div>
       <div id="footer"></div>
    </div>
    
    CSS:
    Код:
    #container{ width:100%; text-align:center } 
    #header{ width:(нужная ширина); height:(нужная высота); text-align:left }
    #content{ width:(нужная ширина); text-align:left }
    #leftCloumn{ width:(нужная ширина); float:left }
    #mainColumn{ width:(нужная ширина); float:left }
    #footer{ width:(нужная ширина);  height:(нужная высота); text-align:left }
    .clearFloat{ clear:both }
    
     
Статус темы:
Закрыта.