Results 1 to 6 of 6

Thread: PHP photo album 2.0

  1. #1
    Join Date
    Dec 2009
    Posts
    54
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Smile PHP photo album 2.0

    PHP Photo Album script 2.0
    http://www.dynamicdrive.com/dynamici...photoalbum.htm

    Hi all,

    I have just added this script to a site I am making and would like to know if any of you know why the images for the page 1,2,3,etc buttons are my menu button?

    Here is a link so that you can see what I mean
    http://www.clublush.co.uk/gallery.php

    Thanks in advance

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Because they're inside a div with an id of "one", and that's what your nav1.css file tells them to look like:

    Code:
    @charset "utf-8";
    /* CSS Document */
    #one a{
    width: 136px; /*the width of the button = the width of the background image */
    height: 83px; /*the height of the button = the height of the background image/3 */
    float: left; /*to position the elements horizontally*/
    background:  url(../images/layout/menu/home.png) no-repeat top; /*to apply the background image positioned with is top part visible*/
    margin-right: 0px; /*the right empty space in between the button*/
    background-position: left;
    } 
    #one a:hover{
    background-position: right;
    } 
    #one a.selected:hover{
    background-position: right;
    } 
    #one a.selected {
    background-position: right;
    }
    You could change all those selectors to #nav, except that you have two div's with that id and one of them still contains the gallery. If you change the id of the first one to - say "cont", and change the above selectors as I outline, then it should work out -

    In the stylesheet:

    Code:
    @charset "utf-8";
    /* CSS Document */
    #nav a{
    width: 136px; /*the width of the button = the width of the background image */
    height: 83px; /*the height of the button = the height of the background image/3 */
    float: left; /*to position the elements horizontally*/
    background:  url(../images/layout/menu/home.png) no-repeat top; /*to apply the background image positioned with is top part visible*/
    margin-right: 0px; /*the right empty space in between the button*/
    background-position: left;
    } 
    #nav a:hover{
    background-position: right;
    } 
    #nav a.selected:hover{
    background-position: right;
    } 
    #nav a.selected {
    background-position: right;
    }
    And in the body of the page:

    Code:
    <body>
    <div id="topweb">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CLUBLUSH.CO.UK</div>
    <div id="topshade"></div>
    <br><center>
      <p><img src="images/Club-Lush.png" width="500" height="115"/><br />
    </center>
    <!-- NAV MENU -->
    <div id="cont">
    <div id="menu">
    <div id="one">
    <div id="nav">
    <div id="menu">
    <div id="one">
    <a href="index.
    A bit more (maybe a lot more) of a reorganization of the markup, id's and styles would be required if you want to conform to standards and/or have a more logically arranged page. But this should solve the immediate issue.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    moose86 (12-11-2011)

  4. #3
    Join Date
    Dec 2009
    Posts
    54
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    thanks John,

    i c what your saying but I have done it that way for a reason, is there ne way i can change the #one for the page buttons css instead? as i dont really wanna touch the nav

    thanks

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Well, OK - made me look at it again. There are two div's with the id of "one". If you simply remove the id from the first of these, that takes care of the problem in one step:

    Code:
    <body>
    <div id="topweb">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CLUBLUSH.CO.UK</div>
    <div id="topshade"></div>
    <br><center>
      <p><img src="images/Club-Lush.png" width="500" height="115"/><br />
    </center>
    <!-- NAV MENU -->
    <div id="nav">
    <div id="menu">
    <div id="one">
    <div id="nav">
    <div id="menu">
    <div id="one">
    <a href="inde . . .
    See the two of them there? Make the first one a plain div tag:

    Code:
    <body>
    <div id="topweb">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CLUBLUSH.CO.UK</div>
    <div id="topshade"></div>
    <br><center>
      <p><img src="images/Club-Lush.png" width="500" height="115"/><br />
    </center>
    <!-- NAV MENU -->
    <div id="nav">
    <div id="menu">
    <div>
    <div id="nav">
    <div id="menu">
    <div id="one">
    <a href="inde . . .
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #5
    Join Date
    Dec 2009
    Posts
    54
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    thanks again, sorry to be a pain, all fixed now

  7. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    You're welcome. But that doesn't change the fact that the page is non-standard and a bit disorganized. It might not be so bad. Perhaps if you just removed the id's from those three (only two remaining):

    Code:
    <body>
    <div id="topweb">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CLUBLUSH.CO.UK</div>
    <div id="topshade"></div>
    <br><center>
      <p><img src="images/Club-Lush.png" width="500" height="115"/><br />
    </center>
    <!-- NAV MENU -->
    <div id="nav">
    <div id="menu">
    <div id="one">
    <div id="nav">
    <div id="menu">
    <div id="one">
    <a href="inde . . .
    At least then there wouldn't be duplicate id's for those. There's a good chance that won't hurt the layout or styles. I see a <center> tag. There are other, more standard ways to center content. But, as I say, getting the page compliant and well organized is another project. This has taken care of the immediate problem. Glad I could help.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Tags for this Thread

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
  •