32 replies [Last post]
djsounds02
djsounds02's picture
Offline
Enthusiast
Burnley, UK
Last seen: 8 years 41 weeks ago
Burnley, UK
Joined: 2010-06-17
Posts: 110
Points: 134

After much reading and googling and trying the past few days Ive now resorted to my last call of port.. Ask for help.

I have a horizontal nav bar design with 7 buttons, it is a simple rounded rectangle design with a gradient through the image. So the ends are round and the middle buttons are straight rectangles.

Therefore I need 3 li classes to work correctly the first button class being Home the following buttons class being middle and the last button class being contact.

Here is the XHTML for the list.

djsounds02
djsounds02's picture
Offline
Enthusiast
Burnley, UK
Last seen: 8 years 41 weeks ago
Burnley, UK
Joined: 2010-06-17
Posts: 110
Points: 134

<body> <div

<body>
    <div id="container">
        <a name="top"/>
        <div id="header">
            <div id="headerlogo">
            </div>
            <div id="navbar">
            <ul id="nav">
                	<li class="home"><a title="Leibo Home" href="index.html">Home</a></li>
                	<li class="middle"><a title="Leibo News" href="news.html">News</a></li>
                	<li class="middle"><a title="Leibo Biography" href="biography.html">Biography</a></li>
                	<li class="middle"><a title="Leibo Discography" href="discography.html">Discography</a></li>
                	<li class="middle"><a title="Leibo Tour Dates" href="tourdates.html">Tour Dates</a></li>
                	<li class="middle"><a title="Leibo Media" href="media.html">Media</a></li>
                	<li class="contact"><a title="Leibo Contact" href="contact.html">Contact</a></li>
                </ul>
            </div>

#navbar {
	min-height: 41px;
	background-repeat: no-repeat;
	width:888px;
	height:41px;
}
 
#nav{
	font-family:Helvetica;
    font-size:.15px;
    font-weight:bold;
    height: 41px;
    width: 888px;
 
}
 
#nav li {
    list-style:none;
    display:block;
}
 
#nav li.middle {
    background-image: url(images/middlebutton.gif);
    height: 41px;
    width: 126px;
    list-style:none;
    display:block;
    color: black;
    list-style: none;
}
 
 
#nav.middle a {
    width:126px;
    color: black;
    text-decoration:none;
    float:left;
    border: none;
}
 
#nav a:hover { 
    background-position:0 -41px;
}

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 33 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

We need to see *all* your

We need to see *all* your html code, not part of it. Please read the site posting guidelines. Following them will make it ever so much easier for us to help you.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Vade
Vade's picture
Offline
Enthusiast
Ireland
Last seen: 9 years 37 weeks ago
Ireland
Joined: 2007-08-13
Posts: 315
Points: 276

What you're after is sprite

What you're after is sprite navigation, a google search for said nav will throw you far too many tutorials to take in.

Failing that do you have a link to the live site so we can see exactly what's going on?

djsounds02
djsounds02's picture
Offline
Enthusiast
Burnley, UK
Last seen: 8 years 41 weeks ago
Burnley, UK
Joined: 2010-06-17
Posts: 110
Points: 134

Site is at

Site is at www.benjisounds.co.uk/leibo

are you suggesting i google for sprite? This isnt dependant on javascript is it? as I was hoping not to use Java or I would have stuck to my old buttons with a preloader!

Thankyou for your quick replies!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Leibo - Trance Production - Trance DJ - Home Page</title>
<link href="layout.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/banner.js"></script>
<script type="text/javascript" src="js/mp3player.js"></script>
</head>
<body>
    <div id="container">
        <a name="top"/>
        <div id="header">
            <div id="headerlogo">
            </div>
            <div id="navbar">
            <ul id="nav">
                	<li class="home"><a title="Leibo Home" href="index.html">Home</a></li>
                	<li class="middle"><a title="Leibo News" href="news.html">News</a></li>
                	<li class="middle"><a title="Leibo Biography" href="biography.html">Biography</a></li>
                	<li class="middle"><a title="Leibo Discography" href="discography.html">Discography</a></li>
                	<li class="middle"><a title="Leibo Tour Dates" href="tourdates.html">Tour Dates</a></li>
                	<li class="middle"><a title="Leibo Media" href="media.html">Media</a></li>
                	<li class="contact"><a title="Leibo Contact" href="contact.html">Contact</a></li>
                </ul>
            </div>
            <div id="musicplayer">
                <embed src="mp3player.swf" width="300" height="25"></embed>
            </div>
            <div id="navbar2">
            </div>
            <div id="navbarBottom">
                <a id="beatportLogo" href="#"><img src="images/beatport-logo.gif" alt="BeatPort"/></a>
                <a id="trackitdownLogo" href="#"><img src="images/trackitdown-logo.png" alt="Track It Down"/></a>
            </div>
        </div>
        <div id="content">
            <div id="leftcontentBox">
                <div id="leftcontentBoxinside">
                    <h1 class="title"> Welcome to Leibos Web Site!</h1>
                    Welcome to the official website of UK Based Dj/Producer/Remixer: Leibo! Here you can gain access to all the information on Leibo including : Latest News, Tour Dates, Mixes and forthcoming releases to all major digital download sites.<br/>
                    <br/>
                    You can also visit Leibo at Facebook, YouTube, Twitter, Myspace and Sound Cloud for all access to his latest bootlegs/white labels as supported by some of the biggest Artists in the world.<br/>
                    <br/>
                    Hope you all enjoy the site and don't forget to keep a lookout for future tour dates and come and witness a rising star in the making.<br/>
                    <br/><hr/><br/>
                    Acknowledgments from other Djs/Producers from around the Globe:
                    <h2 class="subtitle">Cygnus X - Superstring (Leibo Rework) Label: White Label</h2>
                    From : *Paul Trainer* (Vandit/Vandit Digital)
                    <br/>
                    Great remix of such a classic track. Plenty of drive in this, in my sets for sure!
                    <br/>
                    Keep up the good work! 8/10.
                    <br/><br/>
                    <a id="links" href="discography.html">Read More</a>
                </div>
            </div>
            <div id="rightcontentBox">
                <div id="flashbox">
                    <embed src="banner.swf" width="270" height="240"/>
                </div>
            </div>
            <div id="cornerpicture">
                <img src="images/leibo4.gif" alt="Leibo"/>
            </div>
            <div id="linksbox">
                <a id="button8" href="#"></a><a id="button9" href="#"></a><a id="button10" href="#"></a><a id="button11" href="#"></a><a id="button12" href="#"></a>
            </div>
        </div>
        <div id="footer">
            <span class="alignLeft">Back to <a class="links2" href="#top">top.</a></span><span class="alignRight">Designed by <a class="links2" href="http://www.kubeonedesign.co.uk" target="_blank">KubeOne Design</a></span>
        </div>
    </div>
</body>
</html>

body {
	height:1050px;
}
 
html {
	height:1050px;
}
 
#container {
	width:888px;
	margin-left:auto;
	margin-right:auto;
	min-height:100%;
	position:relative;
}
 
#header {
	width:888px;
	height:auto;
	margin-left:auto;
	margin-right:auto;
}
 
#headerlogo {
	background-image:url(images/leibologo.gif);
	background-repeat:no-repeat;
	height:201px;
	width:439px;
	margin-left:auto;
	margin-right:auto;
}
 
#navbar {
	min-height: 41px;
	background-repeat: no-repeat;
	width:888px;
	height:41px;
}
 
#musicplayer {
	width:300px;
	height:25px;
	margin-left:auto;
	margin-right:auto;
	z-index:3;
}
 
#navbar2 {
	background-image:url(images/belownav.gif);
	width:368px;
	height:32px;
	margin-top:-26px;
	margin-left:auto;
	margin-right:auto;
	z-index:2;
}
 
#navbarBottom {
	background-image:url(images/nav-bar-bottom.gif);
	height:41px;
	width:888px;
	margin-top:-27px;
	margin-left:auto;
	margin-right:auto;
}
 
a#beatportLogo {
	height:33px;
	width:114px;
	margin-top:4px;
	margin-left:50px;
}
 
a#beatportLogo img {
	border-style:none;
	border-width:0;
	margin-top:4px;
	margin-left:50px;
	z-index:10;
}
 
a#trackitdownLogo {
	float:right;
	height:20px;
	width:160px;
	margin-top:6px;
	margin-right:50px;
}
 
a#trackitdownLogo img {
	border:0;
}
 
#content {
	color:#ffffff;
	font-family:helvetica;
	width:888px;
	margin-top:10px;
	margin-left:auto;
	margin-right:auto;
}
 
#leftcontentBox {
	background-color:#000000;
	background-image:url(images/leftbodybox.gif);
	width:585px;
	float:left;
}
 
#leftcontentBoxinside {
	background-color:#000000;
	overflow:auto;
	margin-top:24px;
	margin-bottom:25px;
	height:535px;
	padding-left:30px;
	padding-right:30px;
}
 
#rightcontentBox {
	background-color:#000000;
	background-image:url(images/rightflashbox.gif);
	height:285px;
	width:285px;
	float:right;
}
 
#mediabox {
	background-image:url(images/mediabox.gif);
	width: 888px;
	height: 888px;
	float:right;
	float: left;
}
 
#flashbox {
	height:240px;
	width:270px;
	margin-top:22px;
	margin-left:7px;
}
 
#cornerpicture {
	width:270px;
	float:right;
}
 
#linksbox {
	width:588px;
	height:64px;
	float:left;
	margin-top:10px;
}
 
#footer {
	width:888px;
	height:30px;
	margin-left:auto;
	margin-right:auto;
	bottom:0;
	position:absolute;
}
 
a#images img {
	border:none;
}
 
#nav{
	font-family:Helvetica;
    font-size:.15px;
    font-weight:bold;
    height: 41px;
    width: 888px;
 
}
 
#nav li {
    list-style:none;
    display:block;
}
 
#nav li.middle {
    background-image: url(images/middlebutton.gif);
    height: 41px;
    width: 126px;
    list-style:none;
    display:block;
    color: black;
    list-style: none;
}
 
 
#nav.middle a {
    width:126px;
    color: black;
    text-decoration:none;
    float:left;
    border: none;
}
 
#nav a:hover { 
    background-position:0 -41px;
}
 
a#button8 {
	background-image:url(images/facebookbutton.gif);
	height:65px;
	width:134px;
	float:right;
	float:left;
}
 
a#button8:hover {
	visibility:visible;
	background-image:url(images/facebookactivebutton.gif);
}
 
a#button9 {
	background-image:url(images/youtubebutton.gif);
	height:65px;
	width:103px;
	float:right;
	float:left;
}
 
a#button9:hover {
	visibility:visible;
	background-image:url(images/youtubeactivebutton.gif);
}
 
a#button10 {
	background-image:url(images/twitterbutton.gif);
	height:65px;
	width:118px;
	float:right;
	float:left;
}
 
a#button10:hover {
	visibility:visible;
	background-image:url(images/twitteractivebutton.gif);
}
 
a#button11 {
	background-image:url(images/soundcloudbutton.gif);
	height:65px;
	width:89px;
	float:right;
	float:left;
}
 
a#button11:hover {
	visibility:visible;
	background-image:url(images/soundcloudactivebutton.gif);
}
 
a#button12 {
	background-image:url(images/myspacebutton.gif);
	height:65px;
	width:142px;
	float:right;
	float:left;
}
 
a#button12:hover {
	visibility:visible;
	background-image:url(images/myspaceactivebutton.gif);
}
 
a#links {
	color:#ffffff;
	text-decoration:none;
	font-size:17px;
	font-weight:bold;
}
 
a#links:hover {
	color:#B0171F;
}
 
a#links2 {
	color:#000000;
	text-decoration:none;
	font-size:17px;
	font-weight:bold;
}
 
a#links2:hover {
	color:#B0171F;
}
 
a#facebook img,a#youtube img,a#twitter img,a#soundcloud img {
	border:0;
}
 
#leftcontentBoxinside.h1 {
	color:#ffffff;
}
 
span.alignLeft {
	float:left;
}
 
span.alignRight {
	float:right;
}
 
p.home {
	color:#ffffff;
}
 
p.home2 {
	color:#ffffff;
}
 
h1.title {
	color:#ffffff;
}
 
h2.subtitle {
	color:#ffffff;
	font-size:20px;
}

Vade
Vade's picture
Offline
Enthusiast
Ireland
Last seen: 9 years 37 weeks ago
Ireland
Joined: 2007-08-13
Posts: 315
Points: 276

No it's CSS based and would

No it's CSS based and would be the best solution to your problem, just do a search for CSS sprite navigation

djsounds02
djsounds02's picture
Offline
Enthusiast
Burnley, UK
Last seen: 8 years 41 weeks ago
Burnley, UK
Joined: 2010-06-17
Posts: 110
Points: 134

Well I think this was just

Well I think this was just solved in under an hour. Do you know if the sprite method will matter if the list is in a div container? I wont need to call the element whilst working with my list css will i?

Vade
Vade's picture
Offline
Enthusiast
Ireland
Last seen: 9 years 37 weeks ago
Ireland
Joined: 2007-08-13
Posts: 315
Points: 276

Do you need it in a div

Do you need it in a div container, what purpose has the container that the ul itself won't fulfil?

It won't matter if it's in a div but ask yourself if it needs to be.

djsounds02
djsounds02's picture
Offline
Enthusiast
Burnley, UK
Last seen: 8 years 41 weeks ago
Burnley, UK
Joined: 2010-06-17
Posts: 110
Points: 134

Thanks to both of you for

Thanks to both of you for your consistent replies. I didn't think I would get a reply for weeks. CSS can so be compared with sudoku if you think about it. Except the feeling you get when you figure it out yourself is much greater than now, but i do have an overwhelming relief! My gf just made me realise that it has acctually been a week now of searching for answers.

My full appreciation.

djsounds02
djsounds02's picture
Offline
Enthusiast
Burnley, UK
Last seen: 8 years 41 weeks ago
Burnley, UK
Joined: 2010-06-17
Posts: 110
Points: 134

My image isn't displaying!!

My image isn't displaying!!

djsounds02
djsounds02's picture
Offline
Enthusiast
Burnley, UK
Last seen: 8 years 41 weeks ago
Burnley, UK
Joined: 2010-06-17
Posts: 110
Points: 134

Ok image is there but they

Ok image is there but they are not links and they are not rollovers?

djsounds02
djsounds02's picture
Offline
Enthusiast
Burnley, UK
Last seen: 8 years 41 weeks ago
Burnley, UK
Joined: 2010-06-17
Posts: 110
Points: 134

www.benjisounds.co.uk/leibo

Vade
Vade's picture
Offline
Enthusiast
Ireland
Last seen: 9 years 37 weeks ago
Ireland
Joined: 2007-08-13
Posts: 315
Points: 276

In your CSS your using id

In your CSS your using id selectors "#" but in your html you've called a class, either change the "class" to "id" or the "#" to "." in your CSS

I'd change "class" to "id"

You may have to look at your background positioning too, the first few or perfect then it goes out a bit, but its working though.

djsounds02
djsounds02's picture
Offline
Enthusiast
Burnley, UK
Last seen: 8 years 41 weeks ago
Burnley, UK
Joined: 2010-06-17
Posts: 110
Points: 134

ok changed the lis to ids

ok changed the lis to ids instead as you suggested.. The rollover still isn't working and non of the buttons are selectable? They also dont show a link on the status bar when i hover them.

Vade
Vade's picture
Offline
Enthusiast
Ireland
Last seen: 9 years 37 weeks ago
Ireland
Joined: 2007-08-13
Posts: 315
Points: 276

Did you change #nav li, #nav

Did you change

#nav li, #nav a {
	height:41px;
	display:block;
}

to

#nav li, #nav a {
	height:41px;
	display:inline;
}

It should be left at display:block. You have <a name="top"> </a> scattered through your html and it's pushing out a lot of stuff, you only need one of these, maybe put it on your logo.

djsounds02
djsounds02's picture
Offline
Enthusiast
Burnley, UK
Last seen: 8 years 41 weeks ago
Burnley, UK
Joined: 2010-06-17
Posts: 110
Points: 134

wow that was causing a big

djsounds02
djsounds02's picture
Offline
Enthusiast
Burnley, UK
Last seen: 8 years 41 weeks ago
Burnley, UK
Joined: 2010-06-17
Posts: 110
Points: 134

Thanks vade I have now sorted

Thanks vade I have now sorted the nav out correctly and I am now going to proceed in adding it to the rest of the pages on the site then try to change the bottom nav in the same way.. All this time to stop a millisecond flicker!!! I suppose it has much more advantages than that though. Thankyou for all your help!

Please check the site and feel proud that you basically made the nav for me!

www.benjisounds.co.uk/leibo

Vade
Vade's picture
Offline
Enthusiast
Ireland
Last seen: 9 years 37 weeks ago
Ireland
Joined: 2007-08-13
Posts: 315
Points: 276

Happy to help and looking

Happy to help and looking forward to seeing everything once it's finished. You did the majority of the work on it, half the time all you need is a second pair of eyes to point out something that you can't see, I remember spending hours trying to make a background work, tried every possible solution to every possible problem just to have my niece look at the screen and say "Isn't there meant to be a g in background"

djsounds02
djsounds02's picture
Offline
Enthusiast
Burnley, UK
Last seen: 8 years 41 weeks ago
Burnley, UK
Joined: 2010-06-17
Posts: 110
Points: 134

VAAADDDEEEEEE WHEREE AREEE

VAAADDDEEEEEE WHEREE AREEE YOU Sad(

djsounds02
djsounds02's picture
Offline
Enthusiast
Burnley, UK
Last seen: 8 years 41 weeks ago
Burnley, UK
Joined: 2010-06-17
Posts: 110
Points: 134

MY SECOND LIST WONT MOVE?

MY SECOND LIST WONT MOVE? WITH MARGIN IT PULLS THE WHOLE SITE.. ALSO THE SAME WHEN ITS IN A DIV. AND I THOUGHT IT WAS ALL FIXED!!!

Vade
Vade's picture
Offline
Enthusiast
Ireland
Last seen: 9 years 37 weeks ago
Ireland
Joined: 2007-08-13
Posts: 315
Points: 276

Stop yelling, where do you

Stop yelling, where do you want it to sit?

Zero out the margin on ul#nav and it looks good, this not the effect you want?

djsounds02
djsounds02's picture
Offline
Enthusiast
Burnley, UK
Last seen: 8 years 41 weeks ago
Burnley, UK
Joined: 2010-06-17
Posts: 110
Points: 134

its the second nav I mean,

its the second nav I mean, erm in sequencce there is the nav you helped me with which is perfect now.. the content box.. and then there is an invisible nav under it.. it works but the image is way up at the top of the content box you can just see a snippet of it sticking out there. you see it there?

sorry about the caps they were stuck on for a while guess i didn't bother to reach that far over the board to deactivate!

Vade
Vade's picture
Offline
Enthusiast
Ireland
Last seen: 9 years 37 weeks ago
Ireland
Joined: 2007-08-13
Posts: 315
Points: 276

I can see it now, the problem

I can see it now, the problem here is because you have two floated elements in your #content, all you need to do is enclose the floats, Gary explains it better than I ever could here. Basically you'll need to add overflow:auto; to #content.

Just two other things, remove the position absolute from your footer, no need for it and the corner picture would probably work better as a background on #content.

djsounds02
djsounds02's picture
Offline
Enthusiast
Burnley, UK
Last seen: 8 years 41 weeks ago
Burnley, UK
Joined: 2010-06-17
Posts: 110
Points: 134

Ok I am trying to apply your

Ok I am trying to apply your changes now.. Whilst doing that just wondered if you knew a way to remove the line breaks before and after my nav bar i believe display: block adds before and after line breaks? Am I right to believe?

If i am not using a float to position my items, am I to use my margins to position them? as when I took out all the floats the picture changer dropped to the bottom so i have aligned that now using margins rather than the float: right

the second navigation has correctly dropped down now and met with its links thankyou. Just trying to take your advice on having the layout a bit better. I am going to also set the corner picture as a background. Thankyou for that insight I hadn't even considered that i had got so used to just making a div box to put something in then position it with my floats and margins.

Vade
Vade's picture
Offline
Enthusiast
Ireland
Last seen: 9 years 37 weeks ago
Ireland
Joined: 2007-08-13
Posts: 315
Points: 276

You'll want to be using a

You'll want to be using a combination of floats and margins for your layout. I think the breaks you're seeing are from the music player, didn't you already have that positioned correctly?

djsounds02
djsounds02's picture
Offline
Enthusiast
Burnley, UK
Last seen: 8 years 41 weeks ago
Burnley, UK
Joined: 2010-06-17
Posts: 110
Points: 134

when I use firebug it shows

when I use firebug it shows me the line breaks are coming from the nav bar so i googled and they are infact the cause of using display:block I had it set out but i Removed the margin-tops because they were all minus pixels and I figured they should just sit together since im not telling it to have a line-break. on further inspection everything is sitting where it is told but the 2 items under the music player do need a minus margin as they are acctually overlapping if you figure they are just rectangles!

But the nav is adding these line breaks and I dont know how to remove them!

Vade
Vade's picture
Offline
Enthusiast
Ireland
Last seen: 9 years 37 weeks ago
Ireland
Joined: 2007-08-13
Posts: 315
Points: 276

The only thing i see is the

The only thing i see is the default margin applied to ul#nav, adding margin:0 will solve that.

djsounds02
djsounds02's picture
Offline
Enthusiast
Burnley, UK
Last seen: 8 years 41 weeks ago
Burnley, UK
Joined: 2010-06-17
Posts: 110
Points: 134

hahaha I have got a nice big

hahaha I have got a nice big grin on my face your avatar suits you your a superhero! Ok I will reposition all my page then could you please tell me if its the correct way may take me a while. I'll keep you posted Smile

djsounds02
djsounds02's picture
Offline
Enthusiast
Burnley, UK
Last seen: 8 years 41 weeks ago
Burnley, UK
Joined: 2010-06-17
Posts: 110
Points: 134

Inside my left box i have a

Inside my left box i have a box, because the inner box is used on the news page with an overflow. I have the inner box so that the scroll bar didnt cover the top and bottom gradient bars of the outerbox. To have an overflow height must be specified.

So the outer box and inner box are both set sizes. so to position the inner surely all I would have to do is set a padding on the outerbox.

Yet when I set a padding I get a black bar of the exact amount I just padded appearing under the box.

I have tried to set overflow:hidden to the outer box this didnt solve it.

when removing the height of the box I lost the bottom bar. Is there ant better ways or a solution to this hickup. Its so silly. I think when I do it the opposite way round.. and set the margin top bottom on the inner box it doesn't happen but is this the correct way?

Vade
Vade's picture
Offline
Enthusiast
Ireland
Last seen: 9 years 37 weeks ago
Ireland
Joined: 2007-08-13
Posts: 315
Points: 276

Try adding overflow:auto to

Try adding overflow:auto to #leftcontentBox, seems to solve it for me in my test

djsounds02
djsounds02's picture
Offline
Enthusiast
Burnley, UK
Last seen: 8 years 41 weeks ago
Burnley, UK
Joined: 2010-06-17
Posts: 110
Points: 134

Yep you mentioned putting the

Yep you mentioned putting the corner picture as a background but there is a different picture in that corner on each page.. or will be please see the news page of the site. picture is different there are 4 or 5 different pics.

I would like to think I could help you with something one day.

Vade
Vade's picture
Offline
Enthusiast
Ireland
Last seen: 9 years 37 weeks ago
Ireland
Joined: 2007-08-13
Posts: 315
Points: 276

Normally I'd say an a unique

Normally I'd say an a unique id to the containing element but you've already done that (#content) and you can only have one id per element, you can however create a class for it, say .content_news, and then apply the background to this class.

If you do this make sure to remove any default background image that might be on #content

djsounds02
djsounds02's picture
Offline
Enthusiast
Burnley, UK
Last seen: 8 years 41 weeks ago
Burnley, UK
Joined: 2010-06-17
Posts: 110
Points: 134

Hi there, I just wondered if

Hi there, I just wondered if you could help me.. its really simple.. I'm sure.. just needs somebody elses eyes!

I have this xhtml..

<div id="mediabox">
<a id="imagescol" href="images.html"></a>
</div>

and I want it to be an image sprite

I have my file the image is 344px X 1576px

on rollover the image will move up

the image displayed at any 1 time is 788px high

the picture needs a top margin of 26px

here is the css I have used its just not working, the image isn't being displayed!

a#imagescol{
    background: url(images/imagesprite.gif);
    color: #
    width: 344px;
    height: 788px;
    margin-top: 26px;
}

Id appreciate any help Ive been trying different combinations for maybe 4 hours now its getting to me because its so simple I know it is!