By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,492 Members | 1,955 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,492 IT Pros & Developers. It's quick & easy.

horizontal tab menu

P: n/a
fj
I want to create a tab menu - horizontal with all the tabs left justified
except for the last one which I want right justified.

|------------| |----------| |---------| |---------|
|---------|
|------------|--|----------|--|---------|--|---------|----------------------
----|---------|

I think the above hives you the idea

cheers

fj
Jul 20 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
On Wed, 7 Apr 2004 22:37:32 -0700, fj <fj@mailmefor.inf> wrote:
I want to create a tab menu - horizontal with all the tabs left justified
except for the last one which I want right justified.

|------------| |----------| |---------| |---------|
|---------|
|------------|--|----------|--|---------|--|---------|----------------------
----|---------|

I think the above hives you the idea

cheers

fj

I'm not sure I have what you want in mind. But if you set all the tabs to
float: left; and the last one to float: right;, AND there's sufficient
viewport width, all the tabs will line up L to R and the last one will be
far right.
Jul 20 '05 #2

P: n/a
fj
Cheers
Thanks for that, and thats what i thought but I have not managed to achieve
that yet - any chance of an example?
fj
"Neal" <ne*****@spamrcn.com> wrote in message
news:op**************@news.rcn.com...
On Wed, 7 Apr 2004 22:37:32 -0700, fj <fj@mailmefor.inf> wrote:
I want to create a tab menu - horizontal with all the tabs left justified except for the last one which I want right justified.

|------------| |----------| |---------| |---------|
|---------|
|------------|--|----------|--|---------|--|---------|---------------------- ----|---------|

I think the above hives you the idea

cheers

fj

I'm not sure I have what you want in mind. But if you set all the tabs to
float: left; and the last one to float: right;, AND there's sufficient
viewport width, all the tabs will line up L to R and the last one will be
far right.

Jul 20 '05 #3

P: n/a
Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style>
body{
font: 12px verdana;
}

span{
background: #e5e5e5;
padding: 3px 10px;
border: 1px solid #000000;

position: relative;
top: 2px;
}

..left{
float: left;
padding: 5px 1px;
}

..right{
float: right;
padding: 5px 1px;
}

..spacer {
clear: both;
}

..tabContent{
padding: 10px;
border: 1px solid black;
height: 200px;
}

</style>
</head>

<body>

<div class=tabContainer>
<div class=left>
<span>Tab1</span>
<span>Tab2</span>
<span>Tab3</span>
</div>
<div class=right><span>Tab Right</span></div>
<div class="spacer"></div>
</div>
<div class=tabContent>
tab content
</div>

</body>
</html>

For explanation read http://www.realworldstyle.com/split.html

Dont miss dtd declaration, may not work properly is some browsers if
it is left out.

Regards
Kiran Makam
Jul 20 '05 #4

P: n/a
fj
many thanks

fj

"kiran" <ki*******@yahoo.com> wrote in message
news:7c**************************@posting.google.c om...
Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style>
body{
font: 12px verdana;
}

span{
background: #e5e5e5;
padding: 3px 10px;
border: 1px solid #000000;

position: relative;
top: 2px;
}

.left{
float: left;
padding: 5px 1px;
}

.right{
float: right;
padding: 5px 1px;
}

.spacer {
clear: both;
}

.tabContent{
padding: 10px;
border: 1px solid black;
height: 200px;
}

</style>
</head>

<body>

<div class=tabContainer>
<div class=left>
<span>Tab1</span>
<span>Tab2</span>
<span>Tab3</span>
</div>
<div class=right><span>Tab Right</span></div>
<div class="spacer"></div>
</div>
<div class=tabContent>
tab content
</div>

</body>
</html>

For explanation read http://www.realworldstyle.com/split.html

Dont miss dtd declaration, may not work properly is some browsers if
it is left out.

Regards
Kiran Makam

Jul 20 '05 #5

P: n/a
fj
many thanks

fj

"kiran" <ki*******@yahoo.com> wrote in message
news:7c**************************@posting.google.c om...
Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style>
body{
font: 12px verdana;
}

span{
background: #e5e5e5;
padding: 3px 10px;
border: 1px solid #000000;

position: relative;
top: 2px;
}

.left{
float: left;
padding: 5px 1px;
}

.right{
float: right;
padding: 5px 1px;
}

.spacer {
clear: both;
}

.tabContent{
padding: 10px;
border: 1px solid black;
height: 200px;
}

</style>
</head>

<body>

<div class=tabContainer>
<div class=left>
<span>Tab1</span>
<span>Tab2</span>
<span>Tab3</span>
</div>
<div class=right><span>Tab Right</span></div>
<div class="spacer"></div>
</div>
<div class=tabContent>
tab content
</div>

</body>
</html>

For explanation read http://www.realworldstyle.com/split.html

Dont miss dtd declaration, may not work properly is some browsers if
it is left out.

Regards
Kiran Makam

Jul 20 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.