/    Sign up×
Community /Pin to ProfileBookmark

Tab button alignment issues

Copy linkTweet thisAlerts:
Jun 06.2010

Hi there! ?

I’m a programmer who is pretty competant in HTML/CSS, but much prefers working with programming languages, so I’m hoping someone here can help me out in a way that I haven’t thought of.

I have website I’m working on, and I’m running into problems with making tabs work. I’ve greatly simplified the design to make it easier to showcase and investigate the problem. I won’t be using image links in the final version, but I kept them that way to simplify it:

[url]http://the-polyglot.net/uploads/prog/tabs-problem/index.html[/url]

I can see with Firebug that #navigation_tabs is not high enough to allow the buttons to go to the bottom, where the tabs should be to make them look correctly. So, the question is, how can I make that div bigger and then align them so that they rest at the bottom of #header_full and line up with the content below it? If that’s not possible, is there a better way to go about it? I Googled a lot about this issue before and what I saw didn’t seem promising, but maybe I’m missing something.

I know I can do this with tables, or with JS, but obviously, I would much rather do it correctly with CSS. I don’t want to use a lot of absolute positioning, either, since I might be adding or removing tabs.

Thanks for any help you can offer! ?

PS: Please forgive any strange or repetitive coding that might be present in the CSS. I started this project awhile ago and I gave up for a bit because I couldn’t figure this out, and I was trying everything I could think of. :p

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@letmehaveagoJun 07.2010 — From https://developer.mozilla.org/en/CSS/vertical-align vertical-align:

Applies to: inline elements and table cells[/QUOTE]

However, even if you use display to convert them to the correct type of elements not all browsers will support them e.g. ie does not support display: table-cell;

Using absolute position would be quite simple:

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.container {
height: 200px;
border: 1px solid black;
position: relative;
}
.bottom {
position: absolute;
width: 100&#37;;
bottom: 0px;
left: 0px;
background: yellow;
}
</style>
</head>
<body>
<div class="container"> container
<div class="bottom"> bottom</div>
</div>
</body>
</html>[/CODE]

Another approach is to just use some maths to push your div to the bottom. For example you could add a height of #header_address_area to 62px

The third approach is my preferred approach because it is a lot simpler in terms of the number of nesting and things that could go wrong.

[CODE]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#header {
height: 65px;
background: #004D73;
}
#banner {
height: 65px;
float: left;
background: black;
color: white;
width: 120px;
}
#contact {
float: right;
background: #1C7FB3;
}
#tabs_wrapper {
background: black;
padding-left: 120px;
}
#tabs {
background: #004D73;
}
</style>
</head>
<body>
<div id="header">
<div id="banner">Banner goes here</div>
<div id="contact">Contact info goes here</div>
</div>
<div id="tabs_wrapper">
<div id="tabs">Tabs goes here</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque faucibus, ante sed vestibulum rutrum, purus quam imperdiet massa, eu convallis turpis neque vel velit.
</body>
</html>
[/CODE]
Copy linkTweet thisAlerts:
@CrazedauthorJun 07.2010 — Well, I tried vertical-align before, but it doesn't work correctly. The problem is the div is not expanding to take up the rest of the vertical space. Can you see any way to make that work without explicitly setting its height in pixels?

I'd really like to find a way to do it without absolute positioning, but I'll have to resort to it if there's no other way.
Copy linkTweet thisAlerts:
@imranashakeJun 07.2010 — The problem can besolved by just adding padding-top:14px to your navigation_tabs css
Copy linkTweet thisAlerts:
@letmehaveagoJun 08.2010 — It looks like you didn't understand my post fully.


vertical-align: Applies to: inline elements and table cells

However, even if you to convert them to the correct type of elements not all browsers will support them e.g. ie does not support display: table-cell;
[/QUOTE]

So you can't use vertical-align if you want to support all browsers.

Secondly, I mentioned three different approaches in my last post. It seems you might have missed the two other approaches. The second approach being a derivative of imranashake's solution above.

If your not happy with absolute position or setting the height use the third approach.
Copy linkTweet thisAlerts:
@CrazedauthorJun 08.2010 — Sorry, I did miss your third solution. In the case of the actual website (the design is centered), the second solution will probably work best, so I'll use that.

Thanks. ?
×

Success!

Help @Crazed spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...