Проблема с резиновыми картинками

anon1 · April 28, 2011

Всем привет Имею вот такое безобразие Изображения в штате 250х250, лого 195х54.

Захотелось заказчику сделать это чудо резиновым. Соответственно вопрос в том, чтобы логотип оставался на месте и никуда не ездил по ширине, а остальные 8 картинок, вместе с ссылками в таблице под ними, ездили под разрешение экрана с остальными нижеследующими таблицами. Причем каждая ячейка таблицы под картинкой должна быть вровень со своей картинкой. Что-то подобное ниже нормально более-менее отображается только в лисе при 1600х900, кое-как заставил ИЕ8 дружить наполовину, но стоит уменьшить разрешение, как верхняя таблица с картинками уплывает в море с горизонтальной полосой прокрутки в любом браузере, окромя лисы (про table layout:fixed вкурсе, но меню с ссылками с ним видимо не будет дружить). Реализуемо вообще без применения джедайских сил и явы в мягкой пачке?

зыы: гиперген не мой, мне это подкинули


<!-- Created with HyperGen utility. ver 1.5 -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta http-equiv="Content-Language" content="ru">
<meta name="keywords" content="" />
<meta name="description" content="" />


<LINK href="sys/style.css" rel=stylesheet type=text/css>
<title>
</title>
</head>
<body>
<div class="dn_div">
<a href="http://"><span class="dn_link">http://</span></a>
 » <a href="products.htm"><span class="dn_link">Наши работы</span></a>
</div>
<table width="100%" colspan="8" border="0" cellpadding="0" cellspacing="2">
<tr>
<td height="100%">
<div class="logo"><a href="http://"><img alt="" src="sys/logo.gif" width="190" height="54" /></a></div></td>
<td height="124"><a href="cupboard.htm"><img src="sys/img/coupe.jpg" width="100%" height="100%" border="0" /></a></td>
<td height="124"><a href="wardrobe.htm"><img src="sys/img/ward.jpg" width="100%" height="100%" border="0" /></a></td>
<td height="124"><a href="hall.htm"><img src="sys/img/prix.jpg" width="100%" height="100%" border="0" /></a></td>
<td height="124"><a href="room.htm"><img src="sys/img/guest.jpg" width="100%" height="100%" border="0" /></a></td>
<td height="124"><a href="library.htm"><img src="sys/img/bibl.jpg" width="100%" height="100%" border="0" /></a></td>
<td height="124"><a href="bedroom.htm"><img src="sys/img/bed.jpg" width="100%" height="100%" border="0" /></a></td>
<td height="124"><a href="childrens.htm"><img src="sys/img/child.jpg" width="100%" height="100%" border="0" /></a></td>
<td height="124"><a href="study.htm"><img src="sys/img/cab.jpg" width="100%" height="100%" border="0" /></a></td>
        </tr>
        <tr>
<td><div class="phone">Тел: (495)000-00-00, (495)001-01-01</div></td> 
<td class="link_menu" onmouseover="style.backgroundColor='#DA711C';"
onmouseout="style.backgroundColor='#DDDDDD'">
<a href="cupboard.htm" style="text-decoration: none;">Шкафы-купе</a></td>
<td class="link_menu" onmouseover="style.backgroundColor='#DA711C';"
onmouseout="style.backgroundColor='#DDDDDD'">
<a href="wardrobe.htm" style="text-decoration: none;">Гардеробные</a></td>
<td class="link_menu" onmouseover="style.backgroundColor='#DA711C';"
onmouseout="style.backgroundColor='#DDDDDD'">
<a href="hall.htm" style="text-decoration: none;">Прихожие</a></td>
<td class="link_menu" onmouseover="style.backgroundColor='#DA711C';"
onmouseout="style.backgroundColor='#DDDDDD'">
<a href="room.htm" style="text-decoration: none;">Гостиные</a></td>
<td class="link_menu" onmouseover="style.backgroundColor='#DA711C';"
onmouseout="style.backgroundColor='#DDDDDD'">
<a href="library.htm" style="text-decoration: none;">Библиотеки</a></td>
<td class="link_menu" onmouseover="style.backgroundColor='#DA711C';"
onmouseout="style.backgroundColor='#DDDDDD'">
<a href="bedroom.htm" style="text-decoration: none;">Спальни</a></td>
<td class="link_menu" onmouseover="style.backgroundColor='#DA711C';"
onmouseout="style.backgroundColor='#DDDDDD'">
<a href="childrens.htm" style="text-decoration: none;">Детские</a></td>
<td class="link_menu" onmouseover="style.backgroundColor='#DA711C';"
onmouseout="style.backgroundColor='#DDDDDD'">
<a href="study.htm" style="text-decoration: none;">Кабинеты</td>
        </tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" class="main_table">
<tr>
<td class="main_table1">
<div class="min">
<div class="link_min1"><a href="index.htm">Главная</a></div>
<div class="link_min1"><a href="about.htm">О нас</a></div>
<div class="link_min1"><a href="body.htm">Наши материалы</a></div>
<div class="link_min1_s"><a href="products.htm">Наши работы</a></div>
<div class="link_min2"><a href="cupboard.htm">Шкафы-купе</a></div>
<div class="link_min2_s"><a href="wardrobe.htm">Гардеробные комнаты</a></div>
<div class="link_min2"><a href="hall.htm">Прихожие</a></div>
<div class="link_min2"><a href="room.htm">Гостиные</a></div>
<div class="link_min2"><a href="library.htm">Библиотеки</a></div>
<div class="link_min2"><a href="bedroom.htm">Спальни</a></div>
<div class="link_min2"><a href="childrens.htm">Детские</a></div>
<div class="link_min2"><a href="study.htm">Кабинеты</a></div>
<div class="link_min2"><a href="table.htm">Столы</a></div>
<div class="link_min2"><a href="sliding.htm">Межкомнатные двери</a></div>
<div class="link_min2"><a href="complex.htm">Комплексные застройки</a></div>
<div class="link_min2"><a href="stained-glass.htm">Витражи</a></div>
<div class="link_min1"><a href="standard.htm">Цена вопроса</a></div>
<div class="link_min1"><a href="order.htm">Как заказать</a></div>
<div class="link_min1"><a href="discount_action.htm">Скидки и акции</a></div>
<div class="link_min1"><a href="cont.htm">Контакты</a></div>

</div>
</td>
<td  class="main_table2">
<h1>заголовок</h1>
<div class="topic_text">содержание</div>
</td>
</tr>
</table>
<center><div class="down">© 2011 копирайт</div>

<table bgcolor="#88888" cellspacing="0" cellpadding="0" border="0" width="100%"><tr><td>счетчики
</td></tr></table>
</body>
</html>

css


td 		  { font-family:Verdana; font-size:12px; }
div               { font-family:Verdana; font-size:12px }
img               { border:0px }
h1                { background-color:#DA711C; padding:3px 30px 3px 30px; font-family:Verdana; font-size:17px; color:#ffffff; margin:0px }
h2                { font-family:Verdana; font-size:15px; color:#800000; margin:0px 20px 0px 0px }
body              { margin:0px }
td                { vertical-align:top }
a                 { color:#333333 }
a:hover           { color:#222222 }
p                 { margin-top:5px; margin-bottom:5px; text-indent: 1.5em }
.disp_none        { display:none }
H3  	   	  {font-weight : bold; font-size : 130%;}
input, textarea {font-family: Verdana; font-size: 80%; text-decoration: none; color: #000000; cursor: default; background-color: #FFFFFF; border-style: solid; border-width: 1px; border-color: #000000;}
.w100             { width:100% }
.logo             { padding:35px 40px 35px 10px }
.phone            { background-color:#DA711C; text-align:center; padding:5px; font-size:11px; color:white; font-weight:bold }

.slider_frame     { width:100%; height:147px }
.sl2              { width:100%; background-color:white }
.vh               { visibility:hidden; position:absolute }
.vv               { visibility:visible }
.ob_div           { background-color:#F7F7F9; border-left:1px white solid }
.ob2_div          { width:100% }
.ob               { width:100%; border-right:1px white solid; border-left:1px silver solid; border-top:1px silver solid; border-bottom:1px silver solid }
.ob_td            { background-repeat:no-repeat; height:124px; border:1px white solid; border-left:0px; cursor:pointer }
.ob_text          { padding:4px 20px 5px 20px; background-color:#CCCCCC; font-weight:bold; text-align:center }

.main_table       { height:50px; margin-top:0px; }
.main_table1      { background-color:#DDDDDD; }
.main_table2      { background-color:#E7E7E7; }
.main_table3      { height:600px; background-color:#E7E7E7; padding:13px }

.min              { width:276px; margin-right:1px;  }
.min a            { text-decoration:none }

.link_min1        { background-color:#888888; font-size:13px; background-image:url('min001.gif'); background-repeat:no-repeat; padding:4px 10px 4px 23px; border-bottom:1px #666666 solid; font-weight:bold }
.link_min1 a      { color:white }
.link_min2        { background-color:#DDDDDD; font-size:11px; background-image:url('min002.gif'); background-repeat:no-repeat; font-weight:bold; padding:1px 10px 3px 33px }
.link_min2 a      { color:#444444 }
.link_min3        { background-color:#DDDDDD; font-size:11px; background-image:url('min003.gif'); background-repeat:no-repeat; padding:1px 10px 2px 43px }
.link_min3 a      {  }
.link_min4        { background-color:#DDDDDD; font-size:10px; background-image:url('min004.gif'); background-repeat:no-repeat; padding:1px 10px 2px 53px }
.link_min4 a      {  }

.link_min1_s      { background-color:#DA711C; font-size:13px; background-image:url('min001s.gif'); background-repeat:no-repeat; padding:4px 10px 4px 23px; border-bottom:1px #DA711C solid; font-weight:bold }
.link_min1_s a    { color:white }
.link_min2_s      { background-color:#DDDDDD; font-size:11px; background-image:url('min002s.gif'); background-repeat:no-repeat; font-weight:bold; padding:1px 10px 3px 33px }
.link_min2_s a    { color:#DA711C }
.link_min3_s      { background-color:#DDDDDD; font-size:11px; background-image:url('min003s.gif'); background-repeat:no-repeat; padding:1px 10px 2px 43px }
.link_min3_s a    { color:#DA711C }
.link_min4_s      { background-color:#DDDDDD; font-size:10px; background-image:url('min004s.gif'); background-repeat:no-repeat; padding:1px 10px 2px 53px }
.link_min4_s a    {  }
.link_menu        { background-color:#DDDDDD; text-align:center; font-size:13px; font-weight:bold; padding:2px; }

.dn_div           { background-color:#888888; padding:4px 20px 4px 10px; font-size:11px }
.dn_link          { font-weight:bold; color:white }
.dn_div a         { text-decoration:none }

.page_text        { background-color:#E7E7E7; padding:20px 30px 10px 30px; margin-bottom:1px }
.page_text strong { color:#DA711C }
.topic_text       { background-color:#E7E7E7; padding:10px 30px 10px 30px; margin-bottom:1px }
.topic_text strong { color:#DA711C }

.ass              {  }
.ass_text         { font-weight:bold }
.ass_link         { margin:0px 0px 15px 0px }
.list_news        { padding:4px 0px 4px 30px }
.attach           { cursor:pointer; border:1px white solid }
.attach img       { border:1px #BBBBBB solid }
.big              { position:absolute; top:100px; left:120px; cursor:pointer; background-color:#888888; padding:16px; border:1px white solid }
.big img          { border:1px #BBBBBB solid }
.big_img img      { border:1px #777777 solid }

.gallery          { background-color:#DDDDDD; padding:15px 15px 15px 15px }
.gallery td       {  }
.gallery a        {  }
.gallery a img    { border:1px #CCCCCC solid; margin:2px }

.sub_gallery      { background-color:#DDDDDD; margin-top:1px; padding:15px }
.sbi              { border:2px #CCCCCC solid; margin:2px; width:100px; height:100px }
.currr            { border:2px #DA711C solid; margin:2px; width:100px; height:100px }

.down             { background-color:#888888; padding:4px 20px 4px 10px; font-size:11px; text-align:center; color:white }
.down a           { color:white; text-decoration:none }

div.counters      { position:absolute; margin-top:-40px; margin-top:-100px; margin-left:180px }

div.squares a     { display:inline-block; width:160px; text-align:center; height:160px; margin-top:14px; text-decoration:none }
.div.squares a img { border: 1px solid #808080 }
.div.squares a span { display:block; margin-top:8px }
.div.squares a:hover {  }
.div.squares a:hover img { border: 1px solid #D46B15 }
.div.squares a:hover span { color:#D46B15 }

Edited April 28, 2011 by anon1

psywalker · April 28, 2011

1. Ссылку на страницу с проблемой.

2. Скриншот того, как должно быть.

3. Скриншот того, как НЕ должно быть.

4. На скриншотах поменить и показать, что и как должно быть.

tt48 · April 28, 2011


<table width="100%" colspan="8"

Это как? О_о

Где доктайп?

Дофигищи кода без структурных отступов.

Причем каждая ячейка таблицы под картинкой должна быть вровень со своей картинкой.

Не понял.. Картинка в ячейке поверху отвертикалена без отступа с потолка, так чтоли?


div.counters      { position:absolute; margin-top:-40px; margin-top:-100px; margin-left:180px }

absolute слой без указания top\left довольно опасное сочетание, если высота и ширина не 100%.

Не помню в каком точно браузере постоянно с этим проблемы, но пм-му в Опере 11-й.

.gallery          { background-color:#DDDDDD; padding:15px 15px 15px 15px }

padding:15px;


link_min1_s      { background-color:#DA711C; background-image:url('min001s.gif'); background-repeat:no-repeat; }

аналогично сокращается до 1 свойства.


<td class="link_menu" onmouseover="style.backgroundColor='#DA711C';"
onmouseout="style.backgroundColor='#DDDDDD'">

Захочется цвет поменять.. Бегать придется - keyword "ненавязчивый JavaScript"


<center><div class="down">© 2011 копирайт</div>

<table bgcolor="#88888" cellspacing="0" cellpadding="0" border="0" width="100%"><tr><td>счетчики
</td></tr></table>
</body>
</html>
Во-первых, <center> - нехорошо. Во-вторых - не закрыт.

ИМХО, конечно.

Edited April 28, 2011 by tt48

anon1 · April 28, 2011

С оптимизацией пока проблемы

Верстка вообще не моя, доктайпа там нет изначально нигде, все это генерируется из ms access через hypergen. Если доктайп прописать (что я собственно и сделал в первую очередь, основной блок с инфой начинает жить своей жизнью вплоть до изменения бекграундов (некоторые хтмл коды прописаны в access вместе с содержанием мейнблока) ).

Меня попросили сделать вот так:

http://s1.ipicture.ru/uploads/20110428/550RRtjj.png

Это последний IE при 1600х900.

Если сделать разрешение меньше, получается вот так:

http://s1.ipicture.ru/uploads/20110428/81S6KQ3y.png

А хочется, чтоб было ровно, квадратно и не уезжало никуда. И хочется сохранить крест в отступах таблиц. http://s2.ipicture.ru/uploads/20110428/REW561dI.png

Не понял.. Картинка в ячейке поверху отвертикалена без отступа с потолка, так чтоли?

Так, как на скрине по 1й ссылке, каждая надпись(шкафы, детские,etc) ровно под картинкой.

div.counters удалится, в оригинале счетчики обитали в нижнем углу левой колонки меню.

Edited April 28, 2011 by anon1

psywalker · April 28, 2011

Дружище, если тебе хочется, чтобы твоя вёрстка выглядела достойна, то ты просто обязан всё переверстать заново, с нуля и на слоях обязательно!

PanSoul · April 29, 2011

Здесь явно наблюдается 2-колоночный макет сайта ПО ВЕРТИКАЛИ, а у Вас, видимо, по горизонтали (иначе как еще объяснить съезжание "крестика" при изменении размера браузера. P.S. просто код не смотрел.. )...В общем проблем не было бы, если бы сделать общий див (обёртывающий), а внутри него левый (фикс) и правый(%)...

И полность согласен с psywalker, лучше переверстать - времени кучу сэкономите!

Edited April 29, 2011 by PanSoul

anon1 · April 29, 2011

Там было 3 колонки, но одна неактивна (div class="ass" отошел в мир иной). Клиент переверстывать все не хочет, хочет отдельно верх.

swetlana · April 29, 2011

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

Не клиенту же в этом разбираться.

anon1 · April 30, 2011

Ясно, спасибо за советы Если что буду вас мучать, тк с дивами особо не дружу

anon1 · May 11, 2011

Кое-чего набросал Вроде все работает на вскидку, пока Мучаюсь с проблемкой на скрине, в IE padding работает не так как надо (http://s1.ipicture.ru/uploads/20110511/gejDYPWU.png).

ff3: http://s1.ipicture.ru/uploads/20110511/qjeRUsT2.png


<!-- Created with HyperGen utility. ver 1.5 -->
<!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">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta http-equiv="Content-Language" content="ru">
<meta name="keywords" content=" " />
<meta name="description" content=" " />


<LINK href="sys/style.css" rel=stylesheet type=text/css>
<title>
Вакансии
</title>
</head>
<body>
<div id="main">
<div class="dn_div">
<a href="http://www.aikon-mebel.ru"><span class="dn_link">WWW.AIKON-MEBEL.RU</span></a>
 » <a href="about.htm"><span class="dn_link">О нас</span></a>
</div>
<div id="header">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="276"><div class="logo"><a href="http://aikon-mebel.ru"><img alt="Айкон-мебель" src="img/logo.gif" width="190" height="50" border="0"></a></div></td>
<td class="ff"><a href="cupboard.htm"><img src="img/coupe.jpg" border="0" width="100%" height="125"></a></td>
<td class="ff"><a href="wardrobe.htm"><img src="img/ward.jpg" border="0" width="100%" height="125"></a></td>
<td class="ff"><a href="hall.htm"><img src="img/prix.jpg" border="0" width="100%" height="125"></a></td>
<td class="ff"><a href="room.htm"><img src="img/guest.jpg" border="0"width="100%"  height="125"></a></td>
<td class="ff"><a href="library.htm"><img src="img/bibl.jpg" border="0" width="100%" height="125"></a></td>
<td class="ff"><a href="bedroom.htm"><img src="img/bed.jpg" border="0" width="100%" height="125"></a></td>
<td class="ff"><a href="childrens.htm"><img src="img/child.jpg" border="0" width="100%" height="125"></a></td>
<td class="ff"><a href="study.htm"><img src="img/cab.jpg" border="0" width="100%" height="125"></a></td>
       </tr>
        <tr>
<td class="phone">Тел: (495)973-78-72, 973-04-62</td> 
<td class="link_menu" onmouseover="style.backgroundColor='#DA711C';"
onmouseout="style.backgroundColor='#DDDDDD'">
<a href="cupboard.htm" style="text-decoration: none;">Шкафы-купе</a></td>
<td class="link_menu" onmouseover="style.backgroundColor='#DA711C';"
onmouseout="style.backgroundColor='#DDDDDD'">
<a href="wardrobe.htm" style="text-decoration: none;">Гардеробные</a></td>
<td class="link_menu" onmouseover="style.backgroundColor='#DA711C';"
onmouseout="style.backgroundColor='#DDDDDD'">
<a href="hall.htm" style="text-decoration: none;">Прихожие</a></td>
<td class="link_menu" onmouseover="style.backgroundColor='#DA711C';"
onmouseout="style.backgroundColor='#DDDDDD'">
<a href="room.htm" style="text-decoration: none;">Гостиные</a></td>
<td class="link_menu" onmouseover="style.backgroundColor='#DA711C';"
onmouseout="style.backgroundColor='#DDDDDD'">
<a href="library.htm" style="text-decoration: none;">Библиотеки</a></td>
<td class="link_menu" onmouseover="style.backgroundColor='#DA711C';"
onmouseout="style.backgroundColor='#DDDDDD'">
<a href="bedroom.htm" style="text-decoration: none;">Спальни</a></td>
<td class="link_menu" onmouseover="style.backgroundColor='#DA711C';"
onmouseout="style.backgroundColor='#DDDDDD'">
<a href="childrens.htm" style="text-decoration: none;">Детские</a></td>
<td class="link_menu" onmouseover="style.backgroundColor='#DA711C';"
onmouseout="style.backgroundColor='#DDDDDD'">
<a href="study.htm" style="text-decoration: none;">Кабинеты</td>
        </tr>
</table></div><!-- #header-->
<div id="middle">
		<div id="container">
		<div id="content">
<table><tr><td class="main_table2">
<h1>Вакансии</h1>
<div class="topic_text"><p><strong>Вакансия продавца-консультанта</strong ></p> 
<p>В связи с расширением мебельной компании «Айкон» требуются на постоянную работу продавцы-консультанты корпусной мебели на заказ. Работа в мебельном центре (вблизи метро). Консультация клиентов в салоне и по телефону, составление компьютерного эскиза, предварительный расчёт стоимости, оформление заказов, заключение договоров, сопровождение заказов. Сменный график работы. Оклад + % с продаж. Предварительное бесплатное обучение. </p>  
<p>Требования: гражданство РФ, возраст 18-45 лет, трудолюбие, аккуратность, ответственность, пунктуальность. </p>  
<p>Телефон: (495)943-81-78</p>  
<p>Email: <a href="mailto: design@aikon-mebel.ru "> design@aikon-mebel.ru </a></p></div>

</td>
</tr></table>
</div>
</div><!-- #container-->
	<div class="sidebar" id="sideLeft">
<div class="min">
<div class="link_min1"><a href="index.htm">Главная</a></div>
<div class="link_min1_s"><a href="about.htm">О нас</a></div>
<div class="link_min2_s"><a href="vacancy.htm">Вакансии</a></div>

<div class="link_min1"><a href="body.htm">Наши материалы</a></div>
<div class="link_min1"><a href="products.htm">Наши работы</a></div>
<div class="link_min1"><a href="standard.htm">Цена вопроса</a></div>
<div class="link_min1"><a href="order.htm">Как заказать</a></div>
<div class="link_min1"><a href="discount_action.htm">Скидки и акции</a></div>
<div class="link_min1"><a href="cont.htm">Контакты</a></div>

</div>




	</div><!-- .sidebar#sideLeft -->
</div><!-- #middle-->
</div><!-- #wrapper -->
<div id="footer">
<div class="down"><div align="left"><script id="top100Counter" type="text/javascript" src="http://counter.rambler.ru/top100.jcn?2185362"></script>
<noscript>
<div align="left"><a href="http://top100.rambler.ru/navi/2185362/">
<img src="http://counter.rambler.ru/top100.cnt?2185362" alt="Rambler's Top100" border="0" />
</a>

</noscript><script type="text/javascript"><!--
document.write("<a href='http://www.liveinternet.ru/click' "+
"target=_blank><img src='//counter.yadro.ru/hit?t20.3;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+
";"+Math.random()+
"' alt='' title='LiveInternet: показано число просмотров за 24"+
" часа, посетителей за 24 часа и за сегодня' "+
"border='0' width='88' height='31'><\/a>")
//--></script><script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-16106312-1");
pageTracker._trackPageview();
} catch(err) {}</script><!--Rating@Mail.ru COUNTER--><script language="JavaScript" type="text/javascript"><!--
d=document;var a='';a+=';r='+escape(d.referrer)
js=10//--></script><script language="JavaScript1.1" type="text/javascript"><!--
a+=';j='+navigator.javaEnabled()
js=11//--></script><script language="JavaScript1.2" type="text/javascript"><!--
s=screen;a+=';s='+s.width+'*'+s.height
a+=';d='+(s.colorDepth?s.colorDepth:s.pixelDepth)
js=12//--></script><script language="JavaScript1.3" type="text/javascript"><!--
js=13//--></script><script language="JavaScript" type="text/javascript"><!--
d.write('<a href="http://top.mail.ru/jump?from=1546985"'+
' target="_top"><img src="http://da.c9.b7.a1.top.mail.ru/counter'+
'?id=1546985;t=216;js='+js+a+';rand='+Math.random()+
'" alt="Рейтинг@Mail.ru"'+' border="0" height="31" width="88"/><\/a>')
if(11<js)d.write('<'+'!-- ')//--></script><noscript><a
target="_top" href="http://top.mail.ru/jump?from=1546985"><img
src="http://da.c9.b7.a1.top.mail.ru/counter?js=na;id=1546985;t=216"
border="0" height="31" width="88"
alt="Рейтинг@Mail.ru"/></a></noscript><script language="JavaScript" type="text/javascript"><!--
if(11<js)d.write('--'+'>')//--></script><!--/COUNTER-->
© 2011 «Айкон». Шкафы купе. Выгодные цены на шкафы-купе в Москве, шкаф-купе на заказ.           Дизайн и разработка сайта: Григорий Малышев
</div>
</div>
<!-- #footer -->
</body>
</html>


* {
	margin: 0;
	padding: 0;
}
html {
	height: 100%;
}
body {
	font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
	height: 100%;
	background: #E7E7E7;
}
#main {
	width: auto!important;
	min-width: 1000px;
	min-height: 100%;
	height: auto!important;
	height: 100%;
}
#header {
	height: 140px;
	width: 100%;
	background: #FFFFFF;
}
#middle {
	width: 100%;
	padding: 7px 0 50px;
	height: 1%;
	position: relative;
}
#middle:after {
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
}
#container {
	width: 100%;
	float: left;
	overflow: hidden;
	height: 100%;
}
#content {
	padding: 0 0 0 277px;
	height: 100%;
	overflow: hidden;
}
#sideLeft {
	float: left;
	width: 276px;
	margin-left: -100%;
	position: relative;
}
#footer {
	margin: auto 0;
	min-width: 1000px;
	height: 54px;
}
p {
	margin: 0 0 18px
}
input {
	vertical-align: middle;
}
table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
}
td {
	font-family:Verdana;
	font-size:12px;
}
div {
	font-family:Verdana;
	font-size:12px
}
img {
	border:0px
}
.disp_none {
	display:none
}
H3 {
	font-weight : bold;
	font-size : 130%;
}
input, textarea {
	font-family: Verdana;
	font-size: 80%;
	text-decoration: none;
	color: #000000;
	cursor: default;
	background-color: #FFFFFF;
	border-style: solid;
	border-width: 1px;
	border-color: #000000;
}
.w100 {
	width:100%
}
.vh {
	visibility:hidden;
	position:absolute
}
.vv {
	visibility:visible
}
.ob_div {
	background-color:#F7F7F9;
	border-left:1px white solid
}
.ob2_div {
	width:100%
}
.ob {
	width:100%;
	border-right:1px white solid;
	border-left:1px silver solid;
	border-top:1px silver solid;
	border-bottom:1px silver solid
}
.ob_td {
	background-repeat:no-repeat;
	height:124px;
	border:1px white solid;
	border-left:0px;
	cursor:pointer
}
.ob_text {
	padding:4px 20px 5px 20px;
	background-color:#CCCCCC;
	font-weight:bold;
	text-align:center
}
.ff {
	padding: 0 1px 1px 1px;
}
.dn_div {
	background-color:#888888;
	padding:2px 20px 2px 10px;
	font-size:11px
}
.dn_link {
	font-weight:bold;
	color:white
}
.dn_div a {
	text-decoration:none
}
.logo {
	padding:35px 40px 35px 35px;
}
.phone {
	background-color:#DA711C;
	text-align:center;
	font-size:11px;
	color:white;
	font-weight:bold;
	padding: 0 2px 2px 2px;
}
.link_menu {
	background-color:#DDDDDD;
	text-align:center;
	font-size:11px;
	font-weight:bold;
}
a {
	color:#333333;
	text-decoration: none;
}
a:hover {
	color:#222222
}
.link_min1 {
	background-color:#888888;
	font-size:12px;
	background-image:url('min001.gif');
	background-repeat:no-repeat;
	padding:4px 10px 4px 23px;
	border-bottom:1px #666666 solid;
	font-weight:bold
}
.link_min1 a {
	color:white
}
.link_min2 {
	background-color:#DDDDDD;
	font-size:11px;
	background-image:url('min002.gif');
	background-repeat:no-repeat;
	font-weight:bold;
	padding:1px 10px 3px 33px
}
.link_min2 a {
	color:#444444
}
.link_min3 {
	background-color:#DDDDDD;
	font-size:11px;
	background-image:url('min003.gif');
	background-repeat:no-repeat;
	padding:1px 10px 2px 43px
}
.link_min4 {
	background-color:#DDDDDD;
	font-size:10px;
	background-image:url('min004.gif');
	background-repeat:no-repeat;
	padding:1px 10px 2px 53px
}
.link_min1_s {
	background-color:#DA711C;
	font-size:13px;
	background-image:url('min001s.gif');
	background-repeat:no-repeat;
	padding:4px 10px 4px 23px;
	border-bottom:1px #DA711C solid;
	font-weight:bold
}
.link_min1_s a {
	color:white
}
.link_min2_s {
	background-color:#DDDDDD;
	font-size:11px;
	background-image:url('min002s.gif');
	background-repeat:no-repeat;
	font-weight:bold;
	padding:1px 10px 3px 33px
}
.link_min2_s a {
	color:#DA711C
}
.link_min3_s {
	background-color:#DDDDDD;
	font-size:11px;
	background-image:url('min003s.gif');
	background-repeat:no-repeat;
	padding:1px 10px 2px 43px
}
.link_min3_s a {
	color:#DA711C
}
.link_min4_s {
	background-color:#DDDDDD;
	font-size:10px;
	background-image:url('min004s.gif');
	background-repeat:no-repeat;
	padding:1px 10px 2px 53px
}
.page_text {
	background-color:#E7E7E7;
	padding:20px 30px 10px 30px;
	margin-bottom:1px
}
.page_text strong {
	color:#DA711C
}
.topic_text {
	background-color:#E7E7E7;
	padding:10px 30px 10px 30px;
}
.topic_text strong {
	color:#DA711C
}
h1 {
	background-color:#DA711C;
	padding:3px 30px 3px 30px;
	font-family:Verdana;
	font-size:17px;
	color:#ffffff;
}
.main_table2 {
	background-color:#E7E7E7;
}
.down {
	background-color:#888888;
	padding:12px 10px 6px 10px;
	font-size:11px;
	text-align:center;
	color:white
}
.min {
	width:276px;
	margin-right:2px;
}
.min a {
	text-decoration:none
}
.attach {
	cursor:pointer;
	border:1px white solid
}
.attach img {
	border:1px #BBBBBB solid
}
.big {
	position:absolute;
	top:100px;
	left:120px;
	cursor:pointer;
	background-color:#888888;
	padding:16px;
	border:1px white solid
}
.big img {
	border:1px #BBBBBB solid
}
.big_img img {
	border:1px #777777 solid
}
.gallery {
	background-color:#DDDDDD;
	padding:15px 15px 15px 15px
}
.gallery td {
}
.gallery a {
}
.gallery a img {
	border:1px #CCCCCC solid;
	margin:2px
}
.sub_gallery {
	background-color:#DDDDDD;
	margin-top:1px;
	padding:15px
}
.sbi {
	border:2px #CCCCCC solid;
	margin:2px;
	width:100px;
	height:100px
}
.currr {
	border:2px #DA711C solid;
	margin:2px;
	width:100px;
	height:100px
}
div.squares a {
	display:inline-block;
	width:160px;
	text-align:center;
	height:160px;
	margin-top:14px;
	text-decoration:none
}
.div.squares a img {
	border: 1px solid #808080
}
.div.squares a span {
	display:block;
	margin-top:8px
}
.div.squares a:hover {
}
.div.squares a:hover img {
	border: 1px solid #D46B15
}
.div.squares a:hover span {
	color:#D46B15
}

Searcher · May 12, 2011

anon1, закиньте это все, пожалуйста, на на какой-нибудь хостинг, сразу больше желающих помочь будет.

anon1 · May 12, 2011

http://aikon.lx10.net/index.htm

Проблема в #middle

#middle {

width: 100%;

padding: 7px 0 50px;

height: 1%;

position: relative;

Соответственно в лисе все нормально, в IE мидл уезжает вниз, как ему и положено по статусу. Ежели поставить например padding: 2px;, то в лисе мидл поедет вверх на 5 пикселей.

Edited May 13, 2011 by anon1

Sign In

Проблема с резиновыми картинками

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information