I am trying to complete the simple tabs that i have created and trying to make it look more complete. I would like a gif image called "spacer" to be closer to the tabs that are created above. However, there's always this spacing between the tabs (rollover image/button) and the spacer.

The main thing is i want the spacer and the tabs to stick really really close together. If anyone can help me out, please post back. You could look at this website for reference: http://www.dynamicdrive.com --> Take note of the top navigation. Thanks

<a href="www.haha.com/index.asp" onmouseover="image1.src='Images/home_tab_roll.jpg';"
onmouseout="image1.src='Images/home_tab.jpg';">
      <img src="Images/home_tab.jpg" name="image1" width="100" height="22" border=0></a> <a href="www.haha.com/books.asp" onmouseover="image2.src='Images/book_tab_roll.jpg';"
onmouseout="image2.src='Images/book_tab.jpg';"><img src="Images/book_tab.jpg" name="image2" width="100" height="22" border=0></a>
          <a href="www.haha.com/gifts.asp" onmouseover="image3.src='Images/gift_tab_roll.jpg';"
onmouseout="image3.src='Images/gift_tab.jpg';">
          <img src="Images/gift_tab.jpg" name="image3" width="100" height="22" border=0></a>
          <a href="www.haha.com/kids.asp" onmouseover="image4.src='Images/kid_tab_roll.jpg';"
onmouseout="image4.src='Images/kid_tab.jpg';">
          <img src="Images/kid_tab.jpg" name="image4" width="100" height="22" border=0></a>
          <a href="www.haha.com/multimedia.asp" onmouseover="image5.src='Images/multimedia_tab_roll.jpg';"
onmouseout="image5.src='Images/multimedia_tab.jpg';">
          <img src="Images/multimedia_tab.jpg" name="image5" width="100" height="22" border=0></a>
          <a href="www.haha.com/resource.asp" onmouseover="image6.src='Images/resource_tab_roll.jpg';"
onmouseout="image6.src='Images/resource_tab.jpg';">
          <img src="Images/resource_tab.jpg" name="image6" width="100" height="22" border=0></a>
          <a href="www.haha.com/links.asp" onmouseover="image7.src='Images/links_tab_roll.jpg';"
onmouseout="image7.src='Images/links_tab.jpg';">
          <img src="Images/links_tab.jpg" name="image7" width="100" height="22" border=0></a>
          <a href="www.haha.com/site_directory.asp" onmouseover="image8.src='Images/sitedir_tab_roll.jpg';"
onmouseout="image8.src='Images/sitedir_tab.jpg';">
<img src="Images/sitedir_tab.jpg" name="image8" width="100" height="22" border=0></a>
<img src="Images/spacer.gif" name="spacer" width="100%" height="11" border=0 />

There's a way of creating tabs with CSS. This article at A List Apart calls it 'Sliding Doors'. They're fast, accessible and look great.

I'll second metho's recommendation for the 'sliding doors' article. A List Apart is a great site in general with lots of very good articles.

Thanks for the great link, helped me quite a bit. Even though, i felt that it was diffcult to understand exactly what each code does. However, i was able to follow up. Anyone knows how to create a tab using photoshop? Besides, using the one that i could use from the link?

I am a newbie to Photoshop and really wish to learn more. Anyone know where there are some good and simple tutorials for photoshop and css? Thanks

I don't have any specific sites to recommend for Photoshop tutorials, but here are a couple I had bookmarked.

http://www.good-tutorials.com/
http://www.pixel2life.com/tutorials/...Photoshop/All/

I'm not really sure what's on either site or how good the tutorials are, but at some point in time I must have thought them useful enough to bookmark. It does look like they both have a lot of tutorials.

I know there are a lot of Photoshop tuturials online. You should be able to find plenty with a couple of searces. Maybe 'photoshop tutotials tabs' as one search. I've always been able to find a Photoshop tutorial through searhing when I needed one.

http://www.swedesignz.com/photoshop/Clean_Menu_Buttons

I knew there would be a tutorial on tabs somewhere.

Thanks for the replies guys! I am just wondering, i followed the instructions from this website as given:
http://www.alistapart.com/articles/slidingdoors/

When i view on dreamweaver, it was fine. But when i loaded it up on a web server, it was laggy. For example, when i rollover a tab, it will take a while to load the mouseover image. Is there anything i can do to prevent this?

Here is my website for reference and to show you guys exactly what i mean:
www.shaoen01.info/indexnew.html

Most of the links are dead as i am only testing it out. Thanks

error 404; can u post the page again plz?

here is his fixed URL:

http://www.shaoen01.info/indexnew.htm

i just changed .html to .htm


anyhow, i don't notice any lag on my end. i am on dialup.

here are some results that i came up with when i tested the page:


The size of the web page is 9.09 kilobytes.
It would take approximately 1.33 seconds to download on a 56K modem.
The web page took us 0.08 seconds to download.
The web page downloaded at 109.30 kilobytes per second.




very good :]

Yeah, thats weird. Initially, when i viewed the page it was really laggy and now its fine. Probably the server then was lagging. I try my best to keep the web pages size small so that 56k users can download fast. Thanks

Originally Posted by metho

error 404; can u post the page again plz?

Sorry, it is the web page is:
www.shaoen01.info/indexnew.htm and not www.shaoen01.info/indexnew.html (which i gave previously).