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

Статус
В этой теме нельзя размещать новые ответы.
Olit

Olit

Создатель
Регистрация
19 Сен 2009
Сообщения
32
Реакции
9
Двигло ДЛЕ 8.5 нулл мид-тим
Всем привет вот сделал сайт:
Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.
, в мозиле всё отлично, а вот в опере и в ие, хрень какая-то, часть с контентом не лепиться к левой части, а уходит вниз. Кому не влом, помогите, подскажите код, чтобы всё работало хотяб в опере)
Спасибо.
код 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 KB · Просмотры: 7
  • opera&ie.JPG
    opera&ie.JPG
    56,5 KB · Просмотры: 5
#left {
margin:0 auto;
width:224px;
height:700px;
margin-top:30px;
float:left;
}

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

трабл кроется где-то в этих стилях. попробуй поиграться с width обеих стилей. например уменьшить width у #left
 
Зачем указана ширина для блока с id="short"? Уберите.
Вам намного проще табличкой сверстать, получится всего-то две колонки и никаких мучений, а так дольше будете со стилями "играться"
 
Верска

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

Код: 
тегами

:tcl:
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху