Jump to content

swordams

Members
  • Posts

    2
  • Joined

  • Last visited

swordams's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. 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?
  2. 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
×
×
  • Create New...