473,396 Members | 1,799 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,396 software developers and data experts.

centering css tabs

I am trying to vertically align the CSS tabs so that it is centered,
like what it appears on apple.com. You can find my web-page here
(http://cse.unl.edu/~sraju/index-tabs.htm). It is now aligned to its
left. Any input is appreciated!

Peace,
Saravanan
Jul 20 '05 #1
10 3124
Saravanan Raju <sa******@earthlink.net> wrote:
I am trying to vertically align the CSS tabs so that it is centered,
like what it appears on apple.com. You can find my web-page here
(http://cse.unl.edu/~sraju/index-tabs.htm). It is now aligned to its
left.


That's what you are asking for: float:left

Loose all floats and the display:block on the li anchors, set both the
ul and the li elements to display:inline, set text-align:center on the
containing div.

--
Spartanicus
Jul 20 '05 #2
Saravanan Raju wrote:
I am trying to vertically align the CSS tabs so that it is centered,
like what it appears on apple.com. You can find my web-page here
(http://cse.unl.edu/~sraju/index-tabs.htm). It is now aligned to its
left. Any input is appreciated!

Peace,
Saravanan


As a new css programmer, could someone please explain why the home
tab on the displayed page has a white background and the other tabs
have an orange background? I can't find anything different in the css
to do that for tab1 vs tab2 - tab4? (Mozilla 1.4 and Konqueror
3.1.4)

(remove the "nospam" from my email if you wish to reply directly)

Stuart

Jul 20 '05 #3
Saravanan Raju wrote on 29 apr 2004 in
comp.infosystems.www.authoring.stylesheets:
I am trying to vertically align the CSS tabs so that it is centered,
like what it appears on apple.com. You can find my web-page here
(http://cse.unl.edu/~sraju/index-tabs.htm). It is now aligned to its
left. Any input is appreciated!


body#tab1 li.tab1,
body#tab2 li.tab2,
body#tab3 li.tab3,
body#tab4 li.tab4 {
border-bottom: 1px solid #ffffff;
background-color: #ffffff;
}

There is only
<body id="tab1">

so the other body#tabX do not point to anything.

Terrible coding, btw, why id= the body ??????????????

Perhaps there are other (astral ?) bodies overthere ?????????

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Jul 20 '05 #4
Evertjan. wrote:
Saravanan Raju wrote on 29 apr 2004 in
comp.infosystems.www.authoring.stylesheets:
I am trying to vertically align the CSS tabs so that it is centered,
like what it appears on apple.com. You can find my web-page here
(http://cse.unl.edu/~sraju/index-tabs.htm). It is now aligned to its
left. Any input is appreciated!


body#tab1 li.tab1,
body#tab2 li.tab2,
body#tab3 li.tab3,
body#tab4 li.tab4 {
border-bottom: 1px solid #ffffff;
background-color: #ffffff;
}

There is only
<body id="tab1">

so the other body#tabX do not point to anything.

Terrible coding, btw, why id= the body ??????????????

Perhaps there are other (astral ?) bodies overthere ?????????


Thanks, that explains my confusion. I got the class tab1 confused with the
id tab1.

Stuart

Jul 20 '05 #5
Evertjan. wrote:
Saravanan Raju wrote on 29 apr 2004 in
comp.infosystems.www.authoring.stylesheets:

I am trying to vertically align the CSS tabs so that it is centered,
like what it appears on apple.com. You can find my web-page here
(http://cse.unl.edu/~sraju/index-tabs.htm). It is now aligned to its
left. Any input is appreciated!

There is only
<body id="tab1">

so the other body#tabX do not point to anything.

It is a mock page that is not complete, yet.
Terrible coding, btw, why id= the body ??????????????

I am new & learning :). Will improve, though. But the code is baed on
Joshua Kaufman's CSS tabs, which you can find here
(http://unraveled.com/projects/css_tabs/css_tabs.html)
Perhaps there are other (astral ?) bodies overthere ?????????

Wouldn't that be cool 8-)

Saravanan
Jul 20 '05 #6
Saravanan Raju wrote on 29 apr 2004 in
comp.infosystems.www.authoring.stylesheets:
Terrible coding, btw, why id= the body ??????????????

I am new & learning :). Will improve, though. But the code is baed on
Joshua Kaufman's CSS tabs, which you can find here
(http://unraveled.com/projects/css_tabs/css_tabs.html)


Id-ing the body is nonsensical for CSS,
even if the Joshua's walls come tumbling down.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Jul 20 '05 #7
"Evertjan." <ex**************@interxnl.net> wrote:
Saravanan Raju wrote on 29 apr 2004 in
comp.infosystems.www.authoring.stylesheets:
Terrible coding, btw, why id= the body ??????????????

I am new & learning :). Will improve, though. But the code is baed on
Joshua Kaufman's CSS tabs, which you can find here
(http://unraveled.com/projects/css_tabs/css_tabs.html)


Id-ing the body is nonsensical for CSS,
even if the Joshua's walls come tumbling down.


In the context of a single page it clearly makes no sense to id the
body. But in the context of a site it can make perfect sense. If you
want to use one or two differeing styles for different pages then
adding id or class to body is a good way of doing so. Using an
additional stylesheet file, or including a <style> block often simply
isn't worth the effort.

Of course the problem with using it to highlight the current nav item
in systems like the above is that it encourages the sloppy practice of
leaving the nav item as a link, thus creating pages that link to
themselves.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #8
In article Evertjan. wrote:
Saravanan Raju wrote on 29 apr 2004 in
comp.infosystems.www.authoring.stylesheets:
Terrible coding, btw, why id= the body ??????????????

I am new & learning :). Will improve, though. But the code is baed on
Joshua Kaufman's CSS tabs, which you can find here
(http://unraveled.com/projects/css_tabs/css_tabs.html)


Id-ing the body is nonsensical for CSS,
even if the Joshua's walls come tumbling down.


No, it makes some sence, from user point of view. Google CSS-signature
for more.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin työtä
Jul 20 '05 #9
Steve Pugh wrote on 29 apr 2004 in
comp.infosystems.www.authoring.stylesheets:
Id-ing the body is nonsensical for CSS,
even if the Joshua's walls come tumbling down.


In the context of a single page it clearly makes no sense to id the
body. But in the context of a site it can make perfect sense.


Never thought of that. Yes.

I would never go that way.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Jul 20 '05 #10
Evertjan. wrote:
Id-ing the body is nonsensical for CSS,


http://archivist.incutio.com/viewlist/css-discuss/13291

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/
Jul 20 '05 #11

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

11
by: Jeff Thies | last post by:
I have a series of blocks that are float left that I need centered on the page. <div class="center" align="center"> <div style="width: 100 px;float: left">thumbnail 1</div> <div style="width:...
6
by: Franois de Dardel | last post by:
http://mapage.noos.fr/dardelf3/tintin/page3bits.html Can I center the series of thumbnails horizontally in the pages _and_ keep the "elastic arrangement" where the number of thumbnails adapts to...
3
by: Jonah Bishop | last post by:
I have a puzzling problem with centering text, and I'm hoping that someone here can help me out. First of all, let me state that I am using XHTML 1.0 Strict and CSS for all layout purposes (no...
2
by: Ryan W Sims | last post by:
I'm having trouble with centering in IE... http://www.ryanwsims.com/koh/ The image should center over the text. It does in Firebird, but not in IE for some reason. If you look at ...
15
by: red | last post by:
How do I center two side by side divs ? I've been writing css pages for a while but there's one thing tha still eludes me. I can center a div with margin auto. I can place two divs side by side...
6
by: Axel Siebenwirth | last post by:
Hi, as described at http://www.quirksmode.org/css/centering.html, I try to do to centering with my site. I did exactly as told on that page but it only seems to center horizontally. My site...
3
by: John Pote | last post by:
1. Horizontal centering a <divin browser window. The current trend seems to be to place page content in a fixed width area in the middle of the browser window. How is this achieved? If I use a...
5
by: Markus Ernst | last post by:
Hello This is a test example: http://www.markusernst.ch/anthracite/ http://www.markusernst.ch/anthracite/living_divani.html After googling and experimenting for several hours, I ended up...
1
by: =?Utf-8?B?ZnJhbmt5?= | last post by:
Hello, I've created a table that has two rows that are span across three columns. The third row has three columns, each with an image. The last row is also span accross three columns. The span...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.