Overflow on Website
when i made my website i made it with div tags not tables, which is what most people do, then i positioned them with the margin property and i have tried it with position:absolute, and relative properties but when i re-size my browser everything changes place, like this -
i want it to stay in place were it is like most websites that use div tags, when you开发者_运维知识库 re-size them they don't move, i wonder what trick they use...
and by the way my website is still in progress lol... Thank You
My Code
<html>
<head>
<title></title>
<link rel = "stylesheet" type = "text/css" href = "verdanacssstylesheet.css" />
<script type="text/javascript" src="external files/jquery.js"></script>
<!-----------START OF SCRIPT------------------------>
<script type = "text/javascript" >
</script>
<!------------END OF SCRIPT AND START OF STYLE-->
<style type = "text/css" >
div {border:2px solid black;}
</style>
<!---------------END OF STYLE AND HEAD AND START OF BODY---------->
</head>
<body style="margin:0px;padding:0px;" text="black" >
<div style="" >
<div id = "header" style="100%;height:150px;" >
<div id = "headerinside" style="margin-left:auto;margin-right:auto;width:1030px;height:150px;" ><div></div></div>
</div>
<div style="width:1030px;height:;margin-left:auto;margin-right:auto" >
<div style = "border:2px solid red;height:30px;" id = "navigationbar" >
<ul style = "list-style:none;" id = "navbar" >
<li style = "float:left;padding-left:45px;line-height:3px;" >hello</li>
<li style = "float:left;padding-left:120px;line-height:3px;" >hello</li>
<li style = "float:left;padding-left:120px;line-height:3px;" >hello</li>
<li style = "float:left;padding-left:120px;line-height:3px;" >hello</li>
<li style = "float:left;padding-left:120px;line-height:3px;" >hello</li>
<li style = "float:left;padding-left:120px;line-height:3px;" >hello</li>
</ul>
</div>
<div id = "main" style="">
<div style="width:1026px;text-align:center;" ><p>hello</p></div>
</div>
<div id = "footer" style="100%;height:150px;" >
<div id = "footerinside" style="margin-left:auto;margin-right:auto;width:1030px;;height:150px;" ><div></div></div>
</div>
</div>
</body>
<!---------------EDN OF BODY------------------->
</html>
divs are block elements, which means they automatically expand to fill the width of their containing element. If you don't want them to expand with the browser window, you should consider wrapping them in a containing div with explicit width, or setting explicit width for each div.
That's my best guess based on your mock-up; if you post some code on jsfiddle for example, you may get a more specific answer :)
[Update]
I've cleaned up your code somewhat. I don't think all the divs had matching opening and closing tags, but it was hard to tell.
I've removed your CSS from the inline styles. There was a lot of duplication which, apart from making the code hard to read, also meant that changes weren't necessarily showing up because they were being overridden in other declarations.
The key in my modified version is the <div id="wrapper">. You'll see in the corresponding style that #wrapper is set to 500px wide and centred horizontally.
Here's the jsfiddle with my updates.
Try this code buddy and see how it works.
<html>
<head>
<title>My Title</title>
<link rel= "stylesheet" type = "text/css" href = "style.css" />
<script type="text/javascript" src="files/jquery.js"></script>
<style type="text/css">
#wrapper { margin: 0 auto; width: 960px; }
.menu, .header, .footer, .content { float: left; width: 100%; }
.menu ul{ float: left;}
.menu li{ float: left; padding: 0 50px ;}
.header{ background: #F1F1F1;}
.content{ background: #E1E1E1;}
.menu{ background: #D1D1D1;}
.footer{ background: #C1C1C1;}
</style>
</head>
<body>
<div id="wrapper">
<div class="header">
<h1>My Site</h1>
</div>
<div class="menu">
<ul>
<li><a href="">Menu 1</a></li>
<li><a href="">Menu 2</a></li>
<li><a href="">Menu 3</a></li>
<li><a href="">Menu 4</a></li>
<li><a href="">Menu 5</a></li>
<li><a href="">Menu 6</a></li>
</ul>
</div>
<div class="content">
<p>My Content</p>
</div>
<div class="footer">
<p>My footer</p>
</div>
</div>
</body>
</html>
This avoids the use of "inline" styles which are a bit of a no no if they can be avoided. It allows you to target a number of elements at the same time to apply a style to. You can see that the structure above is nice and neat and gives you a 960px wide website which remains in the centre of a users screen. One of your styles at the top (border: 2px solid black;) should be avoided as you will end up with a mess of 2px and 4px borders where 2 divs sit next to, or on top of each other.
Hope that helps.
The standard structure to ensure that your site remains in the centre of the page would be something along these lines.
<div id="wrapper">
<div class="header">
<h1>My Site</h1>
</div>
<div class="content">
<p>My Content</p>
</div>
</div>
Which gives you a wrapper along with a header and footer. The css to achieve this is:
#wrapper { margin: 0 auto; width: 960px; }
.header, .footer { float: left; }
That will align the page to the center of the page whenever the user resizes their window. The use of absolute positioning should be limit ( in my view ) until you have a firm grasp of the css box model. Using floats is nice and easy to generate most simple layouts.
加载中,请稍侯......
精彩评论