Помогите с кодом (версткой)

Тема в разделе "Веб-дизайн", создана пользователем Olit, 28 июн 2010.

Статус темы:
Закрыта.
Модераторы: zek24
  1. Olit

    Olit Создатель

    Регистр.:
    19 сен 2009
    Сообщения:
    31
    Симпатии:
    9
    Двигло ДЛЕ 8.5 нулл мид-тим
    Всем привет вот сделал сайт: http://bestrega.ru, в мозиле всё отлично, а вот в опере и в ие, хрень какая-то, часть с контентом не лепиться к левой части, а уходит вниз. Кому не влом, помогите, подскажите код, чтобы всё работало хотяб в опере)
    Спасибо.
    код html(main.tpl:(
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta name="google-site-verification" content="pZ9xvssvjcaHnKsXyRoY_w6ukM8nM86xKeBMwliTqbs" />
    <!-- Yandex.Metrika -->
    <script src="//mc.yandex.ru/metrika/watch.js" type="text/javascript"></script>
    <div style="display:none;"><script type="text/javascript">
    try { var yaCounter1168531 = new Ya.Metrika(1168531); } catch(e){}
    </script></div>
    <noscript><div style="position:absolute"><img src="//mc.yandex.ru/watch/1168531" alt="" /></div></noscript>
    <!-- /Yandex.Metrika -->
    {headers}
    <link rel="stylesheet" type="text/css" href="{THEME}/css/style.css" />
    <link rel="stylesheet" type="text/css" href="{THEME}/css/engine.css" />
    <script language="javascript" type="text/javascript">
    <!--
    function bookmarkthis(title,url) {
    if (window.sidebar) { // Firefox
    window.sidebar.addPanel(title, url, "");
    } else if (document.all) { // IE
    window.external.AddFavorite(url, title);
    } else if (window.opera && window.print) { // Opera
    var elem = document.createElement('a');
    elem.setAttribute('href',url);
    elem.setAttribute('title',title);
    elem.setAttribute('rel','sidebar');
    elem.click();
    }
    }
    //-->
    </script>
    <link rel="shortcut icon" href="favicon.ico"/>

    </head>
    <body>
    {AJAX}
    <div id="wraper">
    <div id="header">
    <div class="menu">
    <ul>
    <li><a href="#">Регистрация фирм</a></li>
    <li><a href="#">Готовые фирмы</a></li>
    <div id="logo"><a href="#" title="Главная">Главная</a></div>
    <li><a href="#">Юридические адреса</a></li>
    <li><a href="#">Связь</a></li>
    </ul>
    </div>
    </div>
    <div id="left"><strong>Разделы сайта:</strong>
    <ul>
    <li><a href="http://bestrega.ru">Главная</a></li>
    <li><a href="#">Услуги</a></li>
    <li><a href="#">Прайс</a></li>

    <li><a href="#">Контакты</a></li>
    <li><a href="#">Карта сайта</a></li>
    <li><a href="#">Новости компании</a></li><br>
    <strong>Дополнительные услуги:</strong>
    <li><a href="#">Изготовление печатей</a></li>
    <li><a href="#">Бухгалтерские услуги</a></li>
    <li><a href="#">Перерегистрация фирм</a></li>
    <li><a href="#">Ликвидация фирм</a></li>
    </ul>
    <div class="podkey"><a href="#" title="Фирма под ключ">Фирма под ключ</a></div>
    </div>
    <div id="content">{content}</div>
    <div id="content-end"><div class="menu2">
    <ul>
    <li><a href="http://bestrega.ru">Главная</a></li>
    <li><a href="#">Новости компании</a></li>
    <li><a href="#">Услуги</a></li>
    <li><a href="#">Полезная информация</a></li>
    <li><a href="#">Контакты</a></li>
    </ul></div></div>
    <div id="footer">
    </div>
    <div class="rek"><strong>Реклама:</strong>{links1}{links2}{links3}{links4}{links}</div>
    <div id="copy">
    copyright 2010 designed &amp; developed by <a target="_blank" href="http://www.olit.su" title="Студия Web и Sound дизайна" rel="OLiT">OLiT Studio</a></div>
    </div>
    </body>
    </html>

    Код css:

    *{
    margin:0;
    padding:0;
    }
    body{
    margin:0 auto;
    padding:0;
    width:1024px;
    height:auto;
    background:#fafafa;
    font-family:Helvetica,Arial,sans-serif;
    font-size:12px;
    color:#323232;

    }

    #wraper {
    margin:0 auto;
    width:1024px;
    height:auto;

    }
    #header {
    margin:0 auto;
    width:1024px;
    height:128px;

    }

    .menu{
    margin:0 auto;
    width:1024px;
    padding:44px 0 0 0;

    }
    .menu ul{
    margin:0 auto;
    display:block;
    width:1024px;
    height:76px;


    }
    .menu ul li{
    margin-left:-1%;
    float:left;
    display:block;
    padding:0 26px 0 0;
    }

    .menu ul li a{
    font-family:'SentinelLight';
    font-size:20px;
    text-decoration:none;
    color:#485254;
    padding:10px;
    display:block;
    outline:none;
    text-shadow:#FFF 1px 1px 1px;}

    .menu ul li a:hover{
    color:#000;
    text-shadow:#FFF 1px 1px 2px;
    }

    #logo {
    margin:0 auto;
    position:relative;
    margin-top:-80px;
    float:left;
    width:320px;
    height:160px;
    background:url(../images/logo.png) no-repeat;
    text-indent:-9999px;
    }

    #logo a {
    margin:0 auto;
    position:relative;
    margin-left:70px;
    display:block;
    width:180px;
    height:140px;

    }
    #left {
    margin:0 auto;
    width:224px;
    height:700px;
    margin-top:30px;
    float:left;
    }

    #left li {
    margin:0 auto;
    padding:5px;
    list-style-type:none;
    font-size:14px;


    }

    #left a {
    text-decoration:none;
    color:#3ca9c4;
    }

    #left a:hover {
    color:#09977b;

    }

    .podkey {
    margin:0 auto;
    padding:0;
    width:180px;
    height:271px;
    margin-left:-1%;
    background:url(../images/keys1.jpg) no-repeat;
    }

    .podkey a {
    text-indent:-9999px;
    display:block;
    width:180px;
    height:271px;

    }

    #content {
    margin:0 auto;
    width:800px;
    height:auto;
    }
    #content p {
    font-size:16px;
    }



    #content-end{
    margin:0 auto;
    width:1024px;
    height:135px;


    }
    .short {
    margin:0 auto;
    width:800px;
    height:auto;

    }
    .short p{
    font-family:'SentinelLightItalic';
    font-size:20px;
    text-align:left;
    color:#black;
    text-shadow:#FFF 1px 1px 1px;}

    #footer {
    margin:0 auto;
    padding:0;
    margin-top:-20px;
    margin-left:4%;
    width:1024px;
    height:109px;
    background:url(../images/footer.png)no-repeat;
    }

    .menu2{
    margin:0 auto;
    position:relative;
    left:-2%;
    top:20%;
    width:1024px;
    padding:54px 0 0 0;

    }
    .menu2 ul{
    margin:0 auto;
    display:block;
    width:1024px;
    height:76px;


    }
    .menu2 ul li{
    margin:0 auto;
    float:left;
    display:block;
    padding:0 20px 0 0;
    }

    .menu2 ul li a{
    font-family:'SentinelLight';
    font-size:20px;
    text-decoration:none;
    color:#485254;
    padding:10px;
    display:block;
    outline:none;
    text-shadow:#FFF 1px 1px 1px;}

    .menu2 ul li a:hover{
    color:#000;
    text-shadow:#FFF 1px 1px 2px;
    }



    .rek {
    margin:0 auto;
    width:1024px;
    height:100px;
    position:relative;
    left:-15%;
    margin-top:-8%;
    }

    .rek a {
    text-decoration:none;
    color:black;

    }

    #copy {
    margin:0 auto;
    padding:0;
    position:relative;
    left:33%;
    margin-top:-2%;
    width:300px;
    height:10px;

    }

    #copy a {
    text-decoration:none;
    color:#3ca9c4;


    }

    #copy a:hover{
    color:#09977b;

    }

    .full {
    margin:0 auto;
    margin-left:78%;
    position:relative;

    }
    .full a {
    color:#3ca9c4;
    }
    .full a:hover{
    color:#09977b;

    }
     

    Вложения:

    • mozila.JPG
      mozila.JPG
      Размер файла:
      119,2 КБ
      Просмотров:
      7
    • opera&ie.JPG
      opera&ie.JPG
      Размер файла:
      56,5 КБ
      Просмотров:
      5
  2. neanton

    neanton Создатель

    Регистр.:
    29 сен 2006
    Сообщения:
    47
    Симпатии:
    11
    #left {
    margin:0 auto;
    width:224px;
    height:700px;
    margin-top:30px;
    float:left;
    }

    #content {
    margin:0 auto;
    width:800px;
    height:auto;
    }

    трабл кроется где-то в этих стилях. попробуй поиграться с width обеих стилей. например уменьшить width у #left
     
  3. askarbin

    askarbin

    Регистр.:
    31 мар 2009
    Сообщения:
    293
    Симпатии:
    36
    Зачем указана ширина для блока с id="short"? Уберите.
    Вам намного проще табличкой сверстать, получится всего-то две колонки и никаких мучений, а так дольше будете со стилями "играться"
     
  4. XPraptor

    XPraptor Создатель

    Регистр.:
    22 ноя 2006
    Сообщения:
    28
    Симпатии:
    2
    Верска

    Я так понял вы в 1024 смотрите? Так у вас ширина общая 1024 - а в обозревателе есть еще бордеры и полоса прокрутки, которую ИЕ из общей ширины берет. Поэтому максимальная ширина обоих блоков не должна быть больше 980px.
     
  5. bork75

    bork75 Д☼брая собака )

    Регистр.:
    21 июн 2008
    Сообщения:
    1.449
    Симпатии:
    716
    Код нужно обрамлять

    Код:
    тегами
    
    :tcl:
     
Статус темы:
Закрыта.