Границы контейнера

Тема в разделе "Внешний вид, шаблоны, графика", создана пользователем list, 11.01.2012.

  1. Offline

    list Недавно здесь

    Регистрация:
    18.12.2011
    Сообщения:
    28
    Симпатии:
    0
    Пол:
    Мужской
    Доброе время суток! Нужна помощь!
    В контейнере находятся div блоки № количество друг за другом (float: left) Что нужно сделать чтобы они не при каких обстоятельствах не вылазили за контейнер? Спасибо!
     
  2.  
  3. Offline

    Didorri Недавно здесь

    Регистрация:
    01.10.2011
    Сообщения:
    67
    Симпатии:
    2
    Пол:
    Мужской
    если я тебя правильно понял то вот

    overflow: auto; добавит скрол если необходимо, т.е если содержание внутри блока будет больше чем сам блок
     
  4. Offline

    list Недавно здесь

    Регистрация:
    18.12.2011
    Сообщения:
    28
    Симпатии:
    0
    Пол:
    Мужской
    [​IMG] мне нужно чтобы блоки с картинками:
    1- при скролинге попадали под левую колонку снизу а не сверху как на примере
    2- вобще не пересикали левую колонку не сверху не под неё
    Как это можно сделать? интересует оба пункта
    Спасибо!
     
  5. shurikkan
    Offline

    shurikkan Russian Joomla! Team Команда форума

    Регистрация:
    01.09.2011
    Сообщения:
    1 856
    Симпатии:
    162
    Пол:
    Мужской
    проще всего указать у контейнера min-width: ... ;
    если в твоей ситуации это не подходит - надо смотреть код :hz:
     
  6. Offline

    NegrR Недавно здесь

    Регистрация:
    21.01.2012
    Сообщения:
    51
    Симпатии:
    3
    Пол:
    Мужской
    согласен полностью.. А то и просто pading :
     
  7. Offline

    list Недавно здесь

    Регистрация:
    18.12.2011
    Сообщения:
    28
    Симпатии:
    0
    Пол:
    Мужской
    Хочу сделать чтобы на сайте страница скролилась в право и в лево Контентная часть где расположены блоки с картинками идёт под левую калонку а блоки почемуто сверху! Почему они как и контентная часть не заходят под колонку?
     
  8. shurikkan
    Offline

    shurikkan Russian Joomla! Team Команда форума

    Регистрация:
    01.09.2011
    Сообщения:
    1 856
    Симпатии:
    162
    Пол:
    Мужской
    ССЫЛКУ НА СТРАНИЦУ ДАВАЙ ИЛИ ФАЙЛ С ШАБЛОНОМ!
    INDEX.PHP
     
    Последнее редактирование: 25.01.2012
  9. Offline

    list Недавно здесь

    Регистрация:
    18.12.2011
    Сообщения:
    28
    Симпатии:
    0
    Пол:
    Мужской
    INDEX.PHP
    Код (PHP):
    1. <body>
    2.    <div id="leftside">
    3.      <div id="logo"><h1>Портфолио</h1></div>
    4.        </div>
    5.    <div id="all">
    6.         <div class="slideBox"><a href="#"><img src="img/image.jpg" alt=""></a></div>
    7.         <div class="slideBox"><a href="#"><img src="img/picture1.jpg" alt=""></a></div>
    8.         <div class="slideBox"><a href="#"><img src="img/picture2.jpg" alt=""></a></div>
    9.         <div class="slideBox"><a href="#"><img src="img/image.jpg" alt=""></a></div>
    10.         <div class="slideBox"><a href="#"><img src="img/picture1.jpg" alt=""></a></div>
    11.         <div class="slideBox"><a href="#"><img src="img/picture2.jpg" alt=""></a></div>
    12.                     </div>
    13.     <div id="footer"></div>
    14.     </div>
    15. </body>
    16. </html>
     
  10. Offline

    list Недавно здесь

    Регистрация:
    18.12.2011
    Сообщения:
    28
    Симпатии:
    0
    Пол:
    Мужской
    css файл
    Код (PHP):
    1. html, body{
    2.     margin:0px;
    3.     padding:0px;
    4.     height:100%;
    5.     }
    6. #leftside{
    7.     margin:0px;
    8.     padding:0px;
    9.     position: fixed;
    10.     background-color: #999;
    11.    width: 240px;
    12.     height: 100%;
    13. }
    14. #logo{
    15.     background-color: #666;
    16.     height:100px;
    17.     text-align: center;
    18.     overflow: hidden;
    19. }
    20. #logo h1{
    21.    font-family: Tahoma;
    22.     font-size: 30px;
    23.     text-shadow: 0px 1px 0px #e5e5ee;color: #fff;text-align: center;
    24.     padding-top: 20px;
    25.     margin-bottom: 15px;
    26.     margin: 0;
    27. }
    28. #all{
    29.     max-width:1200px;
    30.     min-width:560px;
    31.     height:1700px;
    32.     padding:3px;
    33.     background-color:  #0F0;
    34.    background:  url(../img/1.png)repeat;
    35.     margin-left: 240px;
    36.     overflow: hidden;
    37. }
    38. #footer {
    39.    margin-left: 240px;
    40.     height: 75px;
    41.     background-color: #003;
    42.    clear: both;
    43. }
    44. div.slideBox {
    45.     background-color: #999;
    46.     width: 200px;
    47.     height: 280px;
    48.     position: relative;
    49.     float: left;
    50.     margin: 0 0px 40px;
    51.     overflow: hidden;
    52.     /*border:6px solid #CCC;*/
    53.     box-shadow: 0 0 5px;
    54.     -webkit-box-shadow: 0 0 5px;
    55.     -moz-box-shadow: 0 0 5px;
    56. }
    57. div.slideBox img {
    58.     position: absolute;
    59.     width: 200px;
    60.     height: 280px;
    61. }
     
  11. Offline

    list Недавно здесь

    Регистрация:
    18.12.2011
    Сообщения:
    28
    Симпатии:
    0
    Пол:
    Мужской
    ктонибудь может помочь?
     
  12. shurikkan
    Offline

    shurikkan Russian Joomla! Team Команда форума

    Регистрация:
    01.09.2011
    Сообщения:
    1 856
    Симпатии:
    162
    Пол:
    Мужской
    Код (html):
    1. HTML
    2.  
    3. <div id="container">
    4.   <div id="col_left">
    5.     <!-- Лого и меню -->
    6.   </div>
    7.   <div id="col_right">
    8.     <div class="slideBox"><a href="#"><img src="img/image.jpg" alt=""></a></div>
    9.     <div class="slideBox"><a href="#"><img src="img/picture1.jpg" alt=""></a></div>
    10.     <div class="slideBox"><a href="#"><img src="img/picture2.jpg" alt=""></a></div>
    11.     <div class="slideBox"><a href="#"><img src="img/image.jpg" alt=""></a></div>
    12.     <div class="slideBox"><a href="#"><img src="img/picture1.jpg" alt=""></a></div>
    13.     <div class="slideBox"><a href="#"><img src="img/picture2.jpg" alt=""></a></div>
    14.     <div style="clear:both;"></div>
    15.   </div>
    16. </div>


    Код (html):
    1. CSS
    2.  
    3. #containet {
    4.   width:100%;
    5.   min-width:960px;
    6. }
    7.  
    8. #col_left {
    9.   width:20%;
    10.   float:left;
    11. }
    12.  
    13. #col_right {
    14.   width:80%;
    15.   float:left;
    16. }


    так что ли?
    зачем у тебя в div.slideBox img стоит position: absolute;?

    сайт сам надо посмотреть. или у тебя на локалке сайт?

    P.S.: margin: 0 0px 40px; - не путаешься с такими стилями записями?...
     
    Последнее редактирование: 28.01.2012
  13. Offline

    NegrR Недавно здесь

    Регистрация:
    21.01.2012
    Сообщения:
    51
    Симпатии:
    3
    Пол:
    Мужской
    shurikkan, Весь вопрос, что он подразумевает под контейнером ? Ссылку бы дал что ли...:(
     
  14. Offline

    list Недавно здесь

    Регистрация:
    18.12.2011
    Сообщения:
    28
    Симпатии:
    0
    Пол:
    Мужской
    при на ведении мышки на картинку она плавно опускается вниз иначе не работает

    сайт на локалке

    совсем забыл её удалить
     
    Последнее редактирование: 29.01.2012
  15. Offline

    list Недавно здесь

    Регистрация:
    18.12.2011
    Сообщения:
    28
    Симпатии:
    0
    Пол:
    Мужской
    Код (PHP):
    1. <div id="leftside"></div>
    2. <div id="all">
    3.         <div class="slideBox"><a href="#"><img src="img/image.jpg" alt=""></a></div>
    4.         <div class="slideBox"><a href="#"><img src="img/picture1.jpg" alt=""></a></div>
    5.         <div class="slideBox"><a href="#"><img src="img/picture2.jpg" alt=""></a></div>
    6.         <div class="slideBox"><a href="#"><img src="img/image.jpg" alt=""></a></div>
    7.         <div class="slideBox"><a href="#"><img src="img/picture1.jpg" alt=""></a></div>
    8.         <div class="slideBox"><a href="#"><img src="img/picture2.jpg" alt=""></a></div>
    9. </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>?
     
    Последнее редактирование: 29.01.2012
  16. shurikkan
    Offline

    shurikkan Russian Joomla! Team Команда форума

    Регистрация:
    01.09.2011
    Сообщения:
    1 856
    Симпатии:
    162
    Пол:
    Мужской
    ааа. тогда нужно выставить у левого z-index:1; а у правых блоков z-index:2(можно 100, на всякий случай);
    опять же, если я правильно понял :)
     
    list нравится это.
  17. Offline

    list Недавно здесь

    Регистрация:
    18.12.2011
    Сообщения:
    28
    Симпатии:
    0
    Пол:
    Мужской
    Спасибо! всё получилось
     

Поделиться этой страницей

Загрузка...