Jump to content
  • 0

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

anon1

Asked by anon1,

 Share

Question

anon1 Explorer

anon1

Posted
Posted (edited)

Всем привет;) Имею вот такое безобразие B) Изображения в штате 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 by anon1
Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0
psywalker Explorer

psywalker

Posted
Posted

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

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

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

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

Link to comment
Share on other sites
  • 0
tt48 Explorer

tt48

Posted
Posted (edited) 


<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 by tt48
Link to comment
Share on other sites
  • 0
anon1 Explorer

anon1

Posted
  • Author
Posted (edited)

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

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

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

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

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

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

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

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

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

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

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

Edited by anon1
Link to comment
Share on other sites
  • 0
PanSoul Explorer

PanSoul

Posted
Posted (edited)

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

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

Edited by PanSoul
Link to comment
Share on other sites
  • 0
anon1 Explorer

anon1

Posted
  • Author
Posted

Кое-чего набросал :) Вроде все работает на вскидку, пока:) Мучаюсь с проблемкой на скрине, в 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
}

Link to comment
Share on other sites
  • 0
anon1 Explorer

anon1

Posted
  • Author
Posted (edited)

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

Проблема в #middle

#middle {

width: 100%;

padding: 7px 0 50px;

height: 1%;

position: relative;

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

Edited by anon1
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept