Прохожу видео уроки по Joomla и по степени просмотра уроков возникали вопросы и они как то сами решались и все было понятно, но вот по оформлению сайта через CSS блоки, тут вот загвоздка.
<div class="contens">(тут присвоено в свойствах изображение которое должно закрашивать боковые колонки после того как текста на страннице становится много он должен закрашивать а он не закрашивает, ну то есть страница рвется по середине по горизонтали).
<div class="left_contens"></div>(тут левая колонка с картинкой)
<div class="main_contens"></div>(тут текст)
<div class="mod_contens"></div>(и тут текст)
<div class="right_contens"></div>(а тут правая колонка с картинкой)
</div>
Блина вроде понятно...... памагите пожалуйста....
.container {
margin: auto;
width: 775px;
float: none;
}
.top_container {
float: left;
width: 775px;
}
.top_left {
background-image: url(../images/background-1.png);
float: left;
height: 248px;
width: 79px;
}
.top_central {
float: left;
height: 248px;
width: 617px;
}
.name_site {
background-image: url(../images/name_site.png);
float: left;
height: 114px;
width: 617px;
}
.top_menu {
float: left;
height: 35px;
width: 617px;
}
.logo {
background-image: url(../images/logo.png);
float: left;
height: 99px;
width: 617px;
}
.top_right {
background-image: url(../images/background-2.png);
float: left;
height: 248px;
width: 79px;
}
.contens {
float: left;
width: 775px;
background-image: url(../images/background.png);
}
.left_contens {
background-image: url(../images/background-3.png);
float: left;
height: 359px;
width: 79px;
}
.right_contens {
background-image: url(../images/background-4.png);
float: right;
height: 359px;
width: 79px;
}
.main_contens {
float: left;
width: 386px;
height: auto;
}
.mod_contens {
float: left;
width: 231px;
}
.footer {
background-image: url(../images/footer.png);
float: left;
height: 73px;
width: 775px;
}
<body>
<div class="container">
<div class="top_container"></div>
<div class="top_left"></div>
<div class="top_central">
<div class="name_site"></div>
<div class="top_menu"></div>
<div class="logo"></div>
</div>
<div class="top_right"></div>
<!--Основное содержимое-->
<div class="contens">
<div class="left_contens"></div>
<div class="main_contens"></div>
<div class="mod_contens"></div>
<div class="right_contens"></div>
</div>
<!--footer-->
<div class="footer"></div>
</div>
</body>
06.08.2015, 16:43:56