Uploaded on

 

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
53
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. SearchASPCSSDHTMLHTMLJavaScriptPerlPHPRSSXHTMLXML3D ModelingDesignDesign LabGraphicsHTML ToolsInternetJavaScript ToolsMultimediaProgrammingPromotionReviewsSearch Engine ResourcesVideoWeb ServersColor CodesHTML CharactersHTML TagsJavaScript CoreReference SectionSite ServicesXML[previous] [next]Web Developer/DesignerTargusUS-CA-AnaheimPost A Job | Post A Resumetip archive • about • sitemap • contact • jobs • writefor us • subscribehome | programming | css_gallery | How to Create a Photographic Gallery Using CSS /Page 2How to Create a Photographic Gallery Using CSS [cont]My images are either372px high by 240pxwide (portrait format) or240px high by 372pxwide (landscape format).These sizes have beencalculated for severalreasons, namely:To enable thegallery to fit withina screenresolution of 800 x600 pixels withoutthe need forscrolling.1.To give thumbnailimages of 93px by60px (a quarter ofthe full size),which I consider tobe large enough togive a goodpreview of the fullsize image.2.To enable me toplace three portraitthumbnails OR two landscape thumbnails in a line using a border of 1 pixel and aleft / right margin of 2 pixels.3.A horizontal row of three portrait images, 60px wide, each one having a border of 1pxand 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 1pxand 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, thisway I can calculate the best size for my thumbnails and full size images. A little bit ofthought up front will save a lot of frustration and redesign.MARKETPLACEGet Your Six Sigma CertificationEarn Villanova Six Sigma Certification 100% OnlineProgram -- FREE Info.VillanovaU.com/SixSigmaWith Less, Do MoreWindows 7 Professional and the Windows Server2008 FamilyMicrosoft.com/SmallBusinessInternet Marketing Masters DegreeLearn Effective Internet Marketing Strategies WhileEarning Your Masters Online!www.FullSail.eduIT Professionals Developers Solutions eBook Library Webopedia Login RegisterPage 1 of 6How to Create a Photographic Gallery Using CSS / Page 28/17/2010http://www.webreference.com/programming/css_gallery/2.html
  • 2. NewlettersNetworking DailysubmitEclipse Helios Update Brings NewPHP ToolsInternet Explorer 9 Ups StandardsSupportJBoss Portal 5 Release Easier toUseStep 2The !DOCTYPEFirstly 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 ofincompatibility problems. W3C QA - List of valid DTDs has a list of valid DOCTYPES thatcan be used. Select from XHTML1.0 or XHTML1.1 as these are more suitable for thisstyling. I use XHTML1.1 for all my current web pages.Step 3Adding links and style informationIn order that I can use the :hover pseudo class style I need to change the basicunordered list into an unordered list of links. This is because Internet Explorer will onlyallow :hover to be used on links. I also need to add extra markup to target specificimages.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 ALPHA9 <br />10 Photographed by Dorota Mrowka, courtesy of the stock.xchng11 </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 MINIE20 <br />21 Photographed by José Antonio Assis, courtesy of the stock.xchng22 </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 MEGAN31 <br />32 Photographed by Rob Waterhouse, courtesy of the stock.xchng33 </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 NANCY42 <br />43 Photographed by Philip Keller, courtesy of the stock.xchng44 </span>45 </a>view plain | print | copy to clipboard | ?Page 2 of 6How to Create a Photographic Gallery Using CSS / Page 28/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 & PANDA52 <br />53 Photographed by Kat Shurtz, courtesy of the stock.xchng54 </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 PUP63 <br />64 Photographed by Bethan Hazell, courtesy of the stock.xchng65 </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 ROLO74 <br />75 Photographed by Paul Leach, courtesy of the stock.xchng76 </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 GIGIO85 <br />86 Photographed by Davide Guglielmo, courtesy of the stock.xchng87 </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 PUP96 <br />97 Photographed by Rob Waterhouse, courtesy of the stock.xchng98 </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 BYTE107 <br />108 Photographed by Jefras, courtesy of the stock.xchng109 </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 28/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 PUPPY118 <br />119 Photographed by Clodiney Cruz, courtesy of the stock.xchng120 </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 BUFFY129 <br />130 Photographed by Rob Waterhouse, courtesy of the stock.xchng131 </span>132 </a>133 </li>134 </ul>135 </div>view plain | print | copy to clipboard | ?‡ Style Ready ListEvery list item is now enclosed in a link which has a common gallery class and aunique slide letter class. They are also further enclosed by a span which does nothave any specific class or id.I have used href="#nogo" instead of the more usual href="#" so that anyoneclicking the link will not jump to the top of the page (just make sure you do not have ananchor #nogo on your page). You can, if you wish use this to link to take visitors to alarger image on a new page.The (x)html unordered list is now complete and I will not need to make any morechanges to it.The StylingStep 4The bodyThe <body> is first to be styled with the font-family for the whole page. I havechosen Tahoma as the first choice but you can select any font you wish. I have alsochosen a font size of 76% as this is gives a suitable default size for most screenresolutions. 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 InternetExplorer and Opera, all other browsers will ignore this styling. I will use the correctmethod as described in Step 4 to target all other browsers.Page 4 of 6How to Create a Photographic Gallery Using CSS / Page 28/17/2010http://www.webreference.com/programming/css_gallery/2.html
  • 5. [previous] [next]‡ Example #1Step 5The containerIn 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 1pxthick 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 #2I have given this div a relative position so that I can position the gallery images within itusing absolute positions. The margins have been given a left / right value of auto so thatall 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 overflowingthe container or the images held within an expanded container. The correctinterpretation is that the images should overflow the container.Step 6Removing the bulletsI 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 marginvalues for the indentation whereas Mozilla/Netscape/Firefox all use padding values, so tocater 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 #3Now the bullets are gone.home | programming | css_gallery | How to Create a Photographic Gallery Using CSS /Page 2Page 5 of 6How to Create a Photographic Gallery Using CSS / Page 28/17/2010http://www.webreference.com/programming/css_gallery/2.html
  • 6. Add Multilingual Support to Your JavaWeb PagesCreating an ASP.NET Registration andConfirmation SystemBuild Your Own PHP Web MailerMySQL in Amazon EC2 -Beginners GuideSpiceworks 5.0 Beta Adds NewHelp Desk Features7 Ways to Help Customers TrustYour Ecommerce WebsiteThe Network for Technology ProfessionalsSearch:About Internet.comCopyright 2010 QuinStreet Inc. All Rights Reserved.Legal Notices, Licensing, Permissions, Privacy Policy.Advertise | Newsletters | E-mail OffersSolutionsWhitepapers and eBooksHelpful Cloud Computing Resources MORE WHITEPAPERS, EBOOKS, AND ARTICLESWebcastsUser Experience Management Indicators for Business and IT SuccessEnsuring Performance Meets Business and Web User NeedsMORE WEBCASTS, PODCASTS, AND VIDEOSDownloads and eKitsGet BlackBerry Enterprise Server Express for Free MORE DOWNLOADS, EKITS, AND FREE TRIALSTutorials and DemosDemo: Google Site SearchVirtual Event: Master Essential Techniques for Leveraging the CloudArticle: Explore Application Lifecycle Management Tools in Visual Studio 2010Internet.com Hot List: Get the Inside Scoop on IT and Developer ProductsNew Security Solutions Using Intel(R) vPro(TM) TechnologyAll About BotnetsMORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDESPage 6 of 6How to Create a Photographic Gallery Using CSS / Page 28/17/2010http://www.webreference.com/programming/css_gallery/2.html