Emulating frames by using CSS

TartanNeil · Feb 7, 2008

I've got a design with a header, a footer and I want the middle to be divided into two sections; one a narrow column of picture thumbnails on the left and, the second, a large area to the left of the thumbnail column where the full size version of the picture will load.

I know it's possible with frames but can I emulate the frames effect using CSS?

If it is possible does anyone know of a site designed like this where I could get some clues for the coding.

Thanks in advance for any and all help.

angelwatt · Feb 7, 2008

If you have a height set on the left navigation area you can use the CSS property overflow:scroll to create a frame-esque effect.

Example: http://www.cssplay.co.uk/layouts/basics2.html
Partial example: http://www.w3schools.com/css/tryit.asp?filename=trycss_overflow

Matteh117 · Feb 8, 2008

Here you go.

HTML:

<style type="text/css">
#header {
	height: 100px;
	background: #00FF00;
}

#left {
	float: left;
	overflow: auto;
	width: 200px;
	height: 300px;
	background: #FFFF00;
}

#right {
	height: 300px;
	background: #FF0000;
}

#footer {
	height: 30px;
	line-height: 30px;
	clear: both;
	background: #0000FF;
}
</style>

<div id="header">Header</div>
<div id="left">Scrolling box</div>
<div id="right">Content</div>
<div id="footer">Footer</div>

Me1000 · Feb 8, 2008

adding the

position:fixed;

tag to your css would also do it...

TartanNeil · Feb 10, 2008

Thanks for the help, folks. Especially Matteh117 for the code, it was just what I needed.

My next issue is how to get the main picture to load into the right hand section when the thumbnail is clicked in the left hand section.

Any pointers to sites using this mechanism so I can get a clues for code or online how to tutorials showing the basics gratefully received.

Thanks.

angelwatt · Feb 10, 2008

Here's a basic layout. Place the HTML in the appropriate spots for your page. The first list is for the thumbnails and the second set is a list of pics for the main area. The way it's done here, if the browser doesn't support JavaScript they'll see all of the pictures rather than just one. I'll let you fill in the rest of the CSS.

There's other ways of accomplishing this, but this way does provide accessibility in case JavaScript is enabled and the links will still work.

HTML:

HTML:

<ul id="picThumbs">
  <li><a href="#pic-0" onclick="changePic(0); return false;"><img
  src="image.jpg" width="100px" height="100px" /></a></li>
  <li><a href="#pic-1" onclick="changePic(1); return false;"><img
  src="image.jpg" width="100px" height="100px" /></a></li>
  <li><a href="#pic-2" onclick="changePic(2); return false;"><img
  src="image.jpg" width="100px" height="100px" /></a></li>
  <li><a href="#pic-3" onclick="changePic(3); return false;"><img
  src="image.jpg" width="100px" height="100px" /></a></li>
</ul>

<ul id="picList">
  <li id="pic-0" class="show"><img src="image.jpg" width="400px"
  height="400px" /></li>
  <li id="pic-1" class="show"><img src="image.jpg" width="400px"
  height="400px" /></li>
  <li id="pic-2" class="show"><img src="image.jpg" width="400px"
  height="400px" /></li>
  <li id="pic-3" class="show"><img src="image.jpg" width="400px"
  height="400px" /></li>
</ul>

CSS:

Code:

.show { display: block; }
.hide { display: none; }

JavaScript:

Code:

var pics, currentPic;
function changePic(x)
{
  pics[currentPic].className = 'hide';
  pics[x].className = 'show';
  currentPic = x;
}
function Init()
{
  picList = document.getElementById('picList');
  pics = picList.getElementsByTagName('li');
  currentPic = 0;
  for (var i=0; i < pics.length; i++) {
    if (i != currentPic) {
      pics[i].className = 'hide';
    }
  }
}
window.onload = Init;

Matteh117 · Feb 11, 2008

TartanNeil said:
Thanks for the help, folks. Especially Matteh117 for the code, it was just what I needed.

My next issue is how to get the main picture to load into the right hand section when the thumbnail is clicked in the left hand section.

Any pointers to sites using this mechanism so I can get a clues for code or online how to tutorials showing the basics gratefully received.

Thanks.

Personally I'd use a javascript library such as jQuery to ajax the images into the right pane, but then you have the problem of those who have no javascript or have it turned off (the above post also...).

Hmm... unless you use URL parameters or a javascript method, I'm not sure it's possible without using (....*sigh*) frames.

TartanNeil · Feb 15, 2008

Thanks for all the coding help, people. Now I've overcome the problems of javascripts I'm well on my way to finishing my site.

My site is reliant on javascript; does anyone have any idea how many people have no javascript or have it turned off? I tried to find current stats but failed. I'm guessing it's a tiny number, but that's just a guess.

angelwatt · Feb 15, 2008

TartanNeil said:
Thanks for all the coding help, people. Now I've overcome the problems of javascripts I'm well on my way to finishing my site.

My site is reliant on javascript; does anyone have any idea how many people have no javascript or have it turned off? I tried to find current stats but failed. I'm guessing it's a tiny number, but that's just a guess.

The W3 Schools has these stats that say JavaScript is not being used in 6% of browsers. Though this will very much vary per web site. You may be able to find some web stats software for your server that looks at if JavaScript is enabled or not for visitors.

wilson210484 · Aug 12, 2008

including a page using css

i want to include another site into mine i was using frames ie

PHP:

<html><head><title>my site</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"></head>
<frameset rows="18%,217*,5" cols="*" frameborder="no">
 <frame src=<?=$PHP_SELF?>?frame=pfac_top name=pfac_top>
 <frameset cols="85%,*" frameborder="no">
  <frame src= "http://www.awebsite.co.uk/">
  <frame src=<?=$PHP_SELF?>?frame=pfac_right name=pfac_right noresize="noresize">
 <frame src=<?=$PHP_SELF?>?frame=pfac_bottom name=pfac_bottom noresize="noresize"> 
</frameset>
<noframes></noframes>

but i dont want to use frames can this be done????

SrWebDeveloper · Aug 12, 2008

Just a quick comment.

The above advice is great for the design perspective, but the purpose of using any form of frames is so individual frames can be updated with new content without affecting other frames. One should never use frames simply because of the convenience of scroll bars in content areas. CSS should always be used for the latter requirement if its the only design criteria.

From a development perspective, each div which defines the content areas (much the same was as frames are used) can be templated in the server side code used to generate each page.

Example:

If a certain condition is true (i.e. based on a POST or GET) then set output in content area named "content1" which is associated with a div of the same ID. You might load a template which has data parsed into it via macros. Of course the whole page refreshes (which is why Ajax is so appealing, preventing this) but only one content area "changes" so the objective is met and no reliance on frame support or JS required. This is how most templated systems work, with the exception of caching to speed things up.

-jim

angelwatt · Aug 12, 2008

wilson210484 said:
i want to include another site into mine i was using frames ie

but i dont want to use frames can this be done????

Look into the iframe tag (different from the frame tag).

Search

Search

Emulating frames by using CSS

TartanNeil

macrumors newbie

angelwatt

Moderator emeritus

Matteh117

macrumors regular

Me1000

macrumors 68000

TartanNeil

macrumors newbie

angelwatt

Moderator emeritus

Matteh117

macrumors regular

TartanNeil

macrumors newbie

angelwatt

Moderator emeritus

wilson210484

macrumors newbie

SrWebDeveloper

macrumors 68000

angelwatt

Moderator emeritus

Our Staff