Резиновый Шаблон.Помогите...

Резиновый Шаблон.Помогите...

Опции

toorr2p

Topic Starter сообщение

1.12.2008, 2:03; Ответить: toorr2p

Сообщение #1

Бывалый

Группа: User
Сообщений: 388
Регистрация: 14.11.2013
Поблагодарили: 0 раз
Репутация:

3

Создал вот такой шаблон...Но не могу понять как его сделать резиновым, подскажите если не трудно где что изменить? Если что скорректируйте по поводу вопроса?

CODE

<?php defined( '_VALID_MOS' ) or die( '?????? ?????????' ); ?>
<!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" lang="<?php echo _LANGUAGE; ?>" 
xml:lang="<?php echo _LANGUAGE; ?>"
<head>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<?php if ($my->id) { initEditor(); } ?>
<?php mosShowHead(); ?>
<script type="text/javascript"> </script>

<style type="text/css">
#knop1 {
	position:absolute;
	width:181px;
	height:74px;
	left: 59px;
	top: 103px;
}
#help {
	position:absolute;
	width:181px;
	height:64px;
	left: 59px;
	top: 179px;
}
#scrol {
	position:absolute;
	width:547px;
	height:132px;
	left: 288px;
	top: 104px;
}
#flag0 {
	position:absolute;
	width:101px;
	height:14px;
	left: 938px;
	top: 57px;
}
#flag1 {float:left; width:21px; height:14px;}
#flag2 {float:left; width:21px; height:14px;}
#flag3 {float:left; width:21px; height:14px;}
#flag4 {float:left; width:21px; height:14px;}
#reg {
	position:absolute;
	width:144px;
	height:97px;
	left: -54px;
	top: 29px;
}
#serh {
	position:absolute;
	width:191px;
	height:56px;
	left: -54px;
	top: 128px;
}

#podval {
	width: 988; height: 378px; background:#FFFFFF;
	position: relative; top:-202px;}  
#p1 {
	position:absolute;
	float:left;
	width:163px;
	height: 76px;
	left: 55px;
	top: 102px;
}
#p2 {
	position:absolute;
	float:left;
	width:180px;
	height: 76px;
	top:102px;
 	left: 219px;
}
#p3 {
	position:absolute;
	float:left;
	width:241px;
	height: 76px;
	left: 399px;
	top: 102px;
}
#p4 {
	position:absolute;
	float:left;
	width:269px;
	height: 76px;
	left: 641px;
	top: 102px;
}
#p5 {
	position:absolute;
	float:left;
	width:118px;
	height: 76px;
	left: 912px;
	top: 102px;
}	
	
}
#podval1 { top:300px;
	width: 1100; height: 202px; background: #CCCCCC;
	position: relative;
}


#info1 {position: relative;}
#pn1 {float:left;width:470px;height:180px;}
#pn2 {float:left;width:260px;height:180px;}
#pn3 {float:left;width:246px;height:180px;}

#info2 {
	position: absolute;
	height:138px;
	left: 1px;
	width: 988px;
	top: 182px;
}
#pn21 {float:left;width:270px;height:138px;top:180px;}
#pn22 {float:left;width:470px;height:138px;top:180px;}
#pn23 {float:left;width:240;height:138px;top:180px;}

#info3 {
	position:absolute;
	top:354px;
	left: -1px;
	width: 989px;
	height: 25px;
}

#pn31 { float:right; width:60px; height:25px;}
#pn32 { float:right; width:60px;height:25px;}
#pn33 { float:right; width:60px;height:25px;}
#pn34 { float:right; width:60px;height:25px;}
#pn35 { float:right; width:60px;height:25px;}
#pn36 { float:right; width:60px;height:25px;}
#pn37 { float:right; width:60px;height:25px;}
#pn39 { float:right; width:60px;height:25px;}
#pn38 { float:right; width:60px;height:25px;}
#pn310 { float:right; width:60px;height:25px;}

#pslnew {
	position:absolute;
	width:100%;
	height:25px;
	top: 275px;
}
#new1 {
	position:absolute;
	width:100%;
	height:135px;
	left: 66px;
	top: 302px;
}
#new2{
	position:absolute;
	width:100%;
	height:135px;
	left: 66px;
	top: 447px;
}
#new3 {
	position:absolute;
	width:100%;
	height:135;
	left: 66px;
	top: 592px;
}

#nosn1 { float:left; width:50%; height:336px;}
#termin { position:absolute;top:763px;
	float:left;
	left: 69px;
	width:100%;
	height:25px;}
#opis1 {
	position:absolute;
	width:311px;
	height:156px;
	left: 98px;
	top: 816px;
}
#opis2 {
	position:absolute;
	width:231;
	height:156;
	left: 587px;
	top: 815px;
}

#nosn2 { float:left; width:50%; height:336px;}
#sovht {
	position:absolute;
	top:763px;
	float:left;
	left: 468px;
	width:399px;
	height:25px;
}
#foto4 {
	position:absolute;
	width:81px;
	height:115px;
	top:815px;
	float:left;
	left: 504px;
}

#vinf1 {
	position:absolute;
	width:145px;
	height:145px;
	left: 917px;
	top: 470px;
}
#vinf2 {
	position:absolute;
	width:145px;
	height:145px;
	left: 917px;
	top: 616px;
}
#vinf3 {
	position:absolute;
	width:145px;
	height:145px;
	left: 917px;
	top: 324px;
}
#vinf0 {
	position:absolute;
	width:193px;
	height:25px;
	left: 869px;
	top: 276px;
}

#foto1,#foto2,#foto3 { position: relative; width:110px; height:110px; float:left;}
#foto2 }
#foto3 }

#txt1,#txt2,#txt3 { position: relative; width:; height:136px; float:left;}
#txt2 {}
#txt3 {
}
#zag1 { position:fixed; width:100%; height:25px;}
#zag2 { position:fixed; width:100%; height:25px;}
#zag3 { position:fixed; width:100%; height:25px;}



#footer {clear:both;}
</style>
</head>
<body>
<table>
	<table width="1025" border="0" cellspacing="0" cellpadding="0" >
	  <tr>
		<th scope="row">
			<table width="100%" border="0" cellspacing="0" cellpadding="0" height="235"   background="img/verh1.png" align="center">	 /*Это шапка с фоновым рисунком*/
		  <tr>
			<th scope="row" width="251">
				<div id="knop1"></div>
				<div id="help"></div>
			</th>
				<td>
					<div id="scrol"></div>
				</td>
				<td width="249">
						<div id="flag0">
							<div id="flag1"></div>
							<div id="flag2"></div>
							<div id="flag3"></div>
							<div id="flag4"></div>
						<div id="reg"></div>
						<div id="serh"></div>
					  </div>
					</td>
				  </tr>
			</table>
		</th>  /*?????*/
	  </tr>
	  <tr>						  /*menu*/
		<th scope="row">
			<table width="90%" border="0" cellspacing="0" cellpadding="0" align="center">  
				<tr>
					
				</tr>
			</table>
		</th>
	  </tr>
	  <tr> 						 /*osnova*/
		<th scope="row"> 
			<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
				<th width="805" valign="middle" scope="row" align="left">
					<div id="pslnew"></div>
					<div id="new1">
						<div id="foto1"></div>
						<div id="txt1">
							<div id="zag1"></div>
						</div>
					</div>
					<div id="new2">
						<div id="foto2"></div>
						<div id="txt2">
							<div ="zag2"></div>
						</div>
					</div>								  New
					<div id="new3">
						<div id="foto3"></div>
						<div id="txt3">
							<div id="zag3"></div>
						</div>
					</div>
				</th>
				<td width="241" height="489">	/*Videoinform*/
					<div id="vinf1"></div>
					<div id="vinf2"></div>   
					<div id="vinf3"></div>
					<div id="vinf0"></div>
				</td>   
		<tr>
		 <th height="51" valign="top" scope="row">
		 	<div id="nosn1">
		 		<div id="termin"></div>
				<div id="opis1"></div>
		 	</div>
			<div id="nosn2">
				<div id="sovht"></div>
				<div id="foto4"></div>
				<div id="opis2"></div>
				
			</div>
		 </th>
		 <th scope="row"></th>
	   </tr>
	</table>






<table width="1025" align="center" height="588">
	<tr>
		<td height="582" align="center" valign="top">
		
			<div id="podval1">
			<div id="p1"></div>
			<div id="p2"></div>
			<div id="p3"></div>
			<div id="p4"></div>
			<div id="p5"></div>
		</div>
		
		
		<div id="podval">
		
		 <div id="info1" background="img/podval2.gif">
			<div id="pn1"></div>
			<div id="pn2"></div>
			<div id="pn3"></div>
			</div>
		  <!--end of float-->
		<div id="info2">
				<div id="pn21"></div>
				<div id="pn22"></div>
				<div id="pn23"></div>
		</div>
			<div id="info3">
				<div id="pn31"></div>
					<div id="pn32"></div>
					<div id="pn33"></div>
					<div id="pn34"></div>
					<div id="pn35"></div>
					<div id="pn36"></div>
					<div id="pn37"></div>
					<div id="pn38"></div>
					<div id="pn39"></div>
					<div id="pn310"></div>
			</div>
		</div>
		  </td>
		</tr>	
	</table>
</table>
</body>

0

Ответить с цитированием данного сообщения

ZiTosS ZiTosS 1.12.2008, 3:22; Сообщений: 5148 Поблагодарили: 0 раз Репутация: 8 Просмотр профиля	1.12.2008, 3:22; Ответить: ZiTosS Сообщение #2
Ваша совесть Группа: User Сообщений: 5148 Регистрация: 18.2.2008 Из: Нижний Новгород Поблагодарили: 0 раз Репутация: 8	Сразу замечу, что абсолютня блочная вёртска это не дело. Надо верстать относительно, поэтому в вашем случае вариант резиновой вёрстки не получится. Хотя можете попробовать У table главной выставить width="100%" Затем пройтись по всем блокам(div) и сделать замену относительно width будет равен примерно 1025/размер_width_в_px Также надо будет подумать над абсолютным позиционированием Все left, top, right, bottom, margin заменить в процентном соотношении так же как и с блоками. Но вообще такой вариант очень плох... Верстают всегда относительно, я бы сделал так. Делается один общий div 100%-ный, внутри него ещё div как внешние обёртки для частей. Внутри уже этих div'ов, div'ы с float: (left;right;center), Центральный див размером auto, а боковые размером в процентах Вот я отвечал про относительное позиционирование

toorr2p Topic Starter toorr2pTopic Starter 2.12.2008, 3:44; Сообщений: 388 Поблагодарили: 0 раз Репутация: 3 Просмотр профиля	Topic Starter 2.12.2008, 3:44; Ответить: toorr2p Сообщение #3
Бывалый Группа: User Сообщений: 388 Регистрация: 14.11.2013 Поблагодарили: 0 раз Репутация: 3	(ZiTosS @ 1.12.2008, 2:22) Сразу замечу, что абсолютня блочная вёртска это не дело. Надо верстать относительно, поэтому в вашем случае вариант резиновой вёрстки не получится. Хотя можете попробовать У table главной выставить width="100%" Затем пройтись по всем блокам(div) и сделать замену относительно width будет равен примерно 1025/размер_width_в_px Также надо будет подумать над абсолютным позиционированием Все left, top, right, bottom, margin заменить в процентном соотношении так же как и с блоками. Но вообще такой вариант очень плох... Верстают всегда относительно, я бы сделал так. Делается один общий div 100%-ный, внутри него ещё div как внешние обёртки для частей. Внутри уже этих div'ов, div'ы с float: (left;right;center), Центральный див размером auto, а боковые размером в процентах Вот я отвечал про относительное позиционирование Я правильно понял? CODE <!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=iso-8859-1" /> <title>Реклама</title> </head> <style type="text/css"> #main { width:100%; height:auto; background:#CCCC00;} #hider { width:auto; border:solid width:2px; height:250px;} #blok1 { width:300px; border:#FF0066 double; height:200px; background:#FFFFFF; margin-bottom:-20px;} #menu { width:auto; height:25px; background:#CC0066;} #content { width:auto; height:auto;} #height { position:static; float:right; background:#666600; height:980px; width:150px;} #buttom { width:auto; height:100px; border:medium; background:#999999; margin-top:980px;} </style> <body> <div id="main"> <div id="hider"> <div id="blok1"></div> </div> <div id="menu"></div> <div id="content"> <div id="height"></div> </div> <div id="buttom"></div> </div> </body> </html>

ZiTosS ZiTosS 2.12.2008, 21:01; Сообщений: 5148 Поблагодарили: 0 раз Репутация: 8 Просмотр профиля	2.12.2008, 21:01; Ответить: ZiTosS Сообщение #4
Ваша совесть Группа: User Сообщений: 5148 Регистрация: 18.2.2008 Из: Нижний Новгород Поблагодарили: 0 раз Репутация: 8	Вячеслав, нет неправильно, почему у вас width в px Если вы хотите полностью резиновый дизайн, то у вас все блоки, которые не нуждаются в однознавчных размерах должны быть заданы процентно... И если честно... Вы сами верстали дизайн? Или визуальным редактором пользуетесь?

toorr2p Topic Starter toorr2pTopic Starter 2.12.2008, 22:53; Сообщений: 388 Поблагодарили: 0 раз Репутация: 3 Просмотр профиля	Topic Starter 2.12.2008, 22:53; Ответить: toorr2p Сообщение #5
Бывалый Группа: User Сообщений: 388 Регистрация: 14.11.2013 Поблагодарили: 0 раз Репутация: 3	Верстаю в Дриме но вручную, пользуюсь для удобства вставки параметров для тэгов в CSS.

ZiTosS

3.12.2008, 2:09; Ответить: ZiTosS

Сообщение #6

Ваша совесть

Группа: User
Сообщений: 5148
Регистрация: 18.2.2008
Из: Нижний Новгород
Поблагодарили: 0 раз
Репутация:

8

Тогда советую вам почитать по блочной вёрстке. Абсолютное позиционирование это очень плохо... Старайтесь верстать относительно

_http://htmlbook.ru/content/ вот тут интересные статьи по вёрстке. По блочной читать во вкладке "Вёрстка с помощью слоёв"

_http://htmlbook.ru/content/?id=90 Блочная вёрстка - базовые понятия
_http://htmlbook.ru/content/?id=97 Блочная вёрстка - фиксированный дизайн
_http://htmlbook.ru/content/?id=102 Блочная вёрстка - Резиновый дизайн. Двухколонный макет

Если вы почитаете эти статьи, то вы осознаете как делать резиновый дизайн в блочной вёрстке. Так как вы сверстали сайт это не совсем приемлемо, потому что у вас каждый блок спозиционирован абсолютно. Советую переверстать

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой

или обратитесь к любому из модераторов.

« Предыдущая тема · Программная часть · Следующая тема »

1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)

Пользователей: 0

Похожие темы

Тема	Ответов	Автор	Просмотров	Последний ответ
Помогите вспомнить рекламного бота Телеграм для обмена рекламой	0	Mixatraider	722	21.2.2024, 23:42 автор: Mixatraider
Нужно отрисовать шаблон сайта	2	karambas	3652	6.7.2022, 20:27 автор: Freedo
Сколько стоит сделать шаблон для WP? изучаю цены	3	Palundra	2399	2.4.2022, 3:06 автор: WebSuccessful
Установить Wordpress + iBid шаблон	0	wep	4293	23.11.2021, 13:54 автор: wep
Платный продам шаблон wordpress (недорого)	0	sheva7	3749	13.11.2021, 0:39 автор: sheva7