Okay, my web site looks great when the browser window is fully open. When I shrink the window the structure gets messed up. For example, the text in the navigation bar comes out of place, different areas of content become scattered, and so fourth. My questions is, how do I prevent this from happening? Is there a way to make sure no matter the browser size the structure of the web site stays the same? Thanks!
Hi,
It all depends on how you have designed your page and what content you have in your page and how it is arranged?
There is no one answer because it depends on the design and the content.
If you have designed a rigid looking page and then placed it in a fluid page then things will break unless you have made arrangements for elements to reflow as the page shortens.
You can’t expect a graphical horizontal menu to break to two or three lines and still work if it is full of matching graphics. If it’s just text you can let it wrap as required with no problem.
If you have fixed with elements like images in fluid columns then you would probably need to set min-widths as appropriate.
In essence you don’t just design a site and expect it to work everywhere - you design it to work everywhere. That means making decisions all along the way on how things are going to work and “what happens if…” .
If you have a link to the site then perhaps we can make some more specific comments:)
Okay hopefully this link works, its my school project to build a web site. I believe its on the schools server but should work. Let me know!
The main problem is your absolutely placed menu which is removed from the flow and not taking part in the layout.
Try something like this:
<!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" />
<link rel="stylesheet" href="style_sheet.css" type="text/css" />
<title>MikeJamesDesigns</title>
<style type="text/css">
a.color {
color:white
}
a:visited, a:hover {
background:#996633
}
html, body, h1 {
margin:0;
padding:0
}
p {
margin:0 0 1em
}
body {
background: url('http://mr5396.aisites.com/basic_html/pictures/background.png');
}
#wrap {
/*border-style:solid;*/
background-color:#996633;
width:80%;
margin:0 auto;
min-width:800px;
padding:0 0 20px;
}
#content {
position:relative;
margin: auto;
width:80%;
background-color:black;
color:white;
min-height:300px;
}
* html #content {
height:300px
}
#header, #header em {
text-align:center;
width:100%;
height:136px;
position:relative;
overflow:hidden;
}
#header em {
position:absolute;
left:0;
top:0;
background:url(http://mr5396.aisites.com/basic_html/pictures/logo.png) no-repeat 50% 0;
}
ul#menu {
list-style-type:none;
margin:10px 0;
padding:0;
width:100%;
overflow:hidden;
text-align:center;
background:black;
}
ul#menu li {
display:inline;
}
ul#menu li a {
display:inline-block;
width:100px;
background:white;
padding:2px 0;
}
ul#menu li a:link, ul#menu li a:visited {
color:#FFFFFF;
background:black;
text-align:center;
text-decoration:none;
}
ul#menu li a:hover {
background:#996633
}
p:first-letter {
color:white;
font-size:xx-large;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h1>Mike James Designs<em></em></h1>
</div>
<!--end of header div-->
<ul id="menu">
<li><a href="home.html" title="Home" class="color">Home</a></li>
<li><a href="portfolio.html" title="Portfolio" class="color">Portfolio</a></li>
<li><a href="faq.html" title="FAQ" class="color">FAQ</a></li>
<li><a href="bio.html" title="Biography" class="color">Biography</a></li>
<li><a href="testimonials.html" title="Testimonials" class="color">Testimonials</a></li>
<li><a href="contact.html" title="Contact" class="color">Contact</a></li>
</ul>
<!--end of menu div-->
<div id="content">
<p>Welcome to Mike James Designs!</p>
</div>
<!--end of content div-->
</div>
<!--end of wrap div-->
</body>
</html>
I put in some min-widths to hold the page open a bit but you can remove then if you want it to collapse smaller.
The nav is now in the flow of the page and centred so that it could wrap if you remove the min-widths.
I removed the height from the main content and used min-height (width a hack for ie6 as it treats height as a minimum) . You never want to use heights for your content because that would limit it to that height forever.
Hop it helps anyway 
Thanks for the quick reply, I have work so I am heading out right now but I will give it a look when I get home and incorporate this into my site. Thanks for your help! I’ll let you know if it works!! Thanks!