Доброе время суток! Нужна помощь! В контейнере находятся div блоки № количество друг за другом (float: left) Что нужно сделать чтобы они не при каких обстоятельствах не вылазили за контейнер? Спасибо!
если я тебя правильно понял то вот overflow: auto; добавит скрол если необходимо, т.е если содержание внутри блока будет больше чем сам блок
мне нужно чтобы блоки с картинками: 1- при скролинге попадали под левую колонку снизу а не сверху как на примере 2- вобще не пересикали левую колонку не сверху не под неё Как это можно сделать? интересует оба пункта Спасибо!
проще всего указать у контейнера min-width: ... ; если в твоей ситуации это не подходит - надо смотреть код
Хочу сделать чтобы на сайте страница скролилась в право и в лево Контентная часть где расположены блоки с картинками идёт под левую калонку а блоки почемуто сверху! Почему они как и контентная часть не заходят под колонку?
INDEX.PHP Код (PHP): <body> <div id="leftside"> <div id="logo"><h1>Портфолио</h1></div> </div> <div id="all"> <div class="slideBox"><a href="#"><img src="img/image.jpg" alt=""></a></div> <div class="slideBox"><a href="#"><img src="img/picture1.jpg" alt=""></a></div> <div class="slideBox"><a href="#"><img src="img/picture2.jpg" alt=""></a></div> <div class="slideBox"><a href="#"><img src="img/image.jpg" alt=""></a></div> <div class="slideBox"><a href="#"><img src="img/picture1.jpg" alt=""></a></div> <div class="slideBox"><a href="#"><img src="img/picture2.jpg" alt=""></a></div> </div> <div id="footer"></div> </div> </body> </html>
css файл Код (PHP): html, body{ margin:0px; padding:0px; height:100%; } #leftside{ margin:0px; padding:0px; position: fixed; background-color: #999; width: 240px; height: 100%; } #logo{ background-color: #666; height:100px; text-align: center; overflow: hidden; } #logo h1{ font-family: Tahoma; font-size: 30px; text-shadow: 0px 1px 0px #e5e5ee;color: #fff;text-align: center; padding-top: 20px; margin-bottom: 15px; margin: 0; } #all{ max-width:1200px; min-width:560px; height:1700px; padding:3px; background-color: #0F0; background: url(../img/1.png)repeat; margin-left: 240px; overflow: hidden; } #footer { margin-left: 240px; height: 75px; background-color: #003; clear: both; } div.slideBox { background-color: #999; width: 200px; height: 280px; position: relative; float: left; margin: 0 0px 40px; overflow: hidden; /*border:6px solid #CCC;*/ box-shadow: 0 0 5px; -webkit-box-shadow: 0 0 5px; -moz-box-shadow: 0 0 5px; } div.slideBox img { position: absolute; width: 200px; height: 280px; }
Код (html): HTML <div id="container"> <div id="col_left"> <!-- Лого и меню --> </div> <div id="col_right"> <div class="slideBox"><a href="#"><img src="img/image.jpg" alt=""></a></div> <div class="slideBox"><a href="#"><img src="img/picture1.jpg" alt=""></a></div> <div class="slideBox"><a href="#"><img src="img/picture2.jpg" alt=""></a></div> <div class="slideBox"><a href="#"><img src="img/image.jpg" alt=""></a></div> <div class="slideBox"><a href="#"><img src="img/picture1.jpg" alt=""></a></div> <div class="slideBox"><a href="#"><img src="img/picture2.jpg" alt=""></a></div> <div style="clear:both;"></div> </div> </div> Код (html): CSS #containet { width:100%; min-width:960px; } #col_left { width:20%; float:left; } #col_right { width:80%; float:left; } так что ли? зачем у тебя в div.slideBox img стоит position: absolute;? сайт сам надо посмотреть. или у тебя на локалке сайт? P.S.: margin: 0 0px 40px; - не путаешься с такими стилями записями?...
при на ведении мышки на картинку она плавно опускается вниз иначе не работает сайт на локалке совсем забыл её удалить
Код (PHP): <div id="leftside"></div> <div id="all"> <div class="slideBox"><a href="#"><img src="img/image.jpg" alt=""></a></div> <div class="slideBox"><a href="#"><img src="img/picture1.jpg" alt=""></a></div> <div class="slideBox"><a href="#"><img src="img/picture2.jpg" alt=""></a></div> <div class="slideBox"><a href="#"><img src="img/image.jpg" alt=""></a></div> <div class="slideBox"><a href="#"><img src="img/picture1.jpg" alt=""></a></div> <div class="slideBox"><a href="#"><img src="img/picture2.jpg" alt=""></a></div> </div> вот это подразумеваю по контейнером <div id="all">........</div> <div id="leftside"></div> этот блок на странице остаётся неподвижным допустим минимальная ширина <div id="all">........</div> блока умещает в строчку 3 блока <div class="slideBox"></div> если уменьшить окно браузера появляется полоса прокрутки снизу Сдвигая эту прокрутку влево <div class="slideBox"></div> блоки накрывают <div id="leftside"></div> сверху , а <div id="all">........</div> идёт под <div id="leftside"></div> Нужно чтобы <div class="slideBox"></div>тоже уходил под<div id="leftside"></div>?
ааа. тогда нужно выставить у левого z-index:1; а у правых блоков z-index:2(можно 100, на всякий случай); опять же, если я правильно понял
