Jump to content
swordams

Using Span or Div elements to place images in a paragraph

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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 by dsonesuk

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...