inline lists and rollovers

Accurax · #1 (**permalink**) Mar 28th, 2007, 12:30

i ave an inline list that im using ofr navigation.... and i want to add a nice rollover effect.

I want the links to appear horizontally in "box's" 90x30 px 's, with the background image giving the effect of the box.

Then ill move the background image up or down on rollover to get my effect.

Sounds easy?

I wish .... the problem is that i cant seem to find a way to specify the dimensions of the links.... so not all of my background image shows, i can manage it with padding... but then the links are all different sizes depending on the ammount of text.

is there anyway of doing this?

please ??

Accurax · #2 (**permalink**) Mar 28th, 2007, 13:01

its ok i got it

karinne · #3 (**permalink**) Mar 28th, 2007, 13:12

Oh yeah? how d'you do it!

Accurax · #4 (**permalink**) Mar 28th, 2007, 13:22

errm... hang on :P

ok....

1) put your entire list in a div ... and float it left, then pad it out to the position you want the list to appear.

use the following css:

Code: Select all

#ulnav li {
    display: inline;
    list-style-type: none;
    text-align: center;
    float: left;
    width: 90px;
    padding-top: 10px;
}
#ulnav a:link, #ulnav a:visited, #ulnav a:active {
    color: #FF0000;
    font-size: 15px;
    font-family: Garamond;
    display: block;
    background-repeat: no-repeat;
    text-decoration: none;
    overflow: auto;
    background-image: url(../image/nav%20roll.png);
    width: 90px;
    height: 30px;
    background-position: center top;
}
#ulnav a:hover,#ulnav a.current:link,#ulnav a.current:visited {
    background-position: center bottom;
    background-image: url(../image/nav%20roll.png);
    background-repeat: no-repeat;
    background-position: center -30px;
}

Basically you set the li element to display as inline .... and the a. elements to display as block.

Clever eh?

karinne · #5 (**permalink**) Mar 28th, 2007, 13:28

Cool

Or, you can do this ...

Code: Select all

#ulnav li {
    display: inline;
    list-style-type: none;
    text-align: center;
    float: left;
    width: 90px;
    padding-top: 10px;
}

#ulnav a:link, #ulnav a:visited, #ulnav a:active {
    color: #FF0000;
    font-size: 15px;
    font-family: Garamond;
    display: block;
    text-decoration: none;
    overflow: auto;
    background: url(../image/nav%20roll.png) no-repeat 50% 0;
    width: 90px;
    height: 30px;
}

#ulnav a:hover,#ulnav a.current:link,#ulnav a.current:visited {
    background: url(../image/nav%20roll.png) no-repeat 50% -30px;
}

or this

Code: Select all

#ulnav li {
    display: inline;
    list-style-type: none;
    text-align: center;
    float: left;
    width: 90px;
    padding-top: 10px;
}

 #ulnav a:link, #ulnav a:visited, #ulnav a:active, #ulnav a:hover,#ulnav a.current:link,#ulnav a.current:visited {
    background-image: url(../image/nav%20roll.png);
    background-repeat: no-repeat;
}

#ulnav a:link, #ulnav a:visited, #ulnav a:active {
    color: #FF0000;
    font-size: 15px;
    font-family: Garamond;
    display: block;
    text-decoration: none;
    overflow: auto;    
    width: 90px;
    height: 30px;
    background-position: 50% 0;
}

#ulnav a:hover,#ulnav a.current:link,#ulnav a.current:visited {
    background-position: 50% -30px;
}

Accurax · #6 (**permalink**) Mar 28th, 2007, 13:30

yep.... just looking at that method in one of my text books at the moment.

Its a bit more straight forward so ill change it to that method i think

** on to curvey box's now

karinne · #7 (**permalink**) Mar 28th, 2007, 13:32

oh yeah. ... those are fun. I just did some not too long ago ... I can post the code if you want

Unless you want to try and figure it out first

Accurax · #8 (**permalink**) Mar 28th, 2007, 15:16

its ok... im using the sliding doors method

karinne · #9 (**permalink**) Mar 28th, 2007, 15:19

Yeah ... that's what I used too ... but I had a hell of a time to make it work for some reason

Accurax · #10 (**permalink**) Mar 28th, 2007, 22:23

yeah its odd.... it seems the layout of the html is more important than u'd normall imagine... buty i got it working... new design on its way

Ryan Fait · #11 (**permalink**) Mar 29th, 2007, 01:27

I noticed you're using longhand for a lot of things. Feel free to check out my nice little article on CSS Shorthand.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Hyperlink Rollovers	crackafaza	Web Page Design	3	Aug 24th, 2007 11:43
Image Rollovers	DDock3287	JavaScript Forum	14	Aug 16th, 2007 18:57
Inline div	Echilon	Web Page Design	0	Feb 3rd, 2006 16:06
display inline ????	hessodreamy	Web Page Design	3	Oct 8th, 2005 05:51
ImageReady rollovers	gwx03	Graphics and 3D	9	Jul 6th, 2004 07:48

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
inline lists and rollovers