horizontal tab menu

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

Subscribe Post Reply

10453

Neal

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

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

kiran

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

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

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

by: elad | last post by:

Hi The Menu doesn't work properly when I have 2 frame and the Menu popup frame=document target frame, when I choose item in the menu the doc opened and the menu get stuck. Here is the code...

Javascript

Rendering of horizontal menu

by: Ansgar Hein | last post by:

I have been playing around with several different versions for a horizontal menu, but I haven't been able to build a horizontal navigation based on the vertical one featured on www.alistapart.com...

HTML / CSS

horizontal row div menu

by: theo | last post by:

Hi, I'm working on a horizontal row menu, to use like folder tabs. Does anyone know what the CSS style "cursor" is supposed to produce? Any working samples? I put it in the code, but can't see...

HTML / CSS

Centered equal-width horizontal nav list CHALLENGE

by: Chris Beall | last post by:

Objective: Using an HTML list, create a horizontal nav menu with these characteristics: - All menu items have the same width at all times. - When the window width is reduced, the menu items...

HTML / CSS

fully horizontal menu

by: Sergio E. | last post by:

Hi group, I write this post with the following question: How can I to build an absolutely horizontal menu?, This is because I can't find how can I configure the menu component of asp.net 2.0...

ASP.NET

horizontal dropdown menu using html and css

by: camphor | last post by:

hi, I have a single column webpage with a horizontal dropdown menu and am trying to make the nav bar fit across the page, the column is 800px, it looks ok in dreamweaver 8 but when I test it in...

HTML / CSS

Can I have a vertical sub-menu in a horizontal type CFMenu?

by: Haitashi | last post by:

Hello everyone: I have a CFMenu with the type set to horizontal. I'd like to have the sub-menu items open vertically. Is that possible? Here is my code. I want the Portals sub-menu (Portal A,...

ColdFusion

Problem with CSS Horizontal Dropdown Menu

by: Jim | last post by:

Hi, I have two questions/problems pertaining to CSS horizontal dropdown menus and am hoping that someone here can help me out. (1) I'm having a problem centering the menu. I picked up the...

HTML / CSS

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Migrating Website to Cloud - Emmanuel Katto

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

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

What is ONU?

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,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

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...

Online Marketing

Similar topics