Forums

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

Home Forums CSS Inline display not horizontal

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #163503
    jasonxxx102
    Participant

    Ok, so I created a table that has 6 buttons inside of it, each button displays additional options on mouseover (all done with css no js).
    When I mouse over it pops out more buttons to either the left or right hand side but for some reason it keep displaying them vertically and I want them to be displayed horizontally.
    Here is an example of what my current table is

    <

    table id=”buttons-table”>



    This is my css for the table and mouseovers.

    .thumbnail{
    position: relative;
    z-index: 0;
    }
    .thumbnail:hover{
    background-color: transparent;
    z-index: 50;
    }
    .thumbnail span{
    position: absolute;
    background-color: #354B5e;
    z-index: 100;
    padding: 0;
    border-bottom: 5px solid hidden;
    visibility: hidden;
    display: inline;
    }
    .thumbnail:hover span{
    visibility: visible;
    top: -91px;
    right: 325px;
    }
    .thumbnail span ul{
       display: table-row;
    }
    .thumbnail span ul li{
       display: inline;
    
       padding: 5px;
    }
    

    Also, here is the css for the table if that helps

    #buttons-table {
       padding: 0;
       width: 300px;
    }
    

    I want the buttons to be displayed in a horizontal list rather than a vertical one.

    #163508
    Paulie_D
    Member

    Perhaps a Codepen rather than a code dump?

    I would say, because it’s not clear from your post, that using tables for layout is not a very modern approach and there are probably better options available.

    Thanks.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.