swordams Posted November 17, 2014 Share Posted November 17, 2014 Hello Everyone,I'm a total novice with CSS, but I'm trying to learn. I'm trying to place an image with a caption into a paragraph. I did some Googling and found http://www.corelangs.com/css/box/caption.html. I pretty much copy and pasted an example from this website with a few changes. Everything seemed to work fine, until I tried to align the image to the right of a paragraph with a width of 800px. Here is the css: .imageholder {position: relative; width: 260px; border:thin solid black} .imageholder .caption {position: absolute; width: 260px; bottom: 0px; left: 0px; color: #000000; background: #ffffff; text-align:center; font-size:11pt; font-family:'Palatino Linotype', serif; opacity:0.8; border:thin solid black} and the html: <h2>Glenwood Sunday Market</h2><p><span class="imageholder" style="float:right;"><img src="glenwood.jpg" width="100%" style=:margin:0; padding:0; position:relative; left:-20"> <span class="caption">Natasha and Scott at the Glenwood Market </span></span>Blah blah blah etc etc</p> When I used the code as written at corelangs.com, with a <div> element for "imageholder", the image and caption looked fine, but the <div> element destroyed the paragraph formatting, and the paragraph spread to fill the width of the page, with the image at the far right. I tried using <span> instead of <div> since it is an inline element, and the positioning was fine, but the image was always offset by about 20px right of the <span> frame. I've attached a screen cap with borders added for clarity. What is the right way to do this? Should I be using <div class="imagegolder"> or <span class="imageholder">? Thanks, Adam Link to comment Share on other sites More sharing options...
dsonesuk Posted November 17, 2014 Share Posted November 17, 2014 You can only use span within paragraph, using left: -20; (should be left: -20px;) on position: relative element would force it to move left, but the area it originally occupied is included in its total area, that is probably what is causing the gap to appear. Link to comment Share on other sites More sharing options...
swordams Posted November 17, 2014 Author Share Posted November 17, 2014 Oops, I just realized I had written style=:margin:0; padding:0; position:relative; left:-20" instead of style="margin:0; padding:0; position:relative; left:-20" Fixing the quotation mark allows the left:-20 to fix the offset, but I'm still not sure why it's there in the first place. Is the span inheriting the margin from the paragraph? Is there a cleaner way to code this? Link to comment Share on other sites More sharing options...
dsonesuk Posted November 17, 2014 Share Posted November 17, 2014 (edited) As mentioned before left:20 is invalid, IT MUST HAVE unit. I don't see why you need this, unless styling from previous css, is causing conflict and you need to correct it, but i wouldn't use left: property on position: relative; as it cause problems as mentioned before, you could use m@rgin-left: -20px; instead.('@' = 'a', won't show in post otherwise) recreation of layout i think with no reproduction of problem you mentioned. .imageholder {position: relative; width: 260px; border:thin solid black} .imageholder .caption {position: absolute; /*width: 260px; use right: 0 instead*/ right:0; bottom: 0; left: 0; color: #000000; background: #ffffff; text-align:center; font-size:11pt; font-family:'Palatino Linotype', serif; opacity:0.8; border-top:thin solid black} /* to avoid double lines use for top border only*/ .imageholder img{ display: block; /* remove space caused at bottom (size of font-size) by elements not butted together - float will work also*/ margin:0; padding:0; position:relative; width: 100% /*left:-20px should not be required */ } <h2>Glenwood Sunday Market</h2> <p style="width: 800px;"> <span class="imageholder" style="float:right;"> <img src="glenwood.jpg" width="100%" alt="" /> <span class="caption">Natasha and Scott at the Glenwood Market </span> </span> Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, eu fugiat nulla pariatur. In reprehenderit in voluptate velit esse cillum dolore consectetur adipisicing elit. Mollit anim id est laborum. Sed do eiusmod tempor incididunt sunt in culpa excepteur sint occaecat. Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, eu fugiat nulla pariatur. In reprehenderit in voluptate velit esse cillum dolore consectetur adipisicing elit. Mollit anim id est laborum. Sed do eiusmod tempor incididunt sunt in culpa excepteur sint occaecat.</p> Edited November 17, 2014 by dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now