Перейти к содержимому

Сервис обмена электронных валют

Партнерская программа Kredov

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

#1 Вячеслав

Вячеслав
  • Пользователь
  • 357 сообщений
  • Репутация: 0
0

Отправлено 01 Декабрь 2008 - 01:03

Создал вот такой шаблон...Но не могу понять как его сделать резиновым, подскажите если не трудно где что изменить? Если что скорректируйте по поводу вопроса?
[codebox]<?php defined( '_VALID_MOS' ) or die( '?????? ?????????' ); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR...nsitional.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>[/codebox]

 

 

  • 0

#2 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 01 Декабрь 2008 - 02:22

Сразу замечу, что абсолютня блочная вёртска это не дело. Надо верстать относительно, поэтому в вашем случае вариант резиновой вёрстки не получится. Хотя можете попробовать
У table главной выставить width="100%"
Затем пройтись по всем блокам(div) и сделать замену относительно width будет равен примерно 1025/размер_width_в_px
Также надо будет подумать над абсолютным позиционированием
Все left, top, right, bottom, margin заменить в процентном соотношении так же как и с блоками.

Но вообще такой вариант очень плох... Верстают всегда относительно, я бы сделал так. Делается один общий div 100%-ный, внутри него ещё div как внешние обёртки для частей. Внутри уже этих div'ов, div'ы с float: (left;right;center), Центральный див размером auto, а боковые размером в процентах

Вот я отвечал про относительное позиционирование
  • 0

#3 Вячеслав

Вячеслав
    Topic Starter
  • Пользователь
  • 357 сообщений
  • Репутация: 0

Отправлено 02 Декабрь 2008 - 02:44

Сразу замечу, что абсолютня блочная вёртска это не дело. Надо верстать относительно, поэтому в вашем случае вариант резиновой вёрстки не получится. Хотя можете попробовать
У table главной выставить width="100%"
Затем пройтись по всем блокам(div) и сделать замену относительно width будет равен примерно 1025/размер_width_в_px
Также надо будет подумать над абсолютным позиционированием
Все left, top, right, bottom, margin заменить в процентном соотношении так же как и с блоками.

Но вообще такой вариант очень плох... Верстают всегда относительно, я бы сделал так. Делается один общий div 100%-ный, внутри него ещё div как внешние обёртки для частей. Внутри уже этих div'ов, div'ы с float: (left;right;center), Центральный див размером auto, а боковые размером в процентах

Вот я отвечал про относительное позиционирование






Я правильно понял?

<!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>

  • 0

#4 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 02 Декабрь 2008 - 20:01

Вячеслав, нет неправильно, почему у вас width в px Если вы хотите полностью резиновый дизайн, то у вас все блоки, которые не нуждаются в однознавчных размерах должны быть заданы процентно...

И если честно... Вы сами верстали дизайн? Или визуальным редактором пользуетесь?
  • 0

#5 Вячеслав

Вячеслав
    Topic Starter
  • Пользователь
  • 357 сообщений
  • Репутация: 0

Отправлено 02 Декабрь 2008 - 21:53

Верстаю в Дриме но вручную, пользуюсь для удобства вставки параметров для тэгов в CSS.
  • 0

#6 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 03 Декабрь 2008 - 01:09

Тогда советую вам почитать по блочной вёрстке. Абсолютное позиционирование это очень плохо... Старайтесь верстать относительно ;)
_http://htmlbook.ru/content/ вот тут интересные статьи по вёрстке. По блочной читать во вкладке "Вёрстка с помощью слоёв"

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

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


Оформление форума – IPBSkins.ru