Jump to content
  • 0

Отступ...


Mestniy96
 Share

Question

Помогите пожалуйста! Вот ссылка на страницу. Там между слайд-шоу и текстом большой пробел и снизу отступ. Ничего понять не могу.  Как убрать эти пробелы?

Вот html:

<!--Это слайдер--><!--We will make a slider with stylized thumbnails using CSS3The markup is very simple:Radio InputsLabels with thumbnails to detect click eventMain Image--><div class="slider"><input id="id1" name="slide_switch" type="radio" /> <label for="id1"> <img src="/karikaturi/images.jpg" style="position: absolute; left: 0px; top: 0px; -webkit-transition: all 0.5s; transition: all 0.5s; opacity: 0; transform: scale(1.1); line-height: 20.7999992370605px;" /><img src="/karikaturi/remont.jpg" style="position: absolute; left: 0px; top: 0px; -webkit-transition: all 0.5s; transition: all 0.5s; opacity: 0; transform: scale(1.1); line-height: 20.7999992370605px;" /><img src="/karikaturi/carikatura-programm.jpg" width="100" /> </label> <img src="/karikaturi/carikatura-programm.jpg" /> <!--Lets show the second image by default on page load--> <input checked="checked" id="id2" name="slide_switch" type="radio" /> <label for="id2"> <img src="/karikaturi/carikatura-programm-2.jpg" width="100" /> </label> <img src="/karikaturi/carikatura-programm-2.jpg" /> <input id="id3" name="slide_switch" type="radio" /> <label for="id3"> <img src="/karikaturi/64479384.jpg" width="100" /> </label> <img src="/karikaturi/64479384.jpg" /> <input id="id4" name="slide_switch" type="radio" /> <label for="id4"> <img src="/karikaturi/images.jpg" width="100" /> </label> <label for="id5"><img src="/karikaturi/remont.jpg" width="100" /> </label></div><!-- We will use PrefixFree - a script that takes care of CSS3 vendor prefixesYou can download it from http://leaverou.github.com/prefixfree/ --><script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script>

А вот CSS:

/*Time for the CSS*/* {margin: 0; padding: 0;}body {background: #ccc;}.slider{ width: 640px; /*Same as width of the large image*/ position: relative; /*Instead of height we will use padding*/ padding-top: 320px; /*That helps bring the labels down*/  margin: 100px auto;  /*Lets add a shadow*/ box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);}/*Last thing remaining is to add transitions*/.slider>img{ position: absolute; left: 0; top: 0; transition: all 0.5s;}.slider input[name='slide_switch'] { display: none;}.slider label { /*Lets add some spacing for the thumbnails*/ margin: 18px 0 0 18px; border: 3px solid #999;  float: left; cursor: pointer; transition: all 0.5s;  /*Default style = low opacity*/ opacity: 0.6;}.slider label img{ display: block;}/*Time to add the click effects*/.slider input[name='slide_switch']:checked+label { border-color: #666; opacity: 1;}/*Clicking any thumbnail now should change its opacity(style)*//*Time to work on the main images*/.slider input[name='slide_switch'] ~ img { opacity: 0; transform: scale(1.1);}/*That hides all main images at a 110% sizeOn click the images will be displayed at normal size to complete the effect*/.slider input[name='slide_switch']:checked+label+img { opacity: 1; transform: scale(1);}/*Clicking on any thumbnail now should activate the image related to it*//*We are done */
Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

Видимо уже поменяли класс .slider и .... неправильно :wacko: , нужно так

.slider {    width: 640px;    position: relative;    padding-top: 120px;    margin: 10px auto;    box-shadow: 0px 10px 20px -5px rgba(0, 0, 0, 0.75);

Результат налицо  51cecc377c724d92fd6810c2a885c8ee.jpeg   :wacko:

Попутно читаем про свойство margin что оно делаети как им пользоваться :wacko:

Edited by Andryshok
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

×
×
  • 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