#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2004
    Posts
    54
    Rep Power
    11

    How can I simulate frames using CSS


    Hi:

    What I need to do is to have a 3 column design, left column should contain the navigation and the center main content. When the user clicks on the navigation boutton it should bring a set of thumnails of images in the right column. And clicking on any thumbnail should bring a larger image and detail of that image in the center column. I could do this using frames but I want to avoid using frames. I never used CSS before and read lot about positioning layers but couldn't quite figure out how I can target the links to open in the same page as I wanted. The way I have it opens in a new window which is not what I wanted. I want the navigation, center and right column to be visible all the time. What should I do in the following html or CSS to achieve that.

    Code:
    <html>
    <head>
    <title> Testing</title>
    <link rel="stylesheet" type="text/css" href="./test.css">
    
    <script language="javascript">
    new Image().src="./QTimages/image2b.jpg";
    </script>
    
    </head>
    
    <body>
    
    <div id="header">
    
    <img src="../QTimages/banner8.jpg"
     width="300" height="50" alt="header image">
    </div>
    
    <div id="menu">
    <br><br><br><br><br><br><br>
    <a href="./images.html"><img name="imagebutton" id="imagebutton" src="../QTimages/image2.jpg" onMouseOver="document.images['imagebutton'].src='../QTimages/image2b.jpg'" onMouseOut="document.images['imagebutton'].src='../QTimages/image2.jpg'" border="0"background="transparent"></a>
    </div>
    
    <div id="content">
    <h1>Welcome to my site...</h1>
    </div>
    
    <div id="thumbnail">
    Testing
    </div>
    
    </body>
    </html>
    CSS code:

    Code:
    #header { position: absolute; top: 0px; left: 350px; }
    #menu {  position: absolute; top: 0px; left: 10px;
      width: 0px; height: 100%;}
    
    
    #content { position: relative; top: 60px; left: 180px;
      width: 80%; height: 100%; background-color: #FFFAAA;
      color: #000EED"}
    
    #thumbnail { position: absolute; top:50px; right:0px;
      height: 100%;
      background-image: url("../QTimages/background.jpg");
    background-repeat: repeat-y
    z-index: 3;
    }
    And also the right column is not positioning right.. Any help is greatly appreciated. Thanks

    mayflower
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2004
    Location
    Manchester UK
    Posts
    13
    Rep Power
    0

    Try This


    http://www.glish.com/css/

    Good site explaining different css layouts. You will probs find the template your lookin 4.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2004
    Posts
    54
    Rep Power
    11
    I did check out this site and many more before I posted this message. But none of them explains how I can target a link from the left menu button to appear in the center of the same page. Mine opens in a new window. Targeting the link to the same page is where I am getting stuck and don't don't how to get it working. I have been looking many of the designs' source code but all of them have external style sheets so I don't know how to achieve this. Thanks for the reply skibobjoe.

    mayflower
  6. #4
  7. Twilight Thinking
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2003
    Location
    Oxford UK
    Posts
    656
    Rep Power
    38
    Hi,

    I'd suggest that you get your layout how you want it, using css, and divs etc, with a layer positioned on screen where the large image is going to be.
    Have a sepertate page for each catagory of thumbnails, using normal <a href>.
    Use javascript to change the center image, rather than having a seperate page for each large image.

    Something like:

    Code:
    <script>
    
    function tog_img(image)
    {
       document.getElementById('large_pic').src = image;
    }
    
    </script>
    
    /*then:*/
    
    <div id="large"> /*position/style this using css, this will be where the large image should be/*
    <img src="large1.jg" id="large_pic" />
    </div>
    
    <div id="thumbs"> /*again, postion this with css, it will contain all of your thumbnails*/
    <img src="thumb1.gif" onclick="tog_img('large1.jpg');" style = "cursor: pointer">
    <img src="thumb2.gif" onclick="tog_img('large2.jpg');" style = "cursor: pointer">
    <img src="thumb3.gif" onclick="tog_img('large3.jpg');" style = "cursor: pointer">
    
    /*etc*/
    </div>
    Hope that makes sense/is usefull
    Cheers,
    Dusk

    My portfolio
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2004
    Posts
    54
    Rep Power
    11
    Thanks Dusk, but I have 1000s of images in 3 catagories and am using PHP to retrieve both thumnails and larger images from the database. So how should I incorporate your code to get what I want. May be I didn't understand your code, does that mean that I have to have separate <img> tags for each thumbnails.

    mayflower
  10. #6
  11. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    none of them explains how I can target a link from the left menu button to appear in the center of the same page.
    A (i)frame is a browser window embedded in a page. This allows a new document to be loaded into it. A div, on the other hand, is a block level grouping of elements on a page. You cannot load another document into it.

    Since you're using PHP, the thumbnail link could call the original script with new arguments that would redeliver the page with the new image in place. There would be some overhead in reloading the html &#38; text content, but the t-nails would be cached.

    Or, you could use (i)frames. (One of the few legitimate uses of frames, IMO)

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  12. #7
  13. Twilight Thinking
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2003
    Location
    Oxford UK
    Posts
    656
    Rep Power
    38
    Hi again, ok here goes:

    1: Yes you'd have to have an <img> tage for each tumbnail, how else would they be displayed on the screen???

    2: Basically, all my script does is switch the center image based on which thumb is clicked. Clicking on the thumb passes the 'large pic' src to the function, which then switches the source of the large, center image.

    3: Ok, so basically waht you're after is gallery script, that uses php to query a db, and retrieve, say the first 20 thumbnails.

    Then when each of these is clicked on, the larger, corresponding image is dispalyed in the center, right? This bit has to be js.

    Essentially, then all you need is 1 php page, with with eveything layed out as planned. When the page first loads up, the result of the db query will echo/print the first 20 thumbs by default in the correct area of the page. Each of those thumbs will have the 'onclick' function to activate the js, as descriped above.

    Then you'd heve, say, links for 'next 20', 'previous 20', and first and last links. These will just be links to the SAME page, but passing a variale that tells php that you want to query imgs 20-39, for example. (hope this is making sense)

    I've done a gallery script just like this, for my work, if you follow the link, you'll see what I'm talking about. I think it works how you want, the only differance being the large image opens in a new window, but thats a minor adjustment.

    http://www.npeu.ox.ac.uk/25thPhotos/

    This page works as descibed above, except there is no db, the php looks for'.gifs' in a certain folder, and dumps them on the screen, and then looks for the large image of the same name, but with .jpg extension.

    If this is what you need, and you need help, I'll gladly send you the php src for the script, but as this is a js forum, I can do that as a PM.

    Whew
    Hope thats useful
    Cheers,
    Dusk

    My portfolio
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2004
    Posts
    54
    Rep Power
    11
    Hi Dusk:
    Thanks, this is exactly what I am looking for, but my thumbnails and some info related to that image is in MySql and the larger image which is quick time virtual reality object image is in a file folder in the server. I am just storing the filepath in the database. And I am using a php file to retrieve the thumbnails and another php file to get the filepath from the database and then get the file from the folder for displaying. When I click on the thumbnail it is not just the larger image I need but I need some other information too from the database. How do I do these layer positioning using JS. I am not allowed to post part of the PHP here, right. Just wanted to show you how I am doing with the PHP. I have just one <img> tag in that to retrieve the t-nails, I am using a 'for' loop. Any help would be mostly welcome. Thanks

    mayflower
  16. #9
  17. Twilight Thinking
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2003
    Location
    Oxford UK
    Posts
    656
    Rep Power
    38
    Ok, here's a scenario:

    The php page loads up and queries the db to populate some arrays, and find the number of images to go on the page, ie:

    Code:
    <?
    
    if (isset $_GET['start']))
    {
       $start = $_GET['start']
    }
    else
    {
       $start = 0;
    }
    
    $end = $start + 19;
    /* db looks for images  0- 19 (using $start and $end), when 'next 20' is clicked, this will be passed the value of 20, so the db will start looking for 20-39,for example */
    
    /* database stuff here to produce the following arrays*/
    
    $thumbs  = array('src/thumb1.gif', 'src/thumb2.gif' ...etc);
    $large = array('src/large1.jpg', 'src/large2.jpg' ...etc);
    $large_info = array('some text1', 'some text2' ...etc):
    
    $max = ?? /*use db to work out the total number of images */
    $n_img = count($thumbs);
    
    ?>
    You have the following in the <head>:

    Code:
    <script>
    pics = <? echo $n_img; ?>; /* php echos the number of thumbs it has pulled from the db*/
    
    function showlarge(largeID)
    {
       for (i=0; i<pics; i++)
       {
           document.getElementById('large'+i).style.display = "none"; /* this turns off all 'large' divs */
       }
       document.getElementById(largeID).style.display = "block"; /* this turns on the 'large' div requested by the user */
    }
    </script>
    
    <style>
    
    .thumbs
    {
       position: absolute;
       left: ??px;
       top: ??px;
       width: ???px;
       height: ???px;
    /* etc - how/where ever you want */
    }
    
    .largeDIV
    {
       position: absolute;
       left: ??px;
       top: ??px;
       width: ???px;
       height: ???px;
    /* etc - all large divs will be positioned in the same place */
    }
    </style>
    then in the body, use php to echo out all the large divs and thumbs like so:

    Code:
    <body>
    <?
    
    for ($i=0; $i<$n_img; $i++)
    {
       echo "<div id=\"largeIMG$i\" class=\"largeDIV\" style=\"display: none;\">\n<img src=\"$large[$i]\" />\n><p>\n$large_info[$i]\n</p>\n</div>\n";
    /* this places a bunch of divs, each containing your large img, and some info. If you have other catagories of info, then I guess that just means having and accessing more arrays */
    }
    ?>
    <div id="thumbs"> /* the position of this is defined in the style above */
    <table>
    <tr>
    
    <?
    $new_row = 3;  /*whatever number you want for the thumbs to drop onto a new row in this case at 4 (as the loop starts at 0)*/
    
    for ($i=0; $i<$n_img; $i++)
       echo "<td>\n<img src=\"$thumbs[$i]\" onclick=\"showlarge('largeIMG$i');\" />\n</td>";
    
       if ($i == $new_row)
       {
           echo "</tr>\n<tr>\n";
           $new_row += 4; /*next new row will come at 7 (ie the 8th thumb), then 11, etc */
       }
    }
    ?>
    </tr>
    </table>
    
    <a href="gallery.php?start=1">First Page</a>
    <a href="gallery.php?start=<? echo $start + $n_img; ?>Next 20</a>
    <a href="gallery.php?start=<? echo $start - $n_img; ?>Previous 20</a>
    <a href="gallery.php?start=<? echo $max; ?>Last page</a>
    </div>
    Then add the rest of the page!

    Whew! Well I hope that that makes sense. Please note that this is more of a description of one way of doing it, rather than a complete, and fool proof script. You'll have to figure out exactly what you want, and code accordingly.
    There're lots of ways of doing this kind of thing, and mine might not be the best, but its the only way I've figured.

    Good luck....
    Last edited by Dusk; May 6th, 2004 at 10:59 AM.
    Cheers,
    Dusk

    My portfolio

IMN logo majestic logo threadwatch logo seochat tools logo