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 Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Using CSS to emulate frames 2

Status
Not open for further replies.
homeric

homeric

Technical User
Joined
Apr 23, 2000
Messages
65
Hi I'm trying to find a (non-frames)way to get a fixed 'header area', with the page content scrolling beneath it (ie top part of page always on screen - rest of content scrollable)- Has anyone any ideas please? [sadeyes]
 
Sort by date Sort by votes
I Would employ 2 divs.

1 for the fixed content, and a scrollable one for the rest for the Page.

Code: 
<div id="fixedtop" style="width:100%; height:150px;">
[red]fixed content goes here[/red]
</div>

<div id="restofpage" style="width:100%; height:450px; overflow:scroll;">
[red]rest of page goes here[/red]
</div>

Hope this helps


----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Take note that using vacunita's suggestion you will not be able to use the browser's scrollbar to scroll the page - the div itself will have it's own scrollbar inside the browser window. Additionally, I believe you have to set an explicit height on the div to get the vertical scrollbar (someone correct me if I'm wrong) and that can be a pain to do if you want it to take up the remaining space on the page without javascript - so you'll probably end up needing it anyway.

-kaht

How much you wanna make a bet I can throw a football over them mountains?
sheepico.jpg
 
Upvote 0 Downvote
I know I'm going to get flamed for this one.
Kaht as usual is totaly correct.
Code: 
<html>
<head>
<title>Style test</title>
</head>
<body[COLOR=red] style = "overflow-x:auto; overflow-y:hidden;"[/color]> 
<div id="fixedtop" style="width:100%; height:100px;">
fixed content goes here
</div>

<div id="restofpage" [COLOR=red]style="width:100%; height:75%; overflow-X:hidden; overflow-y:scroll;">[/color]

<pre>rest of page goes here used pre tags for testing. 
Only works for 800 X 600 or higher resolution. 
Managing tasks
You can also view, edit, and delete tasks and change a task?s status.
To view and edit tasks
1. On the Home screen, click the Tasks icon. The Find screen appears.
2. Select the task that you want to view or edit, and then click the trackwheel to
view the menu.
3. Click Open. The Edit Task screen displays the task details. Edit the
information in the fields.
4. After you view or edit the task, click the trackwheel to view the menu and
click Save.
You return to the Find screen.
To change a task’s status
1. On the Home screen, click the Tasks icon. The Find screen appears.
2. Select the task for which you want to change the status and click the
trackwheel to view the menu.
3. Depending on the task?s current status, click either Mark Completed or Mark
In Pro</pre>
<pre>rest of page goes hereManaging tasks
You can also view, edit, and delete tasks and change a task?s status.
To view and edit tasks
1. On the Home screen, click the Tasks icon. The Find screen appears.
2. Select the task that you want to view or edit, and then click the trackwheel to
view the menu.
3. Click Open. The Edit Task screen displays the task details. Edit the
information in the fields.
4. After you view or edit the task, click the trackwheel to view the menu and
click Save.
You return to the Find screen.
To change a task’s status
1. On the Home screen, click the Tasks icon. The Find screen appears.
2. Select the task for which you want to change the status and click the
trackwheel to view the menu.
3. Depending on the task?s current status, click either Mark Completed or Mark
In Pro</pre>
</div></body>

Glen
 
Upvote 0 Downvote
glen, you have a minor typo:
Code: 
overflow-[!]x[/!]:hidden

-kaht

How much you wanna make a bet I can throw a football over them mountains?
sheepico.jpg
 
Upvote 0 Downvote
This is close to what I want glenmac, but I can't see why the text fails to wrap and the scroll bar is inset one place left of it's usual place - Sorry this tsuff's new to me & confusing - homeric
 
Upvote 0 Downvote
but I can't see why the text fails to wrap and the scroll bar is inset one place left of it's usual place
Click to expand...
Umm.... did you read my first post? Additionally, the text will not wrap if you used the <pre></pre> tags as glen placed above (if you look closely he put a note in about them only being there for testing)

-kaht

How much you wanna make a bet I can throw a football over them mountains?
sheepico.jpg
 
Upvote 0 Downvote
No css hacks, no javascript, cross browser compatible, lean and mean!
Click to expand...

Yeah, the only downside is you have to use frames.
puke.gif


-kaht

How much you wanna make a bet I can throw a football over them mountains?
sheepico.jpg
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
2K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip Helpful tip
Solution to CSS Two Level Horizonal Menu
Replies
1
Views
1K
pmonett
pmonett
bdwilcox
  • Locked
  • Question Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
1K
bdwilcox
bdwilcox
PeDa
  • Locked
  • Question Question
CSS two level horizontal menu
Replies
0
Views
924
PeDa
PeDa
198709km
  • Locked
  • Question Question
Grouping XML key value using XSLT
Replies
0
Views
1K
198709km
198709km

Part and Inventory Search

Sponsor

Back
Top