Блочная верстка. Вопросы по ходу

Тема в разделе "Создание шаблона", создана пользователем LightStorm, 25.04.2010.

  1. Offline

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

    Регистрация:
    04.05.2009
    Сообщения:
    11
    Симпатии:
    0
    Пол:
    Мужской
    Уверен будет полезная тема для всех кто занимаеться блочной версткой.
    Я в этом деле начинающий, возникают вопросы. здесь будуть разбиратьса эти вопросы и ответы на них, очень надеюсь что на все вопросы здесь будуть ответы.
     
  2.  
  3. Offline

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

    Регистрация:
    04.05.2009
    Сообщения:
    11
    Симпатии:
    0
    Пол:
    Мужской
    #conteyner{
    margin:0px;
    padding:0px;
    width:1000px;
    }
    #left{
    margin:0px;
    padding:0px;
    width:184px;
    min-height:350px;
    background:url(../images/Left.png);
    float:left;
    }
    блок left находиться в conteyner. почему контейнер не расширяеться вместе с лефтом?
     
  4. Offline

    Дикий Кошак Недавно здесь

    Регистрация:
    09.03.2009
    Сообщения:
    111
    Симпатии:
    12
    Пол:
    Мужской
    Для начала почитай основные приемы при при верстке слоями
    вот, для примера

    ты просто попытался по табличному начать верстать слоями
     
    LightStorm нравится это.
  5. Offline

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

    Регистрация:
    04.05.2009
    Сообщения:
    11
    Симпатии:
    0
    Пол:
    Мужской
    я понимаю что блоки могут выходить за рамки тех в которые вложеные, но ведь контейнер не имеет четких границ. он в теории должен растягиваться вместе с блоком, но он просто стоит на месте и все тут.

    сейчас перечитываю статейку, но если ктото скажет в чем проблема буду благодарен) это случайно не изза обтекаемости блока лефт?
     
    Последнее редактирование: 25.04.2010
  6. Fanamura
    Offline

    Fanamura Доброта

    Регистрация:
    12.03.2007
    Сообщения:
    5 108
    Симпатии:
    159
    Пол:
    Мужской
    LightStorm,
    Нет, как раз не могут. За исключением абсолютного позиционирования и отрицательных паддингов.
    Как так не имеет? А это что? width:1000px; и width:184px;? В особенности width:184px;, уберите и будет расширяться.

    И кстати, в осле такого нет: min-height:350px; и это не сработает. Ищите в инете, как это можно заменить, материал есть.

    Еще: background:url(../images/Left.png); не тру... а repeat задать? А позиционирование?

    Поставьте себе Firebug и экспериментируйте прямо из браузера на своем сайте.
     
  7. Offline

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

    Регистрация:
    04.05.2009
    Сообщения:
    11
    Симпатии:
    0
    Пол:
    Мужской
    у меня сайт не резиновый и по ширине только 1000 пикселей. а вот тянуться должно по длине. блок лефт идет с обтеканием, по этому за ним не тянться контейнер. как можна исправить даную проблему? ИЕ 6 и 7 пока что не использую, пишу для нормальных браузеров.
     
  8. Fanamura
    Offline

    Fanamura Доброта

    Регистрация:
    12.03.2007
    Сообщения:
    5 108
    Симпатии:
    159
    Пол:
    Мужской
    LightStorm, мы сейчас разговариваем о сферическом коне в вакууме. Дали бы глянуть сам сайт я бы что-нибудь порекомендовал.
     
  9. Offline

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

    Регистрация:
    04.05.2009
    Сообщения:
    11
    Симпатии:
    0
    Пол:
    Мужской
    </head>
    <body>
    <div id="mane">
    <div id="fon">
    <div id="head">
    <div id="globus"></div>
    </div>
    <div id="logo"></div>
    <div id="head_n"></div>
    <div id="conteyner">
    <div id="top"></div>
    <div id="left"></div>
    <div id="content"></div>
    </div>
    </div>
    <div id="top_footer"></div>
    <div id="footer"></div>
    </div>
    </body>
    </html>



    html, body{
    margin:0px;
    padding:0px;
    height:100%;
    }
    #mane{
    margin:0 auto;
    padding:0px;
    width:1000px;
    height:100%;
    }
    #fon{
    margin:0px;
    padding:0px;
    width:1000px;
    min-height:100%;
    background-color:#FFCCCC;
    }
    #logo{
    margin:0px;
    padding:0px;
    width:234px;
    height:132px;
    background:url(../images/logo.png) no-repeat;
    }
    #head{
    margin:0px;
    padding:0px;
    width:766px;
    height:132px;
    background:url(../images/head.png) no-repeat;
    float:right;
    }
    #globus{
    margin:0px;
    margin-left:600px;
    padding:0px;
    width:142px;
    height:184px;
    position:absolute;
    background:url(../images/globus.png) 0 100% no-repeat;
    }
    #head_n{
    margin:0px;
    padding:0px;
    width:1000px;
    height:12px;
    background:url(../images/head_n.jpg);
    }
    #conteyner{
    margin:0px;
    padding:0px;
    width:1000px;
    }
    #left{
    margin:0px;
    padding:0px;
    width:184px;
    min-height:700px;
    background:url(../images/Left.png);
    float:left;
    }
    #top{
    margin:0px;
    padding:0px;
    width:816px;
    height:40px;
    background-color:#B3C4D5;
    float:right;
    }
    #content{
    margin:0px;
    padding:0px;
    width:816px;
    min-height:300px;
    background-color:#66FF66;
    float:right;
    }
    #top_footer{
    margin-top:-30px;
    height:0px;
    clear:both;
    }
    #footer{
    margin:0px;
    margin-top:-30px;
    padding:0px;
    width:1000px;
    height:30px;
    background-color:#000099;
    }
     
  10. Offline

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

    Регистрация:
    04.05.2009
    Сообщения:
    11
    Симпатии:
    0
    Пол:
    Мужской
    фотки в общем неважны
     
  11. Fanamura
    Offline

    Fanamura Доброта

    Регистрация:
    12.03.2007
    Сообщения:
    5 108
    Симпатии:
    159
    Пол:
    Мужской
    Вы везде проставили высоту и ширину, ни о какой резине (тянучке) тут и говорить не приходится
     
  12. Offline

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

    Регистрация:
    04.05.2009
    Сообщения:
    11
    Симпатии:
    0
    Пол:
    Мужской
    наверно в чтото не понимаете. все тянеться. прекрастно тянеться вслед за расширением блоков. высота проставлена в футера и топ блоков. в остальних только минимальная. к томуже если снять с блока лефт обтекание слева то все работает, но тогда возникают проблемы с определением места для других блоков.
    как исправить это? как заставить блок тянуться за расширяющимся блоком с стилем float?
     

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

Загрузка...