overflow:hidden

eremeevd · December 28, 2014

Помогите разобраться слева и справа с помощью overflow:hidden получилось скрыть(обрезать) края картинки, а сверху не получается.

npofopr · December 28, 2014

и не получится.

поднимите картинку, каким нибудь position:relative; top: -40px;

eremeevd · December 28, 2014

Так и сделал как вы написали но,половина шапки скрывается.Понимаю что можно просто обрезать картинку в фотошопе и вставить нужные размеры но просто интересно понять,можно ли (обрезать) скрыть картинку с помощью overflow:hidden.Слева и справа ведь получилось обрезать(скрыть)края .

body,html{
background:url(./images/fon.png);
color: #333;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin:0px;
padding:0px;

}
a {
color: white; /* Цвет ссылок */
}

#wrapper {
width: 993px;
padding:0;
height:1000px;
margin:0 auto;
background:#fff;
border:solid;
position:relative;
overflow-x:hidden;
}
#header{
width:993;
height:100;
background:#fff;
overflow:x-high;
}
#nav li {
display: inline-block;
margin: 0 0.1px;
}

#nav li a {
color: #531604;
text-decoration: none;

}
#nav ul {
list-style-type: none;
float: right;
margin: 40px 45px 50px 0px;

}

#logo{
width:191px;
height:52px;
margin:18px 0 0px 80px;
}
#logo1{
width:173px;
height:10px;
margin:0 0px 20px 85px;
}
.letter{
color:#d8c197;
}
#home{
background:url(./images/fon.png)no-repeat;
padding:9px;
border-radius:45px;
}
.button{
background:url(./images/learn-more2.png)no-repeat;
width: 204px;
height: 54px;
position:absolute;
top: 368px;
right: 0px;
left: 140px;
bottom: 150px;
}
#learn{
width:60px;
height:20px;
position:absolute;
top: 376px;
right: 0px;
left: 160px;
bottom: 150px;
font-size:25px;
text-decoration:none;

}
a:hover{
color:red;
}
#slid{
position:relative;
top: -80px;
left: -300px;

}

<!DOCTYPE html>
<html>
<head>
       <title>Шаблон сайта ресторана</title>
       <meta charset="utf-8">
       <link rel="stylesheet" type="text/css" href="style.css">
</head>
   <body>
            <div id="wrapper">

               <div id="header">
                               <div id="nav">
                               <ul>
                               <li><a href="http://www.yandex.ru" id="home"><span class="letter">Home</span></a></li>
                               <li><a href="*">About Us</a></li>
                               <li><a href="*">Our Menu</a></li>
                               <li><a href="*">Gallery</a></li>
                               <li><a href="*">Blog</a></li>
                               <li><a href="*">Features</a></li>
                               <li><a href="*">Contact Us</a></li>
                                 </ul>
                               </div>

                       <div id="logo"><img src="images/logo.png" alt="logo" ><br></div>
                           <div id="logo1"> <img src="images/67.png" alt="67"></div>

               </div>
               <div class="button"></div>
               <div id="slid">
                       <img src="images/slider.png" alt="slider" >

                   </div>
                   <div class="button"></div>
                   <a href="http://www.yandex.ru" id="learn">learn-more</a>









           </div>
   </body>
</html>

Вот такой не замысловатый код))

Наверное здесь нельзя так писать?

Int · December 28, 2014

Здесь всем лень делать лишние теловдвижения и переносить этот код куда-либо, где его можно проверить, поэтому лучше сразу на jsfiddle или codepen поместить. Отрицательный margin-top не помогает?

eremeevd · December 28, 2014

Отрицательный margin-top помогает картинка сдвигается куда надо,и края скрываются в родительском блоке с помощью overflow:hidden

но почему то только слева и справа и сверху половина шапки закрывает.Может что то я сам путаю...

Или overflow:hidden может только распростронятся на один блок сразу нельзя поставить два родителя?)

Int · December 28, 2014

Я не понял, что значит фраза без запятых "только распростронятся на один блок сразу нельзя поставить два родителя"

Какая шапка? Картинка, которую нужно сдвинуть, она в шапке? Под шапкой? Половина шапки закрывает что именно, сдвинутую картинку? А как должно быть? Можно посмотреть дизайн того, что должно получиться?

eremeevd · December 29, 2014

http://all-psd.ru/site-templates/1984-SHablon_sayta_restorana_ili_kafe.html

eremeevd · December 29, 2014

http://all-psd.ru/site-templates/1984-SHablon_sayta_restorana_ili_kafe.html

Вот что должно получится

http://all-psd.ru/site-templates/1984-SHablon_sayta_restorana_ili_kafe.html
Вот что должно получится

Закрывает слайдер половина шапки

Двигаю картинку отрицательными margin ставлю как нужно и потом можно ли отрезать слева справа и сверху и оставить от картинки только то что нужно??Слева справа отсекаю overflow:hidden значения ставлю у родителя,а сверху картинка не отсекается не скрываются края за шапкой почему то??

Switch74 · December 29, 2014

в приведенном вами коде я вижу только overflow-x:hidden; и ни одной строчки overflow:hidden; какую картинку в каком блоке вы хотите скрыть и на какой блок она наезжает при сдвиге вверх?

eremeevd · December 29, 2014

Вот в этом блоке #wrapper вот эту картинку <div id="slid">
<img src="images/slider.png" alt="slider" >
</div>

Вот на этот блок наезжает #header{
width:993;
height:100;
background:#fff;
overflow:x-high;

#wrapper {
width: 993px;
padding:0;
height:1000px;
margin:0 auto;
background:#fff;
border:solid;
position:relative;
overflow:hidden;
}
#header{
width:993;
height:100;
background:#fff;
overflow:hidden;
}

Вот так делаю скрываются только левая и правая сторона

Скорей всего я ошибаюсь думая что задав блоку header значение overflow:hidden он отрежет(скроет) верхнюю часть картинки.Как это получилось с блоком wrapper.Перед этим всем выставив ее в нужное положение отрицательными margin.

Всем спасибо за помощь разобрался

Switch74 · December 29, 2014

т.е. вы пытаетесь <div id="slid"> спозиционировать внутри <div id="wrapper"> в котором перед блоком <div id="slid"> находится <div id="header">

естесно, поднимая блок <div id="slid"> вверх он налазит на <div id="header">, закрывая его.

не пробовали спозиционировать их с помощью z-index чтобы <div id="header"> был над <div id="slid">?

eremeevd · December 29, 2014

Спасибо за помощь разобрался надо было просто в header прописать вот так overflow:hidden;
position:relative;

Sign In

overflow:hidden

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