Changes to CSS script

Accurax · #1 (**permalink**) Dec 12th, 2006, 13:29

Im using the CSS script that Crew kindly pointed me towards last week, and ive got it working with my database no problem.

However id like to make a few changes, and unfortunatly this is a little over my head at the moment.

Ive made some basic changes allready, and wondered if anyone here can help me make the others?

First of all heres the code

HTML

Code: Select all

<!-- Start of image gallary -->
<ul id="gallery">
<li><a href="#nogo">
<img src="<?php $username = $_SESSION['username'];
$query = "SELECT picture FROM members WHERE user_name='$username'";
$result = mysql_query($query)
        or die ("could not find user");
$row = mysql_fetch_array($result);
echo $row['picture']; ?>" alt="#1" title="#1" /></a></li>

<li><a href="#nogo">
<img src="<?php $username = $_SESSION['username'];
$query = "SELECT picture2 FROM members WHERE user_name='$username'";
$result = mysql_query($query)
        or die ("could not find user");
$row = mysql_fetch_array($result);
echo $row['picture2']; ?>" alt="#2" title="#2" /></a></li>

<li><a href="#nogo">
<img src="<?php $username = $_SESSION['username'];
$query = "SELECT picture3 FROM members WHERE user_name='$username'";
$result = mysql_query($query)
        or die ("could not find user");
$row = mysql_fetch_array($result);
echo $row['picture3']; ?>" alt="#3" title="#3" /></a></li>

<li><a href="#nogo">
<img src="<?php $username = $_SESSION['username'];
$query = "SELECT picture4 FROM members WHERE user_name='$username'";
$result = mysql_query($query)
        or die ("could not find user");
$row = mysql_fetch_array($result);
echo $row['picture4']; ?>" alt="#4" title="#4" /></a></li>

<li><a href="#nogo">
<img src="<?php $username = $_SESSION['username'];
$query = "SELECT picture5 FROM members WHERE user_name='$username'";
$result = mysql_query($query)
        or die ("could not find user");
$row = mysql_fetch_array($result);
echo $row['picture5']; ?>" alt="#5" title="#5" /></a></li>

<li><a href="#nogo">
<img src="<?php $username = $_SESSION['username'];
$query = "SELECT picture6 FROM members WHERE user_name='$username'";
$result = mysql_query($query)
        or die ("could not find user");
$row = mysql_fetch_array($result);
echo $row['picture6']; ?>" alt="#6" title="#6" /></a></li>

<li class="rgt"><a href="#nogo">
<img src="<?php $username = $_SESSION['username'];
$query = "SELECT picture7 FROM members WHERE user_name='$username'";
$result = mysql_query($query)
        or die ("could not find user");
$row = mysql_fetch_array($result);
echo $row['picture7']; ?>" alt="#7" title="#7" /></a></li>

<li class="pad"></li>
</ul>
<!-- End of Gallary -->

You can ignore the php for the sake of this post, as it all works perfectly.

Next the CSS

Code: Select all

ul#gallery {
    padding:0;
    margin:0;
    width:448px;
    height:336px;
    position:relative;
    background-color: #CC9999;
  }
#gallery li {
  list-style-type:none; 
  width:64px; 
  height:48px; 
  float:left; 
  z-index:100;
  }
#gallery li.lft {
  float:left; 
  clear:left;
  }
#gallery li.rgt {
  float:right; 
  clear:right;
  }
#gallery a {
  position:relative; 
  width:64px; 
  height:48px; 
  display:block; 
  float:left; 
  z-index:100; 
  cursor:default;
  }
#gallery a img {
  position:relative; 
  width:62px; 
  height:46px; 
  border:1px solid #FFFFFF; 
  z-index:100;
  }
#gallery a:hover {
    width:160px;
    height:120px;
    padding:108px 144px;
    position:absolute;
    left:0;
    top:0;
    z-index:20;
  }
#gallery a:hover img {
    position:relative;
    width:160px;
    height:120px;
    border:0;
    z-index:20;
  }
#gallery a:active, #gallery a:focus {
    width:320px;
    height:240px;
    padding:48px 64px;
    position:absolute;
    left:0;
    top:0;
    z-index:10;
    background-color: #transparent;
  }
#gallery a:active img, #gallery a:focus img {
    position:relative;
    width:320px;
    height:239px;
    border:0;
    z-index:10;
    background-color: #FFFFFF;
  }
/* hack for Internet Explorer */
#gallery li.pad {
  height:0; 
  display:block; 
  margin-top:-2px; 
  width:10px; 
  font-size:0;
  }

/* hack for Opera 7+ */
@media all and (min-width:0px){
#gallery a:hover {
  background:#FFFFFF; 
  width:320px; 
  height:240px; 
  padding:48px 64px; 
  position:absolute; 
  left:0; 
  top:0; 
  z-index:10;
  }
#gallery a:hover img {
  background:#FFFFFF; 
  position:relative; 
  width:320px; 
  height:240px; 
  border:0; 
  z-index:10;
  }
}

Ok, so, what do I want to change?
1) I'd like to have picture1 displayed by default when the gallary loads up for the first time, as opposed to the blank space at the moment.

2) When you roll over an image, and have one selected id like it if it didnt go blank... it looks half finished, maybe if i could make it go black... anything just not the same colour as the background.

4)Id like the option of adding some text under each photo.... any idea's on this?

Any help is much appreciated on this one... thanks guys

ukgeoff · #2 (**permalink**) Dec 12th, 2006, 16:11

Assuming you have cut-n-pasted the html code, then your first sql statement is trying to select 'picture' and not 'picture1'. So if your naming includes the number, its not finding anything.

As to including some text. Save the relevant text with the image in the database. Wrap the image and its text in a div to keep the two together.

Can I have a link to view the rollover problem?

Accurax · #3 (**permalink**) Dec 12th, 2006, 17:49

Thanks Geoff, but i havnt cut and pasted the code.... the code actually works fine... that first sql statement is correct.

Im just looking to make some improvements here... i understand the html no problem.... im struggleing with the CSS that controls it.. im pretty sure that pretty much all of the changes i want to amke can be done by editing the CSS here.

I was just hoping for a few pointes on what to change or add to acheive what i want.

My main issue is the way the active thumbnail, and the hover thumbnails are invisible, it makes it look tatty in my mind.

Edit :: Yes the CSS is a cut & paste job atm

ukgeoff · #4 (**permalink**) Dec 12th, 2006, 21:09

Like I said. I'd much rather have a working page to look at as then I can make use of my tools to figure out what is happening.

Accurax · #5 (**permalink**) Dec 13th, 2006, 08:07

Ill get something uploaded to some free space today, ill post the link here when its up geoff.... and thanks

Oh, heres the link to the origional gallary if it helps http://www.cssplay.co.uk/menu/gallery4.html#nogo
I actually just noticed that theres a tutorial attached to this page, so im going to work through that this morning

Lchad · #6 (**permalink**) Dec 17th, 2006, 12:31

What a GREAT gallery! That was fun to look at...

ukgeoff · #7 (**permalink**) Dec 17th, 2006, 16:36

Had a look at the site. It seems as if you have managed to get it to do what you want.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Need help with this script	korvix	JavaScript Forum	1	May 28th, 2008 23:00
Just following the script...	chrisomatix	Introduce Yourself	3	Feb 27th, 2008 07:03
script help	ehud36new	JavaScript Forum	2	Nov 13th, 2007 13:15
i need help with a FMS script	taietel	Flash & Multimedia Forum	1	Apr 6th, 2007 14:56
Asp script	tolis	Classic ASP	0	Feb 3rd, 2007 13:28

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Changes to CSS script