Создание сложного шаблона на DIV

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

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

    KPACHODAP DELETED

    Регистр.:
    21 дек 2009
    Сообщения:
    641
    Симпатии:
    111
    Друзья помогите создать сложный шаблона на DIV, а то весь инет облазил не нашёл сложных примеров их создания.

    Вот картинка:
    [​IMG]

    Colum - это колонка для текста
    bg image - Это картинка бакгроунд

    Нужно чтобы шаблон был резиновый и при убирании любой колонки он растягивался если возможно. Дорогие друзья жду помощи! Я думаю пример такой сложности шаблона поможет не только мне для разбора такой проблемы!

    За ранее спасибо!
     
  2. KPACHODAP

    KPACHODAP DELETED

    Регистр.:
    21 дек 2009
    Сообщения:
    641
    Симпатии:
    111
    Это как? можно пример html + css . А то я не силен в этом. За ранее спасибО!

    И как ты думаешь представить колонку 3 которая тянется до конца правого края
    И колонку 12 которая протянулась до конца 8ой

    Также он должен быть резиновый. Помогите за небольшое вознагрождение!
     
  3. whitewolff

    whitewolff Лимонадный Джо :)

    Регистр.:
    29 май 2007
    Сообщения:
    168
    Симпатии:
    33
    ТС, так, на схематическом рисунке, представить себе можно, но код набросать вам врядли кто сможет, т.к. не известно, какие из колонок должны быть фиксироваными, а какие тянуться, если абсолютно все резиновые, то реальные ли пропорции указаны на этой "схеме".
    покажите в ЛС или асю (указана в профиле) дизайн(ну или сюда запостите), помогу если будет свободное время.
     
  4. BlackPawn

    BlackPawn Постоялец

    Регистр.:
    19 мар 2009
    Сообщения:
    75
    Симпатии:
    27
    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>Test</title>
    <style>
    	body { margin:0px; padding:0px; color:#ffffff; font-weight:bold; text-align:center;}
    	#column_01{ width:15%; height:300px; float:left; background:#99FF00;}
    	#column_02{ width:60%; float:right; background:#00FF00; height:30px;}
    	#column_04_a{ width:15%; float:right; background:#00CC66; height:30px;}
    	#column_04_b{ width:100%; background:#00CC66; height:30px;}
    	#column_05{ width:10%; float:right; background:#0099FF; height:30px;}
    	#column_03{ width:85%; float:right; background:#CC0000; height:40px;}
    	#column_06{ width:60%; float:left; background:#9999FF; height:140px; }
    	#column_08{ width:15%; float:right; background:#006666;  height:450px;}
    	#column_09{ width:10%; float:right; background:#0033FF;   height:600px;}
    	#column_07{ width:75%; float:left; background:#66FFFF; height:70px;}
    	#column_10{ width:37%; float:left; background:#CC9900; height:100px;}
    	#column_11{ width:38%; float:left; background:#CCCC33; height:70px;}
    	#column_12{ width:90%; float:right; background:#CC3333; height:40px;}
    	#column_13{ width:50%; float:left; background:#9966CC; height:30px;}
    	#column_14{ width:50%; float:left; background:#993366; height:30px;}
    	#footer{width:100%; clear:both;}
    </style>
    <!--[if lte IE 7]>
    	<style>
    		#column_01, #column_07, #column_10, #column_12 {margin-left:-1px;}
    	</style>
    <![endif]-->
    </head>
    <body>
    	<div id="column_01">&nbsp;01&nbsp;</div>
    	<div id="column_05">&nbsp;05&nbsp;</div>
    	<div id="column_04_a">&nbsp;04 а&nbsp;</div>
    	<div id="column_02">&nbsp;02&nbsp;</div>
    	<div id="column_03">&nbsp;03&nbsp;</div>
    	<div id="column_06">&nbsp;06&nbsp;</div>
    	<div id="column_09">&nbsp;09&nbsp;</div>
    	<div id="column_08">
    		<div id="column_04_b">&nbsp;04 b&nbsp;</div>
    		&nbsp;08&nbsp;
    	</div>
    	<div id="column_07">&nbsp;07&nbsp;</div>
    	<div id="column_10">&nbsp;10&nbsp;</div>
    	<div id="column_11">&nbsp;11&nbsp;</div>
    	<div id="column_12">&nbsp;12&nbsp;</div>
    	<div id="footer">
    		<div id="column_13">&nbsp;13&nbsp;</div>
    		<div id="column_14">&nbsp;14&nbsp;</div>
    	</div>
    </body>
    </html>
    
    PS
    whitewolff, зачем было удалять сообщение с правильным советом?
     
  5. whitewolff

    whitewolff Лимонадный Джо :)

    Регистр.:
    29 май 2007
    Сообщения:
    168
    Симпатии:
    33
     
  6. KPACHODAP

    KPACHODAP DELETED

    Регистр.:
    21 дек 2009
    Сообщения:
    641
    Симпатии:
    111

    А как сделать так чтобы

    body небыл меньше 1005

    1. colum 1 не больше и не меньше:
    height:550px;
    width: 300px;
    2. colum 4a и colum 4b и colum 8 не больше и не меньше:
    width: 200px;
    3. colum 5 и colum 9 не больше и не меньше:
    width: 100px;

    А все остльные были растягивающиеся по 100% ширене. Думаю понятно!

    Жду ответа за ранее спасибо!
     
  7. капрал

    капрал

    Регистр.:
    2 окт 2008
    Сообщения:
    337
    Симпатии:
    45
    Зрите в корень вопроса. Сваять на дивах такой шаблон не проблема. но выравнивать это все чубо как по ширине так и по высоте, при убирании блоков - задача реально жуткая. Javascript тебе в помощь. через css даже с подменой класов выйдет очень нагромажденно.
     
  8. KPACHODAP

    KPACHODAP DELETED

    Регистр.:
    21 дек 2009
    Сообщения:
    641
    Симпатии:
    111
    Капрал, дык помоги если ты в этом разбираешься! За ранее спасибо!
     
  9. BlackPawn

    BlackPawn Постоялец

    Регистр.:
    19 мар 2009
    Сообщения:
    75
    Симпатии:
    27
    Делаешь еще один div - minwidth, ставишь ему
    HTML:
    
    #minwidth{
    width: 100%;
    min-width: 1005px;
    }
    
    Если нужна поддержка в ИЕ<7, то делаешь еще 2 дива: minwidthIE, content
    HTML:
    
    * html .minwidthIE {
    border-left: 1005px solid #fff;
    position: relative;
    float: left;
    z-index: 1;
    }
    * html .conten {
    margin-left: -1005px;
    position: relative;
    float: left;
    z-index: 2;
    }
    
    KPACHODAP, такие условия нужно сразу писать. Это меняет структуру шаблона.
     
  10. magneto

    magneto Прохожие

    KPACHODAP, такие условия нужно сразу писать. Это меняет структуру шаблона.
     
Статус темы:
Закрыта.