Comments on: Five Free CSS Sliding Door Tab Menus

By: cornwall web design

cornwall web design — Mon, 15 Sep 2008 21:16:09 +0000

excellent resource, cheers! sliding doors rocks!
extra spans for ie6 are a pain but looks like we’re stuck with the extra markup for a while yet..booooo

thanks again

By: sundown

sundown — Mon, 15 Sep 2008 17:45:55 +0000

@Patrick
thanks a lot, I got it and it works

but one thing I still do not understand is how you got the value of the width (520px) and why it is necessary to indicate the width at all. Without the width the whole nav floats back to the left…but why does this happen although the left and right margin is to set ‘auto’?

By: 30 Websites to follow if you’re into Web Development : NguyenVanChieu

30 Websites to follow if you’re into Web Development : NguyenVanChieu — Sun, 14 Sep 2008 14:15:50 +0000

[...] You can find many tutorials on Adobe Illustrator and Photoshop, free, downloadable resources like “Sliding Door” tab menus, articles for inspiration, and [...]

By: Patrick Moore

Patrick Moore — Fri, 12 Sep 2008 20:30:39 +0000

Of course. Using the “Black” template, the code is below. You’ll need to specify a width property for the div to center, so change “520px” to the appropriate width after you’ve made changes to the menu names.

* {
margin: 0;
padding: 0;
}

body {
margin: 30px;
text-align:center; /* THIS WAS ADDED */
}

/* THIS WAD ADDED */
#navbar { margin:0px auto; width:520px; }

#navbar ul li {
display: inline; /* Fix IE Step Down */
}

By: sundown

sundown — Fri, 12 Sep 2008 19:43:09 +0000

@Patrick
thanks, but where exactly do I have do insert
margin:0px auto;
text-align:center;
I tried several posibilities, but I am not a css pro, rather a beginner. So could you post the adapted code?

By: Patrick Moore

Patrick Moore — Fri, 12 Sep 2008 16:23:50 +0000

@sundown:

Add margin:0px auto; to the #navbar div, and set text-align:center; for body (or container div).

By: sundown

sundown — Sun, 31 Aug 2008 02:06:27 +0000

How do you center the menu?

By: web-d

web-d — Sat, 30 Aug 2008 14:31:14 +0000

awsome!
glad i found it..

By: YuWeb Blog » Freebies: Besplatne stvari ne samo za Webdizajnere

YuWeb Blog » Freebies: Besplatne stvari ne samo za Webdizajnere — Fri, 29 Aug 2008 12:55:34 +0000

[...] Five Free CSS Sliding Door Tab Menus Jedan horizontalni CSS Meni u 5 Varijante [...]

By: 30 Websites to follow if you’re into Web Development « Jonsunhee’s Weblog

Fri, 29 Aug 2008 08:04:05 +0000

[...] You can find many tutorials on Adobe Illustrator and Photoshop, free, downloadable resources like “Sliding Door” tab menus, articles for inspiration, and [...]