CODEWITHSUNDEEP
htmlcss
runizgozilla
runizgozilla

Reputation: 1

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-color: #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

Upvotes: 0

Views: 689

Answers (1)

Jason Gennaro
Jason Gennaro

Reputation: 34855

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/

Upvotes: 1

Related Questions