So, i'm using a fixed div layout, and have a div that floats on the left side of the page that i want to display the links, but i don't want it to move when the rest of the content moves so if someone wants to go to a different section of the page they can just click one of the links on the left. I've almost got it i think.
I tried using fixed positioning on the left div and had the rest of the page go according to it. However, when the page gets to the point where it needs to scroll horizontally, it starts getting real messy and goes behind the left div and it just looks bad. Also when the page gets resized vertically to small the links disappear and since it's fixed, the user would have to make it larger to get full access of the links.
Here is the code, there's no images in it so you can just copy and paste in notepad or whatever to see:
HTML:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--Created By Will Randolph and Will Housley-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<link type="text/css" rel="stylesheet" href="Styles.css" /><!--[if IE]> <style type="text/css">
body, html {margin-top: 0px;}
</style> <![endif]-->
<title>Web Sites Goods and Bads: What TO Do</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
a.c11 {text-decoration: none;}
p.c10 {font-size: 90%; border: 1px solid #CACACA; padding: 10px;}
h5.c9 {text-align: center; font-style: italic; margin: 0px;}
h3.c8 {text-align: center; font-style: italic; margin: 0px;}
span.c7 {font-size: 130%;}
h1.c6 {margin: 0px; text-align: center;}
ul.c5 {position: absolute; left: -20px; top: 160px; text-align: left; line-height: 25px;}
a.c4 {text-decoration: none; color: white;}
p.c3 {line-height: 60px; height: 100%;}
img.c2 {border: 0px; width: 74px; padding: 0px;}
img.c1 {border: 0px; width: 74px; padding: 0px; float: left;}
/*]]>*/
</style>
</head>
<body>
<div id="container">
<div id="left"><a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" class="c2" /></a>
<p class="links c3"><a href="main.htm">Home</a><br />
<a href="WTD.htm">What TO Do</a><br />
<br />
<br />
<a href="WNTD.htm">What NOT to Do</a> <a href="http://www.w3.org/TR/html4/strict.dtd"></p>
<p>The doctype will be set according to the type of html you are using. See W3Schools for more information.</p>
<br />
<br />
<p style="font-size: 104%; font-weight: bold;"><a name="validated" id="validated">Get Validated</a><br />
<a href="http://validator.w3.org/" class="c11">W3C Validator</a></p>
<p>Another thing google looks at in ranking their websites, and also a great way for knowing that your HTML is correct and most likely cross browser compatable, is getting your code validated by the W3C. You can do it yourself, takes seconds, and if isn't correct, the validator even cleans up your code for you and tells you to try the fixed code! A must have tool for every web designer. And if your code is valid, you get a well known image to place on your website!</p>
<h4>Here is the image</h4>
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="** PLEASE DESCRIBE THIS IMAGE **" />
<p>Put this image somewhere on your website (Preferably somewhere in the corner out of the way), and anyone who knows what their looking for will know that they have come to the right place!</p>
<br />
<br />
<p style="font-size: 104%; font-weight: bold;"><a name="meta" id="meta"><META> Tags</a><br /></p>
<p>One of the biggest things that companies, and basically anyone wanting for their webpage to show up on a search engine has to be the <META> tag. Pretty much any search engine looks at the meta tag, and according to the algorithm, places your website where it should be when someone searches something related to whatever your website is.</p>
<p>The important thing is though, is that you must pick what goes into the meta tag, and you must make sure that you pick wisely. Companies will actually research what specific words have been typed into Google and how many times they have been typed in, and then set their meta tag to those words. To understand More about what meta is, let's look at W3Schools Definition:</p>
<p class="c10">"Metadata is information about data."<br />
<br />
"The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable."<br />
<br />
"Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata."<br />
<br />
"The <meta > tag always goes inside the head element."<br />
<br />
"The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services."<br />
<br /></p>
<br />
<p>And it looks a little something like this:</p>
<p class="c10"><head><br />
<meta name="description" content="Free Web tutorials" /><br />
<meta name="keywords" content="HTML,CSS,XML,JavaScript" /> <meta name="author" content="Hege Refsnes" /><br />
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" /><br />
</head><br />
</p></p>
<p>Learn to use meta and understand how it works, and you will have just gained another great skill in Designing a Web Page</p>
<br /><br />
<p><span style="font-size: 104%; font-weight: bold;"><a name="value" id="value">Offer Something Valuable</a></span><br />
There has to be a reason why people are going to visit your website. It is because they are looking for something that is valuable to them, whether it be information or a product. Make sure that your web site offers these things to it's full potential and your number of customers will grow as well as their satisfaction.
</p>
<br />
<br />
<p><span style="font-size: 104%; font-weight: bold;"><a name="browser" id="value">Browser Compatability</a></span><br />
Some of your viewers may use firefox, some may use internet explorer, some may even use Google Chrome. This can be a BIG problem when designing a web page, as code is read differently by each browser. Be sure that when you create a web page, to test it on as many browsers as you can! This can get frustrating as you might think you have it but then you try it with firefox and everything looks completely wrong. Practice this and you will become a great web designer
</p>
<br />
<br />
</div>
</div>
</body>
</html>
And heres the CSS:
Code:
body, html {
height : 100%;
min-height : 600px;
margin-top : -10px;
margin-bottom: -10px;
position: relative;
color : black;
background-color : #acacac;
border : 0;
padding : 0;
}
p {
font-family : MS Sans Serif;
margin-left : 15px;
margin-right : 10px;
}
#container {
margin-left : auto;
margin-right : auto;
width : 1000px;
position: relative;
background : white;
color : black;
}
#head {
width : 852px;
border : 0 solid black;
background : white;
float : right;
color : black;
}
#left {
width : 148px;
float : left;
height : 100%;
background : black;
color : white;
text-align : center;
position : fixed;
overflow: none;
z-index : 0;
padding : 0;
}
p.links a {
text-decoration : none;
color : white;
cursor: crosshair;
}
p.links a:hover {
font-size : 80%;
font-weight : bold;
color : orange;
}
a.wtdlinks {
text-decoration : none;
color : white;
}
#content {
width : 852px;
background : white;
margin-left: 146px;
margin-top : 20px;
}
Thanks for the help. Any ideas or tips / suggestions are much appreciated
