How to change the width of css tab according to length of alphabet?


Tags: html,css

Problem :

It's a tab menu of css. I tried to write a long name in one tab so its out its position you can check the images on following links:

This is the orignal one: http://innovativeartz.com/problems/orignal.png

When I changed in css enter image description here

.tabs {width:100%;overflow:auto;}
.tabs li {float:left;padding-right:1px;}
.tabs .end {padding:0}
.tabs a {display:block;width:66px;font-size:13px;line-height:31px;color:#fff;text-transform:uppercase;text-align:center;border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;-webkit-border-radius:4px 4px 0 0;behavior:url(js/PIE.htc);position:relative;background:url(../images/tabs_bg.gif) bottom repeat-x #3081c8;text-decoration:none;p}
.tabs a:hover, .tabs .active {background:url(../images/bg_form.gif) repeat}
.tabs_cont {border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;-webkit-border-radius:0 0 4px 4px;behavior:url(js/PIE.htc);position:relative;background:url(../images/bg_form.gif) repeat;padding:30px 35px 28px;width:1000px;height:500px;}

and this is the HTML

 <ul class="tabs">
        <li><a href="#" id="changeText">inclusive Class</a></li>
        <li><a href="#" id="changeText2">inclusive Class</a></li>
        <li><a href="#" id="changeText3">inclusive Class</a></li>
        <li class="end"><a href="#" id="changeText5">inclusive Class</a></li>
    </ul>

Please any one help me out how to look its original bit with long text?



Solution :

the reason is that your ul (tabs) is in article.col which has a width of 267px so when you say 100% for ul width it expands only that much.

make it 1000px.

also remove the tabs a width.


    CSS Howto..

    How to center horizontally a position: absolute elment on a position: fixed container

    Magento - how to locate the location of inline css

    How to apply icons to links using css?

    How do you make 2 YouTube videos automatically play one after the other?

    How are CSS frameworks used?

    How to format an HTML table using CSS for printing?

    How to make a condition in CSS with an HTML attribute?

    How to use “Wedding text ” in Css font family?

    Wordpress nav menu images not showing up in mobile safari

    How can I force browsers to print background images in CSS?

    How can I prevent the textarea from stretching beyond his parent DIV element? (google-chrome issue only)

    How do I make this Javascript checkbox trigger action work like my CSS only example

    how to position a css sprite as background for another class

    How can I add an external stylesheet to a UIWebView in Xcode?

    How to remove/add jQueryUI CSS theme from specific element?

    CSS: how to vertically and horizontally align an image?

    How do I align the list items in an
      with my

      ?

    CSS Chevron Showing Unwanted Rectangle

    css how to center this content

    How to scroll right and left by mouse scroll button

    How to split the image using Javascript + CSS?

    How to style an add to cart

    How can i dynamically change title of input type file?

    How to put a css tag in an element if another has this element [closed]

    How to get CSS font-weight to display?

    How can I show a element on my site when hovered with only JS?

    How do you resize a container between two others?

    How to force font-weight on all children, but respect the nested depth

    How to remove the css class

    How does the padding work in responsive CSS square?