резиновость с относительной шириной

guvatara · October 9, 2007

Суть вопроса весьма странна. Есть двух колоночный шаблон с шапкой и футером прибитым к низу окна. Причем и шапка и футер тянутся в ширь. Но вопрос не в этом.

Одна и колонок это меню и имеет постоянную ширину. А вторая колонка должна тянуться, но при этом вертикально центрирована в оставшейся справа свободной части экрана. Короче ее ширина должна составлять около 80% от свободной области справа. Проблема в том что в разных броузерах по разному понимаются некоторые приемы реализации данного изврата дизайнера.

Может подскажите хотя бы по какой дороге идти чтоб найти решение.

P.S. нужно чтоб все это было чисто в дивах.

соббственно сам код страницы

<!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>Untitled Document</title>
<link href="script/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
h1 {
 font-size: 16px;
}
-->
</style></head>

<body>
<div class="main">
<!-- Header -->
 <div id="min-width">
 <div class="minwidth">
 <div class="container">
 <div class="top_r">
 <div class="top_l"></div>
 </div>
 </div>
 </div>
 </div>
<!-- End Header -->
<!-- Main Content -->
 <div class="main_content">
 <div class="menu_side">
 <div class="menu_side_top"> </div>
 <div class="menu">
 <p>Новость1</p>
 <img src="i/perehod_menu.jpg" alt="menu_per" width="260" height="11" />
 <p>Новость1</p>
 <img src="i/buttom_menu.jpg" alt="menu_buttom" width="260" height="10" hspace="0" vspace="0" border="0" /></div>
 </div>
<div class="wa">
 <div class="wa_border">
 <div class="wa_h">
 <h1 class=" wa_h1">Заголовок™</h1></div>
 <div style="display:block; padding-bottom:15px;"> 
 <p>ормлоралорплавфрловрл</p>

 <p>овырлповырплаврл</p>
 </div>
 </div>
 <div class="wa_but_dev"></div>
 </div>
 </div>
<!-- End Main Content -->
</div>
<!-- Fotter -->
 <div id="min-width_but">
 <div class="minwidth">
 <div class="container_but">
 <div class="buttom"><img src="i/but_r.jpg" alt="but_r" width="372" height="54" hspace="0" vspace="0" border="0" /></div>
 </div>
 </div>
 </div>
<!-- End Fotter -->
</body>
</html>

css

/* CSS Document */

* {
 margin: 0;
 padding: 0;
 /* стандартное правило для удаления всех посторонних отступов */
}

html {
 height: 100%;
 /* чтобы элемент html распространялся на всю высоту окна браузера */
}

body {
 position: relative;
 /* чтобы потомки элемента body позиционировались по отношению к body */
 height: auto !important;
 /* для Firefox и Opera ? чтобы не сработало следующее объявление */
 height: 100%;
 /* для IE (работает некорректно, что обеспечивает нужный результат) */
 min-height: 100%;
 /* для Firefox и Opera (в IE 7 делает то же, что предыдущее объявление) */
}


body {
background-image:url(../i/top_c_plash.jpg); 
background-position:top; 
background-repeat:repeat-x;
color:#242730;
font:Tahoma;
}

.main {
width:100%; 
height:100%; 
display:table; 
min-height:100%;
}


.gainlayout { min-height: 0; }

.top_r {
background-image:url(../i/top_r.jpg); 
background-position:right top; 
width:100%; 
height:253px; 
background-repeat:no-repeat;
}

.top_l {
 float:left; 
 height:253px; 
 width:500px;
 background-image:url(../i/top_l.jpg); 
 background-repeat:no-repeat;
 }

 .main_content {
 display:table;
 min-width:972px;
 width:100%;
 margin-bottom:54px;
 }

 .menu_side {
 display:table;
 float:left; 
 width:270px;
 }

 *html .menu_side {
 display:block;
 height:auto;
 }

 .menu_side_top {
 width:262px; 
 height:114px; 
 background-image: url(../i/main_l.jpg); 
 background-repeat:no-repeat;
 }

.menu {
background-image:url(../i/menu_bg.jpg); 
background-repeat:repeat-y; 
width:260px; 
margin-left:2px; 
display:block; 
display:table;
}

.menu p {
color:#242730;
margin-left:5px; 
background-image:url(../i/menu_div.jpg); 
background-position:bottom left; 
background-repeat:no-repeat; 
padding-left:22px;
height:22px;
margin-bottom:65px;
}

* html .menu p {
margin-left:5px; 
background-image:url(../i/menu_div.jpg); 
background-position:bottom left; 
background-repeat:no-repeat; 
padding-left:22px;
padding-bottom:2px;
}

.wa {
display:table;
min-width:700px;
margin-bottom:25px;
width:72%;
}

.wa_border {
border-left:#CCCCCC 1px solid; 
border-right:#CCCCCC 1px solid; 
border-bottom:#CCCCCC 1px solid; 
background-color:#f1edea; 
margin-right:25px; 
display:block;
}

.wa_h {
background-image: url(../i/wa_top_s.jpg); 
height:23px; 
background-repeat: repeat-x; 
width:auto; 
display:block;
}



.wa_h1 {
background-image:url(../i/wa_top.jpg); 
background-repeat:no-repeat; 
padding-left:25px;
}

.wa p {
font:Tahoma;
padding-left:19px;
padding-right:10px;
font-size:14px;
color:#242730;
}

.wa_but_dev {
height:1px; 
border-bottom:#000000 1px solid; 
font-size:1px; 
width:auto; 
margin-right:25px;
}

*html .wa {
padding-left:270px;
display: block;
width:auto;
}

.buttom {
float:right; 
width:372px; 
height:54px; 
font-size:1px;
}


 /*для всех броузеров что понимают min-width */ 
 #min-width {
 width:100%; 
 min-width:972px; 
 height:253px; 
 display:inline-block;
 background-image:url(../i/top_c_plash.jpg);
 background-repeat:repeat-x;
 background-position:top;
 }

 #min-width_but {
 position:absolute;
 bottom:0px;
 margin-top:-54px;
 width:100%; 
 min-width:972px; 
 height:54px; 
 display:inline-block;
 background-image: url(../i/but_plash.jpg);
 background-repeat:repeat-x;
 background-position: bottom;
 }



 /* для IE */
 * html .minwidth {
 border-left:972px solid #fff;/*min-width*/
 position:relative;
 float:left;
 z-index:1;
 }
 * html .container {
 margin-left:-960px; /*-min-width*/
 position:relative;
 float:left;
 z-index:2;
 background-image:url(../i/top_c_plash.jpg);
 background-repeat:repeat-x;
 background-position:top;
 }

 * html .container_but {
 margin-left:-960px; /*-min-width*/
 position:relative;
 float:left;
 z-index:2;
 background-image: url(../i/but_plash.jpg);
 background-repeat:repeat-x;
 background-position: bottom;
 }

yopopt · October 9, 2007

Проблема в том что в разных броузерах по разному понимаются некоторые приемы реализации данного изврата дизайнера.

Локализуйте проблему. Какие именно извраты в данном коде воспринимаются по разному?

Бесцельно разбираться в таком коде - себя не уважать.

Sign In

резиновость с относительной шириной

Question

guvatara

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

yopopt

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information