Помогите с вёрсткой

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

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

    able

    Регистр.:
    5 апр 2008
    Сообщения:
    226
    Симпатии:
    66
    Всем привет!

    Верстаю блочно :)

    В общем задача такая -- посередине есть некий объект, он занимает большую часть экрана. Но если ширина экрана больше, чем ширина объекта, то по бокам надо добавлять бэкграунд (справа и слева -- разный).

    Т.е. примерно так:

    ____________
    |..|.............|.|
    |1| .....2.....|3|
    |_|________|_|

    2 - объект, а 1 и 3 -- это поля, которые автоматически появляются при большой ширине экрана и заполняют пустоты какой-либо картинкой/бэкграундом.

    Кто поможет?
     
  2. xtorer

    xtorer Создатель

    Регистр.:
    1 апр 2009
    Сообщения:
    33
    Симпатии:
    2
    сделай вложенность из 2ух элементов (div или table). Первый это все пространство с полями - там выставляешь в стиле background="нужный_файл", а вложенный элемент делашь без конкретно заданного размера с выравниванием по центру
     
  3. able

    able

    Регистр.:
    5 апр 2008
    Сообщения:
    226
    Симпатии:
    66
    Я так и хотел, но мне необходимы справа и слева разные бекграунды..
     
  4. BlackPawn

    BlackPawn Постоялец

    Регистр.:
    19 мар 2009
    Сообщения:
    75
    Симпатии:
    27
    Сделай три вложенных дива. А позицию бэкграунда для первого и второго дива можно задать в css, что бы они не перекрывали друг друга.
     
  5. dralex

    dralex Постоялец

    Регистр.:
    13 июн 2008
    Сообщения:
    77
    Симпатии:
    18
    Z-index !
    сначала верстаем два дива с z-index=1
    первый див - влоат лефт, второй див флоат райт
    заполняем дивы картинками любым способом
    потом верстаем ещё один див с z-index=2 который будет служит ьврапером для основного контента, этот врапер и будет по середине всегда в него же и помещаем весь контент

    таким способом можно сделать на любую ширину растягивание!
    получается что два дива на первом слое которые слева и справа держаться и ещё один основной див на втором слое который содержит весь контент !
    [​IMG]
    если нужен рабочий пример - пишите, накатаю !
     
    alextet и able нравится это.
  6. able

    able

    Регистр.:
    5 апр 2008
    Сообщения:
    226
    Симпатии:
    66
    dralex, я сделал вот так:

    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=windows-1251" />
    <title></title>
    <style type="text/css">
    <!--
    body {
    	margin: 0px;
    }
    
    #leftbg {
    	float: left;
    	background: #000000;
    	z-index: 1;
    	width: 50%;
    	height: 910px;
    	position: relative;
    }
    
    #rightbg {
    	float: right;
    	background: #CCCCCC;
    	z-index: 1;
    	width: 50%;
    	height: 910px;
    	position: relative;
    	top: -1820px;
    }
    #center {
    	margin: 0 auto;
    	width: 1200px;
    	top: 0px;
    	position: relative;
    	top: -455px;
    	z-index: 2;
    }
    
    -->
    </style></head>
    
    <body>
    <script type="text/javascript" src="js/swfobject.js"></script>
    <div id="leftbg">1</div>
    <div id="center">Требуется Flash-player.</div>
    <div id="rightbg">1</div>
    
    <script type="text/javascript">
      var so = new SWFObject("flash/center.swf","center","1200","910","7","#ffffff");
      so.write("center");
    </script>
    
    </body>
    </html>
    
    всё работает, но появляются длинные вертикальный скроллбары длинной в 2000пикселей.

    правильно ли это? и как сделать лучше?
     
  7. BlackPawn

    BlackPawn Постоялец

    Регистр.:
    19 мар 2009
    Сообщения:
    75
    Симпатии:
    27
    Зачем нужно ставить top: -1820px;?
    Из-за него и появляется вертикальный скролл.
     
  8. Dewars

    Dewars Создатель

    Регистр.:
    14 мар 2009
    Сообщения:
    25
    Симпатии:
    1
    делается примерно так

    <div style="overflow: hidden;">
    <div style="position: relative; width: 500px;">
    текст
    <div style="position: absolute; left: -100px; top: 0; width: 100px; height: 50px; background: #ccc;">картинка слева</div>
    <div style="position: absolute; right: -100px; top: 0; width: 100px; height: 50px; background: #ddd;">картинка справа</div>
    </div>
    </div>

    в таком случае мин. ширина экрана будет = 500px, а все остальное будет обрезаться, боковые картинки в том числе (на больших разрешениях они будут видимыми).
     
  9. dralex

    dralex Постоялец

    Регистр.:
    13 июн 2008
    Сообщения:
    77
    Симпатии:
    18
    Dewars выдал отличное решение =) вот только кажется мне, что будет проблема в IE6, ждем результатов )
     
  10. able

    able

    Регистр.:
    5 апр 2008
    Сообщения:
    226
    Симпатии:
    66
    Иначе этот див внизу на 1820рх находится.

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