Другие языки программирования и технологии

Хорошо знающие css господа, помогайте.

Вот есть макет. Каждый пронумерованный элемент - изображение. Как их закрепить с помощью css так, чтобы они располагались так всегда, независимо от разрешения экрана и его размера (чтобы они всегда были друг относительно друга в таком положении и никуда не ехали и не сдвигались) , а так же, чтобы всегда эта группа элементов располагалась в середине страницы, причем, чтобы группа элементов этих занимала определенную часть экрана. (то есть чтобы и на ПК и на телефоне было так) . И еще вопрос можно ли добавить тень на объект на картинке с прозрачным фоном с помощью css? Гуглом пользоваться умею и много всего перепробовал так что если не чувствуете что можете помочь - идите дальше.
Aziz Ereshow
Aziz Ereshow
264
ваще создаёте блок с размером что бы 5 фото стали в ряд - делаете им float:left; , потом создаёте ешё один блок и в них тоже самое между блоками блок-прокладку высоты и ширинц какой вам нужен --так делают все разработчики - вот код-->>>
<style>
.foto{
min-width:850px;
width:850px;
height:160px;
margin:0 auto;

}
div img{
width:17.83%;
height:170px;
margin:1%;
float:left;
}
.spacer{
max-width:850px;
height:40px;
margin:0 auto;
}
.header{
min-width:820px;
width:820px;
border:1px solid #dedede;
margin:0 auto;
}
.header h2{
font-family:Georgia;
padding:50px;
}
</style>
<div class="header"><h2>MИР ХУДОЖЕСТВЕННОГО ФОТО</h2></div>
<div class="spacer"></div>
<div class="foto">
<img src="#"></img>
<img src="#"></img>
<img src="#"></img>
<img src="#"></img>
<img src="#"></img>
</div>
<div class="spacer"></div>
<div class="foto">
<img src="#"></img>
<img src="#"></img>
<img src="#"></img>
<img src="#"></img>
<img src="#"></img>
</div>
<div class="spacer"></div>
<div class="foto">
<img src="#"></img>
<img src="#"></img>
<img src="#"></img>
<img src="#"></img>
<img src="#"></img>
</div>
<div class="spacer"></div>
<div class="foto">
<img src="#"></img>
<img src="#"></img>
<img src="#"></img>
<img src="#"></img>
<img src="#"></img>
</div>
Андрей Рахманенко
Андрей Рахманенко
15 130
Лучший ответ
Aziz Ereshow Спасибо, уже больше похоже на то что мне надо, только вот спейсеры отображаются не между картинками а под картинками, почему? И как заменить хэдер картинкой размером с бокс с надписьЮ?
сначала все эти сунь на div а потом что они были независимо надо задать position absolute и еще если хочешь размер завис от разрешение от экрана тогда jquery поможет if($(window).width() <500){
$(".numbers").css({width: "50px"});
}
Ахман Бисенов
Ахман Бисенов
3 957
Aziz Ereshow было бы все так просто (( все равно 2-11 едут
<style>
#main_block{
width:450px;
min-height:200px;

margin:0px auto;
}
#top_block{
width:450px;
height:50px;
background:#000;
background-image:url(orng.jpg);
background-size:100% 100%;
}
#bot_block .elem_block{
width:450px;
height:50px;
margin-top:25px;
}
#bot_block .elem_block .elem{
margin-left:50px;
width:50px;
height:50px;
background:#000;
background-image:url(orng.jpg);
background-size:100% 100%;
float:left
}
#bot_block .elem_block .first{
margin-left:0px;
background:#000;
background-image:url(orng.jpg);
background-size:100% 100%;
}
</style>

<div id='main_block'>
<div id='top_block'>
</div>
<div id='bot_block'>
<div class='elem_block'>
<div class='elem first'></div>
<div class='elem'></div>
<div class='elem'></div>
<div class='elem'></div>
<div class='elem'></div>
</div>
<div class='elem_block'>
<div class='elem first'></div>
<div class='elem'></div>
<div class='elem'></div>
<div class='elem'></div>
<div class='elem'></div>
</div>
</div>
</div>
Юлиан Польских
Юлиан Польских
1 379

Похожие вопросы