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

Статус
В этой теме нельзя размещать новые ответы.
KPACHODAP

KPACHODAP

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

Вот картинка:
help-create.jpg


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

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

За ранее спасибо!
 
Это как? можно пример html + css . А то я не силен в этом. За ранее спасибО!

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

Также он должен быть резиновый. Помогите за небольшое вознагрождение!
 
ТС, так, на схематическом рисунке, представить себе можно, но код набросать вам врядли кто сможет, т.к. не известно, какие из колонок должны быть фиксироваными, а какие тянуться, если абсолютно все резиновые, то реальные ли пропорции указаны на этой "схеме".
покажите в ЛС или асю (указана в профиле) дизайн(ну или сюда запостите), помогу если будет свободное время.
 
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, зачем было удалять сообщение с правильным советом?
 
BlackPawn написал(а):
HTML: 
[B]whitewolff[/B], зачем было удалять сообщение с правильным советом?[/QUOTE]
какой он нафиг правильный блин? человек нарисовал необходимую структуру, а ты каким-то телепатическим образом узнал что ему надо его структуру упростить.
это похоже на одну хохму примерно такого содержания:
[QUOTE]Пользователь: "Мне нужна бронзовая статуя русалки!"
Linux: "Вот вам бронзовый куб 1×1x1 м и напильник"
Gentoo: "Вот вам медь, олово, доменная печь"
FreeBSD: "Вот вам кирка и каска с фонариком. Шахта с медью – в той стороне"
Ubuntu: "Вот вам статуя русалки"
Пользователь: "Но здесь же только хвост!"
Ubuntu: "Введите, пожалуйста apt-get install туловище русалки, apt-get install голова русалки, apt-get install руки русалки…"
MacOS: "Вот вам красивые голые девчонки"
Пользователь: "Ух ты! А можно потрогать?"
MacOS: "Заплатите 200 евро и активируйте функцию "Потрогать голых девчонок"
[B]Windows: "Нет. Я думаю – Вам определенно нужна чугунная статуя Чапаева…"[/B][/QUOTE]
Нажмите для раскрытия...
 
BlackPawn написал(а):
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, зачем было удалять сообщение с правильным советом?
Нажмите для раскрытия...


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

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% ширене. Думаю понятно!

Жду ответа за ранее спасибо!
 
KPACHODAP написал(а):
Нужно чтобы шаблон был резиновый и при убирании любой колонки он растягивался если возможно.
Нажмите для раскрытия...

Зрите в корень вопроса. Сваять на дивах такой шаблон не проблема. но выравнивать это все чубо как по ширине так и по высоте, при убирании блоков - задача реально жуткая. Javascript тебе в помощь. через css даже с подменой класов выйдет очень нагромажденно.
 
Капрал, дык помоги если ты в этом разбираешься! За ранее спасибо!
 
KPACHODAP написал(а):
А как сделать так чтобы
body небыл меньше 1005
Нажмите для раскрытия...

Делаешь еще один 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 написал(а):
1. colum 1 не больше и не меньше:
...
А все остльные были растягивающиеся по 100% ширене. Думаю понятно!
Нажмите для раскрытия...
KPACHODAP, такие условия нужно сразу писать. Это меняет структуру шаблона.
 
KPACHODAP, такие условия нужно сразу писать. Это меняет структуру шаблона.
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху