Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Align image and text ibn the same line with CSS code

    Hi!
    Im developing a web, adlanguagesbarcelona.com, and I messed up a littletrying to align the "FGC" symbol, as shown in the left sidebar , with the text "Muntaner (Metro). It used to be on the same line, but I messed it up somehow and my knowledge of CSS is not that good (although Im improving quickly). Same thing with the Bus symbol and the numbers of the Buses avaliable. I cant seem to find a way to be in the same line and aligned (meaning, that it doesn't look weird)

    I would really thank if anyone could help me.

    Thanks in advanace!


    Code:
    <span style="float: left; margin-left: 5px;"><img src="http://www.transportebcn.es/images/fuente/fgc.gif" width=90px></span><span style="margin-top: 13px; float: left; vertical-align: top;font-weight: bold;margin-left: 5px;">Muntaner (Metro)</span>
    <br />
    <br />
    <br />
    <span style="float: left; margin-left: 5px;"><img src="http://www.designofsignage.com/application/symbol/railway/image/600x600/bus.jpg" width=80px></span><span style="float: left; vertical-align: sub; width: 135px; margin-left: 10px; margin-top: 20px;">6, 7, 14, 15, 27, 31, 32, 33, 34, 58, 64, 68</span>

  • #2
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    /bump

  • #3
    New Coder
    Join Date
    Nov 2012
    Location
    India
    Posts
    53
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Just remove <br/>
    May this help you.

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    You don't seem to have <br/> tags anyway now, but the problem is just that there is insufficient width to display both the elements side by side as they are now.

    Have a try setting the width on the 'Metro' text and the bus numbers explicitly to 90px, and removing the margin-top on both spans. Things should line up then.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •