Помогите сделать резиновый шаблон

Soniclord · February 14, 2008

Уважаемы специалисты!

У меня есть шаблон "статичной" страницы, а мне просто необходимо сделать "резиновый" дизайн этой страницы - чтобы изменялся center.

Если ставить 100% на .all и на .center, то все к чертям скатывается :rolleyes:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Дивовый дизайн</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<style>
.all {
   width:900px;
   margin:auto;
   text-align:center;
}
.header {
   border:1px solid #666666;
   margin: 0 0 5px 0;
   padding:5px 5px 5px 5px;
}
.center {
   width:480px;
   min-height:600px;
   border:1px solid #666666;
   margin:0 0 0 210px;
   position:inherit;
   float:left;
}
.left {
   min-height:600px;
   border:1px solid #666666;
   margin: 0 0 5px -692px;
   width:200px;
   float:left;
}
.right {
   min-height:600px;
   border:1px solid #666666;
   margin: 0 0 5px 0;
   width:200px;
   float:right;
}
.footer {
   border:1px solid #666666;
   clear:both;
   padding:5px 5px 5px 5px;
}</style>

<body>
<div class="all">
   <div class="header">
	  Header - верхний блок странички
   </div>
   <div class="center">
	  Center - центральный блок. Здесь выводится основной контент
   </div>
   <div class="left">
	  Left - левая колонки. Навигация
   </div>
   <div class="right">
	  Right - правая колонка. Реклама
   </div>
   <div class="footer">
	  Footer - низ. Здесь обычно копирайт
   </div>
</div>
</body>
</html>

Vlad · February 14, 2008

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

Вроде того

900px = 100%

450px = 50%.

В суумме только смотри чтобы 100% получилось, а то из-за округления может оказаться и больше число.

Soniclord · February 14, 2008

100% на все ставить конечно же нельзя. Вычисли пропорционально, сколько пикселы у тебя в процентах занимают и используй процентную запись.
Вроде того
900px = 100%
450px = 50%.
В суумме только смотри чтобы 100% получилось, а то из-за округления может оказаться и больше число.

но ведь тогда придется делать левое и правое меню тоже процентно-зависимыми, а мне нужны статические (т.е. одинаковой ширины)

Vlad · February 14, 2008

Способов создания нужного макета несколько. Вот один из них.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Дивовый дизайн</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
.all {
  float: left;
  width: 100%;
  margin-bottom: 10px;
}
.left, .center, .right, .header, .footer {
  border: 1px solid #666;
}  
.header {
  margin: 0 0 5px 0;
  padding: 5px;
}
.center {
  min-height: 600px;
  margin: 0 215px;
}
.left {
  min-height: 600px;
  float: left;
  width: 200px;
  margin-left: -100%;
}
.right {
  min-height: 600px;
  float: left;
  width: 200px;
  margin-left: -205px;
}
.footer {
  clear: both;
  padding: 5px;
}
</style>
</head>
<body>
<div class="header">
Header - верхний блок странички
</div>

<div class="all">
   <div class="center">
	  Center - центральный блок. Здесь выводится основной контент
   </div>
</div>
   <div class="right">
	  Right - правая колонка. Реклама
   </div>
   <div class="left">
	  Left - левая колонки. Навигация
   </div>

<div class="footer">
Footer - низ. Здесь обычно копирайт
</div>

</body>
</html>

Только учти, что добавление padding к слою увеличивают его ширину и придется некоторые значения подкорректировать.

Soniclord · February 14, 2008

Огромное спасибо, Влад! Никто не брался за это гиблое дело! :-(

Sign In

Помогите сделать резиновый шаблон

Question

Soniclord

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

Soniclord

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

Soniclord

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information