Jump to content

Positioning Text Around Image


OtagoHarbour
 Share

Recommended Posts

I would like to position one short piece of text (a number) just to the right of the top right hand corner of an image and another short piece of text (a number) just to the right of the bottom right hand corner of the image so it looks like this.-------------------------------------------------|...........................................................| 100.0|...........................................................||...........................................................||...........................................................||...........................................................||...........................................................||...........................................................||...........................................................| 20.0-------------------------------------------------I would also like to have two action buttons, one under the other, just to the left of the top left hand corner of the image.What would be the best way to do this?Thanks very much,Peter.

Link to comment
Share on other sites

Probably in this case, by using position absolute and relative .

<style type="text/css">#wrapper { width: 960px; margin:0 auto; height:600px; background-color:#CCCCFF; }.image_container {position:relative; margin: 0 90px;}.image_container button {display:block;}.image_container p{margin: 0.05em 0px 0.05em 10px; }.top_left { width:80px; left:-80px;position:absolute;}.top_rgt, .bottom_lft { width: 120px; right:-120px; position:absolute;}.top_rgt, .top_left { top:0;}.bottom_lft {bottom:0;}.right {float:right;}.left {float:left;}</style>

<div id="wrapper"><div class="image_container left"><div class="top_left"><button>button 1</button><button>button 2</button></div><div class="top_rgt"><p>top text</p></div><img src="../images/myimage.jpg" /><div class="bottom_lft"><p>Bottom text</p></div></div><div class="image_container right"><div class="top_left"><button>button 1</button><button>button 2</button></div><div class="top_rgt"><p>top text</p></div><img src="../images/myimage.jpg" /><div class="bottom_lft"><p>Bottom text</p></div></div></div>

Link to comment
Share on other sites

Probably in this case, by using position absolute and relative .
<style type="text/css">#wrapper { width: 960px; margin:0 auto; height:600px; background-color:#CCCCFF; }.image_container {position:relative; margin: 0 90px;}.image_container button {display:block;}.image_container p{margin: 0.05em 0px 0.05em 10px; }.top_left { width:80px; left:-80px;position:absolute;}.top_rgt, .bottom_lft { width: 120px; right:-120px; position:absolute;}.top_rgt, .top_left { top:0;}.bottom_lft {bottom:0;}.right {float:right;}.left {float:left;}</style>

<div id="wrapper"><div class="image_container left"><div class="top_left"><button>button 1</button><button>button 2</button></div><div class="top_rgt"><p>top text</p></div><img src="../images/myimage.jpg" /><div class="bottom_lft"><p>Bottom text</p></div></div><div class="image_container right"><div class="top_left"><button>button 1</button><button>button 2</button></div><div class="top_rgt"><p>top text</p></div><img src="../images/myimage.jpg" /><div class="bottom_lft"><p>Bottom text</p></div></div></div>

That works great! Thank you so much for your help.Peter.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...