Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Картинки прыгают при увеличении в браузере 
:(
    Опции темы
Kossssssss
Дата 6.3.2013, 10:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 17
Регистрация: 16.11.2011

Репутация: нет
Всего: нет
Здравствуйте форумчане!
Проблема в следующем при масштабировании страницы в браузере картинки начинают прыгать как это исправить?

Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Классик-АР Главная</title>

<link rel="stylesheet" type="text/css" href="styles.css" />

</head>

<body>
<table width="75%" border="0" align="center" cellpadding="0" cellspacing="0" class="frame">
<tr>
<td>

<div id="header">
  <div align="center"><img  width="75%" src="img/Header2.png" />  </div>
</div>




<div id="zub">
<img width="109" align="alClient"  src="img/zub.png" /></div>

<div id="zub2">
<img  src="img/zub.png" /></div>

<div id="zub3">
<img  src="img/zub.png" /></div>

<div id="zub4">
<img  src="img/zub.png" /></div>

<div id="zub5">
<img  src="img/zub.png" /></div>

<div id="zub6">
<img  src="img/zub.png" /></div>

<div id="zub7">
<img  src="img/zub.png" /></div>

</td>
</tr>
</table>
</body>
</html>





Код

*{
    /* A universal CSS reset */
    margin:0;
    }
body{
background-image:url(img/bg11.jpg);
position:relative;
}



#header{
z-index:50;
position:absolute;
padding-top: 10px;
margin:auto;
}


#zub{
    z-index:49;
    position:absolute;
    margin:auto;
    top:110px;
    left: 227px;

    

}

#zub2{
    z-index:49;
    position:absolute;
    margin:auto;
    padding-top:110px;
    left: 350px;
}

#zub3{
    z-index:49;
    position:absolute;
    margin:auto;
    padding-top:110px;
    left: 470px;
}

#zub4{
    z-index:49;
    position:absolute;
    margin:auto;
    padding-top:110px;
    left: 590px;
}

#zub5{
    z-index:49;
    position:absolute;
    margin:auto;
    padding-top:110px;
    left: 710px;
}

#zub6{
    z-index:49;
    position:absolute;
    margin:auto;
    padding-top:110px;
    left: 825px;
}

#zub7{
    z-index:49;
    position:absolute;
    margin:auto;
    padding-top:110px;
    left: 940px;
}


#telo{
width: 73.4%;
background:#ffffff;
margin-left:13.4%;

}



Так при масштабе 100%:
user posted image

а так при масштабе 150%:
user posted image


Это сообщение отредактировал(а) Kossssssss - 6.3.2013, 10:59

Присоединённый файл ( Кол-во скачиваний: 0 )
Присоединённый файл  Classik.rar 414,97 Kb
PM MAIL   Вверх
CruorVult
Дата 6.3.2013, 14:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 868
Регистрация: 24.9.2008
Где: г.Киев, Украина

Репутация: 1
Всего: 28
Потому что изображение хедера указано в процентах (относительно размера окна) а зубы в пикселях  
PM MAIL Skype   Вверх
Kossssssss
Дата 6.3.2013, 15:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 17
Регистрация: 16.11.2011

Репутация: нет
Всего: нет
Даже если в процентах зубы ставлю всё равно ни чего не меняется
PM MAIL   Вверх
Aliance
Дата 6.3.2013, 18:01 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 2
Всего: 137
http://habrahabr.ru/post/42151/


--------------------
• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript
PM MAIL WWW ICQ Skype   Вверх
Kossssssss
  Дата 7.3.2013, 13:17 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 17
Регистрация: 16.11.2011

Репутация: нет
Всего: нет
Исправьте пожалуйста как правильно должно быть второй день мучаюсь, а понять не могу smile   . Может как то можно это всё это обернуть  во что нибудь??? smile smile smile
PM MAIL   Вверх
Kossssssss
Дата 7.3.2013, 21:18 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 17
Регистрация: 16.11.2011

Репутация: нет
Всего: нет
Решено:

HTML
<div id="zub" >
<a href="demo.html">
<img [COLOR="Red"]style="min-width: 100%; max-width: 100%"[/COLOR]  onmouseover="this.src='img/zubb.png';" onmouseout="this.src='img/zub.png';" alt="image001" src="img/zub.png"   /> </a></div>

<div id="zub2">
<a href="demo.html">
<img [COLOR="red"]style="min-width: 100%; max-width: 100%"[/COLOR] onmouseover="this.src='img/zub2b.png';" onmouseout="this.src='img/zub2.png';" alt="image001" src="img/zub2.png"  /> </a></div>

<div id="zub3">
<a href="demo.html">
<img [COLOR="red"]style="min-width: 100%; max-width: 100%"[/COLOR] onmouseover="this.src='img/zub3b.png';" onmouseout="this.src='img/zub3.png';" alt="image001" src="img/zub3.png"  /> </a></div>

<div id="zub4">
<a href="demo.html">
<img style="min-width: 100%; max-width: 100%" onmouseover="this.src='img/zub4b.png';" onmouseout="this.src='img/zub4.png';" alt="image001" src="img/zub4.png"  /> </a></div>

<div id="zub5">
<a href="demo.html">
<img [COLOR="red"]style="min-width: 100%; max-width: 100%"[/COLOR] onmouseover="this.src='img/zub5b.png';" onmouseout="this.src='img/zub5.png';" alt="image001" src="img/zub5.png"  /> </a></div>

<div id="zub6">
<a href="demo.html">
<img [COLOR="red"]style="min-width: 100%; max-width: 100%"[/COLOR] onmouseover="this.src='img/zub6b.png';" onmouseout="this.src='img/zub6.png';" alt="image001" src="img/zub6.png"  /> </a></div>

<div id="zub7">
<a href="demo.html">
<img [COLOR="red"]style="min-width: 100%; max-width: 100%"[/COLOR] onmouseover="this.src='img/zub7b.png';" onmouseout="this.src='img/zub7.png';" alt="image001" src="img/zub7.png"  /> </a></div>


Код



#zub{
    z-index:49;
    position: absolute; 
    top:12%;
    left: 14%;
    [COLOR="red"]width:11%;[/COLOR]    
    
    
}

#zub2{
    z-index:49;
    position:absolute;
    margin:auto;
    top:12%;
    left: 24%;
    [COLOR="red"]width:11%;[/COLOR]
}

#zub3{
    z-index:49;
    position:absolute;
    margin:auto;
    top:12%;
    left: 34%;
    [COLOR="red"]width:11%;[/COLOR]
}

#zub4{
    z-index:49;
    position:absolute;
    margin:auto;
    top:12%;
    left: 44%;
    [COLOR="red"]width:11%;[/COLOR]
}

#zub5{
    z-index:49;
    position:absolute;
    margin:auto;
    top:12%;
    left: 54%;
    [COLOR="red"]width:11%;[/COLOR]
}

#zub6{
    z-index:49;
    position:absolute;
    margin:auto;
    top:12%;
    left: 64%;
    [COLOR="red"]width:11%;[/COLOR]
}

#zub7{
    z-index:49;
    position:absolute;
    margin:auto;
    top:12%;
    left: 74%;
    [COLOR="red"]width:11%;[/COLOR]
}


только теперь ещё проблемка ухудшилось качество картинок зубов кто подскажет как это исправить?

Это сообщение отредактировал(а) Kossssssss - 7.3.2013, 21:19
PM MAIL   Вверх
SiteVizitka
Дата 9.3.2013, 18:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 53
Регистрация: 24.6.2012

Репутация: нет
Всего: нет
Не знаю куда там зубы вылетают, но рекомендовал бы не мешать табличную вёрстку сайта с дивной.
И, конечно, размеры и позиционирование зубов д.б. точно таким же способом, как и позиционирование десны.

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

И, судя по дизайну, лучше не пытаться сэкономить на зубах - сделайте одну картинку десны с зубами, это проще в плане позиционирования  smile 


Это сообщение отредактировал(а) SiteVizitka - 9.3.2013, 18:40
PM WWW   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0920 ]   [ Использовано запросов: 20 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.