CODEWITHSUNDEEP
htmlcss
Robert
Robert

Reputation: 1726

Align <p> to image not working

I have a paragraph that I use a quote image as the background and lots of text in the <p> tag. I am trying to display an image, with all the text aligned to the right of the image, before the <p> tag but the image seems to be displaying inside it, which I don't want. I created a fiddle to make it a bit easier to see: JSFiddle

Here's my CSS:

.container_12 {
    margin-left: auto;
    margin-right: auto;
    width: 960px;
}

.blockquote {
    font-size: 14px;
    font-family: 'Times', serif;
    font-style: italic;
    color: #222222;
    background-color: #f7f7f7;
    background-image: url(http://somesite/Icon_Quote.png);
    background-position: left top;
    background-repeat: no-repeat;
    min-height: 40px;
    padding: 10px;
    margin-bottom: 10px;
}

.QuoteTextToLeft {
    float: left;
    margin: 50px 10px 10px 10px;
}

And the HTML:

<div class="container_12">
<div>
    <img class="QuoteTextToLeft" src="http://someothersite/man.png"
      alt="" width="200" height="250" /> 
    <a id="andrew_reeder"></a>
    <p class="blockquote">START HERE - this is a test, ... (snipped)
        <br />
        <br />this is a test, a test of the emergency broadcast system....
        <br />
        <br />this is a test, a test of the emergency broadcast system....
        <br />
        <br />this is a test, a test of the emergency broadcast system....
        <br />
        <br />Someone who cares
        <br />
        <br />Some title</p>
</div>

What I'd like to do is have the image displayed outside the <p class="blockquote"> tag so that the Quote Image would be positioned where it says "START HERE".

Here's what it currently looks like: Image

and here's what I'd like it to look like: Image2

Upvotes: 2

Views: 100

Answers (3)

Purag
Purag

Reputation: 17061

Your best bet is to not make it a background image.

.blockquote {
    font-size:14px;
    font-family:'Times', serif;
    font-style:italic;
    color:#222222;
    background-color:#f7f7f7;
    min-height:40px;
    padding:10px;
    margin-bottom:10px;
}
.blockquote:before {
    content:url('http://pokemonresource.wikinet.org/w/images/pokemonresource/uploads/a/a8/Icon_Quote.png');
    margin-right:10px;
    float:left;
}

This is a CSS3 solution...we're utilizing the :before pseudo-class to specify what to add immediately before every .blockquote element.

We set the content property to the url of the image (depending on what kind of file it is, you'll get different results--since this is a png file, it displays the image regularly).

So that the rest of the quote wraps rather than just the first line, we use float:left. And finally, to adjust the spacing, we add a right-margin.

This will work for an image of any size.

Here's a modified version of your original: Demo

And here's one with the image enlarged (the quote stays the same): Demo

Also, I want to point out that you're using deprecated methods for resizing the image--please use CSS to do this rather than width/height attributes.

One final thing: unless you're using an XHTML doctype, you don't need the forward slashes at the ends of certain elements. That was an archaic method of self-closing tags, but the HTML5 doctype does not require it. :)

Upvotes: 5

yeyene
yeyene

Reputation: 7380

Change only one css style. DEMO http://jsfiddle.net/yeyene/DSBqu/4/

Old CSS

background-position:left top;

New CSS

background-position:170px 5px;

Upvotes: 0

CBerube
CBerube

Reputation: 111

This may do the trick: http://jsfiddle.net/charlesberube/YfTHK/3/

The background image on the <p> needed to be moved to push it past the right edge of the image and the image required an additional right-hand margin to help align the text.

.blockquote {
  ...
  background-position: 200px top;
  ...
}

.QuoteTextToLeft {
  float: left;
  margin:50px 40px 10px 10px;
}

This solution is somewhat brittle, since it depends on knowing the size of the image in order to correctly position the background image that provides the quote and align the text; that may or may not be a problem, depending on your situation.

Upvotes: 0

Related Questions