1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Rep Power

    Problem with basic positioning

    Hi guys i have written this code but i have one small problem with it.

    the <span> is next to the username (which is where i want it to be) but if the span is too long it goes over onto a new line.

    i want all of the <span> tag contents to be on the same line as the <li> tag and i need it to be vertically central

    all help appreciated...at the moment i am over coming this by keeping the message short


    #yome ul li img {margin:5px;vertical-align: middle;width:60px;height:60px;padding: 5px;border: solid 1px #EFEFEF}
    #yome li {list-style:none;font-size:large;font-weight:bold;font-family:Arial, Helvetica, sans-serif}
    #yome ul li img:hover{border: solid 1px #CCC;-moz-box-shadow: 1px 1px 5px #999;-webkit-box-shadow: 1px 1px 5px #999;box-shadow: 1px 1px 5px #999;}
    #yome ul li span {font-size:medium;font-weight:normal}
    #yome ul li span:before {content:" - ";}

    <div id="yome">
    <li><img src="/userthumbnail.png" />Username<span>A short message if this too long the span goes over onto a new line inst</span>
    Last edited by ibwaheemi; August 20th, 2013 at 08:42 AM. Reason: added :before command

IMN logo majestic logo threadwatch logo seochat tools logo