Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations biv343 on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Fix a layer whilst hor/ver scroll page 1

Status
Not open for further replies.
makemusic

makemusic

Programmer
Apr 3, 2004
43
Hi,

Haven't used tek-tip for years but it's good to be back!

I've created a framed site that I now wish to make non-framed. I'd like to fix four layers on each side of the page (top, bottom, left, right) that remain fixed when the main screen (in the middle) is scrolled either horizontally or vertically. I guess this main page will also be a layer. Is there cross-browser code that will allow me to do this?

Thanks in advance!

 
Sort by date Sort by votes
With CSS positioned divs for the specific layers (main, top, bottom, left, right) and the overflow: auto; property in the main div. This will create what you want and will work with all the current browsers: IE5+, Mozilla, Opera, NN6+, Safari...
 
Upvote 0 Downvote
Thanks Vagrabond, but could you give me an example of what the code would look like in CSS?
 
Upvote 0 Downvote
Here's a quicky. Let me know if something is giving you a hard time:
Code: 
<html>
 <head>
  <style type="text/css">
body {
	margin: 1px;
	padding: 5px;
	font: normal 0.8em/1.5em Verdana, Tahoma, sans-serif;
}

#top {
	position: relative;
	width: 100%;
	height: 150px;
	text-align: center;
	background: #99ccee;
	border: 1px solid red;
}		

#middle {
	position: relative;
	background: #99ccee;
	height: 300px;
}

#bottom {
	position: relative;
	background: #99ccee;
	height: 100px;
	text-align: center;
	border: 1px solid black;
}

#left {
	position: absolute;
	top: 5px;
	left: 5px;
	width: 150px;
	height: 200px;
	background: #99ccee;
	border: 1px solid blue;
}

#main {
	position: relative;
	margin-left: 160px;
	margin-right: 250px;
	height: 300px;
	background: #ddffff;
	overflow: auto;
}

#right {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 240px;
	height: 200px;
	border: 1px solid yellow;
	
}

 </style>
 </head>
 <body>
  <div id="top">This is top!</div>
  <div id="middle">
   <div id="left"></div>
   <div id="main">
    Main Content
    Lots<br /> and lots<br />    Lots<br /> and lots<br />    Lots<br /> and lots<br />    Lots<br /> and lots<br />    Lots<br /> and lots<br />    Lots<br /> and lots<br />    Lots<br /> and lots<br />    Lots<br /> and lots<br />    Lots<br /> and lots<br />    Lots<br /> and lots<br />    Lots<br /> and lots<br />    Lots<br /> and lots<br />    Lots<br /> and lots<br />    Lots<br /> and lots<br />    Lots<br /> and lots<br />    Lots<br /> and lots<br />    Lots<br /> and lots<br />    Lots<br /> and lots<br />    Lots<br /> and lots<br />    Lots<br /> and lots<br />    Lots<br /> and lots<br />    Lots<br /> and lots<br />    Lots<br /> and lots<br />
    of Content
   </div>
   <div id="right"></div>
  </div>
  <div id="bottom">This is bottom.</div>
 </body>
</html>
 
Upvote 0 Downvote
Great layout Vragabond a star for you. one question though. I added left:250px to the css for the main div, increased the size of the left div, and commented out the right div just playing and it moved the main div of the screen and didn't give me horizontal scroll bars. Can you explain why? here's my musing code,
Code: 
<html>
 <head>
  <style type="text/css">
body {
    margin-top: 10px;
	margin-left:14px;
	margin-bottom:1px;
    	font: normal 0.8em/1.5em Verdana, Tahoma, sans-serif;
	margin-right: -10px;/*get rid of scroll space*/

    
}

#top {
    position: relative;
    width: 100%;
    height: 150px;
    text-align: center;
    background: #99ccee;
    border: 1px solid red;
}        

#middle {
    position: relative;
    background: #99ccee;
    height: 389px;
}

#bottom {
    position: relative;
    background: #99ccee;
    height: 100px;
    text-align: center;
    border: 1px solid black;
}

#left {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 395px;
    height: 310px;
    background: #99ccee;
    border: 1px solid blue;
}

#main {
    position: relative;
    margin-left: 160px;
    margin-right: 150px;
    height: 300px;
    background: #ddffff;
    overflow: auto;
left:250px;
}

#right {
    position:  absolute;
    top: 5px;
    right: 5px;
    width: 140px;
    height: 310px;
    border: 1px solid yellow;
    
}

 </style>
 </head>
 <body scroll ="auto" >
  <div id="top">This is top!</div>
  <div id="middle" align = "center">middle div
   <div id="left">left</div>
   <div id="main">
    Main Content
    Lots<br /> and lots<br />    Lots<br /> and lots<br />    Lots<br /> and lots<br />    Lots<br /> and lots<br />    Lots<br /> and lots<br />    Lots<br /> and lots<br />    Lots<br /> and lots<br />    Lots<br /> and lots<br />    Lots<br /> and lots<br />    Lots<br /> and lots<br />    Lots<br /> and lots<br />    Lots<br /> and lots<br />    Lots<br /> and lots<br />    Lots<br /> and lots<br />    Lots<br /> and lots<br />    Lots<br /> and lots<br />    Lots<br /> and lots<br />    Lots<br /> and lots<br />    Lots<br /> and lots<br />    Lots<br /> and lots<br />    Lots<br /> and lots<br />    Lots<br /> and lots<br />    Lots<br /> and lots<br />
    of Content
   </div>
   <!--<div id="right">right</div>-->
  </div>
  <div id="bottom">This is bottom.</div>
 </body>
</html>

Glen
 
Upvote 0 Downvote
I can't really properly test your code right now, since I don't have my computer set up at home yet. As a rule, it is not good to use both left/right/top/bottom positioning when you are already using the margin already. What exactly are you trying to do? I checked the code and noticed that your main fell out of window, and that is why you couldn't see the scroller. If you use the margin-left property to drive main further to the right and eliminate the margin-right I think you will get what you want.

Note that using the left property (and not applying width, hence keeping it 100%) on the div moves div the amount of pixels from the left but retains its size - meaning that it can fall off screen. Using margin-left eats the amount of pixels from the left of the div keeping the div within the boundaries. I hope this makes sense.
 
Upvote 0 Downvote
Thanks for your help, Vragabond. I haven't tried this yet but will put it into practice tmr. Once again, thank you!
 
Upvote 0 Downvote
OK, had a play and it's looking like the answer I was searching for. Perfect.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
237
lmcate
lmcate
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
802
3esolar
3
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
243
Alt255
Alt255
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
824
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
655
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top