Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

Quick question on position:fixed

Options
  • 12-07-2010 2:08pm
    #1
    ron_darrell
    Users Awaiting Email Confirmation Posts: 351 ✭✭


    Hi guys,

    Been playing with position:fixed last week for a new site layout. Now it looks great on the screen I tested it on (which has a max resolution of 1024x768 - I know, I know go find a bigger screen but not an option in my present location) but I've just realised that on a higher resolution the div I'm fixing will be way over to the left with the settings I'm using.

    My question is this: Is it possible to get for want of a better word a relative fixed positioned element? That is fixed relative to a layout division on the page?

    Also, can I get PHP to retrieve from the GLOBAL supervariables any info on the clients environment? (The answer no doubt is no and that's fine I have a javascript fix in mind that will sort this out but would prefer not to have to use it due to the uncertainty of the operation of javascript in the client environment)

    Thanks in advance,
    RD


Comments

  • Options
    #2
    zoudards
    Closed Accounts Posts: 24 ✭zoudards


    have you tried placing your elements using % rather than px ? just throwing the idea if you want it to be relative of the size of the viewport.
    The only other solution I can think of is determining the position of your element on key events that the user may trigger (load, window resize etc) but that will mean heavy scripts (depending on how many elements you're playing with)
    I'd like to see what you're trying to do :)
    Z.


  • Options
    #3
    ron_darrell
    Users Awaiting Email Confirmation Posts: 351 ✭✭ron_darrell


    I have a LHS menu that I want to follow the user down the page - the content for each page being quite heavy and so requiring scrolling. I had considered the % idea but I'll run into the same problem I think. The design (due to the restrictions in place for the screen resolution of the working environment) is optimised for 1024x768 environment but the problem is the target market is likely to have much higher resolutions. Thanks for the feedback though. I guess I'll just have to work out a CSS for the 3 most likely resolutions and use Jscript and PHP to change the CSS as the page loads.

    Thanks again.
    RD


  • Options
    #4
    ron_darrell
    Users Awaiting Email Confirmation Posts: 351 ✭✭ron_darrell


    Ok finally got it to work. For anyone interested the key lies in different positioning types for the different containers. Example below.

    HTML 
    <html>
<head>
<title>Floating LHS menu example</title>
</head>
<body>
<div id="container">
<div id="header">
This is the header
</div>
<div id="content_panel">
<div id="menubar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Some other page</a></li>
</ul>
</div>
<div id="content">
Blah blah blah
</div>
<div id="footer">This is the footer</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>

    CSS 
    		body {
			margin:0px;
			padding:0px;
			font-size:1em;
			font-family:trebuchet ms, tahoma, arial, sans-serif;
			text-align:center;
			background-color:rgb(113,133,177);
		}
		
		#container {
			position:relative;
			margin:auto;
			width:902px;
			text-align:left;
			background-color:rgb(255,255,255);
			clear:both;
			border:1px black solid;
		}
		
		#header {
			width:900px;
			height:128px;
			background-image: url('pix/logo.png');
			background-position:top center;
			background-repeat:no-repeat;
			text-align:left;
			font-size:1.4em;
			border-bottom:1px rgb(128,128,128) solid;
		}
	
		#content_panel {
			width:900px;
			position:absolute;
			top:128px;
			left:0px;
			z-index:-1;
			clear:both;
			background-color:rgb(255,255,255);
			border:1px black solid;
		}
		
		#menubar {
			margin:0px;
			position:fixed;
			top:150px;
			left:-10px;
			#left:30px;
			width:160px;
			padding:0px;
			text-align:left;		
                          }
		
		#menubar ul {
			position:fixed;
			top:150px;
			left:-10px;
			#left:30px;
			width:150px;
			height:20px;
			margin:0px;
			list-style:none;
		}
		
		#menubar li {
			width:150px;
			height:20px;
			text-align:left;
			font-size:0.9em;
			border-top:1px black solid;
			border-right:1px black solid;
			border-left:1px black solid;
			float:left;
			background-color:rgb(83,84,177);
		}
		
		#menubar li.last {
			border-bottom:1px black solid;
		}
		
		#menubar li a {
			display:block;
			padding-left:15px;
			text-decoration:none;
			height:20px;
			color:white;
		}
		
		#menubar li a:hover {
			background-color:white;
			color:rgb(83,84,177);

		}
				
		#content {
			width:719px;
			float:right;
			font-size:0.8em;
			padding:5px;
			padding-left:20px;
			padding-right:10px;
			border-left: 1px rgb(64,64,64) dashed;
		}
		
		#footer {
			width:749px;
			background-color:rgb(78,98,138);
			float:right;
			text-align:center;
			border-top:1px black solid;
			border-left:1px black dashed;
		}
				
		.clear {
			clear:both;
		}

    Regards
    -RD


Advertisement