Проблема с разметкой страницы

marsowy · April 29, 2010

Доброго времени суток!

делаю сайт на joomla 1.5.15 ссылка на сайт confiskatonline.ru

на всех страницах после добавления позиции left в шаблон сайта образовалась проблема - содержание страницы съезжает вниз, если разрешение монитора меньше 1280х768!

ниже привожу файлы шаблона и css:

<?php if($this->countModules('left')) : ?>
	  <div style="width:160px; height:600px; float:left; padding:40px;">
		 <jdoc:include type="modules" name="left" />
	  </div>
   <?php endif; ?>   
   <div id="wrapper" style="float:left;">
	  <div class="clr"></div>   
	  <div id="container">
		 <div id="page_content">
			<?php if($this->countModules('right')) : ?>
			   <div id="right_outer">
				  <div id="right_top"></div>
					  <div id="right_inner_float">
						 <div id="right_inner">
							<jdoc:include type="modules" name="right" style="rounded" />
						 </div>
					  </div>
					  <div id="right_bottom"></div>
				   </div>
			<?php endif; ?>	  
			 <div id="content_out<?php echo $contentwidth; ?>">
			   <div id="content_outer">
				  <div id="content">			 
					  <jdoc:include type="message" />
					  <jdoc:include type="component" />
					  <jdoc:include type="modules" name="intext_bottom" />
				  </div>
				  <div class="clr"></div>
			   </div>
			</div>
		 </div>

html {
  height: 100%;
}
body {
   height: 100%;
   margin:0;
   padding:0;
   font-family: verdana,sans-serif;
   font-size: 12px;
   color: #505050;
   background-color: #fff;
   line-height : 145%;
}
#header_container {
   width: 100%;
   height: 110px;
   background-color: #000;
   background-repeat:repeat-x;
   margin-top: 1px;
}
#header {
   width: 998px;   
	height: 110px;
   margin:0 auto;
   padding:0;
}
#flashhg {
   width: 100%;
   height: 100%;
}
#image_logo {
   text-decoration:none;
   float:left;
   width: 830px;
   height: 110px;
   margin: 0 0 0 25px;
   background-image:url('../images/logo.gif');
   background-position: left top;
   background-repeat: no-repeat;
}
#text_logo {
   text-align:left;
   text-decoration:none;
   float:left;
   width: 830px;
   height: 55px;
   margin: 0 0 0 25px;
}
#logo_text {
   width:auto;
   font-family: Arial black;
   font-size: 42px;
   line-height: 70px;
   height: 55px;
   overflow:hidden;
   color: #e2001a;
   text-transform:uppercase;   
}
#logo_slogan {
   width:auto;   
   font-family: Arial black;
   font-size: 18px;
   line-height: 18px;
   color: #fff;
   height: 50px;
   padding: 5px 0 0 100px;
   line-height: normal;
   text-transform:uppercase;   
   overflow:hidden;
}
/* normal topmenu on position user3*/
#navigation_container {
   width: 100%;
   height: 35px;
   background-color: #ff0000;
   background-image:url('../images/dropdown_menu_container.gif');
   background-repeat:repeat-x;
}
#navigation {
   width: 998px;
   height: 35px;
   padding:0;
   margin: 0 auto;
   text-align:center;
   border-left: 1px solid #f24d4d;
}
/* CSS dropdown menu on position dropdown_menu */
#dropdown_menu_container {
   width: 100%;
   height: 35px;
   background-color: #ff0000;
   background-image:url('../images/dropdown_menu_container.gif');
   background-repeat:repeat-x;
}
#dropdown_menu {
   overflow : visible;
   width: auto;
   width: 998px;
   height: 35px;
   padding:0;
   margin: 0 auto;
   text-align:center;
   border-left: 1px solid #f24d4d;
}
#user_modules1_container {
   width: 100%;
   float: right;
   height:auto;
   border:none;
   padding:0;
   margin:0;
   background-image:url('../images/user_modules1.gif');
   background-repeat:repeat-x;
}
#user_modules1 {
   width: 998px;
   height: auto;
   margin: 0 auto;
}
#user_modules1_float {
   float:left;
   width: 998px;
   height: auto;
   border:none;
   padding:0;
   margin: 0;
}
#user5_outer {
   float:left;
   width: 31.3%;
   padding: 0 1% 0 1%;
   overflow:hidden;
}
#user6_outer {
   float:left;
   width: 100%;
   padding: 0 1% 0 1%;
   overflow:hidden;
}
#user7_outer {
   float:left;
   width: 31.3%;
   padding: 0 1% 0 1%;
   overflow:hidden;
}
.line {
   width: 100%;
   height: 5px;
   background-image:url('../images/line.gif');
   background-repeat:repeat-x;
}
#wrapper {
   width: 998px;
   margin: 0 auto;
}
#search {
   float: right;
   margin:0;
   padding:0;
   height: 30px;
   margin: 20px 0 0 0;
   height: 30px;
   width: 140px;
   background-image:url('../images/search.gif');
   background-repeat: no-repeat;
}
#search .inputbox {
   margin: 0 0 0 11px;
   height: 13px;
   font-size: 10px;
   padding: 0 2px 0 2px;
   color: #505050;
   width: 114px;
   border: none;
   background-color: transparent;
   height: 15px;
}
#search .inputbox:hover {
   color: #ff0000;
}
#top_outer {
   width: 514px;
   height: 150px;
   float:right;
   background-image:url('../images/top_outer.gif');
   background-position: center top;
   margin: 15px 10px 0 10px;
   overflow: hidden;
}
#container {
   text-align:left;
   padding: 0;
}
#container2 {
   text-align:left;
   background-color: transparent;
   margin:auto;
}
#page_content {
   padding: 0px;
   margin: 0;
   width: 100%;
}
#right_top {
   float:left;
   height: 25px;
   width: 295px;
   background-image : url(../images/right_top.gif);
   background-repeat : repeat-y;
}
#right_outer {
   float : right;
   width : 295px;
   padding : 0;
   margin : 0;
   background-color:#f7f7f7;
}
#right_inner_float {
   width : 295px;
   float : left;
   background-image : url(../images/right.gif);
   background-repeat : repeat-y;
}
#right_inner {
   float : none;
   padding: 0 2px 2px 8px;
   width : 288px;
}
#right_bottom {
   float:left;
   height: 25px;
   width: 295px;
   background-image : url(../images/right_bottom.gif);
   background-repeat : repeat-y;
}
#content_outer {
   float:left;
   width: 99.8%;
   margin-bottom: 10px;
   background-image : url(../images/content.gif);
   background-repeat : repeat-x;
   background-position:center bottom;
}
#content_outmiddle {
   margin: 0 300px 0 0;
}
#content_outright {
   margin: 0 300px 0 0;
}
#content {
   float:left;
   padding: 0 10px 10px 10px;
   min-height: 400px;
   width: 98%;
}
table.contentpaneopen {
   width : 98%;
}
table.contentpane {
   width : 98%;
   padding : 6px;
   margin : 6px;
}

заранее благодарен за любую помощь

stars · April 29, 2010

а чему вы удивляетесь?

тут

	  <div style="width:160px; height:600px; float:left; padding:40px;">
		 <jdoc:include type="modules" name="left" />
	  </div>

и тут

#wrapper {
   width: 998px;
   margin: 0 auto;
}

складывает width, и считаем... Чтобы не куда не что не улитало надо изначально делать сайт 900~950px а лучше сразу резиной...

marsowy · April 29, 2010

не удивляюсь, но пока не понял как сделать резиновый или другой вариант

кроме того при уменьшении div wrapper width до 800 px все равно при уменьшении окна браузера блоки съезжают вниз - вопрос именно в том что сделать чтобы ликвидировать разъезжание блоков?

stars · April 30, 2010

ну как бы вам обьяснить вот допустим такой код

<div style="overflow: hidden;">
<div style=" width: 300px;float: left;"></div>
<div style=" width: 300px;float: left;"></div>
</div>

при рабочей облости браузера меньше 600px второй div сползет в низ, так как он уже не помещается однако если к style="overflow: scroll;" приписать width: 600px; не кто не куда уже не уползет(однако появятся полосы прокрутки)...

если же написать вот так

<div style="overflow: hidden;width: 100%;">
<div style=" width: 50%;float: left;"></div>
<div style=" width: 50%;float: left;"></div>
</div>

полос прокрутки не будет макет будет тянуться...

Edited April 30, 2010 by stars

marsowy · April 30, 2010

попробую воспользоваться советом и отпишусь что получилось, спасибо за ответ

marsowy · May 6, 2010

сделал как посоветовали, спасибо за совет посмотреть можно здесь: confiskatonline.ru

Sign In

Проблема с разметкой страницы

Question

marsowy

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

stars

Link to comment

Share on other sites

marsowy

Link to comment

Share on other sites

stars

Link to comment

Share on other sites

marsowy

Link to comment

Share on other sites

marsowy

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information