Jump to content

swordams

Members
  • Content Count

    2
  • Joined

  • Last visited

Posts posted by swordams

  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

    post-178547-0-60418700-1416182642_thumb.gif

×
×
  • Create New...