Emulating frames by using CSS

Discussion in 'Web Design and Development' started by TartanNeil, Feb 7, 2008.

  1. TartanNeil macrumors newbie

    Joined:
    Feb 5, 2008
    #1
    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.
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
  3. Matteh117 macrumors regular

    Joined:
    May 24, 2007
    Location:
    Surrey, UK
    #3
    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>
     
  4. Me1000 macrumors 68000

    Me1000

    Joined:
    Jul 15, 2006
    #4
    adding the

    position:fixed;

    tag to your css would also do it...
     
  5. TartanNeil thread starter macrumors newbie

    Joined:
    Feb 5, 2008
    #5
    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.
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    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;
    
     
  7. Matteh117 macrumors regular

    Joined:
    May 24, 2007
    Location:
    Surrey, UK
    #7
    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.
     
  8. TartanNeil thread starter macrumors newbie

    Joined:
    Feb 5, 2008
    #8
    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.
     
  9. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #9
    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.
     
  10. wilson210484 macrumors newbie

    Joined:
    Aug 12, 2008
    #10
    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????:confused:
     
  11. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #11
    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
     
  12. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #12
    Look into the iframe tag (different from the frame tag).
     

Share This Page