Проблемы с фоном

terminotor · March 26, 2012

Вот сайт. _http://test.kabushikigaisha.ru/webster/ Есть там фоновое изображение с движением на jquery и java и вроде все нормально, фон растягивается на всю страницу, но как только добавляешь много текста в основной контейнер, или снизу прицепляешь футер, то получается белый отступ снизу. Откуда он берется- понятия не имею, вот html и css (в последнем много лишнего, ибо сайт в разработке).

HTML

[code]
<body>
<div id="container">
<div id="overlay">
<div id="glavcontainer">
       <div class="floater">
	   <div id="men">
	   <ul>
	   <li><a href="#" class="rollover"></a></li>
	   <li><a href="#" class="rollover1"></a></li>
	   <li><a href="#" class="rollover2"></a></li>
	   <li><a href="#" class="rollover3"></a></li>
	   </ul>
	   </div>
	   <a href="index.php"><img src="images/shablon_logo_webber.png" style="margin-top:0px" /></a>
	   <div id="men_bottom">
	   <ul>
	   <li><a href="#" class="rollover4"></a></li>
	   <li><a href="#" class="rollover5"></a></li>
	   <li><a href="#" class="rollover6"></a></li>
	   <li><a href="#" class="rollover7"></a></li>
	   </ul>
	   </div>
	   </div>
	   <div id="header">
	   </div>

	   <div id="verh"></div>
	   <div id="contenter">
            <div id="contenter1"></p></div>
</div>
	   <div id="niz"></div>
<div id="footer">

</div>
</div>

      </div>
      </div>
      </body>
</html>
[/code]

CSS

[code]
@charset "utf-8";
/* CSS Document */
body {
	  margin:0 auto;
	  font-family: Arial,Verdana, Geneva, sans-serif;
	  font-size:12px;
	  color:#BDBABA;
	  background:none;
	  padding:0;
	 letter-spacing:1px; 
	 bottom:0;
}

H1 {  font-family: Georgia, "Times New Roman", Times, serif; } 
H2 {  font-family: Georgia, "Times New Roman", Times, serif; } 
H3 {  font-family: Georgia, "Times New Roman", Times, serif; } 
H4 {  font-family: Georgia, "Times New Roman", Times, serif; } 

a img {
    border: none; 
   }

a { text-decoration:none;}

#container {
  background:url(images/background_web1.jpg);

  position:absolute;
  top:0;
  left:0;
  right:0;
  width: 100%;
  height: 100%;
  min-height:850px;
  margin:0 auto;

}

#contenter {
width:100%;
height: auto;
background-image:url(images/Planes-23.png);
margin:0 auto;
padding:0;
margin-top:-15px;

}

#contenter-footer{
width:100%;
height: 194px;
background-image:url(images/Planes-3-3.png);
background-repeat:repeat-x;
margin:0 auto;
padding:0;


}

#contenter1 {
width:60%;
height: auto;
margin:0 auto;
margin-left:450px;
}

#contenter2 {
width:60%;
height: auto;
margin:0 auto;
margin-left:450px;

}

#men {
height:249px;
width:330px;
margin:0 auto;
background-image:url(images/1.png);
}


#men_bottom {
min-height:53%;

width:330px;
position:relative;
bottom:0px;
background-image:url(images/2-new.png);

}

#men_bottom_bottom{
width:330px;
height:auto;

bottom:0;

}

#overlay {
  position:relative;
  background-repeat: repeat-y;
  width: 100%;
  height: 100%;
  min-height:850px;
  background:url(images/background_web21.png);
  margin:0 auto;

}

#glavcontainer {
	width: 100%;
	height: auto;
	margin:0 auto;
	padding-top: 0px;
}

/*Меню верхнее*/



#floatingbar{
 width:960px;
 height:58px;
 background-image:url(images/menu_verh.png);
 background-repeat:no-repeat;


}

#men ul{
 list-style-type:none;
 width:300px;
 text-align:justify;
 display: inline-block;
 padding:0;
 margin: 0 auto;
 table-layout:fixed;
 margin-left:70px;

}

#men ul li{
 text-align:justify;
 display: inline-block;
 padding-top: 7px;
 width:41px;
 margin: -10px auto;
 margin-left:2px;
 font-family:Verdana, Geneva, sans-serif;
 font-size:14px;
 font-weight:bold;
 color:#000;
 text-decoration:none;
}

#men ul li a{
 text-align:justify;
 display: inline-block;
 padding: 0px;
 width:41px;
 margin: 0 auto;

}

/*niz-kitay*/
#men_bottom ul{
 list-style-type:none;
 width:300px;

 text-align:justify;
 display: inline-block;
 padding:0;
 margin: 2px auto;
 table-layout:fixed;
 margin-left:70px;
 position:fixed;
bottom:0px;
}

#men_bottom ul li{

 text-align:justify;
 display: inline-block;
 padding-top: 7px;
 width:41px;
 margin: -10px auto;
 margin-left:2px;
 font-family:Verdana, Geneva, sans-serif;
 font-size:14px;
 font-weight:bold;
 color:#000;
 text-decoration:none;

}

#men_bottom ul li a{
 text-align:justify;
 display: inline-block;
 padding: 0px;
 width:41px;
 margin: 0 auto;

}
/*niz_kitay*/
#column {
  position: absolute;
  top: 0;
  right: 0;
  width: 330px;
  height: 100%;
  background: #E9E9E9;
}


.floater{
position:fixed;
top:0px;
z-index:999;
width:330px;
height:100%;
margin:0 auto;
border-top:none;
color:#ccc;
display:inline-block;
margin-left:100px;
margin-right:100px;
float:left;

}
/*menu*/
A.rollover {
 background: url('images/leck_glav.gif'); /* Путь к файлу с исходным рисунком */

 display: block; /* Рисунок как блочный элемент */
 width: 41px; /* Ширина рисунка */
 height: 200px; /* Высота рисунка */

}

A.rollover:hover {
 background: url('images/leck.gif'); /* Путь к файлу с заменяемым рисунком */

}
A.rollover1 {
 background: url('images/leck_usl.gif'); /* Путь к файлу с исходным рисунком */

 display: block; /* Рисунок как блочный элемент */
 width: 41px; /* Ширина рисунка */
 height: 200px; /* Высота рисунка */

}

A.rollover1:hover {
 background: url('images/leck_usl_hover.gif'); /* Путь к файлу с заменяемым рисунком */

}
A.rollover2 {
 background: url('images/leck_cena.gif'); /* Путь к файлу с исходным рисунком */

 display: block; /* Рисунок как блочный элемент */
 width: 41px; /* Ширина рисунка */
 height: 200px; /* Высота рисунка */

}

A.rollover2:hover {
 background: url('images/leck_cena_hover.gif'); /* Путь к файлу с заменяемым рисунком */

}

A.rollover3 {
 background: url('images/leck_o_nas_hover.gif'); /* Путь к файлу с исходным рисунком */

 display: block; /* Рисунок как блочный элемент */
 width: 41px; /* Ширина рисунка */
 height: 200px; /* Высота рисунка */

}

A.rollover3:hover {
 background: url('images/leck_o_nas.gif'); /* Путь к файлу с заменяемым рисунком */

}

A.rollover4 {
 background: url('images/leck_contacts.gif'); /* Путь к файлу с исходным рисунком */

 display: block; /* Рисунок как блочный элемент */
 width: 41px; /* Ширина рисунка */
 height: 200px; /* Высота рисунка */

}

A.rollover4:hover {
 background: url('images/leck_contacts_hover.gif'); /* Путь к файлу с заменяемым рисунком */

}

A.rollover5 {
 background: url('images/leck_works.gif'); /* Путь к файлу с исходным рисунком */

 display: block; /* Рисунок как блочный элемент */
 width: 41px; /* Ширина рисунка */
 height: 200px; /* Высота рисунка */

}

A.rollover5:hover {
 background: url('images/leck_works_hover.gif'); /* Путь к файлу с заменяемым рисунком */

}

A.rollover6 {
 background: url('images/leck_otz_hover.gif'); /* Путь к файлу с исходным рисунком */

 display: block; /* Рисунок как блочный элемент */
 width: 41px; /* Ширина рисунка */
 height: 200px; /* Высота рисунка */

}

A.rollover6:hover {
 background: url('images/leck_otz.gif'); /* Путь к файлу с заменяемым рисунком */

}

A.rollover7 {
 background: url('images/leck_frend.gif'); /* Путь к файлу с исходным рисунком */

 display: block; /* Рисунок как блочный элемент */
 width: 41px; /* Ширина рисунка */
 height: 200px; /* Высота рисунка */

}

A.rollover7:hover {
 background: url('images/leck_frend_hover.gif'); /* Путь к файлу с заменяемым рисунком */

}
/*menu*/
#verh{
width:100%;
height: 44px;
background-image:url(images/Planes-2.png);

background-repeat:repeat-x;
padding:0;
}
#niz{
width:100%;
height: 44px;
background-image:url(images/Planes-3.png);
background-repeat:repeat-x;
margin-top:-12px;

}

#content_1 {
	height:auto;
	width:auto;
	padding:20px;
	background-image:url(images/shablon_web_content22.png);
	}
#content_2 {
	height:auto;
	width:862px;
	padding:20px;
	background-image:url(images/shablon_web_content22.png);
	margin:0 auto;
	}

#c2_verh{
	width:902px;
	margin:0 auto;
	margin-top:30px;}
#c2_verh_v{
	width:902px;
	margin:0 auto;
	}
#c2_niz{
	width:902px;
	margin:0 auto;}
#footer {
    height:194px;
	text-align:center;
	width:100%;
	background-image: url(images/Planes-3-3.png);
	background-repeat:repeat-x;
	margin-top:50px;
	padding-top:50px;
	}
#footer p a{
	text-align:center;
	}
#header{
width:100%;
height:120px;
}	

/* Scroller Box */

#scroller_container {

position: relative;

width: 100%;

height: 40px;

overflow: hidden;



}

#scroller {

white-space: nowrap;

line-height: 30px;

font-size: 36px;

font-family: Verdana, Arial, Helvetica, sans-serif;

}



/*
	UTILITY STYLES
*/				  				  

.floatLeft 									{ float: left; margin-right: 10px;}
.floatRight									{ float: right; }
.clear 										{ clear: both; }
a											{ outline: none; }


/*
	PAGE STRUCTURE
*/
#page-wrap 									{ width: 902px; position:relative; margin: 0px auto;  min-height:398px;
											  background: url(images/bg1.png) top;
											  background-repeat:no-repeat;}


/*
	TYPOGRAPHY
*/
ul											{ list-style: square inside; }
a, a:visited								{ color: #9cd7f9; text-decoration: none; }
a:hover, a:active							{ color: white; }
blockquote									{ padding: 0 20px; margin-left: 20px; border-left: 20px solid #ccc; font-size: 14px; 
									  		  font-family: Georgia, serif; font-style: italic; margin-top: 10px;}

/*
	SLIDER
*/
.slider-wrap								{ width: 862px; position: relative; top: 30px; 
margin:0 auto; }			
.stripViewer .panelContainer 
.panel ul									{ text-align: left; margin: 0 15px 0 30px; }
.stripViewer								{ position: relative; overflow: hidden; width: 862px; height: 285px; }
.stripViewer .panelContainer				{ position: relative; left: 0; top: 0; }
.stripViewer .panelContainer .panel			{ float: left; height: 100%; position: relative; width: 862px; }
.stripNavL, .stripNavR, .stripNav			{ display: none; }
.nav-thumb 									{ border: 1px solid black; margin-right: 5px; }
#movers-row									{ margin: -43px 0 0 60px; float:left;}
#movers-row div								{ width: 20%; float: left; }
#movers-row div a.cross-link 				{ float: right; }
.photo-meta-data							{ background: url(images/transpBlack.png); padding: 10px; height: 30px; 
											  margin-top: -50px; position: relative; z-index: 998; color: white; font-size: 13px;}
.photo-meta-data span 						{ font-size: 13px; }
.cross-link									{ display: block; width: 62px; margin-top: -14px; 
											  position: relative; padding-top: 15px; z-index: 998; }
.active-thumb 								{ background: transparent url(images/icon-uparrowsmallwhite.png) top center no-repeat; }
[/code]

И еще сюда же-как сделать, что бы то, что в нижнем меню (там где контакты, то что вверх ногами) при уменьшении окна браузера не вылазило за пределы своего блока, в котором оно находится?

terminotor · March 27, 2012

Проблема с фоном решена. Остается меню.

Alma · March 27, 2012

#men_bottom {

background-image: url("images/2-new.png");

bottom: 0;

min-height: 43%;

overflow: hidden;

position: fixed;

width: 330px;

}

это блок уменьшается до своей высоты минимальной, а картинка (пункт меню) остается прежней...

лучше задать в пикселях min-height, по высоте самой высокой картинки

terminotor · March 31, 2012

#men_bottom {
background-image: url("images/2-new.png");
bottom: 0;
min-height: 43%;
overflow: hidden;
position: fixed;
width: 330px;
}
это блок уменьшается до своей высоты минимальной, а картинка (пункт меню) остается прежней...
лучше задать в пикселях min-height, по высоте самой высокой картинки

Спасибо, действительно надо было указать в пикселях

Sign In

Проблемы с фоном

Question

terminotor

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

terminotor

Link to comment

Share on other sites

Alma

Link to comment

Share on other sites

terminotor

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information