PDA

View Full Version : CSS Navigation/Positioning Q's


Blue_Vision
05-28-2009, 12:42 AM
Ok, I'm trying to learn how to do a very basic vertical navigational menu out of CSS. Excuse me for being so CSS stupid...

I found online how to do a basic nav menu by using html lists. But now I can't figure out how to get things to stay positioned how I want them or anything. My main goal is to have a nav menu on the left side always staying in the same position towards the center of the page without moving around when I resize the windows. At the moment its positioning itself to the top left corner of a browser window so if a browser resizes it follows.

Is making this menu out of html/lists the easiest way? There is no way for it to be 100% CSS on a seperate page so if I ever want to update the menu I don't have to change the html on every page? Just change it in the CSS...

Here is a simple fake example of the code I got going:

HTML:

<body class="body">
<div id="container1">
<ul id="navbar">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>

CSS:

body {
position: relative;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
background-color: #ffffff;
}
#container1 {
width: 600px;
height: 400px;
background: #666666;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}

ul#navbar {
position: absolute;
padding: 15px 10px 15px 20px;
list-style:none;
left: 200px;
top: 50px;
}


Thanks for any comments or help :)

Blue_Vision
05-28-2009, 03:59 AM
well, found the answer on adobe's forum but now I'm trying to figure out if there is a way to insert code into the html css list>nav bar that will place my jpg logo above the text links

Cary
05-28-2009, 06:01 AM
You can use some kind of include for the menu code such as server side include (SSI), PHP include, etc. Then you only have to create and modify the menu code in one place and all the pages will use the current code. I'm not sure why you wouldn't just place the logo image above the links, if that's where you want it.