Неужели так сложно сделать полоску меню на всю ширину экрана?

yanch258 · October 15, 2012

Доброго времени суток. Вот уже 2 день не могу осуществить задуманное. В сss я первоклассник! Вот и прошу совета !!! Есть сайт eco-life.by Там есть меню, где Главная, Новости.... и т.д.

Так вот, как сделать что бы полоска ЭТОГО меню была на весь экран мониторов (будь то Широкоформ... либо Квадрат...) В общем не важно.

ВАЖНО! но при этом все те же ГЛАВНАЯ ... НОвости оставались на своих местах, то есть В ЦЕНТРЕ.

Советовали всего и много, но в итоге ничего не работает, конечно было подозрение на "криворукость в СSS" но после 5-7 повторных действий – развеялось.

Может кто подскажет нормально, где что убрать что изменить .дописать ...

Это, по моему мнению, то где надо что-то менять!

ЗАРАНЕЕ ВСЕМ СПАСИБО!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

#header{margin:50px auto 20px;min-height:50px;width:960px}

#header ul.nav{background:#80aa1b url(images/pattern1.png) repeat top left;float:right;margin:0px 0 0 40px;width:960px;}

#header ul.nav ul{float:left;margin:0;padding:0;width:100%;ba ckground:#80aa1b url(images/pattern1.png) repeat top left}

#header ul.nav li{float:left;list-style-type:none}

#header ul.nav li a{color:#FFFFFF;display:block;?php echo $prod_fontfamily; ?>,sans-serif;font-size:<?php echo $prod_fontsize_nav; ?>px;padding:13px 20px 13px 18px;position:relative;text-decoration:none;ba ckground:url(images/nav-line.gif) no-repeat right}

#header ul.nav li.noline a{background:none}

#header ul.nav li a:hover,#header ul.nav li a:active{color:#fff;background-color:#3ea8cf}

#header ul.nav li li a,#header ul.nav li li a:link,#header ul.nav li li a:visited{background:none;color:#fff;padding:8 px 14px;position:relative;text-transform:none;wid th:180px;border:0 none}

#header ul.nav li li a:hover,#header ul.nav li li a:active{color:#fff;background:#3ea8cf}

#header ul.nav li ul{height:auto;left:-9999px;margin:0 0 0 -1px;position:absolute;width:208px;z-index:999 9;box-shadow:3px 6px 7px 1px rgba(0,0,0,0.4);-moz-box-shadow:3px 6px 7px 1px rgba(0,0,0,0.4);-webkit-box-shadow:3px 6px 7px 1px rgba(0,0,0,0.4);-moz-border-radius-bottomleft: 5px;-moz-border-radius--bottomright:5px;-moz-b order-radius-topleft:0px;-moz-border-radius--t opright:0px;-webkit-border--bottom-left-radius :5px;-webkit-border--bottom-right-radius:5px;- webkit-border-top-left-radius:0px;-webkit-bord er-top-right-radius:0px}

#header ul.nav li ul a{width:180px}

#header ul.nav li ul ul{margin:-36px 0 0 207px}

#header ul.nav li:hover>ul,#header ul.nav li.sfHover ul{left:auto}

sweb27 · October 16, 2012

У тебя есть там контейнер <div id="wrap"> в стилях его видимо прописана ширина вида width: 960px; попробуй убрать его..

и есть <div id="header"> где опять же #header{margin:50px auto 20px;min-height:50px;width:960px}

Попробуй своё меню освободить от контейнеров..

Edited October 16, 2012 by sweb27

Bryant-24 · October 16, 2012

Вставьте в файл шаблона следующий код сразу после кода:


<ul id="menu-new_menu" class="nav sf-js-enabled sf-shadow">
     <li id="menu-item-63" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-6 current_page_item menu-item-63">
     <li id="menu-item-72" ...</li>
</ul>

<div class="green_line"></div> <!--Этот код вставляем-->

А в файле style.css вот этот код:


.green_line {
    background: url("images/pattern1.png") repeat scroll left top #80AA1B;
    height: 46px;
    position: absolute;
    right: 0;
    top: 315px;
    width: 100%;
}

Правда потом что-то перестаем работать выпадающее меню, но там можно будет подправить

Edited October 16, 2012 by Bryant-24

ils · October 16, 2012

Да пошли вы со своим гелем для душа за 28 тыс.руб. Очередной развод. :angry:

Edited October 16, 2012 by ils

sweb27 · October 16, 2012

Да пошли вы со своим гелем для душа за 28 тыс.руб. Очередной развод.

Дяденька ты пашто ругаешся :boast:

ils · October 16, 2012

Дяденька ты пашто ругаешся

А вы зайдите на сайт ТСа в раздел с ценами и сами узнаете.

yanch258 · October 16, 2012

Дяденька ты пашто ругаешся
А вы зайдите на сайт ТСа в раздел с ценами и сами узнаете.

Уважаемый Ils. А какое отношение имеют разделы сайта к данному топику. И чем Вас удивили цены. Между прочим самые низкие по моему региону (Беларусь (by)).

И соответственно, цены в бел рублях, а не в россии. =)))) и теже 28000 - это не косарь $ =) это 3$ (для справки)

У тебя есть там контейнер <div id="wrap"> в стилях его видимо прописана ширина вида width: 960px; попробуй убрать его..
и есть <div id="header"> где опять же #header{margin:50px auto 20px;min-height:50px;width:960px}
Попробуй своё меню освободить от контейнеров..

Да, действительно, в этом была загвоздка. Но тем не менее, если здесь ставить 100%, как быть, к примеру, если зайти в Новости, либо в заметку. Как её с позиционировать так ,что бы оставались в центре и блок с заметкой и сайтбар. Пробовал применять margin:0 auto; но тогда получается заметка по центру и сайтбар по центру, НО ТОЛЬКО ПОД ЗАМЕТКОЙ.

ils · October 16, 2012

И соответственно, цены в бел рублях, а не в россии. =)))) и теже 28000 - это не косарь $ =) это 3$ (для справки)

Упс. Тогда прошу извинить.

Попробуйте решить свою проблему так.

Сейчас у вас:


    ...
    <div id="wrap">
        ...
        <div id="header">
            <ul id="menu-new_menu" class="nav sf-js-enabled sf-shadow">...</ul>
        </div>
        ...
    </div>
    ...


    #wrap {
        Какие-то стили
    }

Должно быть:


    ...
    <div class="wrap">
        ...
    </div>
    <div id="header">
       <ul id="menu-new_menu" class="nav sf-js-enabled sf-shadow wrap">...</ul>
    </div>
    <div class="wrap">
       ...
    </div>
    ...


    .wrap {
        Какие-то стили
    }
    #header {
        width: 100%;
    }

Edited October 16, 2012 by ils

yanch258 · October 16, 2012

И соответственно, цены в бел рублях, а не в россии. =)))) и теже 28000 - это не косарь $ =) это 3$ (для справки)

Упс. Тогда прошу извинить.

Попробуйте решить свою проблему так.

Сейчас у вас:


    ...
    <div id="wrap">
        ...
        <div id="header">
            <ul id="menu-new_menu" class="nav sf-js-enabled sf-shadow">...</ul>
        </div>
        ...
    </div>
    ...


    #wrap {
        Какие-то стили
    }

Должно быть:


    ...
    <div class="wrap">
        ...
    </div>
    <div id="header">
       <ul id="menu-new_menu" class="nav sf-js-enabled sf-shadow wrap">...</ul>
    </div>
    <div class="wrap">
       ...
    </div>
    ...


    .wrap {
        Какие-то стили
    }
    #header {
        width: 100%;
    }

Да, пустяк... Меня б тоже гель для душа за косярь шокировал бы.

Спасибо, попробуем сделать.

yanch258 · October 17, 2012

В общем, сделал как хотел, но появилась другая проблема, как выровнять блоки сайтбар и основной контент по центру, а то сейчас они прилипли к левому краю???

USF · October 17, 2012

обертка + ширина + margin: 0 auto

yanch258 · October 17, 2012

обертка + ширина + margin: 0 auto

.................

.............

</div>

................

..............

</div>

#wrapper_content {margin: 0 auto;width:100%;}

Сделал так, но ничего не изменилось

Может что-то здесь надо убрать #main_col{margin:15px 0px 30px 60px;padding:0 20px 0 0;float:left;width:600px;border-right:1px solid #eaeaea}

#right_col{margin:15px 0 0 0px;padding-left:30px;float:left;width:200px;font-size:12px}

Edited October 17, 2012 by yanch258

Sign In

Неужели так сложно сделать полоску меню на всю ширину экрана?

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