SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2009
    Location
    Chicago
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Photo Gallery HELP!

    Would someone please help me out with creating basic code for this gallery to replicate this page until I learn CSS? When I designed this, I used tables and there is just too much code on these photo gallery pages. Eventually, I will redesign this site using CSS exclusively, but for now, this gallery needs serious help. I just want to replicate the design of this page with cleaner code and then use that as a template to apply to all the other pages in the gallery. I know it's not the greatest, but I am new to Web design.

    On the pages like this one,
    http://www.desireechocolates.com/Ima...ng_image1.html
    I want an H1 tag for the title of the photo gallery - there are 3 galleries.
    Then I want to insert the picture in the center as shown and add a description of the picture below. I also need to add the "Previous" and "Next"
    Maybe an arrow would look nicer.
    All the images are 560x385
    Can someone help me with this, or is this asking too much? If so, I completely understand.

    Later, I want to create a header for these gallery pages, so there's better navigation. For now, I just want to change the gallery pages.

    Thank you, Karen

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Check this out
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2009
    Location
    Chicago
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm sorry, that was asking for too much. OK, I laid out the page as much as I could. How do I add the div for the picture so it fits between the H1 tag and the paragraph tag? Also, how do I add the links to go to the previous and next photos?
    ANY help would be greatly appreciated
    Thanks


    <head>
    <title>Are You Looking for Unique Chocolate Wedding Favors or Centerpiece?</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style type="text/css">
    body {
    margin: 40px;
    padding: 12px;
    background-color:#FCE9C4;
    }
    #Content {
    width:775px;
    height: auto;
    margin: 0px auto;
    text-align: left;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    background-color: #FCE9d0;
    border: 0.15em solid #734A12;
    }

    h1 {
    background-color:#734A12;
    color:#FFFFFF;
    font-family:Georgia, "Times New Roman", Times, serif;
    padding: 0.2em;
    text-align:center;
    font-size:20px
    }

    p {
    color:#663300;
    font-family:Georgia, "Times New Roman", Times, serif;
    }

    </style>
    </head>

    <body>
    <div id="Content">
    <h1>Desiree Chocolates Wedding Photo Gallery</h1>

    <p>Your wedding will not be complete without Gourmet Bride & Groom Caramel Apples. They can be used as a centerpiece and/or wedding favors. Your guests will love the novelty! We use nothing but the crispest jumbo Granny Smith apples. First we coat the apples by dipping them in caramel. We then "lace" the bride in delicious, creamy, Belgian white chocolate and the groom is dapperly dipped in Belgian dark and white chocolate to create the look of his tuxedo. Don't forget the chocolate bow tie!</p>

    </div>
    </body>

    </html>

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,634
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Well, if it's simply like your example, then it's very simple.

    <h1>Desiree Chocolates Wedding Photo Gallery</h1>
    <a href="image1">Previous</a> <img src="image2.jpg" alt=""> <a href="image3">Next</a>
    <p>Your wedding will not be complete without Gourmet Bride & Groom Caramel Apples. They can be used as a centerpiece and/or wedding favors. Your guests will love the novelty! We use nothing but the crispest jumbo Granny Smith apples. First we coat the apples by dipping them in caramel. We then "lace" the bride in delicious, creamy, Belgian white chocolate and the groom is dapperly dipped in Belgian dark and white chocolate to create the look of his tuxedo. Don't forget the chocolate bow tie!</p>

    But, if you wanted to do something a little more fun, then you could do something like this.

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2009
    Location
    Chicago
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Eric - Since I'm not too familiar with creating menus (other than image maps), I found a tutorial for a spry menu and I want to create a basic one for my pages. I am trying to insert it somewhere on this page and it's not working for me. Where on this page should I insert it? There will be a few sub menus, so I cannot insert it above the image. Sorry, I'm new to this. Any suggestions?
    Thanks, Karen

    <<head>
    <title>Are You Looking for Unique Chocolate Wedding Favors or Centerpiece?</title>
    <META NAME="description" content="Your wedding will not be complete without chocolate covered bride and groom caramel apples for a sweet table centerpiece. Let Desiree Chocolates decorate your wedding sweet table with these very unique and gourmet wedding favors.">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style type="text/css">

    body {
    margin: 20px;
    padding: 12px;
    background-color:#FCE9C4;
    }

    #Content {
    width:775px;
    height: auto;
    margin: 0px auto;
    text-align: left;
    padding-top: 5px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    background-color: #FCE9d0;
    border: 0.25em solid #734A12;
    }

    h1, h2 {
    color:#734A12;
    font-family:Georgia, "Times New Roman", Times, serif;
    padding: 0.2em;
    text-align:center;
    }

    h1 {
    background-color:#FFCC99;
    font-size:18px;
    text-decoration:
    }

    h2 {
    font-size:16px
    }

    p {
    color:#663300;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:14px;
    }

    a {
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    line-height: 25px;
    font-family:Verdana, Arial, Helvetica, sans-serif
    }

    a:link {
    font-weight: normal;
    text-decoration: none;
    color: #663300;
    text-decoration:underline;
    }

    a:visited {
    font-weight: normal;
    text-decoration: none;
    background-color:#FFCC99;
    }

    a:hover, a:active {
    text-decoration: none;
    color:#663300;
    background-color:#FFCC99;
    }

    a:active{
    outline: none;
    }

    </style>

    </head>

    <body>

    <div id="Content">

    <h1>Desiree Chocolates Wedding Photo Gallery</h1>

    <h2>Gourmet Bride & Groom Apples for Your Wedding Sweet Table</h2>

    <div align="center"><a href="image1">Previous</a> <img src="Wedding/wedding1.jpg" alt="Gourmet Caramel & Chocolate Bride & Groom Apples"> <a href="/Images/Photo_Gallery/Wedding/wedding_image2.html">Next</a></div>

    <p>Your wedding will not be complete without Gourmet Bride & Groom Caramel Apples. They can be used as a centerpiece and/or wedding favors. Your guests will love the novelty. We use nothing but the crispest jumbo Granny Smith apples. First we coat the apples by dipping them in caramel. We then "lace" the bride in delicious, creamy, Belgian white chocolate and the groom is dapperly dipped in Belgian dark and white chocolate to create the look of his tuxedo. Don't forget the chocolate bow tie.</p>

    <p align="center">Copyright 2009, Desiree Chocolates</p>

    </div>

    </body>

    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •