Dynamic CSS help!

L

liunx

Guest
I have the following code in my stylesheet (saved as dynamic.css):


#quicknav1 a {
text-indent: -10000em;
background: url(images/layout/bar_buttons_1.gif) no-repeat left top;
width: 30px;
height: 21px;
float:left;
overflow: hidden; /* For nested divs in Safari */
}

#quicknav1 a:hover {
background-position: 0px -21px;
}

#quicknav2 a {
text-indent: -10000em;
background: url(images/layout/bar_buttons_2.gif) no-repeat left top;
width: 29px;
height: 21px;
float:left;
overflow: hidden; /* For nested divs in Safari */
}

#quicknav2 a:hover {
background-position: 0px -21px;
}

#quicknav3 a {
text-indent: -10000em;
background: url(images/layout/bar_buttons_3.gif) no-repeat left top;
width: 29px;
height: 21px;
float:left;
overflow: hidden; /* For nested divs in Safari */
}

#quicknav3 a:hover {
background-position: 0px -21px;
}

#quicknav4 a {
text-indent: -10000em;
background: url(images/layout/bar_buttons_4.gif) no-repeat left top;
width: 29px;
height: 21px;
float:left;
overflow: hidden; /* For nested divs in Safari */
}

#quicknav4 a:hover {
background-position: 0px -21px;
}

#quicknav5 a {
text-indent: -10000em;
background: url(images/layout/bar_buttons_5.gif) no-repeat left top;
width: 30px;
height: 21px;
float:left;
overflow: hidden; /* For nested divs in Safari */
}

#quicknav5 a:hover {
background-position: 0px -21px;
}


I then have the following code emeded into my actuall webpage (saved as index.php):


<div id="quicknav1"><a href=http://www.webdeveloper.com/forum/archive/index.php/"" title="jump back">Jump Back</a></div>
<div id="quicknav2"><a href=http://www.webdeveloper.com/forum/archive/index.php/"" title="Home">Home</a></div>
<div id="quicknav3"><a href=http://www.webdeveloper.com/forum/archive/index.php/"" title="Print page">Print Page</a></div>
<div id="quicknav4"><a href=http://www.webdeveloper.com/forum/archive/index.php/"" title="Bookmark">Bookmark!</a></div>
<div id="quicknav5"><a href=http://www.webdeveloper.com/forum/archive/index.php/"" title="Jump Forwards">Jump Forwards</a></div>


The result of this is a chain of 5 little roll over images. Each rollover is just one image, which the CSS moves up and down to create a roll over effect.

It is much faster, cleaner and smaller file size than using java script.

However, i am not very adept with more advanced CSS. Looking at the stylesheet i have quoted there is the same thing repeated 5 times. Is there any way i can compact this dynamic.css style sheet down into a smaller code?

Thanks in advance, AlexxSure thing, just do this:



.quicknav a, .quicknav a:link, .quicknav a:visited{
text-indent: -10000em;
background: url(images/layout/bar_buttons_1.gif) no-repeat left top;
width: 30px;
height: 21px;
float:left;
overflow: hidden; /* For nested divs in Safari */
}

.quicknav a:focus, .quicknav a:hover, .quicknav a:active{
background-position: 0px -21px;
}

<div class="quicknav"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" title="jump back">Jump Back</a></div>
<div class="quicknav"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" title="Home">Home</a></div>
<div class="quicknav"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" title="Print page">Print Page</a></div>
<div class="quicknav"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" title="Bookmark">Bookmark!</a></div>
<div class="quicknav"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" title="Jump Forwards">Jump Forwards</a></div>

It's what classes were made for. ;)That's really close but each div needs a different background image. So you need to factor out the background and create an id for each simply to define the background image. Then each div will be class="quicknav" id="uniqueNavId".Oops, didn't notice the different backgrounds. In that case do something a little like this:



<style type="text/css"><!--

.quicknav a, .quicknav a:link, .quicknav a:visited{
text-indent: -10000em;
background:no-repeat left top;
width: 30px;
height: 21px;
float:left;
overflow: hidden; /* For nested divs in Safari */
}

.quicknav a:focus, .quicknav a:hover, .quicknav a:active{
background-position: 0px -21px;
}

#quicknav1{background-image:url(images/layout/bar_buttons_1.gif);}
#quicknav2{background-image:url(images/layout/bar_buttons_2.gif);}
#quicknav3{background-image:url(images/layout/bar_buttons_3.gif);}
#quicknav4{background-image:url(images/layout/bar_buttons_4.gif);}
#quicknav5{background-image:url(images/layout/bar_buttons_5.gif;}

--></style>

<body>

<div class="quicknav" id="quicknav1"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" title="jump back">Jump Back</a></div>
<div class="quicknav" id="quicknav2"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" title="Home">Home</a></div>
<div class="quicknav" id="quicknav3"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" title="Print page">Print Page</a></div>
<div class="quicknav" id="quicknav4"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" title="Bookmark">Bookmark!</a></div>
<div class="quicknav" id="quicknav5"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" title="Jump Forwards">Jump Forwards</a></div>Hay guys, Thanks for the help so far.

I tried overwriting my dynamic.css stylesheet with the code that lavalamp supplied. I got the following results:

Layout with my code (rollovers worked):
<!-- m --><a class="postlink" href="http://www.souliss.com/hosted/lazytrials/images/misc/1.jpg">http://www.souliss.com/hosted/lazytrial ... misc/1.jpg</a><!-- m -->

Layout with modified code (no rollovers either):
<!-- m --><a class="postlink" href="http://www.souliss.com/hosted/lazytrials/images/misc/2.jpg">http://www.souliss.com/hosted/lazytrial ... misc/2.jpg</a><!-- m -->

As you can see, it's not working - gives a rather crazy result.

Any further help is really appreciated! :D cheers guys :)Hi again, sorry it's taken me so long to reply but I've been asleep, I'm a bit shattered.

I'm pretty sure that it's because I missed off a closing bracket in the #quicknav5 rules but I can't tell you any more than that without seeing the source code. In the mean time here's the corrected version of the code that I posted for you to try out:



<style type="text/css"><!--

.quicknav a, .quicknav a:link, .quicknav a:visited{
text-indent: -10000em;
background:no-repeat left top;
width: 30px;
height: 21px;
float:left;
overflow: hidden; /* For nested divs in Safari */
}

.quicknav a:focus, .quicknav a:hover, .quicknav a:active{
background-position: 0px -21px;
}

#quicknav1{background-image:url(images/layout/bar_buttons_1.gif);}
#quicknav2{background-image:url(images/layout/bar_buttons_2.gif);}
#quicknav3{background-image:url(images/layout/bar_buttons_3.gif);}
#quicknav4{background-image:url(images/layout/bar_buttons_4.gif);}
#quicknav5{background-image:url(images/layout/bar_buttons_5.gif);}

--></style>

<body>

<div class="quicknav" id="quicknav1"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" title="Jump Back">Jump Back</a></div>
<div class="quicknav" id="quicknav2"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" title="Home">Home</a></div>
<div class="quicknav" id="quicknav3"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" title="Print Page">Print Page</a></div>
<div class="quicknav" id="quicknav4"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" title="Bookmark">Bookmark!</a></div>
<div class="quicknav" id="quicknav5"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" title="Jump Forwards">Jump Forwards</a></div>
 
You must log in or register to reply here.
Back
Top