Menu
I'm trying to emulate a tab bar with HTML.
I'd like the width of each tab to be set according to the text length (that is, no fixed width) and to word wrap in case it exceeds the screen width.
I've almost achieved it:
<html> <head> <style type="text/css"> #myTabs .tab { float: left; } #myTabs .tab_middle { margin: 0; padding: 0; border: none; background-image:url('images/tabs/tab_middle.png'); } #myTabs .tab_left { margin: 0; padding: 0; border: none; background-image:url('images/tabs/tab_left.png'); } #myTabs .tab_right { margin: 0; padding: 0; border: none; background-image:url('images/tabs/tab_right.png'); } </style> </head> <body> <div id="myTabs"> <div class='tab'> <span class='tab_left'> </span> <span class='tab_middle'>very very looong</span> <span class='tab_right'> </span> </div> <div class='tab'> <span class='tab_left'> </span> <span class='tab_middle'>another loooong tab</span> <span class='tab_right'> </span> </div> <div style='clear:both'></div> </div> </body> </html> But, there's a very annoying space between the opening tab image and the closing one.
As you can see, I've tried with padding, spacing, and border, with no luck.
EDIT:
I tried replacing the spans with a small table (one row, three <td>s), but it's the same, only the space between is smaller.
305
Approach 1: We can remove space between any two tags by simply using margin-bottom property. The margin-bottom property sets the bottom margin of an element. We will assign a negative value to the margin-bottom of a particular tag to eliminate the extra space between the tags as shown.
Another way besides njbair's one is to add font-size: 0 to parent element. I prefer this one because it's aesthetically better for tab designing.
Instead of this:
<div id="tabs"> <span id="mytab1">Tab 1</span><span id="mytab2">Tab 2</span><span id="mytab3">Tab 3</span> </div> ...we can use this:
<div id="tabs" style="font-size: 0;"> <span id="mytab1">Tab 1</span> <span id="mytab2">Tab 2</span> <span id="mytab3">Tab 3</span> </div> ...which looks better :)
Of course, don't forget to define your real font size for tabs.
EDIT:
There's one more way to get rid of spaces: by adding comments.
Example:
<div id="tabs"> <span id="mytab1">Tab 1</span><!-- --><span id="mytab2">Tab 2</span><!-- --><span id="mytab3">Tab 3</span> </div> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
