PHP photo album 2.0

**moose86** · 12-11-2011, 04:45 PM

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

**jscheuer1** · 12-11-2011, 05:50 PM

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.

**moose86** · 12-11-2011, 05:59 PM

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

**jscheuer1** · 12-11-2011, 07:40 PM

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 . . .

**moose86** · 12-11-2011, 08:24 PM

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

**jscheuer1** · 12-12-2011, 12:06 AM

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.

Thread: PHP photo album 2.0

Thread Tools

Search Thread

PHP photo album 2.0

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

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions