Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jan 2012
    Posts
    40
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Navigation List Positioning

    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:
    Code:
    <!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:
    Code:
    #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;
    }

  • #2
    New Coder
    Join Date
    Sep 2011
    Location
    England
    Posts
    39
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I assume that this is what you are looking for:

    HTML:
    Code:
    <!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:
    Code:
    #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.

  • #3
    New Coder
    Join Date
    Jan 2012
    Posts
    40
    Thanks
    8
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •