Possible to create a frames effect in an HTML page without using frames?

furfurdemon666 · 11-18-2004, 12:13 PM

I didn't know which section to post this under since it's not exclusive to Linux so here goes:

I'm wanting to "freeze" the left hand side of an html page without using frames, while allowing the right hand side to scroll freely. I hear this is possible with CSS but I'm a dummy when it comes to html/css.

If anyone has any code which does exactly what I'm looking for either css/html PLEASE post it here. Thanks for reading.

secesh · 11-18-2004, 12:16 PM

are you looking for a page that acts similar to this:

http://www.htmlgoodies.com/tutors/ie_style.html

??

furfurdemon666 · 11-18-2004, 12:21 PM

Quote:

Originally posted by secesh
are you looking for a page that acts similar to this:

http://www.htmlgoodies.com/tutors/ie_style.html

??

Hi secesh, thanks again for your very quick reply!

The design on the link you mentioned doesn't "freeze" the left hand side like frames allow. I'll try to describe what I'm looking for. You see the link in my sig? That's my little website.

I want to "freeze" the photo on each page to be on the left hand side and not move, while allowing the right hand side of the page (with the Links to other websites) to scroll freely with the left hand side of the page with the photo staying in place the entire time and not scrolling.

Any ideas??

SciYro · 11-18-2004, 12:27 PM

no, you must use frames

there is the option tho that you can set that image as the background image, and set it to freeze , tho i think it would require some site redesign

secesh · 11-18-2004, 12:32 PM

http://www.w3.org/Style/

how about that one?

looks like they're doing what you want with css/dhtml

excellent job, really...

secesh · 11-18-2004, 01:17 PM

...hmm... given that you only want an image to not move, why not use that as a non-repeating bg image with css 'fixed' option for the body... then set a table with dead cell of image width to structure the text around it....

secesh · 11-18-2004, 01:28 PM

here:

Code:

<html>
	<head>
		<style type="text/css">
			body {
				background-image: url('http://lotusleaf.nermal.net/002.jpg');
				background-repeat: no-repeat;
				background-attachment: fixed
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td width="442px;">&nbsp;</td>
				<td>
					look, i scroll!!! -- so, scroll down!
					<br><br><br><br><br><br><br><br><br><br><br><br>
					<br><br><br><br><br><br><br><br><br><br><br><br>
					<br><br><br><br><br><br><br><br><br><br><br><br>
					<br><br><br><br><br><br><br><br><br><br><br><br>
					<br><br><br><br><br><br><br><br><br><br><br><br>
					<br><br><br><br><br><br><br><br><br><br><br><br>
					but the picture does not!!!
				</td>
			</tr>
		</table>
	</body>
</html>

scuzzman · 11-18-2004, 10:16 PM

Actually, i would use frames. Just in your frameset, set teh border=0 and resizeable=no on the keft frame

secesh · 11-18-2004, 10:34 PM

yeah, except that:

Quote:

I'm wanting to "freeze" the left hand side of an html page without using frames

what i'm wondering is: "what happened to the thread starter?"

--have we got this solved?

theYinYeti · 11-19-2004, 02:42 AM

If you want to have a scrolling part and a freezed part, then you have to use div tags. One will have style position:absolute, and the other will have position:fixed. Example:

Code:

<html><head>

<title>no-frames example</title>
<style type="text/css"><!--
  div.noscroll {
      position: fixed;
      top: 0;
      left: 0;
      width: 300px;
    }
  div.scroll {
      position: absolute;
      top: 0;
      left: 300px;
    }
--></style>

</head><body>

<div class="noscroll">
  <h1>Menu</h1>
  <ul>
    <li>item1...</li>
    <li>and so on...</li>
  </ul>
</div>
<div class="scroll">
  <p>This is the story of...
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    a paragraph that should be scrolling...
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    else you're using a too old browser.</p>
</div>

</body></html>

If that's not enough, and you want to update part of the page, you'll have to learn XMLHTTP.

Yves.

furfurdemon666 · 12-12-2004, 06:52 AM

Thank you for all the very helpful responses, I appreciate it.

Thanks secesh and theYinYeti for including some code for examples, very nice.

Yes, this issue has been solved, thanks to the replies. Thanks again to all of the people who took the time to post.