Navigation List Positioning

kamaro

01-20-2012, 04:19 PM

Hey, in my website I have a gray box which is all the way to the left and stretches the height of the screen. Its fixed and if you zoom in and out it will remain the same size. I want to put a navBar in that box. I don't mind if this navBar list changes size when you zoom in and out but i want relative to the gray box it's in. (Kinda like a fluid layout I THINK) Thank you.

HTML:

<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="../styless.css" />
<meta charset="utf-8" />
<style>
body { font-family: Helvetica, Arial, sans-serif; }
.container {
width: 30%; left: 0; right: 0; top:0; bottom: 0; position: fixed; overflow: auto;
background-color: #101010;
opacity:.9;
}

</style>
</head>
<body>
<div class="container">
<div class="textBox">
<font size="10" face="abeatbyKai" color="white">

About Us<br>Gallery<br>Affiliates<br>Biography<br>Contact
</font>
</div>
</div>
<script src="../lib/jquery-1.6.4.min.js"></script>
<script src="../jquery.backstretch.min.js"></script>
<script>
$.backstretch("photo1.jpg", {speed: 500});
</script>
<div id="mesh"></div>
</body>
</html>

CSS:

#mesh {
background:url("examples/screen.png");
left: 0;
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 100%;
z-index: -5;
}
.textBox {
width:225px;
height:250px;
background-color:#101010;
margin-top:125px;
margin-left:100px;
}

Dom Mv

01-20-2012, 08:38 PM

I assume that this is what you are looking for:

HTML:

<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="../styless.css" />
<meta charset="utf-8" />
<style>
body { font-family: Helvetica, Arial, sans-serif; }
.container {
width: 30%; left: 0; right: 0; top:0; bottom: 0; position: fixed; overflow: auto;
background-color: #101010;
opacity:.9;
}

</style>
</head>
<body>
<div class="container">
<div class="textBox">
<font size="10" face="abeatbyKai" color="white">

<div class="navigation"
<ul class="navbar">
<li><a href="">About Us</a></li>
<li><a href="">Gallery</a></li>
<li><a href="">Affiliates</a></li>
<li><a href="">Biography</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>

</font>
</div>
</div>
<script src="../lib/jquery-1.6.4.min.js"></script>
<script src="../jquery.backstretch.min.js"></script>
<script>
$.backstretch("photo1.jpg", {speed: 500});
</script>
<div id="mesh"></div>
</body>
</html>

CSS:

#mesh {
background:url("examples/screen.png");
left: 0;
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 100%;
z-index: -5;
}
.textBox {
width:225px;
height:250px;
background-color:#101010;
margin-top:125px;
margin-left:100px;
}
.navigation{
position:absolute;
top:0;
left:0;
}
.navbar{
list-style-type:none;
}

Change the href's as you see fit.

kamaro

01-20-2012, 08:54 PM

uh didn't work. The site which i saw this example in is this - http://themes.themolitor.com/photopharm/
Basically need the words in the grey box to stay consistently spaced as you zoom in and out. When I zoom in and out it tends to either go top left or creates scroll bars