Click to See Complete Forum and Search --> : Positioning Problems


brian_m02
04-03-2006, 06:03 PM
http://www.freewebs.com/fiddle-sticks

Ok, so I listened to a few people, and tried to limit my absolute positioning. I know have a wrapper. But now my content div it not where I'd liek it to be, and the navigation and header text is between my top image and the content div.

WebJoel
04-03-2006, 06:39 PM
Absolute positioning is difficult to use if you're not sure what you're doing. So, how about this:

Your HTML (revised):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Green Tree - Personal Site of Brian Metcalf</title>
<link rel="stylesheet" type="text/css" href="main.css">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content="web design, digital art, free personal site, personal web site, personal site design, hobbies, HTML">
<meta name="description" content="Green Tree is a personal web site of an aspiring web designer and graphic artist who is trying to expand his knowledge of HTML and graphic design">
<meta name="robots" content="FOLLOW,INDEX">
</head>
<body>
<div id="wrapper">
<div id="top"><img src="http://www.freewebs.com/fiddle-sticks/top.png" alt="Welcome To Green Tree"></div>

<div id="content">
<h3>Green Tree -</h3>
<h4>Personal Site of Brian Metcalf</h4>
<a class="links" href="about.html">About Me</a><a class="links" href="works.html">Works</a><a class="links" href="contact.html">Contact Me</a><span class="circ">Home</span>

<hr style="width:100%" />
<h1>Welcome</h1>
<p>Welcome to Green Tree, the personal web site of Brian Metcalf. Feel free to roam through the site as it continues to grow. Check back every now and then to see if I have new digital works. Please feel free to leave a comment too!</p>
<br>
<h2>Free Personal Sites</h2>
<p>Have you been longing for a personal site such as this? If so, I've got an answer for you. I am currently trying to build up a portfolio and would love to make a small site for you. Theses sites will be coded all by hand, and done in a short
amount of time. If you are interested, please <a href="contact.html">contact me</a> and we can get you started.</p>

<br>
<h2>Site Of The Week</h2>
<p>Ok, so I've decided to have a link to a different site each week. In the future if this gets bigger, I may have a few different types of sites each week. If you'd like to request a site, please <a href="mailto:bambam123775@hotmail.com">send me an
e-mail</a> with a link to the site, and why it should be posted.</p>
<p>For the week of March 26, 2006, the Site of the Week is <a href="http://www.webdeveloper.com/">WebDeveloper.com</a>. This site is a great place for new, and experienced web designers who are stuck with a problem or just want to help others. If
you haven't visited WebDeveloper.com I'd suggest you should.</p>
<br>
<div>
<div id="footer">Copyright &copy; 2005-2006 Brian Metcalf</div>
</div>

<!-- --><script type="text/javascript" src="/i.js">
</script></div>
</div>
</body>
</html>


And your CSS (revised):
body
{padding:0; margin:0; border:0;
color:#000000; font-family:verdana; font-size:12pt;
background-color:#cdcdcd; background-image:url(background.bmp);}


a {color:#808080; font-family:verdana; font-size:1em; text-decoration:none;}
a:link {font-weight:bold;}
a:visited {font-weight:bold;}
a:focus {font-weight:bold;}
a:hover {color:#000000; text-decoration:underline;}
a:active {font-weight:bold;}

h1 {color:#000000; font-size:17pt}
h2 {color:#000000; font-size:14pt}
h3 {color:#808080; font-size:15pt; weight:bold;}
h4 {color:#808080; font-size:13pt; weight:bold; width:200px;}

p {text-indent:1em;}
.foot {font-family:verdana; font-size:8pt}

div#wrapper {margin:20px auto; width:593px; height:171px;}

div#top {width:593px; height:171px;}


div#nav {width:591px;}
.links {padding-left:20px; padding-right:20px;}
.circ {padding-left:20px; font-size:18px; font-weight:bold;}

div#content {width:569px; text-align:left; background-color:#FFFFFF; border-color:#757575;
border-width:2px; border-style:none solid solid solid; padding:10px;}

div#footer {font-size:8pt; text-align:center; background-color:#91BE00; border-color:#757575;
border-width:2px; border-style:solid solid solid solid; padding:2px;}
I did away with the position:absolute(s), and centered your WRAPPER with auto-margins. And included something to make it work right in IE, so you may want to change the margin:20px to something else (more or less, but leave the 'margin:0; border:0 padding:0' in there, is corrects a flaw in IE browsers).
I'm sure that this is not 100% the way you want it, but it it solves your biggest problems.... :)
Also, I implore you, -use a graphic other than a *bmp. Bitmaps are SOOOO SLOOOOWWWW to download. -Okay? :)

brian_m02
04-03-2006, 06:45 PM
What does the javascript do for it all?

WebJoel
04-03-2006, 07:04 PM
I haven't the foggiest, my friend. But it's at the end of the page and isn't causing me any problems... so I am not going to sweat it. :) There was also a class="circ" in the html that had nothing in the *css, so I added it with what I think he wants for the word "HOME"...
But basically, just a few things in the wrong place here and a few things not doing anything, and ran a spell-check and corrected a few words.