Grow your CSS skills. Land your dream job.

zen photo help

  • # February 10, 2009 at 10:21 am

    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.

    Code:

    < ?php if (getOption('Allow_search')) { printSearchForm(''); } ?>

    < ?php printHomeLink('', ' | '); echo getGalleryTitle(); ?>



    < ?php printPageListWithNav("« ".gettext("prev"), gettext("next")." »"); ?>

    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?

    # February 10, 2009 at 12:19 pm

    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?)

    # February 10, 2009 at 3:09 pm

    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

    Code:
    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;
    }

    pab
    # February 13, 2009 at 9:56 pm

    create a div header and use css to add it as a background image, that should do it.

    hope it helps

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".