SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Aligning small icons next to br'd text

    Hi there,

    I'm not quite sure if this is the right way to go about it but I have a div which contains some text which is broken up using a <br /> and would like to place some small icons to the right of the text. I have tried using vertical-align on the image which I would normally use if the text wasn't broken up but that doesn't seem to be having any effect.

    Below is a link to a test page for the code which I've also pasted in below.

    http://andrewcourtney.co.uk/demoenvironment/imagealign/

    Code:
    		<div style="padding:10px; font-family:Lusitana; text-transform:uppercase; font-size:0.8em; float:left; 
    background:#522a2a;
    color:#faa31b;
    text-shadow: black 0.15em 0.15em 0.2em;
    border: 1px solid #3d1414; outline: 2px solid #522a2a;">
    		Add us for the latest<br />in our news and events<img src="twitter.png" alt="" style="vertical-align:-80%;" /><img src="twitter.png" alt="" style="margin-left:10px; vertical-align:-80%;" /> <img src="twitter.png" alt="" style="margin-left:10px; vertical-align:-80%;" />
    		</div>
    Any ideas on how best to do this? Maybe some alterations could be made to the width of the text's area itself so it wraps around with CSS? One solution would be to split the div up I guess?

    Cheers,

    Shoxt3r

  2. #2
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Managed to figure it out since posting. Basically all I've done is split the div up by adding spans and applied relative widths to each span and a float which seems to keep it happy.

    By all means if there's a better solution though I'd love to hear it

    Code and updated link below.

    http://andrewcourtney.co.uk/demoenvironment/imagealign/

    Code:
    		<div style="padding:10px; font-family:Lusitana; text-transform:uppercase; font-size:0.8em; float:left; 
    background:#522a2a;
    color:#faa31b;
    width:310px;
    text-shadow: black 0.15em 0.15em 0.2em;
    border: 1px solid #3d1414; outline: 2px solid #522a2a;">
    		<span style="width:60.5%; float:left;">Add us for the latest in our news and events</span>
    		<span style="width:39.5%; float:right;"><img src="twitter.png" alt="" style="margin-left:11px;" /><img src="twitter.png" alt="" style="margin-left:11px;" /> <img src="twitter.png" alt="" style="margin-left:11px;" /></span>
    		</div>
    (please excuse the set 310px width on the container div, it's set as a percentage in the "real" version)


Bookmarks

Posting Permissions

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