Css-based "i-frames" (sort Of) - A couple of ways to do it...

free web hosting
Open Discussion > CONTRIBUTE > Tutorials

Css-based "i-frames" (sort Of) - A couple of ways to do it...

jlhaslip
I got thinking that it might be nice to have a method to load a bunch of pictures up to a site, but not have them taking up a lot of space. And without using a bunch of php, while still presenting the entire picture. And using full-on CSS coding, not tables or frames.

So here you go... a "picture in a picture" method.

A CSS framed picture

And a "hidden" "picture in a picture" method.

A "hidden" CSS framed picture

Sort of a way to 'hide the picture and let the user decide if they want to actually see the image. All it does is use positioning for placing the image down and to the right about the width/height of the iframe outline. Margins top and left would likely work as well.
This demonstration uses position:absolute to present them on the demo pages, but the 'frame' can be placed using any of the various positioning techniques in CSS. Or probably Tables, too.

Enjoy.

( ps: this picture is from a Memorial service for one of the Timber Framers Guild Members who was active in building the Timber Framed Bridge in the picture... )

And here is the CSS for the placement of the "mid" div (the picture) and the "outer" div (the basic frame). Adjust the positioning and/or sizes to suit.
CODE
#mid {
     position:absolute;
     top: 0px;      /* or the height of the 'frame' to hide the picture  */
     left: 0px;      /* or the width of the 'frame' to hide the picture  */
     background-color: #eeeeee;
     margin: 0px;
     padding: 0px;
     }
    
#outer {
     position:absolute;
     top: 80px;            /* or whatever you need to position the 'frame' */
     left: 80px;            /* or whatever -- ditto --  */
     width: 200px;       /* the width of the 'frame' */
     height: 200px;       /* the height of the 'frame' */
     background-color: #eeeeee;
     margin: 100px;
     overflow: auto;
     border: 5px solid #99cc99;
     }


*warning*

Includes a 640 by 480 JPG file so, dial-up users might want to grab this zip-file instead and have a look locally.
CSS framed picture "zip file" approximately 80k.

 

 

 


Reply

jet
Hmm... I imagine that would be a good way to hide spoilers and such, or non-work-safe pictures, but I personally like seeing everything up big and revealed! Why else would I buy a 20.1" screen??

Good CSS insight though, I hadn't thought of that before.

Reply



Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

(Maximum characters: 10,000)
You have characters left.

Similar Topics

Keywords : css based frames sort couple ways

  1. Reclaim Control Over Your Windows-based Pc - Part 1 (2)
  2. How To Install Opengeu In Ubuntu - OpenGEU is a distro based on Enlightenment and derived from Ubuntu (0)
    First of all please note well that E17 is in beta fase, and can make your computer segfault (which
    by contrary - WILL NOT ERASE YOUR DATA - your computer will be restored to the statein which it was
    before it segfaulted), and if you don't want this to happen then don't install this!
    Well, in this tutorial I will tell you how to install OpenGEU when you already have Ubuntu (or
    Kubuntu and Xubuntu ) installed already on your machine. First of all I need to introduce you to
    OpenGEU, it's a relativelly new Linux distro which uses Enlightenment ins...
  3. Make A Flat Based Shoutbox, With Auto Refresh. - (6)
    With this tutorial, you will learn how to create a simple shoutbox, but only uses a .txt file. Also
    with auto refresh, and I am going to do a backgound. We will be making 5 files. 1. index.php The
    main page 2. msg.php Reading msg.txt 3. msg.txt Note: You must give it 777 4. shout.php Where
    it add to msg.txt 5. bg.gif Background. Index.php would be like this: Shoutbox
    Name: Message: Let's go over what the code do. -> are just the title.
    gets msg.php which gets msg.txt. You will know why I do that later. -> is wh...
  4. Background Image Swap Script - Change a Background Image based on clock time (15)
    Background Image Changer Script To swap the background image from your CSS file according to the
    Server Clock Time. 1.) In your CSS file, add the following rule: CODE body {
        background: url(time.png); } 2.) Create a "folder" named time.png. 3.) Into the
    folder, place three images named morning.png, day.png, night.png. 4.) Also, in the same folder,
    create an index.php file and copy/paste the following script. CODE <?php $hour =
    date('H'); if ($hour < 12 ) {     $image =
    "morning.png"; } ...
  5. Faux Ajax Loading - Css Only - Pretend your site is Ajax based (3)
    Link: http://www.jlhaslip.trap17.com/samples/misc/ajax/index.html Check that out. The first page
    has information and the second and has the actual example of its use with sample CSS code. I find
    that when you visit a site which has a slow server and attempt to view 'large' Image files,
    it is pretty boring to sit and stare at a blank screen, so this little snippet of code can be used
    to give the visitor something to see to indicate that the image is being downloaded. I built a
    small animated gif that sits in the background of the space allocated for the image...
  6. Making a java based program - (3)
    Java GUI Making a Little Java Program Sec. 1: Imports and starting it off Sec. 2: Variables Sec.
    3: Frame and Stuff Sec. 4: Declaring buttons Sec. 5: Adding buttons Sec. 6: Action Listening Sec. 7:
    Using this for a learning experience Section 1 Now, let's think. What imports do we need? We
    obviously need GUI imports. We also need the action Listener. So, let's declare this at the very
    top: Code: CODE import java.awt.*; import java.awt.event.*; import javax.swing.*; That's
    all we need to get all our supplies. Now to start us off. Skip a couple lines ...
  7. How To Make A Simple File Based Shoutbox Using Php And Html - (8)
    A simple tut to make a simple shoutbox. Let me jump right in. First of all you need the standard
    equipment for PHP, an IDE like XAMPP and an editor like PHP EDITOR 2OO7. Were going to make a
    simple guestbook using three files, webpage.php, shout.php and shout.txt. Webpage.php can be
    changed to whatver you want, it will be the page on which the guestbok is shown, you could even use
    this code and add it to another php page n your site. Shout.php is the proccessing page and
    shout.txt is where the shouts are stored. Firstly we need to make the visual design of the box....
  8. The Many Ways To Bypas File Hosting Annoyances - (5)
    I've done a lot of research on this subject because it is much more common for people to upload
    files using file hosting services such as megaupload and rapidshare. They continue to try to push on
    their premium accounts on to the daily users who don't really want to put up any money for
    downloading which should be free.So i've compiled a few techniques I've used to bypass the
    limits of free downloading accounts and leave you feeling just as content with yourself as if you
    had a premium account. Download Managers: Now with the prominent use of file hosts ...
  9. Beginner's Guide To Skiing - Based on my own experience. (4)
    I really like skiing. It is so much fun that you won't know how you could have survived until
    your first time. So here are some things you should know before you head over to your lcoal ski
    area: Dressing: You should get a few basic things: -Base layer: long underwear, especially
    thermals, keep you warm, wick moisture from the skin, keep your legs from getting irritated by your
    ski pants -Middle layer: A fleece jacket; or anything aside from wool, which is very itchy. This
    will keep you warm in cold weather. If your outer jacket or parka (see below) is insulate...
  10. Css Based Photo Gallery Code - Fluid design for layout (3)
    Fluid Design Photo Gallery There are quite a few Topics here on the Trap17 Forum about how to
    set-up and use Photo Galleries and about the link code for getting from a Thumbnail Image to a full
    size Image and all that stuff, so I would like to take this "Photo Gallery" concept one step further
    without covering what others have already supplied instruction for. Usually, when there is a
    solution posted here for the code on "how-to-do-this", there are tables involved and the Links are
    placed inside Table cells. Tables are not neccesarilly a bad thing, but they were n...
  11. Php Navigation - How to make your navigation based on php (7)
    I have re-constructed my last PHP Navigation system and it works great. So I have it here for you
    guys. Here are the instructions. INSTRUCTIONS: Open your main page for your site in your text
    editor and paste in the following code where the main content goes. CODE <?php
    error_reporting (E_ALL ^ E_NOTICE); if(!$page){ $page =
    $HTTP_GET_VARS['page']; } //You can change 'page' to whatever you want.
    //Default Page if($page == "" or $page == "index"){
    include("main...
  12. Methods Of Optimizing Your Pc's Performance - A sure and effective ways that works. (10)
    Methods of optimizing your PC for higher performance. 1st of all, let us start with my
    computer's hardware configuration. I am pasting the report generated by Lavalys' Everest
    Home Edition about my system. Note to Admins and Moderators: I pasted this report only to stress
    the effectivenes of the optimization methods and to proove to people that everything I am saying is
    true and not some fabricated story, but not for hosting credits purposes. The Report QUOTE  
      Computer                                          RIDHIMA (My personal computer, named aft...
  13. Frames - tutorial (4)
    Since I am working on a game wich uses frames and getting experience with it, i thought, a
    tutorial! Frame Basics Frames are a feature that can have great effects, you can separate the
    term frames into 2 objects, and . Whats the difference? Frames are more or less an ancient
    feature from internet explorer and have not been updated much, the iframe on the other side is a
    much newer version of frames meaning they also have some advantages above normal frames. For
    example, the can be embedded in tables and div tags. the can also be nested into each other a...
  14. How To Setup A Php-nuke Based Site - very helpfull (5)
    Ok, so you want to have a php nuke site. First of all, what is this "PHP nuke", and why is it so
    special? Php nuke is a web portal system. It is expandible, and can be very usefull. You can find
    an example here. Yes, it is that good. So, lets take a closer look. It's pre-packaged basic
    features are: *forums *a login system *weblinks *downloads *news *polls *faqs *content You can
    allways de-actuvate some features, but it's near-imposible to remove them. Kinda annoying, but
    you know. Some people may not need phpnuke, or cant have i period. You need: *some ...



Looking for css, based, frames, sort, couple, ways,

*RANDOM STUFF*





*SIMILAR VIDEOS*
Searching Video's for css, based, frames, sort, couple, ways,

*MORE FROM TRAP17.COM*
advertisement



Css-based "i-frames" (sort Of) - A couple of ways to do it...



 

 

 

 

ADD REPLY / Got an Opinion! a humble request :-) RAPID SEARCH! Free Hosting [X]
Express your Opinions, Thoughts or Contribute your information that might help someone here.
Ask your Doubts & Queries to get answers.. "Together, We enlight each other!"
Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.
500MB Space *No Ads*, CPanel, FTP, PHP, MySQL, EMails - 100% FREE