jlhaslip
Feb 28 2007, 12:28 AM
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 pictureAnd a "hidden" "picture in a picture" method. A "hidden" CSS framed pictureSort 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
Feb 28 2007, 08:15 AM
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
Similar Topics
Keywords : css based frames sort couple ways- How To Install Opengeu In Ubuntu
- OpenGEU is a distro based on Enlightenment and derived from Ubuntu (0)
- 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...
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"; } ...
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...
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 ...
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....
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 ...
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...
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...
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...
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...
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...
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
|
|