Резиновый сайт

Chuck · August 25, 2011

Сделал резиновую верстку, но все равно появляются горизонтальные полосы прокрутки как это можно исправить и все элементы отображаются с права, как можно сделать чтобы они были по центру.Заранее очень благодарен за советы и ответы.

Это CSS:


* {
	margin: 0;
	padding: 0;
}
html {
	height: 100%;
	width:100%;
}
header, nav, section, article, aside, footer {
	display: block;
}
body {
	font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
	height: 100%;
	width:100%;
	background-color:#000033;
}
a {
	color: blue;
	outline: none;
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}
p {
	margin: 0 0 18px
}
img {
	border: none;
}
input {
	vertical-align: middle;
}
#wrapper {
	width: 100%;
	min-width: 1000px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}
/* Header
—————————————————————————--*/
#header {
	height: 130px;
}
/* Middle
—————————————————————————--*/
#middle {
	width: 100%;
	padding: 0 0 100px;
	height: 1%;
	}
#middle:after {
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
}
#container {
	width: 100%;
	float: left;
	overflow: hidden;
}
#content {
	padding: 0 270px 0 270px;
}
/* Sidebar Left
—————————————————————————--*/
#sideLeft {
	width: 200px;
}
/* Sidebar Right
—————————————————————————--*/
#sideRight {
background-position:center;
	width: 200px;
		}
/* Footer
—————————————————————————--*/
#footer {
	margin: -100px auto 0;
	min-width: 1000px;
	height: 100px;
}
/* menu*/
#knopka{
width:116px;
height:44px;
background-image:url(image/1.png);
position:absolute;
top:20px;
left:240px;

и сам index:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="utf-8" />
	<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
	<meta name="keywords" content="" />
	<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
	<!--[if lte IE 6]><link rel="stylesheet" href="style_ie.css" type="text/css" media="screen, projection" /><![endif]-->
    <script language="JavaScript">
<!--
if (screen.width <= '1024') {
   document.write ('<link href="style1024.css" rel="stylesheet" type="text/css">'); 
}
//-->
</script>
</head>

<body>

<div id="wrapper">

	<header id="header">
    	<div id="knopka">       </div>
   		<div id="prod">       </div>

 	 </header><!-- #header-->

	 <section id="middle">
	 <div id="container">
			<div id="content">
            	<div id="mid">            </div>
           		 <div id="pech">      </div>
  			</div><!-- #content-->
		</div><!-- #container-->
		<aside id="sideLeft">
           	<div id="anim">           </div>
          	<div id="inf">           </div>
		</aside>
<!-- #sideLeft -->

		<aside id="sideRight">
       	 	<div id="animr">               </div>
       		 <div id="teg">               </div>
		</aside>
	<!-- #sideRight -->
	</section>
<!-- #middle-->

</div><!-- #wrapper -->

	<footer id="footer">

	</footer><!-- #footer -->

</body>
</html>

Edited September 22, 2011 by Chuck

Vlad · August 25, 2011

Обрамляйте код тегами [ code ] и [ /code ] без пробелов!

Выставите куда-нибудь страницу, на jsfiddle.net например, листать такое полотнище ну вообще нет желания.

jumancy · August 25, 2011

1) проверяй все паддингы. по моему из-за этого

#content {
        padding: 0 270px 0 270px;
}

2) почти все элементы с абсолютным позиционированием. меняя свойства left и top поставь их куда хочешь

Chuck · August 26, 2011

1) проверяй все паддингы. по моему из-за этого
#content {
        padding: 0 270px 0 270px;
}
2) почти все элементы с абсолютным позиционированием. меняя свойства left и top поставь их куда хочешь

Спасибо за совет, но не помогло. Может нужно указывать расположение в % а не точные координаты?

Edited August 26, 2011 by Chuck

psywalker · August 26, 2011

Chuck,

Раз ты проигнорил просьбу Влада, то вот тебе за это решение соответствующее.

body {

font: 12px/18px Arial, Tahoma, Verdana, sans-serif;

height: 100%;

width:100%;

background-color:#000033;

overflow:hidden;

}

А если хочешь, чтобы тебе помогли, как нужно, предоставь для начала соответствующие условия.

Chuck · August 26, 2011

Chuck,
Раз ты проигнорил просьбу Влада, то вот тебе за это решение соответствующее.
body {
font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
height: 100%;
width:100%;
background-color:#000033;
overflow:hidden;
}
А если хочешь, чтобы тебе помогли, как нужно, предоставь для начала соответствующие условия.

Спасибо за совет, но мне было не понятно зачем нужен данный сайт, если ссылку генерировать то вот она http://jsfiddle.net/vQg5K/. А по поводу большого полотна, просто хотел предоставить всю картину целиком.

Sign In

Резиновый сайт

Question

Chuck

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

jumancy

Link to comment

Share on other sites

Chuck

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Chuck

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information