Web Design Forum: NavBar Positioning - Web Design Forum

Jump to content

WDF
WDF Premium Memberships Reseller Hosting
Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

NavBar Positioning

#1 User is offline   sammyk 

  • Forum Newcomer
  • Pip
  • Group: Members
  • Posts: 13
  • Joined: 04-January 12
  • Reputation: 0

Posted 20 January 2012 - 04:43 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;
}

0

#2 User is offline   Mr Ben 

  • Forum Newcomer
  • Pip
  • Group: Members
  • Posts: 18
  • Joined: 14-January 11
  • Reputation: 0
  • Gender:Male
  • Experience:Intermediate
  • Area of Expertise:Web Developer

Posted 20 January 2012 - 08:33 PM

Hey,

Im not sure if i understand your question properly but i will try to help. Did you mean that you want the box not to increase with the page size? try using pixel values rather than percentage values. Perhaps decide on a specific size of box and set the height and width accordingly in pixels?

With the navbar as well, im not sure if your just testing it but have you tried using the nav and anchor tags to generate an actual navigation area?

Good Luck
0

#3 User is offline   sammyk 

  • Forum Newcomer
  • Pip
  • Group: Members
  • Posts: 13
  • Joined: 04-January 12
  • Reputation: 0

Posted 20 January 2012 - 09:00 PM

View PostMr Ben, on 20 January 2012 - 08:33 PM, said:

Hey,

Im not sure if i understand your question properly but i will try to help. Did you mean that you want the box not to increase with the page size? try using pixel values rather than percentage values. Perhaps decide on a specific size of box and set the height and width accordingly in pixels?

With the navbar as well, im not sure if your just testing it but have you tried using the nav and anchor tags to generate an actual navigation area?

Good Luck


Ok sorry I'm really new to this, but I used this site as a reference. http://themes.themol...com/photopharm/
When you zoom in and out you can see the words in the grey box stay relatively the same in context to everything else. When I zoom in and out of my webpage however, the words in the grey box either move to the top left or zoom in too far and create its on scroll bars
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users