Css web gallery
0 likes292 views
This document provides instructions for creating a photographic gallery using CSS. It describes adding links and style information to an HTML unordered list to allow for hover effects. Styles are added to remove list bullets and indentation, limit the container size and add borders. The body is styled with font properties and the container is given a relative position to allow absolute positioning of images within it.
![Search
ASP
CSS
DHTML
HTML
JavaScript
Perl
PHP
RSS
XHTML
XML
3D Modeling
Design
Design Lab
Graphics
HTML Tools
Internet
JavaScript Tools
Multimedia
Programming
Promotion
Reviews
Search Engine Resources
Video
Web Servers
Color Codes
HTML Characters
HTML Tags
JavaScript Core
Reference Section
Site Services
XML
[previous] [next]
Web Developer/Designer
Targus
US-CA-Anaheim
Post A Job | Post A Resume
tip archive • about • sitemap • contact • jobs • write
for us • subscribe
home | programming | css_gallery | How to Create a Photographic Gallery Using CSS /
Page 2
How to Create a Photographic Gallery Using CSS [con't]
My images are either
372px high by 240px
wide (portrait format) or
240px high by 372px
wide (landscape format).
These sizes have been
calculated for several
reasons, namely:
To enable the
gallery to fit within
a screen
resolution of 800 x
600 pixels without
the need for
scrolling.
1.
To give thumbnail
images of 93px by
60px (a quarter of
the full size),
which I consider to
be large enough to
give a good
preview of the full
size image.
2.
To enable me to
place three portrait
thumbnails OR two landscape thumbnails in a line using a border of 1 pixel and a
left / right margin of 2 pixels.
3.
A horizontal row of three portrait images, 60px wide, each one having a border of 1px
and a left / right margin of 2px gives a total width of 3 times 66px which is 198px.
A horizontal row of two landscape images, 93px wide, each one having a border of 1px
and a left / right margin of 2px gives a total width of 2 times 99px which is also 198px.
I find it best to sketch out a rough plan of the gallery before I begin to add the styling, this
way I can calculate the best size for my thumbnails and full size images. A little bit of
thought 'up front' will save a lot of frustration and redesign.
MARKETPLACE
Get Your Six Sigma Certification
Earn Villanova Six Sigma Certification 100% Online
Program -- FREE Info.
VillanovaU.com/SixSigma
With Less, Do More
Windows 7 Professional and the Windows Server
2008 Family
Microsoft.com/SmallBusiness
Internet Marketing Master's Degree
Learn Effective Internet Marketing Strategies While
Earning Your Masters Online!
www.FullSail.edu
IT Professionals Developers Solutions eBook Library Webopedia Login Register
Page 1 of 6How to Create a Photographic Gallery Using CSS / Page 2
8/17/2010http://www.webreference.com/programming/css_gallery/2.html](https://image.slidesharecdn.com/csswebgallery-130620213432-phpapp02/85/Css-web-gallery-1-320.jpg)
![[previous] [next]
‡ Example #1
Step 5
The container
In order that the gallery can be viewed at a resolution of 800 x 600 I will limit the
#container div to a fixed size of 770px wide by 396px high. I will also add a 1px
thick grey border.
This is fairly straightforward to style as seen below:
1 /* The containing box for the gallery. */
2 #container {
3 position:relative;
4 width:770px;
5 height:396px;
6 margin:20px auto 0 auto;
7 border:1px solid #aaa;
8 }
view plain | print | copy to clipboard | ?
‡ Example #2
I have given this div a relative position so that I can position the gallery images within it
using absolute positions. The margins have been given a left / right value of auto so that
all browsers, except Internet Explorer (which has been taken care of in Step 3 above),
will center the div (left / right) on the page.
Depending on which browser you are using you will see either the images overflowing
the container or the images held within an expanded container. The 'correct'
interpretation is that the images should overflow the container.
Step 6
Removing the bullets
I will need to style the unordered list by removing the bullets and the indentation.
Browsers have different ways of doing this, Internet Explorer and Opera use margin
values for the indentation whereas Mozilla/Netscape/Firefox all use padding values, so to
cater for this I need to style the list as follows.
1 /* Removing the list bullets and indentation */
2 #container ul {
3 padding:0;
4 margin:0;
5 list-style-type:none;
6 }
view plain | print | copy to clipboard | ?
‡ Example #3
Now the bullets are gone.
home | programming | css_gallery | How to Create a Photographic Gallery Using CSS /
Page 2
Page 5 of 6How to Create a Photographic Gallery Using CSS / Page 2
8/17/2010http://www.webreference.com/programming/css_gallery/2.html](https://image.slidesharecdn.com/csswebgallery-130620213432-phpapp02/85/Css-web-gallery-5-320.jpg)
Css web gallery
- 1. Search ASP CSS DHTML HTML JavaScript Perl PHP RSS XHTML XML 3D Modeling Design Design Lab Graphics HTML Tools Internet JavaScript Tools Multimedia Programming Promotion Reviews Search Engine Resources Video Web Servers Color Codes HTML Characters HTML Tags JavaScript Core Reference Section Site Services XML [previous] [next] Web Developer/Designer Targus US-CA-Anaheim Post A Job | Post A Resume tip archive • about • sitemap • contact • jobs • write for us • subscribe home | programming | css_gallery | How to Create a Photographic Gallery Using CSS / Page 2 How to Create a Photographic Gallery Using CSS [con't] My images are either 372px high by 240px wide (portrait format) or 240px high by 372px wide (landscape format). These sizes have been calculated for several reasons, namely: To enable the gallery to fit within a screen resolution of 800 x 600 pixels without the need for scrolling. 1. To give thumbnail images of 93px by 60px (a quarter of the full size), which I consider to be large enough to give a good preview of the full size image. 2. To enable me to place three portrait thumbnails OR two landscape thumbnails in a line using a border of 1 pixel and a left / right margin of 2 pixels. 3. A horizontal row of three portrait images, 60px wide, each one having a border of 1px and a left / right margin of 2px gives a total width of 3 times 66px which is 198px. A horizontal row of two landscape images, 93px wide, each one having a border of 1px and a left / right margin of 2px gives a total width of 2 times 99px which is also 198px. I find it best to sketch out a rough plan of the gallery before I begin to add the styling, this way I can calculate the best size for my thumbnails and full size images. A little bit of thought 'up front' will save a lot of frustration and redesign. MARKETPLACE Get Your Six Sigma Certification Earn Villanova Six Sigma Certification 100% Online Program -- FREE Info. VillanovaU.com/SixSigma With Less, Do More Windows 7 Professional and the Windows Server 2008 Family Microsoft.com/SmallBusiness Internet Marketing Master's Degree Learn Effective Internet Marketing Strategies While Earning Your Masters Online! www.FullSail.edu IT Professionals Developers Solutions eBook Library Webopedia Login Register Page 1 of 6How to Create a Photographic Gallery Using CSS / Page 2 8/17/2010http://www.webreference.com/programming/css_gallery/2.html
- 2. Newletters Networking Daily submit Eclipse Helios Update Brings New PHP Tools Internet Explorer 9 Ups Standards Support JBoss Portal 5 Release Easier to Use Step 2 The !DOCTYPE Firstly and most importantly, make sure that you have the correct (X)HTML !DOCTYPE. Without this most browsers will be thrown into 'quirks' mode which will lead to all sorts of incompatibility problems. W3C QA - List of valid DTDs has a list of valid DOCTYPES that can be used. Select from XHTML1.0 or XHTML1.1 as these are more suitable for this styling. I use XHTML1.1 for all my current web pages. Step 3 Adding links and style information In order that I can use the :hover pseudo class style I need to change the basic unordered list into an unordered list of links. This is because Internet Explorer will only allow :hover to be used on links. I also need to add extra markup to target specific images. The (x)html will now look like this: 1 <div id="container"> 2 <ul> 3 <li> 4 <a class="gallery slidea" href="#nogo"> 5 <span> 6 <img src="../images/p1.jpg" alt="Alpha" title="Alpha" /> 7 <br /> 8 ALPHA 9 <br /> 10 Photographed by Dorota Mrowka, courtesy of the stock.xchng 11 </span> 12 </a> 13 </li> 14 <li> 15 <a class="gallery slideb" href="#nogo"> 16 <span> 17 <img src="../images/p2.jpg" alt="Minie" title="Minie" /> 18 <br /> 19 MINIE 20 <br /> 21 Photographed by José Antonio Assis, courtesy of the stock.xchng 22 </span> 23 </a> 24 </li> 25 <li> 26 <a class="gallery slidec" href="#nogo"> 27 <span> 28 <img src="../images/p3.jpg" alt="Megan" title="Megan" /> 29 <br /> 30 MEGAN 31 <br /> 32 Photographed by Rob Waterhouse, courtesy of the stock.xchng 33 </span> 34 </a> 35 </li> 36 <li> 37 <a class="gallery slided" href="#nogo"> 38 <span> 39 <img src="../images/p4.jpg" alt="Nancy" title="Nancy" /> 40 <br /> 41 NANCY 42 <br /> 43 Photographed by Philip Keller, courtesy of the stock.xchng 44 </span> 45 </a> view plain | print | copy to clipboard | ? Page 2 of 6How to Create a Photographic Gallery Using CSS / Page 2 8/17/2010http://www.webreference.com/programming/css_gallery/2.html
- 3. 46 </li> 47 <li> 48 <a class="gallery slidee" href="#nogo"> 49 <span><img src="../images/p5.jpg" alt="Missy" title="Missy" /> 50 <br /> 51 MISSY & PANDA 52 <br /> 53 Photographed by Kat Shurtz, courtesy of the stock.xchng 54 </span> 55 </a> 56 </li> 57 <li> 58 <a class="gallery slidef" href="#nogo"> 59 <span> 60 <img src="../images/p6.jpg" alt="Stray pup" title="Stray pup" /> 61 <br /> 62 STRAY PUP 63 <br /> 64 Photographed by Bethan Hazell, courtesy of the stock.xchng 65 </span> 66 </a> 67 </li> 68 <li> 69 <a class="gallery slideg" href="#nogo"> 70 <span> 71 <img src="../images/p7.jpg" alt="Rolo" title="Rolo" /> 72 <br /> 73 ROLO 74 <br /> 75 Photographed by Paul Leach, courtesy of the stock.xchng 76 </span> 77 </a> 78 </li> 79 <li> 80 <a class="gallery slideh" href="#nogo"> 81 <span> 82 <img src="../images/p8.jpg" alt="Gigio" title="Gigio" /> 83 <br /> 84 GIGIO 85 <br /> 86 Photographed by Davide Guglielmo, courtesy of the stock.xchng 87 </span> 88 </a> 89 </li> 90 <li> 91 <a class="gallery slidei" href="#nogo"> 92 <span> 93 <img src="../images/p9.jpg" alt="Westy pup" title="Westy Pup" /> 94 <br /> 95 WESTY PUP 96 <br /> 97 Photographed by Rob Waterhouse, courtesy of the stock.xchng 98 </span> 99 </a> 100 </li> 101 <li> 102 <a class="gallery slidej" href="#nogo"> 103 <span> 104 <img src="../images/p10.jpg" alt="Giga Byte" title="Fishing" /> 105 <br /> 106 GIGA BYTE 107 <br /> 108 Photographed by Jefras, courtesy of the stock.xchng 109 </span> 110 </a> 111 </li> 112 <li> 113 <a class="gallery slidek" href="#nogo"> view plain | print | copy to clipboard | ? Page 3 of 6How to Create a Photographic Gallery Using CSS / Page 2 8/17/2010http://www.webreference.com/programming/css_gallery/2.html
- 4. 114 <span> 115 <img src="../images/p11.jpg" alt="Puppy" title="Puppy" /> 116 <br /> 117 PUPPY 118 <br /> 119 Photographed by Clodiney Cruz, courtesy of the stock.xchng 120 </span> 121 </a> 122 </li> 123 <li> 124 <a class="gallery slidel" href="#nogo"> 125 <span> 126 <img src="../images/p12.jpg" alt="Buffy" title="Buffy" /> 127 <br /> 128 BUFFY 129 <br /> 130 Photographed by Rob Waterhouse, courtesy of the stock.xchng 131 </span> 132 </a> 133 </li> 134 </ul> 135 </div> view plain | print | copy to clipboard | ? ‡ Style Ready List Every list item is now enclosed in a link which has a common gallery class and a unique slide letter class. They are also further enclosed by a span which does not have any specific class or id. I have used href="#nogo" instead of the more usual href="#" so that anyone clicking the link will not jump to the top of the page (just make sure you do not have an anchor #nogo on your page). You can, if you wish use this to link to take visitors to a larger image on a new page. The (x)html unordered list is now complete and I will not need to make any more changes to it. The Styling Step 4 The body The <body> is first to be styled with the font-family for the whole page. I have chosen Tahoma as the first choice but you can select any font you wish. I have also chosen a font size of 76% as this is gives a suitable default size for most screen resolutions. It also allows Internet Explorer users to resize the font if they wish. 1 /* choose a suitable font and center the #container div in Internet Explorer */ 2 body { 3 text-align:center; 4 font-family: tahoma; arial, sans-serif; 5 font-size:76%; 6 letter-spacing:0.05em; 7 } view plain | print | copy to clipboard | ? I have added text-align:center; so that Internet Explorer will place the #container div centrally (left / right) on the page. This will only target Internet Explorer and Opera, all other browsers will ignore this styling. I will use the 'correct method' as described in Step 4 to target all other browsers. Page 4 of 6How to Create a Photographic Gallery Using CSS / Page 2 8/17/2010http://www.webreference.com/programming/css_gallery/2.html
- 5. [previous] [next] ‡ Example #1 Step 5 The container In order that the gallery can be viewed at a resolution of 800 x 600 I will limit the #container div to a fixed size of 770px wide by 396px high. I will also add a 1px thick grey border. This is fairly straightforward to style as seen below: 1 /* The containing box for the gallery. */ 2 #container { 3 position:relative; 4 width:770px; 5 height:396px; 6 margin:20px auto 0 auto; 7 border:1px solid #aaa; 8 } view plain | print | copy to clipboard | ? ‡ Example #2 I have given this div a relative position so that I can position the gallery images within it using absolute positions. The margins have been given a left / right value of auto so that all browsers, except Internet Explorer (which has been taken care of in Step 3 above), will center the div (left / right) on the page. Depending on which browser you are using you will see either the images overflowing the container or the images held within an expanded container. The 'correct' interpretation is that the images should overflow the container. Step 6 Removing the bullets I will need to style the unordered list by removing the bullets and the indentation. Browsers have different ways of doing this, Internet Explorer and Opera use margin values for the indentation whereas Mozilla/Netscape/Firefox all use padding values, so to cater for this I need to style the list as follows. 1 /* Removing the list bullets and indentation */ 2 #container ul { 3 padding:0; 4 margin:0; 5 list-style-type:none; 6 } view plain | print | copy to clipboard | ? ‡ Example #3 Now the bullets are gone. home | programming | css_gallery | How to Create a Photographic Gallery Using CSS / Page 2 Page 5 of 6How to Create a Photographic Gallery Using CSS / Page 2 8/17/2010http://www.webreference.com/programming/css_gallery/2.html
- 6. Add Multilingual Support to Your Java Web Pages Creating an ASP.NET Registration and Confirmation System Build Your Own PHP Web Mailer MySQL in Amazon EC2 - Beginners Guide Spiceworks 5.0 Beta Adds New Help Desk Features 7 Ways to Help Customers Trust Your Ecommerce Website The Network for Technology Professionals Search: About Internet.com Copyright 2010 QuinStreet Inc. All Rights Reserved. Legal Notices, Licensing, Permissions, Privacy Policy. Advertise | Newsletters | E-mail Offers Solutions Whitepapers and eBooks Helpful Cloud Computing Resources MORE WHITEPAPERS, EBOOKS, AND ARTICLES Webcasts User Experience Management Indicators for Business and IT Success Ensuring Performance Meets Business and Web User Needs MORE WEBCASTS, PODCASTS, AND VIDEOS Downloads and eKits Get BlackBerry Enterprise Server Express for Free MORE DOWNLOADS, EKITS, AND FREE TRIALS Tutorials and Demos Demo: Google Site Search Virtual Event: Master Essential Techniques for Leveraging the Cloud Article: Explore Application Lifecycle Management Tools in Visual Studio 2010 Internet.com Hot List: Get the Inside Scoop on IT and Developer Products New Security Solutions Using Intel(R) vPro(TM) Technology All About Botnets MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES Page 6 of 6How to Create a Photographic Gallery Using CSS / Page 2 8/17/2010http://www.webreference.com/programming/css_gallery/2.html