Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Auto width floated problem

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #35189
    glendraeger
    Member

    Here’s my problem. Design calls for links to have a bar 10 pixels high with a different background color on hover. The width has to change depending on the text in the link. I.e. like this (where dashes represent the bar):

    Link Text


    Link Text Two


    Link



    Here’s my html:

    Link text

    tag is set to display:block with it’s own background image. I’m setting the span to display:block and then floating it left or right as needed. My problem is (and I don’t want to use javascript if at all possible) is I can’t get the span element to give me a width based on the width of the link text. I want this to happen automatically, I don’t want to have to target each individual link with CSS. If I set the width that works fine (obviously)….but I need different widths on the fly. Any ideas out there?

    Writing this made me think of possible solution. What if I wrap the text in a span element. Give it the background color of the ‘a’ tag, then on hover position the other span element absolutely behind the span with text? Set it to 100% which will give the appearance that the bar’s width is changing as needed….I’ll try it….and let you know.

    Thanks.

    #90735
    glendraeger
    Member

    My solution worked. Here’s the HTML:

    Here’s the CSS:


    #nav2 li a {
    display:block;
    padding:0px;
    color:#FFF;
    text-decoration:none;
    }

    #nav2 li a span.bar {
    background:#aec891;
    height:11px;
    width:100%;
    position:absolute;
    top:8px;
    right:0px;
    display:none;
    z-index:1;
    }

    #nav2 li a:hover span.bar {display:block;}

    #nav2 li a span.text {
    position:relative;
    background:#929b58;
    z-index:1000;
    display:block;
    float:left;
    padding:0px 12px 0px 6px;
    }
Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.