Centering Tabs with Panes 1

[k4ghg]

I have create a set of tabs with panes. Each time the tab is selected the new pane appears. My problem is that I want to center this on my page for all size screens and I am not certain what to do. Any suggestions would be appreciated.

.tab {
line-height:150%;
font-weight: bold;
position:absolute;
text-align: center;
border: 2px;
border-color:#999999;
border-styleutset;
border-bottom-style: none;
height: 54px;
width: 90px;
margin:100px;
margin-top: 10px;
margin-top:10px;
}

.panel {
font-family: sans-serif;
font-size: smaller;
position:absolute;
border: 2px;
border-color:#999999;
border-styleutset;
width: 400px;
height: 200px;
left:0px;
top:54px;
margin:100px;
margin-top:10px;
padding:6px
}

Thanks Ronnie

 

[Vragabond]

You would simply put it in a container that is centered via a set width and automatic margins on left and right side. If you want to do vertical centering as well, that could be more complex.

One way or another, I have no idea why you're using absolute positioning for the tab and the pane. It seems to be not necessary at all and it will cause you a lot of grief down the road.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[k4ghg]

Thanks...I used absolute positioning because the other options did not give me the tab layout with different panels. I tried the container without two much success:

.container{
width:95%;
margin-right:auto;
margin-left:auto;
}


and three divides did not work either:
.left{
width:15%;
}


.container{
width:70%;
}

.right{
width:15%;
}


<div class = left></div>
<div class =container>
<div class =tab>
<div class =panel>
</div>
</div>
</div>
<div class = left></div>

Thanks...Ronnie

 

[Lowet]

Use the [tt][maroon]float[/maroon][/tt] property. And you forgott the right..

HTML:

<div class="left"></div>
<div class="container">
       <div class="tab">
       <div class="panel">
       </div>
       </div>
</div>
<div class="[red]right[/red]"></div>

CSS:

.left {
      [red]float: left;[/red]
      width: 15%;
      }


.container {
           [red]float: left;[/red]
           width: 70%;
           }

.right {
       [red]float: left;[/red]
       width: 15%;
       }

- Lowet

[gray]Why can't all browsers parse pages the same way? It should be the Web designer who decides how to display the content, not the browser![/gray]

 

[Vragabond]

Scrap example number two. It is overengineered. In your first example, add [tt]position: relative;[/tt] to the container so that your (needlessly) absolutely positioned boxes will be positioned relative to the container. Told you the absolute positioning bites back.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[Lowet]

Hmm.. I understood by the example that you wanted the left and right DIVs.. But if they are there just for positioning, it's usless..

Then just set the [tt][maroon]width[/maroon][/tt] of the container to [tt][maroon]100%[/maroon][/tt], the [tt][maroon]text-align[/maroon][/tt] to [tt][maroon]center[/maroon][/tt]. Then the tab/panel DIVs will be centered inside the container.

- Lowet

[gray]Why can't all browsers parse pages the same way? It should be the Web designer who decides how to display the content, not the browser![/gray]

 

[Vragabond]

Wrong again. [tt]text-align[/tt], as its name suggests, will only center text and not block level elements. Furthermore, since the tabs and panels are positioned absolutely (which I still think is a mistake), they will disregard any centering schemes.

Once again, container with a width of whatever you want for your page and automatic margins on each side. This container has to have position specified, either relative or absolute so that it can act as a container for the absolutely positioned elements. Since position: absolute; will break the margins rule, you can only use position: relative; (which is better anyway).

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[Lowet]

I'm sorry [navy]Vragabond[/navy], but the [tt][maroon]text-align[/maroon][/tt] does NOT align only text. It aligns any element in the container. Sorry to dissapoint you.
But of curse, if you use the absolute positioning, the [tt][maroon]text-align[/maroon][/tt] doesn't do anything.

This would position a DIV centered:

<div class="container" style="width: 100%; text-align: center;">
   <div class="tab" style="position: relative; width: 70%;">a centered DIV</div>
</div>

Or you could use [tt][maroon]position: absolute;[/maroon][/tt] and set the [tt][maroon]left: 15%;[/maroon][/tt]..


- Lowet

[gray]Why can't all browsers parse pages the same way? It should be the Web designer who decides how to display the content, not the browser![/gray]

 

[kaht]

Lowet, if you're going to post non-standard examples it's probably important to point out that they only work in non-standard's-compliant browsers. If you're posting an IE-only solution it is important that it be labeled as such because IE-only is not acceptable with many web developers. The code you posted will not work in firefox or opera. Here's the test I used:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript"></script>
<style type="text/css"></style>
</head>
<body>

<div class="container" style="width: 100%; text-align: center;border:1px solid red;">
   <div class="tab" style="position: relative; width: 70%;border:1px solid green;">a centered DIV</div>
</div>

</body>
</html>

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]

 

[j4606]

Taken from Mozilla Dev Central:

http://developer.mozilla.org/en/docs/CSS:text-align

Summary

The text-align property is used to to describe how lines of text are aligned with each other. [red]Text-align does not control the alignment of elements[/red], only their inline content.

    * Initial value: user-agent specific and can depend on writing direction
    * Applies to: all block level elements
    * Inherited: yes
    * Media: visual
    * Computed value:

W3C says

This property describes how inline content of a block is aligned.

In IE this is different but wrong
read this site:

http://www.communitymx.com/content/article.cfm?page=2&cid=A8BBA

However it so happens that IE/Win browsers incorrectly apply this value to all elements within the "text-aligned" box, and not just the inline content as should be the case.

So just because it works does not mean it is correct or that it will work cross browser. It might work only if your coding for ie only, in which case you should not try to give others advice, because your telling how to do things improperly and will ultimately hurt their work.

 

[Lowet]

Well, then use the absolute positioning.. But as you said with the [tt][maroon]margin-left: auto;[/maroon][/tt], this doesn't work in all browsers either. IE has problems with the [tt][maroon]auto[/maroon][/tt] value in many CSS properties..

- Lowet

[gray]Why can't all browsers parse pages the same way? It should be the Web designer who decides how to display the content, not the browser![/gray]

 

[Vragabond]

Lowet, can you stop with bad advice? Automatic margins on both sides work in IE6, IE7, FF, Opera, Safari. That's the browsers I can test with. Check it for yourself here. Top example is yours (works in IE and nowhere else) and bottom is with margins (works in all above mentioned browsers).

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[k4ghg]

Thanks for your help. I tired all the suggestions with some success. When I change the position of the tables they appear on each line and not as tabs. The margin:auto; does not seem to do any thing. I managed to get Vragabond to work in IE but most Firefox. Thanks

 

[Lowet]

You didn't mention any tables last time.. Where are they positioned?

- Lowet

[gray]Why can't all browsers parse pages the same way? It should be the Web designer who decides how to display the content, not the browser![/gray]

 

[k4ghg]

Lowet - Thanks for getting back to me. As identified in the original post the tabs are above the panes and thats why they are positioned position:absolute;. The CSS code above is for the Tabs and Panes. Thanks again... Ronnie

 

[Vragabond]

When I change the position of the tables they appear on each line and not as tabs.

Here you have mentioned tables for the first time in this thread. Do you use tables on your page or not? I think it is high time you show us the link to the page or at least the complete code, because we cannot help you by guessing what might be wrong in your code.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[k4ghg]

Thanks for your help. Here is my test page:

http://www.momnpopsware.com/test/hamex.html

Ronnie

 

[Vragabond]

Changing your .container css to read:

margin: 0 auto;
width: 500px;

Centers your tabs. Of course, if you need to use another width, you can.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]