treehouse : what would you like to learn today?
Web Design Web Development iOS Development

zen photo help

  • k i'm customizing a photo gallery using zen-photo but i can't figure out how to put a header image on the top of the container.
    <div id=\"main\">
    <img src=\"images/top-container.png\" />
    <div id=\"gallerytitle\">
    <?php if (getOption('Allow_search')) { printSearchForm(''); } ?>
    <h2><?php printHomeLink('', ' | '); echo getGalleryTitle(); ?></h2>
    </div>

    <div id=\"padbox\">

    <div id=\"albums\">
    <?php while (next_album()): ?>
    <div class=\"album\">
    <div class=\"thumb\">
    <a href=\"<?php echo htmlspecialchars(getAlbumLinkURL());?>\" title=\"<?php echo gettext('View album:'); ?> <?php echo getAnnotatedAlbumTitle();?>\"><?php printAlbumThumbImage(getAnnotatedAlbumTitle()); ?></a>
    </div>
    <div class=\"albumdesc\">
    <h3><a href=\"<?php echo htmlspecialchars(getAlbumLinkURL());?>\" title=\"<?php echo gettext('View album:'); ?> <?php echo getAnnotatedAlbumTitle();?>\"><?php printAlbumTitle(); ?></a></h3>
    <small><?php printAlbumDate(\"\"); ?></small>
    <p><?php printAlbumDesc(); ?></p>
    <img src=\"images/bottom-container.png\" />
    </div>
    <p style=\"clear: both; \"></p>
    </div>
    <?php endwhile; ?>
    </div>
    <br clear=\"all\" />
    <?php printPageListWithNav(\"&laquo; \".gettext(\"prev\"), gettext(\"next\").\" &raquo;\"); ?>

    </div>


    should i put the image in the css or something? i tried just putting <img src="images/top image.png" /> but that doesn't seem to work. anyone have any idea what i should do?
  • what exactly is it you are trying to do......

    remember we have not seen your work, the site, don't know what it looks like or what your really trying to do with it all.

    so asking a vague question when we don't visually see what it is your talking about, wont help us help you

    for example I am trying to get my page to go opaque when you click the photo... (do you know what I am mean?)
  • well what i'm trying to do is add an image to the bottom and top of the main div, i don't have the site up live because its working off my local host using winamp, but heres a pic of what it looks like now.
    http://www.stray-designs.com/pics/pic.html
    and the one at the bottom shows the container and how it should look like.

    and from the first post you can see the html and css for the page.

    oh and the css for the site is


    html {

    height: 100%;
    }

    /* Main Layout
    ------------------------------ */
    body {
    background-color:#1D1D1D;
    color:#FFFFFF
    }
    #main {
    height:auto;
    margin:0 auto;
    position:relative;
    width:671px;
    text-align: left;
    background:url(../images/container-background.jpg) repeat-y scroll 0 0;
    padding-left:10px;

    }

    #top image {
    background:url(../images/top-container.png);
    width:671px;
    height:
    }
    #credit, #sort {
    margin: 0 auto;
    width: 640px;
    font-size: 85%;
    color: #294550;
    text-align: right;
    clear: both;
    }
    #credit a, #sort a {
    text-decoration: none;
    color: #294550;
    border-bottom: 1px dotted #294550;
    }
    #credit a:hover, #sort a:hover {
    color: #748da0;
    border-bottom: 1px solid #294550;
    text-decoration: none;
    }
    #gallerytitle {
    border-bottom: none
    padding-bottom: 14px;
    margin-bottom: 20px;
    /*min-height: 40px;
    _height: 40px;*/
    }
    #gallerytitle h2 {
    font-weight: normal;
    font-size: 12pt;
    margin-top: 18px;
    width:510px;
    }
  • create a div header and use css to add it as a background image, that should do it.

    hope it helps