CSS Forum

**GaLaZ** · 06-22-2009, 11:59 AM

Hi,

I'm new here and I have recently started my personal project in asp.net. I've prepared a layout in psd, sliced it and now I'm trying to complete it with css.

I'm stuck now... i need a horizontal menu with jpg buttons. Afert mouse on it I want that css will change that image for imghover one and after that when I click and enter that part of side I want that button to be in a hover state so the user can see where he is at the moment.

Right now I've got unordered list with images as buttons..

What next?

I've tried doing it on my own but it drives me crazy when all the positioning goes wrong etc.

Please help

Thanks

**EricReese** · 12:58 PM

Hi,

You might want to read these articles to see how to create the tab effect. It basically is just setting an ID to the body.

http://woork.blogspot.com/2008/03/cl...using-css.html
http://clagnut.com/sandbox/csstabs/

And your other image was to have a background image and on hover have a seperate image load? Well that is called sprites. Try reading some of these articles on sprites

http://www.alistapart.com/articles/sprites/
http://css-tricks.com/css-sprites/

If you have trouble implementing these, please post a link to your website so we can assist you

Hope this helps.

Cheers

**LadynRed** · 07:49 PM

OR - you could just assign a CLASS on the selected menu item on each page and assign the same rules to that class as you do the hover behavior. Like this:

Code:

<li> <a class="selected" href="#">home</a></li>

then in your CSS, define that "selected" class with the background you want it to have.

**EricReese** · 06-22-2009, 02:41 PM

Well yes, just basically make the selector unique for the tab, and it should work

I was merely pointing out that in my opinion it is very easy to put an id on the <body> because for index.html you could do <body id="home"> and for contact us, you could do <body id="contact"> and it would be a very easy way to identify what tab is to be activated.

Cheers

**printrobin** · 06-22-2009, 03:25 PM

EricReese ... Hi thanks for those links. Can you provide be a best CSS Tutorial site??

**EricReese** · 06-22-2009, 03:41 PM

Well it depends. How accomplished are you at CSS. Are you a beginner, not understanding most concepts and properties of CSS? Or intermediate, where you know most properties, but are still learning techniques, and have some trouble debugging layouts?

Cheers

**GaLaZ** · 06-22-2009, 07:19 PM

Thanks guys I wasn't expected that someone will answer so fast

I'll try just like you've said and I'll tell you if it works

if not I'll paste some code here and maybe with your pro help I can finish my objective

thanks again

**EricReese** · 06-22-2009, 07:25 PM

No problem

Just so you know, we would prefer a link especially because of the sprites, and the fact it is much easier debugging a live page, and we get to see all the source + the images.

Did you still want a tutorial? Here is one with various CSS levels.

http://htmldog.com

edit: Oh, a different person had asked for the tutorials. I was played!!

**GaLaZ** · 06-22-2009, 08:00 PM

It's weird... hm or I'm doing sth wrong. Check this please:

My html menu (one button)

Code:

 <div id="menu">
        <ul>
            <li id="btnProject"><a href="theProject.aspx"></a>
            </li>
        </ul>
    
    
    </div>

and I want to add a button as a background to <li> so I've added in my style sheet

Code:

 
#btnProject 
 {
    background-image:url('../img/btnProject.jpg');
 }

I've checked the path it's 100% ok... I don't now if that the case but I've already asigned repeated background to all my page...

Thanks for help...

**EricReese** · 06-22-2009, 08:03 PM

We need a link to the website...

**GaLaZ** · 06-22-2009, 08:12 PM

http://meltedheart.pl/ui/shared/

heres site that i'm planning to finish...

anyway betweend those to lines I want to place a horizontal menu using images. Then hover efect with other images.

**EricReese** · 06-22-2009, 08:24 PM

First off, on ul {} set a width like 900px, and put margin:0 auto; on there so there isn't an override on the elft side. This doesn't fix your problem, but makes it easier to see the effects of it.

Now on #btnProject add these values:

background-repeat:no-repeat;
height:55px;

Cheers

**GaLaZ** · 06-23-2009, 11:16 AM

I've done it and it works

nice

But now another problem -> how to center the menu? now it looks like this http://meltedheart.pl/ui/shared/

afeter centering I'll try to add a hover affect using another prepared for that reason image and I will also try to create a class for keep a hover image when the users is in a particular web site section.

**LadynRed** · 06-23-2009, 11:20 AM

Eric already told you how to do that:

Quote:

on ul {} set a width like 900px, and put margin:0 auto;

**GaLaZ** · 06-23-2009, 11:57 AM

Yes I know and I did just like he said. And thats the effect... so sth is still wrong.

I wouldn't be wasting your time otherwise.

**EricReese** · 06-23-2009, 12:56 PM

First off, for easier editing, apply a class to the <li>'s and instead of <div id="menu"> why not just use the <ul>? There's no difference and it saves some code:

Code:

       <ul id="menu">
        <li id="btnProject" class="something"><a href="theProject.aspx"></a></li>
        <li id="btnHarmonogram" class="something"><a href="harmonogram.aspx"></a></li>
        <li id="btnRejestracja" class="something"><a href="rejestracja.aspx"></a></li>
        <li id="btnZapisani" class="something"><a href="zapisani.aspx"></a></li>

        <li id="btnKontakt" class="something"><a href="kontakt.aspx"></a></li>
        <li id="btnTworca" class="something"><a href="tworca.aspx"></a></li>
       </ul>

Next you need to set a width on the <li>'s and float them like so:

Code:

ul#menu li.something{
    width:150px;
    float:left;
}

Cheers

**GaLaZ** · 06-24-2009, 07:01 PM

Ok I did it "somehow" :| But there is sth wrong, first button is a little bit closer to other hm I've checked button size and it seems ok to me

Another thing is that I have browsed my page in Safari and I was ok, IE nad FF too but in new Opera it was totally mess.

I know that I'm asking too many questions but I'm trying to learn it

to me it's the worst part of web developement...

Thanks

**Sean Lum Design** · 02:38 PM

you should try using reset.css, it may help with some of your problems.
http://meyerweb.com/eric/tools/css/reset/

**Sean Lum Design** · 02:39 PM

you should try using reset.css, it may help with some of your problems.
http://meyerweb.com/eric/tools/css/reset/

double post, sorry :\

**GaLaZ** · 06-26-2009, 03:07 PM

Reseted but no positive result... :| anyway thanks for that template I will start using that in future.

Any ideas? how to fix that?

I hope that I won't be forced to slice that layout once again and start over again