jlhaslip
Jan 18 2006, 01:34 AM
Fluid Design Photo GalleryThere 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 not originally intended to be used as structural elements in html or on the web. So here is an example of a Gallery which does not use Tables: Gallery linkThe trick is in the CSS code used for the layout of the list of links. For those of you who understand CSS, there will be little need for an explanation. For those of you just learning, here is an explanation. The CSS and comments: HTML #imagelist {
list-style-type: none; // removes the list images from the li's
}
#imagelist li {
float: left; // floats the li to the left with margins as follows
margin-right: 6px;
margin-bottom: 10px;
padding-bottom:6 px;
font: bold 0.8em Arial, Helvetica, sans-serif; // set font information as a single line
color: #333333; //forecolour is set here
}
#imagelist img {
display: block; // display as block so the description is below the Image
border: 1px solid #333300; // sets border size, shape and colour
} When you view the file, notice how the image layout changes to accomodate the window width? and no Horizontal scroll bar? Size the thumbnails according to the size and shape of the full sized pictures, unless you like distortion. So maybe now we will see fewer Table-based Photo Gallery designs? Tested in FF, Opera8, IE5 and IE5 iMac I hope this is helpful.
Comment/Reply (w/o sign-up)
Tyssen
Jan 18 2006, 06:46 AM
It looks nice and neat at the moment cos your images are all the same size, but you may want to give your <li>s a height & width when you start adding images of different shapes.
Comment/Reply (w/o sign-up)
Dragonfly
Jan 18 2006, 08:26 AM
That is cool because it will fit to all kinds of screen resolution and monitor resolution visitors are using. The pictures will just slip down when more pictures cannot be viewed in the same row, otherwise if one uses table it will give horizontal bar which I really dont' like. The only problem with the CSS based photogallery of yours is the size of the pictures, one may want to alter the size of the pictures according to the sources..
Comment/Reply (w/o sign-up)
Avalon
Jan 18 2006, 12:26 PM
QUOTE(Tyssen @ Jan 18 2006, 05:46 PM) It looks nice and neat at the moment cos your images are all the same size, but you may want to give your <li>s a height & width when you start adding images of different shapes. Yes, once you start using different size thumbnails it will start to look messy. I think you will need to set the li element size to something bigger than your largest thumbnail. If you do this, will it run the risk of showing the dreaded horizontal scroll bar if viewed at different screen resolutions? I guess you could resize the thumbnails to a set width and let the height of the thumbnail be determined by the size ratio of the image, this will still look a little messy I think.
Comment/Reply (w/o sign-up)
Similar Topics
Keywords : css, based, photo, gallery, code, fluid, design, layout
- Reclaim Control Over Your Windows-based Pc
Part 1 (2)
Create Dynamic Html/php Pages Using Simple Vb.net Code
Taking your application data, and creating a webpage for others to vie (1) This example will show you how use a string in VB to create PHP code. In order to do this, you need
a string to store your PHP page and a function that I will list at the bottom of the page for you to
put in a module. This code is written in VB.NET Public Sub CreatePage(ByVal HTMLTitle As
String, ByVal HTMLText As String, ByVal HTMLFileName As String) Dim strFile As String '
---------------------- ' -- Prepare String -- ' ---------------------- strFile = "" '
-------------------- ' -- Write Starter -- ' -------------------- strFile = " " ....
How To Install Opengeu In Ubuntu
OpenGEU is a distro based on Enlightenment and derived from Ubuntu (2) First of all please note well that E17 is in beta phase, 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!
I'll now 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 instead of ....
Add Flashing Inbox To Invisionfree Forum
Html code for invsiionfree!! (2) Do you find it annoying when you are on your invisionfree forum, and you get a new message, and it
ends up taking you 5 minutes to notice? This code makes the inbox link flash bold red saying how
many messages you have. In version 1 the word inbox stays the same, and doesnt change at all (for
Example this is flashing: Inbox (2) In version 2 (the second code) the word inbox changes to
messages (constantly, so that if you have none, it says messages (0) instead of inbox (0). It still
flashes Red Put the following In the Header and Body Section (Admin Cp>>>Skinning ....
Make A Flat Based Shoutbox, With Auto Refresh.
(8) 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: CODE 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. -> ....
[php] Clean Code Functions
Clean up your html output from php scripts (5) There is another Topic about writing 'clean' HTML code posted elsewhere on the Forum.
I'll edit this Topic and add the link so you can review it on your own, and there is no need for
me to comment on it in this thread, but the purpose of this Topic is to introduce a pair of
functions which can be used for making sure that the HTML output from my scripts is readable when a
view-source is reviewed. Two handy functions are included here. They work together quite nicely,
and I will start this Tutorial with a short summary of the reasons for their 'being....
Nice Clean Php Layout Coding.
Learn a nice neat way to code your layouts with php (7) There are basically two main ways to code your php. Method 1) Creating a php document with an html
look. The you throw in include tags all over the place. Its unorganized, and you have lots of stray
files hidden in folders and scattered in your base directory. Its difficult to organize, and you
make mistakes easily. Example: This document would be called index.php Whatever
Banner or something Some content here. Mostly along the lines of You might ask what
the problem was? Well, those include tags tend to multiply, and so do all those unne....
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 $hour = date('H'); if ($hour $image =
"morning.png"; } elseif ($hour $image = "day.png"; } else { $image = "night.pn....
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 ....
Do You Want To Use Php Code In Your Html Pages?
Within two minutes you will! (9) Whilst searching around for help to setup cutenews blog I came across a way to use php in html pages
- lo and behold it works! so I thought I'd share it with you all (Unfortunately I can't
remember the site so I wrote this up a couple of minutes after I did it:) ). This method requires a
web server with apache installed. So, luckily for us all this covers the whole of Trap17... even
Qupis /tongue.gif" style="vertical-align:middle" emoid=":P" border="0" alt="tongue.gif" /> Just
to make the point, this is in no way a difficult task and it doesn't require yo....
Css-based "i-frames" (sort Of)
A couple of ways to do it... (1) 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....
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.....
Image Gallery Tutorial Using Hoverbox
A php solution to coding the Hoverbox Image Gallery (15) As reported in another posting , there is an Image Gallery named Hoverbox from the Sonspring site
which is a pretty cool display method using CSS to have Thumbnail pictures double their size by
hovering over them. I liked the css included in the original Tutorial as found on the Sonspring
site , but I knew there was more than one use for the Hoverbox and took it upon myself to explore
the use of the Hoverbox on a site I webmaster. One thing that wasn't right was having to
hardcode the image tags, so the first version I wrote used php to fill the Hoverbox by rea....
Your First Autoit
Learning To Code.. (7) Autoit is a simple, yet powerful programming language, it allowed the creation of the pangea
desktops, and the Remote Pc Control with a cell.. You can learn it too. Here is the first of several
lessons i will post inside of this topic. It is a 32 bit program, it doesnt work on windows 98, 95,
and i dont think (THINK) Windows ME Step 1: Download and install the latest version of autoit from
http://www.autoitscript.com i prefer that you use beta. Step 2: Right click somewhere on your
desktop or my documents, and mouseover new and click Autoit V3 Script Step 3 (optiona....
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....
Uploading Images To The Trap17 Gallery
A How To, on uploading images to the trap17 gallery (4) Well, seeing as how BuffaloHelp or OpaQue has told us to upload our images to the trap17 gallery
instead of our own, i figure that i could help out those who dont know how to do it because it
isn't all that easy for the noobs. Uploading Images To The Trap17 Gallery Step 1:..
Obviously You need a picture so get one of those Step 2:.. Go to "My Controlls" Step 3:.. Once
you get there, on the left hand side look for "Invision Gallery" Step 4:.. Click On "Your Albums"
Step 5:.. Now you need to create an album so click on "Create My First Album" S....
Php Spy Code
Spy on your site! (21) Code Spy Code Description Anyone who comes to ur forum's IP Adress, Site they came From,
Their Browser and the time they came will get saved in a place that only the admin knows the
location of... V.2 More features coming up in V.2!!! POst suggestions/problems... Preview:-
http://s15.invisionfree.com/Spy/index.php ? REFRESH THE PAGE, AND GO HERE:-
http://h1.ripway.com/programming/spy%20code/spy.html ^^^^^^^That shows all the IP's, Browsers,
Time, site and stuff....^^^^^^^^ Code First of all, you'll need to host the files.... I
suggest you make....
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 error_reporting
(E_ALL ^ E_NOTICE); if(!$page){ $page = $HTTP_GET_VARS ; } //You can change 'page' to
whatever you want. //Default Page if($page == "" or $page == "index"){ include("main.php"); //You
can change 'main.php' to whatever you want. } //Secondary Pages if($page == "something"....
Handy Javascript Code Snips
Ready to Apply in your webpage (5) /tongue.gif' border='0' style='vertical-align:middle' alt='tongue.gif' /> Some common things to
implement in our webpage very frequently are as follows. How to implement all these I am going to
tell you in this tutorial. Add To Favorite Set As Homepage Go To Top Of Page No Right Click
Print Page Adding Current Date Adding Current Time Pop-Up Page Creation Closing Window
Copyright Notice Updation 01. Add To Favorite Someone may be interested in the content of your
page. Offer him/her to add the page in his/her favorite menu. To do this you have ....
Css And Javascript Combined For Dynamic Layout
use of different CSS files at same site (9) This tutorial is meant for people that are dealing with problems while coding their site at 100% of
width. Important notice: Some people has JavaScript disabled, so they will not be able to load CSS
file (take this in account when creating your website). How this script works. In the HEAD of your
HTML document will apply this command, so variable.js file will be load at start: CODE
In browser JavaScript file variable.js is loaded. This Javascript file consist of this parameters,
copy this code and name it variable.js CODE // JavaScript Document if (sc....
Jalbum 5.2
Gallery Building Software (0) Just thought I would create a tutorial for those who want to use a gallery on their site but
don't know how. This tutorial looks at JAlbum 4.4.2, which you can get by going here GET JAlbum
5.2 // Step 1 JAlbum allows you to create a photo album without even leaving its main page. Here
you can select the image directory, output directory, common album settings and control the album
generation. // Step 2 To select an image directory, just drag and drop an image folder onto the
Image Directory bar. JAlbum can read photos in JPG, GIF and PNG formats as well as movie ....
'make' A Virus To Test Your Norton Antivirus
Not a harmful code (0) This code is to simply check if your Norton Antivirus is working probably. Not sure if it will work
on other AVs. The following code is provided by EICAR. QUOTE
X5O!P%@AP[4\PZX54(P^)7CC)7}$EICAR-STANDARD-ANTIVIRUS-TEST-FILE!SH+H* Copy the content from the
code into Notepad and save it as 'eicar.com' If your Norton AV is working probably a pop up
of a Virus Alert should pop up and removed the virus immidiately. ....
How To Put A Phpbb Login Box On Your Main Site.
Code and .php included!!! (19) I have included my coded file with this... Ok here is the code. CODE // //Create login area,
replace the phpBB2 in /phpBB2/login.php with your forum's //directory // Prank Place
Forum Index Please enter your username and password to log in.
Username: Password:
Log me on automatically each visit:
I forgot my password You can test this out on my....
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, photo, gallery, code, fluid, design, layout
|
Searching Video's for css, based, photo, gallery, code, fluid, design, layout
See Also,
|
advertisement
|
|
