Растягивание страницы под разрешение пользователя

Статус
В этой теме нельзя размещать новые ответы.
Попробуй так.
Код HTML:
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=utf-8" />
<link media="all" href="css/all.css" rel="stylesheet" type="text/css" />
<title>структура страницы с фиксированной шириной</title>
</head>
<body>
<div id="main">
   <div class="header">
       Верхушка
   </div>
   <div id="content-columns">
       <div class="leftcolumn">
           Левая колонка
       </div>
       <div class="content">
           Центральная колонка
       </div>
       <div class="rightcolumn">
          Правая колонка
       </div>
   </div>
   <div class="footer">
       Подвал
   </div>
</div>
</body>
</html>

Код CSS:
HTML: 
body {
margin: 0;
padding: 0;
min-width: 800px;
}
/* Следуящая запись нужна для IE  */
* html body {
width:expression(document.documentElement.clientWidth < 800 ? "800px" : "auto");
}
#main {
width: 100%;
}
.header {
width: 100%;
height: 50px;
background: #36f;
}
.footer {
width: 100%;
height: 50px;
clear: both;
background: #006;
}
#content-columns {
margin: 0 150px 0 150px;
}
.content {
width: 100%;
float: left;
background: #ccc;
}
.leftcolumn {
width: 150px;
float: left;
margin-left: -150px;
display: inline; /* решает проблему в IE */
position: relative;
}
.rightcolumn {
width: 150px;
float: right;
margin-right: -150px;
display: inline; /* решает проблему в IE */
position: relative;
}
 
А почему главный слой сделан через айди а не класс? Это принципиально?
 
MasterMushi написал(а):
А почему главный слой сделан через айди а не класс? Это принципиально?
Нажмите для раскрытия...

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

самое важное это то что идприоритетнее чем класс, и в шабе должен быть ток один ид что позволяет делать ссылку на некоторую зону страницы + а яваскрипте это зачястую тоже достаточно важно
 
Неделю ковырял ничего не получилось , помогите профф.. сделать вот шаблон под джумлу 1.0.15
 

Вложения

  • plazza.rar
    262,5 KB · Просмотры: 0
Вот еще простой пример как можно стили подсовывать в зависимости от разрешения экрана
Код: 
<script language="JavaScript">
<!--
var correctwidth1=800
if (screen.width==correctwidth1) 
document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"css/1_new.css\">");
 
var correctwidth2=1024
if (screen.width==correctwidth2) 
document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"css/2_new.css\">");
 
var correctwidth3=1152
if (screen.width==correctwidth3) 
document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"css/3_new.css\">");
 
var correctwidth4=1280
if (screen.width>=correctwidth4) 
document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"css/4_new.css\">");
// -->
</script>
 
ИМХО - всё-таки просто резиновый шаблон с фиксированым минимумом будет удобнее - не все простматривают сайты, полностью развёрнутые на экран, к тому-же часто размеры окна меняют в процесе просмотра
 
не проще ли в div'ах верстать? это же резинка сама по себе! а для IE существуют определенные хаки! погугли и найдешь)
 
Тоже столкнулся с подобной проблемой - заказчик хочет и всё. Причем стоит у них в офисе IE6 и ты хоть убейся... В общем, взял за основу purity_ii и переделал под свой дизайн. Есть решение лучше?
 
Посмотрите шаблоны от yootheme , там очень хорошо сделано - можно выбирать в чем указывать ширину, в пикселях или процентах. и в ие 6 нормально смотрится, проверяла.
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху