неправильно отображение слоя в опере

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем TOREN, 11 ноя 2008.

  1. TOREN

    TOREN Гость

    Привет. все браузеры вроде отображают правильно, но Opera не хочет растягивать фон заднего слоя полностью, лишь частично.
    для наглядности вот страница http://rhcp.info/test/
    Заднему фону синим цветом соответвует слой <div id="content">:
    Код (Text):
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title>xxx </title>
    <link rel="stylesheet" type="text/css" href="menu.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="script.js"></script>

    </head>
    <body>

    <div id="content">
    <div class="logo"><a href="index.html"><img src="images/logo.jpg" border="0"></a></div>
    <div class="line"></div>
    <div id="leftcolumn">
    <div id="navi">
    <div class="shapka"><img src="images/shapka_navi.gif" align="top"></div>
    <div class="links">
    <ul id="menu">
    <li><a href="#"><span class="text">xxx</span></a></li>
    <li><a href="#"><span class="text">xxx</span></a>
    <ul>
    <li><a href="#">xxx</a></li>
    <li><a href="#">xxx</a></li>
    <li><a href="#">xxx</a></li>
    <li><a href="#">xxx</a></li>
    </ul>
    </li>
    <li><a href="#"><span class="text">xxx</span></a>
    <ul>

    <li><a href="#">xxx</a></li>
    <li><a href="#">xxx</a></li>
    <li><a href="#">xxx</a></li>
    <li><a href="#">xxx</a></li>

    </ul>
    </li>
    <li><a href="#"><span class="text">xxx</span></a>
    <ul>

    <li><a href="#">xxx</a></li>
    <li><a href="#">xxx</a></li>
    <li><a href="#">xxx</a></li>
    <li><a href="#">xxx</a></li>

    </ul>
    </li>
    <li><a href="#"><span class="text">xxx</span></a>
    <ul>
    <li><a href="#">xxx</a></li>
    <li><a href="#">xxx</a></li>
    <li><a href="#">xxx</a></li>

    </ul>
    </li>
    <li><a href="#"><span class="text">xxx</span></a></li>
    </ul>
    </div>
    <div class="niz_menu"><img src="images/blok_niz.gif" align="top"></div>
    <div class="poisk_shapka"><img src="images/shapka_poisk.gif" align="top"></div>
    <div class="poisk">Скрипт поиск по сайту</div>
    <div class="niz_poisk"><img src="images/niz_poisk.gif" align="top"></div>

    <div class="opros_shapka"><img src="images/shapka_opros.gif" align="top"></div>
    <div class="opros"></div>
    <div class="niz_opros"><img src="images/niz_poisk.gif" align="top"></div>
    </div>
    </div>
    <div id="rightcolumn">
    <div class="about">xxx</div>
    <div class="niz_about"><img src="images/niz_about.gif" align="top"></div>
    <div id="news">
    <div class="shapka_news"><img src="images/shapka_news.gif" align="top"></div>
    <div class="zagolovok_news"><span class="zagolovok_date">Дата</span><span class="zagolovok_name">Заголовок новости</span></div>
    <div class="soderzhanie">Сама новость</div>
    </div>
    <div id="top">
    <div class="shapka_top"><img src="images/shapka_top.gif" align="top"></div>
    <div class="top_soderzhanie">Содержание топа</div>
    <div class="niz_top"><img src="images/niz_top.gif" align="top"></div>
    </div>

    </div>
    <div class="footer"><span class="footer_text">Статистика и копирайты</span></div>
    </div>

    </body>
    </html>
    style.css
    Код (Text):
    html,body {
    margin: 0;
    background-color: #000;
    padding-top: 10px;
    height:100%;
    }


    #content {
    width: 1000px;
    margin-right: auto;
    margin-left: auto;
    background-color: Blue;
    height:100%;
    }

    .logo {
    width: 1000px;
    height: 200px;

    }

    .line {
    height: 25px;
    background: url("images/line.gif");
    }

    #leftcolumn {
    float: left;
    width: 210px;
    background: url("images/fon.gif");
    }

    #rightcolumn {
    float: left;
    width: 790px;

    background: url("images/fon.gif");
    }

    #navi {
    width: 170px;
    background: url("images/fon.gif");
    margin-left: 15px;
    margin-right: 25px;
    margin-top: 13px;

    }
    .shapka {

    width: 170px;
    height: 30px;

    }

    .links {
    width: 170px;
    background: url("images/fon.gif");
    }

    .niz_menu {
    height: 10px;
    width: 170px;
    margin-top: 2px;
    }

    .poisk {
    background: url("images/back_blok.gif");
    height: 37px;
    width: 170px;
    margin-top: 2px;
    }
    .poisk_shapka {
    width: 170px;
    height: 30px;
    margin-top: 15px;
    }

    .niz_poisk {
    width: 170px;
    height: 10px;
    }

    .opros_shapka {
    width: 170px;
    height: 30px;
    margin-top: 15px;
    }

    .opros {
    background: url("images/back_blok2.gif");
    height: 100%;
    width: 170px;
    margin-top: 2px;
    }

    .niz_opros {
    width: 170px;
    height: 10px;
    }

    .about {

    width: 775px;
    height: 176px;
    margin-left: 0px;
    margin-right: 7.5px;
    background: url("images/fon_about.gif");

    }

    .niz_about {
    width: 775px;
    height: 16px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 7.5px;

    }

    #news {

    width: 580px;
    float:left;
    margin-left: 0px;
    margin-right: 12.5px;
    margin-top: 15px;



    }

    .shapka_news {
    width: 580px;
    background: url("images/fon_news.gif");
    }

    .zagolovok_news {
    background: url("images/zagolovok_news.gif");
    margin-top: 2px;
    width: 580px;
    height: 30px;
    }

    .zagolovok_date {
    color: #fff;
    position: relative;
    top:15%;
    left: 5%;
    }

    .zagolovok_name {
    color: #fff;
    position: relative;
    top:15%;
    left: 35%;
    }

    .soderzhanie {
    width: 580px;
    border-left: 1px solid #7c0d00;
    border-bottom: 1px solid #7c0d00;
    margin-bottom: 231px;
    }

    #top {
    width: 170px;
    margin-right: 7.5px;
    margin-top: 15px;

    margin-left: 605px;


    }

    .shapka_top {
    width: 170px;
    height: 30px;

    }

    .top_soderzhanie {
    background: url("images/back_blok2.gif");
    margin-top: 2px;
    width: 170px;
    }

    .niz_top {
    width: 170px;
    height: 10px;
    }


    .footer {
    background: url("images/footer.gif");
    height: 87px;
    width: 1000px;
    float: left;

    }

    .footer_text {
    color: #fff;
    position: relative;
    top:55%;
    left: 65%;
    }
    вообще не понимаю в чем проблема
     
Загрузка...
Похожие Темы - неправильно отображение слоя
  1. Мыш
    Ответов:
    0
    Просмотров:
    260
  2. Мыш
    Ответов:
    2
    Просмотров:
    1.236
  3. anna
    Ответов:
    27
    Просмотров:
    1.409
  4. olegO
    Ответов:
    1
    Просмотров:
    1.294
  5. chiiif2
    Ответов:
    1
    Просмотров:
    1.062

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