Видимо проблема с таблицей стилей CSS

Stanislav · 22 Мар 2011

Видимо проблема с таблицей стилей CSS

Ребята, подскажите!
Установил DLE движок, залил шаблон сайта, там все построено на блоках DIV со стилями CSS. Все бы ничего, но когда на страницу начинаешь выкладывать материал- он располагается по все ширине, смещая тем самым левый блок с кнопками вниз так, что кнопки распологоются под текстом. В коде страницы ничего выяснить не могу, поскольку все идет в стили. Что можно сделать? Вот код страницы:

<!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" xml:lang="en-gb" lang="en-gb" >
<head>
...


<div class="mega_main_body">
<div class="mega_body_top">
<div class="mega_body_mid">
<div class="mega_body_bot">
<div class="mega_body_i">
<div class="mega_main_menu">
<div id="top-nav">
<ul class="menu">
<li id="current" class="active level1 first"><a href="/" class="level1 first"><span class="bg ">Главная</span></a></li>
<li class=" level1"><a href="/" class="level1"><span class="bg ">Витамины</span></a></li>
<li class="parent level1 parent"><a href="/" class="level1 parent"><span class="bg ">Раздельное питание</span></a></li>
<li class=" level1"><a href="/" class="level1"><span class="bg ">О продуктах</span></a></li>
<li class=" level1"><a href="/" class="level1"><span class="bg ">Диеты</span></a></li>
<li class=" level1"><a href="/" class="level1"><span class="bg ">Рецепты</span></a></li>
</ul>
</div>
</div>
<div class="mega_slide_events">
<div class="mega_slide_events_i">
<div class="mega_slideshow">
<script type="text/javascript" language="javascript">var k = jQuery.noConflict();</script>
<script src="{THEME}/js/jquery.tools.min.js" type="text/javascript" language="javascript"></script>
<div class="scroll_wrapper" style="width: 640px">

<a class="prev browse left"></a>
<div class="scrollable" style="width:640px; height: 300px">
<div class="items">
<div style="width:632px" class="img" >
<img src="{THEME}/images/stories/slideshow/4.jpg" alt="4.jpg" /> </div>
<div style="width:632px" class="img" >
<img src="{THEME}/images/stories/slideshow/3.jpg" alt="3.jpg" /> </div>
<div style="width:632px" class="img" >
<img src="{THEME}/images/stories/slideshow/2.jpg" alt="2.jpg" /> </div>
<div style="width:632px" class="img" >
<img src="{THEME}/images/stories/slideshow/1.jpg" alt="1.jpg" /> </div>
</div>
</div>

<a class="next browse right"></a>
</div>

<script type="text/javascript">

</script>
</div>

<div class="mega_events">
<div class="mega_events_i">
1<div class="megamodule module">
<img src="about">
</div>
</div>
</div>

</div>
</div>
<div class="message_error"></div>
<div class="mega_frontpage">
<div class="mega_frontpage_i">
{custom category="1" template="custom3" aviable="global" from="0" limit="2" cache="yes"}
Здесь будет расположена вся информация на галвной странице
<img src="about.jpg">
gggggggggggggggggggggggggg

<div class="mega_right_col">

<div class="mega_right_col_i">

<div class="mega_modules_right">

<div class="megaclass_1 module_opens">
<div class="megaclass_2">
<div class="megaclass_3">
<div class="megaclass_4">
<div class="megaclass_i">
<h3><span class="title">Реклама</span></h3>
<div class="megamodules_i clearfix">
<table border="0">

<tbody>
<tr>
<th colspan="2" valign="middle">Тематический раздел</th>
</tr>
<tr>
<td class="tdlefttop" valign="middle">рекламный блок</td>
<td class="tdrighttop" valign="middle">рекламный блок</td>
</tr>
<tr>
<td class="tdleft" valign="middle">рекламный блок</td>
<td class="tdright" valign="middle">рекламный блок</td>
</tr>

<tr>
<th colspan="2" valign="middle">Тематический раздел</th>
</tr>
<tr>
<td class="tdlefttop" valign="middle">рекламный блок</td>
<td class="tdrighttop" valign="middle">рекламный блок</td>
</tr>
<tr>
<td class="tdleft" valign="middle">рекламный блок</td>
<td class="tdright" valign="middle">рекламный блок</td>
</tr>
</tbody>

</table> </div>
</div>
</div>
</div>
</div>
</div>
<div class="megaclass_1 module_testimonials">
<div class="megaclass_2">
<div class="megaclass_3">

<div class="megaclass_4">
<div class="megaclass_i">
<h3><span class="title">Полезные ссылки</span></h3>
<div class="megamodules_i clearfix">
<p><img src="{THEME}/images/stories/blockquote_icon.png" border="0" alt="blockquote" style="float: left; margin-right: 10px; margin-top: 5px;" />
"Раздел наполняется"
</p>
<p> </p>

<p style="text-align: right;"><a href="/">Далее...</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="megaclass_1 module_menu">
<div class="megaclass_2">
<div class="megaclass_3">

<div class="megaclass_4">
<div class="megaclass_i">
<h3><span class="title">Наше меню:</span></h3>
<div class="megamodules_i clearfix">
<ul class="menu">
<li class="item40 level1 first"><a href="/" class="level1 first"><span class="bg ">Мясные блюда</span></a></li>
<li class="item38 level1"><a href="/" class="level1"><span class="bg ">Рыбные блюда</span></a></li>
<li class="item38 level1"><a href="/" class="level1"><span class="bg ">Овощные блюда</span></a></li>
<li class="item38 level1"><a href="/" class="level1"><span class="bg ">Суши</span></a></li>
<li class="item43 level1 last"><a href="/" class="level1 last"><span class="bg ">Десерты</span></a></li>
<li class="item43 level1 last"><a href="/" class="level1 last"><span class="bg ">Напитки</span></a></li>
<li class="item43 level1 last"><a href="/" class="level1 last"><span class="bg ">Выпечка</span></a></li>
</ul> </div>
</div>
</div>

</div>
</div>
</div>

</div>

</div>

</div>

<div class="mega_left_col">

<div class="mega_left_col_i">

<div class="mega_content">

<div class="mega_content_i">

<div class="joomla ">
<div class="blog">

[aviable=main]
<div class="leadingarticles">

{custom category="2" template="custom3" aviable="global" from="0" limit="1" cache="yes"}

</div>

<div class="teaserarticles multicolumns">

<div class="first float-left width50">
{custom category="3" template="custom3" aviable="global" from="0" limit="2" cache="yes"}
</div>

<div class="last float-left width50">
{custom category="4" template="custom3" aviable="global" from="0" limit="2" cache="yes"}
</div>

</div>
[/aviable]

[not-aviable=main]
{info}{content}
[/not-aviable]

</div>
</div>

</div>
</div>
</div>
</div>
</div><i style="float:right"></i>
</div>



.......

</html>

kreol · 22 Мар 2011

есть firebug?
и выложите сам css

Stanislav · 22 Мар 2011

/* Document css */
/* Custom style for mod load html */
body.firefox{
margin: 0;
padding: 0;
}
/* Custom style for Qimgscroller */
.scroll_wrapper{
border: 1px #dbb772 solid;
}
.scroll_wrapper .scrollable{
background: #f5daa7;
padding-bottom: 4px;
overflow: hidden;
}
.items div.img{
padding: 4px;
}
/* End */
/* Style for bottom mod contact*/
.module_contact table tr td{
padding: 0;
}
/* Custom style for Opens Time mod */
.module_opens{
color: #8c5c00;
}
.module_opens h3{
background: #b62b00 url(../images/times_open.png) no-repeat 10px 8px;
padding-left: 35px;
margin-bottom: 6px;
}
.mega_modules_right .module_opens table{
margin-bottom: 0;
}
.mega_modules_right .module_opens .megamodules_i{
padding: 0;
}
.module_opens table tr th,
.module_opens table tr td{
padding: 10px 8px;
}
.module_opens table tr td.tdleft,
.module_opens table tr td.tdlefttop{
border-right: 1px #FFF solid;
}
.module_opens table tr td.tdlefttop,
.module_opens table tr td.tdrighttop{
border-bottom: 1px #FFF solid;
}

.module_opens table tr th{
background: #f6daa4;
text-align: left;
color: #8c5c00;
font-size: 16px;
font-weight: normal;
}
/* End */

Это один, но я не совсем понимаю в каком из них искать проблему. Есть еще.

Stanislav · 22 Мар 2011

/* CSS Document */
* {
margin: 0;
padding: 0;
}
body#mega_page{
background: #8c5c00 url(../images/body_bg.jpg) repeat-x 0 0;
color: #575757;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
}
.mega_body{
width: 100%;
margin: 0 auto;
overflow: hidden;
}
.mega_wrapper{
width: 980px;
margin: 0 auto;
}
.mega_wrapper_i,
.mega_header,
.mega_logo_contact,
.mega_main_body,
.mega_main_menu,
.mega_slide_events,
.message_error,
.mega_frontpage,
.mega_body_i,
.mega_bots,
.mega_footer{
width: 100%;
float: left;
}
.mega_wrapper_i{
padding-bottom: 20px;
}
.mega_header{

}
.mega_logobox{
width: 350px;
float: left;
margin-top: 26px;
padding-bottom: 22px;
}
a.mega_logo{
background: url(../images/logo.png) no-repeat;
width: 416px;
height: 95px;
display: block;
}

.mega_contact{
width: 333px;
float: right;
color: #f0dab0;
font-size: 16px;
text-align: right;
margin-right: 2px;
margin-top: 100px
}

/* ++++++++++++ Mega main body +++++++++++++++++ */
.mega_main_body{

}
.mega_body_top,
.mega_body_mid,
.mega_body_bot{
width: 100%;
float: left;
}
.mega_body_top{
background: url(../images/mega_body_top_bg.png) no-repeat left top;
padding-top: 55px;
}
.mega_body_mid{
background: url(../images/mega_body_mid_bg.jpg) repeat-y;
}
.mega_body_bot{
background: url(../images/mega_body_bot_bg.jpg) no-repeat left bottom;
}
.mega_body_i{
padding-bottom: 20px;
}
.mega_main_menu{
margin-top: -47px;
position: relative;
z-index: 9999;
}
.mega_slide_events{
padding: 20px 0px;
}
.mega_slide_events_i{
padding: 0 20px;
}
.mega_slideshow{
width: 646px;
float: left;
}
.mega_events{
width: 270px;
float: right;
color: #8c5c00;
}
.mega_events_i{
background: #E8C583;
border: 1px solid #DBB772;
float: left;
padding: 8px 12px;
width: 246px;
}
.mega_events .mega_title,
.mega_events .megamodules_i{
width: 100%;
float: left;
}
.mega_events .mega_title{
margin-left: -20px;
}
.mega_events .mega_title h3{
background: url(../images/events_h3_bg.jpg) no-repeat;
width: 288px;
height: 35px;
color: #FFF;
font-weight: normal;
line-height: 35px;
margin-bottom: 15px;
}
.mega_events .mega_title h3 span{
font-size: 23px;
line-height: 33px;
padding: 0 45px;
}
.mega_frontpage{
background: #FFF;
padding-top: 20px;
border-top: 1px #d1be9a solid;
}
.mega_frontpage_i{
padding: 0 20px;
padding-bottom: 20px;
overflow: hidden;
}
#system-message{
color: #FF0000;
}
.mega_fp{

}
/* End */
/* ++++++++++++++++++ Mega left column ++++++++++++++ */
.mega_left_col{
width: 500px;
float: left;
}

/* ++++++++++++++++++ Mega right column ++++++++++++ */
.mega_right_col{
width: 272px;
float: right;
}
.mega_modules_right,
.mega_testimonials,
.mega_modules_right .megaclass_1{
width: 100%;
float: left;
margin-bottom: 15px;
}
.mega_modules_right h3{
background: #b62b00;
color: #FFF;
font-size: 25px;
font-weight: normal;
padding: 0 10px;
padding-bottom: 5px;
}
.mega_modules_right .megamodules_i{
background: #f8eedb;
padding: 5px 10px 10px 10px;
overflow: hidden;
}
.mega_modules_right ul li{
padding: 8px 0;
border-bottom: 1px #FFF solid;
}
.mega_modules_right ul li.last{
border-bottom: none;
}
.mega_modules_right ul li li{
padding-left: 15px;
}
.mega_modules_right ul li a{
display: block;
}
.mega_modules_right ul li a:hover{
color: #333;
text-decoration: none;
}
.module_testimonials h3,
.mega_testimonials h3{
background: url(../images/testimonials_icon.png) no-repeat 0px 5px;
font-size: 23px;
padding-left: 35px;
margin-bottom: 15px;
padding-bottom: 0;
font-weight: normal;
color: #b62b00;
}
.module_testimonials h3{
margin-bottom: 10px;
}
.module_testimonials .megaclass_2,
.mega_testimonials .megaclass_2{
background: url(../images/feedback_mid_bg.jpg) repeat-y;
}
.module_testimonials .megaclass_3,
.mega_testimonials .megaclass_3{
background: url(../images/feedback_top_bg.jpg) no-repeat left top;
}
.module_testimonials .megaclass_4,
.mega_testimonials .megaclass_4{
background: url(../images/feedback_bot_bg.jpg) no-repeat left bottom;
}
.module_testimonials .megaclass_i,
.mega_testimonials .megaclass_i{
padding: 10px 20px;
overflow: hidden;
font-style: italic;
}
.mega_modules_right .module_testimonials .megamodules_i{
background: none;
}
/* ++++++++++++++++++++Mega bottom modules ++++++++++++++ */
.mega_bots{
border-top: 1px #d1be9a solid;
}
.mega_bots_i{
padding: 15px 20px;
overflow: hidden;
}
.mega_bots .firstbox{
float: left;
}
.mega_bots .firstbox .megaclassbox_i{
padding-right: 10px;
}
.mega_bots .midbox{
float: left;
margin-left: 2px;
}
.mega_bots .midbox .megaclassbox_i{
padding: 0 10px;
padding-left: 20px;
}
.mega_bots .lastbox{
float: right;
}
.mega_bots .lastbox .megaclassbox_i{
padding-left: 20px;
}
.mega_bots .botbox{
color: #575757;
}
.mega_bots .botbox h3{
margin-bottom: 10px;
padding-bottom: 5px;
color: #8c5c00;
font-size: 28px;
font-weight: normal;
}
.mega_bots .botbox ul{

}
.mega_bots .botbox ul li{
width: 100%;
float: left;
padding: 8px 0;
border-bottom: 1px #64bfff dotted;
}
.mega_bots .botbox a,
.mega_bots .botbox ul li a{
color: #b62b00;
}
.mega_bots .botbox ul li a:hover{
text-decoration: underline;
}

/* ++++++++++++++ Mega footer ++++++++++++++++++ */
.mega_footer{
color: #FFF;
}
.mega_footer_i{
padding: 10px;
overflow: hidden;
}
.mega_copyright{
width: 100%;
color: #c49a49;
}
.mega_copyright a{
color: #FFF;
}
/* ++++++++++++ Custom font for title ++++++++++++++++ */
@font-face {
font-family: 'MTCORSVA';
src: url("MTCORSVA.TTF") /* EOT file for IE */
}
.mega_events .mega_title h3,
.mega_right_col h3,
.mega_bots .botbox h3{
font-family: 'MTCORSVA';
}

kreol · 22 Мар 2011

1) нету дива для контента.
2) надо убрать из класса в ксс .mega_right_col и .mega_left_col значения float. а добавить к ним position:absolute; и расстояние от браузера или ближайшего элемента padding-left или margin-left : значение; и сделать в .mega_left_col меньше width
а вообще шаблон еще тот.... ужасный просто....

Stanislav · 22 Мар 2011

Спасибо, буду пробовать. шаблон, конечно, красивый только снаружи...(((

Видимо проблема с таблицей стилей CSS

Stanislav

Новые

kreol

Новые

Stanislav

Новые

Stanislav

Новые

kreol

Новые

Stanislav

Новые

Похожие темы