Why are my elements displacing?
I've made a small sample website, and I'm just wondering:
Why are my elements displacing when I resize the window? Is there a way to stop this?
index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Clean Layout Demo</title>
<link href="css/cleanLayout.css" rel="stylesheet" type="text/css" />
</head>
<body><center>
<div id="header">
Famous Quotes
</div><!-- end #header -->
<div id="menu">
<a href="#">Home</a> | <a href="icons.html">Icons</a>
</div><!-- end #menu -->
<div id="content" style="height:auto;"><br />
Famous Quotes<br /><br /><hr noshade="noshade" /><br />
"Be who you are and say what you feel, because those who mind don't matter, and those who matter don't mind."<br />
- Dr. Seuss<br /><br /><hr noshade="noshade" /><br />
"A person who never made a mistake, never tried anything new."<br />
- Albert Einstein<br /><br /><hr noshade="noshade" /><br />
"Shoot for the moon. Even if you miss, you'll land among the stars."<br />
- Brian Litrell<br /><br /><hr noshade="noshade" /><br />
"Obstacles are things a person sees when he takes his eyes off the goal."<br />
- E. Joseph Cossman<br /><br />
</div><!-- end #content -->
</center></body>
</html>
This is the main pages code
and
this is the css:
@charset "utf-8";
@font-face {
font-family: Clean_Layout;
src:url(../fonts/GeosansLight.ttf)
}
html {
background-col开发者_运维知识库or: #CCC;
}
#header {
font-family: Clean_Layout;
font-size:64px;
text-align:center;
color:#333;
background: #999;
border:2px solid #666;
border-radius:16px;
-moz-border-radius:16px;
-webkit-border-radius:16px;
padding-top:22px;
padding-bottom:0;
width:600px;
height:100px;
margin-bottom:5px;
}
#menu {
font-family: Arial, Helvetica, sans-serif;
font-size:13px;
text-align:center;
color:#333;
width:500px;
background-color:#999;
border:1px solid #666;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
margin-top:3px;
margin-bottom:5px;
padding-top:1px;
padding-bottom:1px;
}
#menu a:link {
text-decoration:none;
color:#333;
}
#menu a:visited {
color:#333;
}
#menu a:hover {
color:#222;
}
#menu a:active {
color:black;
}
#content {
font-family:Clean_Layout;
font-size:24px;
color:#333;
background: #999;
border:3px solid #666;
border-radius:16px;
-moz-border-radius:16px;
-webkit-border-radius:16px;
width:825px;
overflow:auto;
padding-top:5px;
padding-bottom:5px;
padding-left:10px;
padding-right:10px;
margin-bottom:50px;
}
hr {
width:120px;
color:#666;
}
Hope the code helps
Here is a fiddle of the page:
http://jsfiddle.net/jasongennaro/rFESw/
The elements on your page are moving when the page is resized because you have used
<body><center>
to center the page.
But this is what happens when your page is fluid.
If you want the elements to be static you need to give them absolute or fixed positions.
Here's a decent overview of positioning: http://www.alistapart.com/articles/css-positioning-101/
加载中,请稍侯......
精彩评论