Форум

faraday · #1 (**permalink**) 12.07.2012, 12:49

Здравствуйте, есть div с разными элементами внутри.. задача стоит в изменении его масштаба, но при попытке задат ь через свойство width все элементы внутри плывут и остаются прежнего размера. можно как то сделать чтобы всё масштабировалсь сразу?

dmitriymar · #2 (**permalink**) 12.07.2012, 13:44

Сообщение от faraday

width все элементы внутри плывут и остаются прежнего размера. можно как то сделать чтобы всё масштабировалсь сразу?

задавать им размеры в относительных единицах сразу- если возможно
если нет проходить по всем и масштабировать их.
А вообще -читать про CSS -что наследуется и что как себя ведёт
javascript не замена css . javascript обладает средствами для взаимодействия с css. поэтому не учить css -не выйдет

faraday · #3 (**permalink**) 13.07.2012, 12:57

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

Deff · #4 (**permalink**) 13.07.2012, 14:04

faraday,

Цитата:

Severtain · #5 (**permalink**) 13.07.2012, 14:09

faraday,
Скорее всего изменяются их координаты, или вы чтото не правильно делаете! Попробуйте как в пред. варианте или
http://www.html.by/archive/index.php/t-16688.html?

faraday · #6 (**permalink**) 14.07.2012, 12:58

Спасибо, попробовал менять масштаб блока через масшта кратинок, но отступы между ними почему-то не изменяются, в чем может быть проблема?
http://visdiv.ru/tizer/

Deff · #7 (**permalink**) 14.07.2012, 13:02

Сообщение от faraday

но отступы между ними почему-то не изменяются, в чем может быть проблема?

Добавьте класс

Цитата:

Пропишите css

Цитата:

faraday · #8 (**permalink**) 15.07.2012, 12:24

все равно масштабирует не верно(

<style>
.item{
float:left;
}
.item img{
width:40%;
height:auto;
}
#main{
padding:30px;
background:green;
}
</style>
<div id ='main'>
<div class="item"><img src="http://visdiv.ru/tizer/tizer.jpg" alt="превью" /></div>
<div class="item"><img src="http://visdiv.ru/tizer/tizer.jpg" alt="превью" /></div>
<div class="item"><img src="http://visdiv.ru/tizer/tizer.jpg" alt="превью" /></div>
<div class="item"><img src="http://visdiv.ru/tizer/tizer.jpg" alt="превью" /></div>
<div class="item"><img src="http://visdiv.ru/tizer/tizer.jpg" alt="превью" /></div>
</div>

Deff · #9 (**permalink**) 15.07.2012, 14:07

<body style="padding-top:45px;">

<style>
td img{
width:50%;
height:auto;
border:4px #fff solid!important;
    border-radius:5px;
    -webkit-border-radius:5px;
    -khtml-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
    -ms-border-radius:5px;

    box-shadow: 0px 5px 18px #000;
    -webkit-box-shadow:0px 5px 18px #000;
    -khtml-box-shadow:0px 5px 18px #000;
    -moz-box-shadow:0px 5px 18px #000;
    -ms-box-shadow:0px 5px 18px #000;
}
#main{
 width:100%;
}
#main td{
 width:20%;
 padding:30px;
}
.Wrap{
 background:green;
    border-radius:15px;
    -webkit-border-radius:15px;
    -khtml-border-radius:15px;
    -moz-border-radius:15px;
    -o-border-radius:15px;
    -ms-border-radius:15px;
}
</style>
<div class=Wrap>
<table id=main border="0">
 <tr align=center valign=center>
   <td><img src="http://visdiv.ru/tizer/tizer.jpg" alt="превью" />
   </td>
   <td><img src="http://visdiv.ru/tizer/tizer.jpg" alt="превью" />
   </td>
   <td><img src="http://visdiv.ru/tizer/tizer.jpg" alt="превью" />
   </td>
   <td><img src="http://visdiv.ru/tizer/tizer.jpg" alt="превью" />
   </td>
   <td><img src="http://visdiv.ru/tizer/tizer.jpg" alt="превью" />
   </td>
 </tr>
</table>
</div>

Форум

Справочник

Discord чат

Курсы javascript