can't get image to float left

  • Resolved goldmember

    (@goldmember)


    14 years, 2 months ago

    on this page I cannot figure out how to get the H1 and UL items to float to the right of the images.

    Here’s the HTML:

    [caption id="" align="alignleft" width="245" caption="The Session™ Series Guitar Display Rack"]<a href="#"><img alt="" src="/wordpress/wp-content/uploads/site-elements/session-rack-home.jpg" title="Session Guitar Display Rack" width="245" height="237" /></a>[/caption]
<h1>Shop For Guitar Display Racks</h1>
<ul>
 <li>Handcrafted Guitar, Bass and Banjo Case Rack</li>
 <li>Hardwood construction built to last</li>
 ...

    please advise what CSS element i need to apply to make this happen. thanks!

Viewing 9 replies - 1 through 9 (of 9 total)

  • twenty ten has this style:

    h1, h2, h3, h4, h5, h6 {
	clear: both;
	font-weight: normal;
}

    try to overwrite this in your child theme with:

    .entry-content h1 { clear: none; }

    Thread Starter goldmember

    (@goldmember)

    nailed it! thank you.

    Thread Starter goldmember

    (@goldmember)

    one more related thing though, how to I get the h1 to align flush with the top of the pics?

    remove the other code before the h1 tag:

    <br />

<a href="#"><br />

    from the html in the browser:

    <p><div class="wp-caption alignleft" style="width: 255px"><a href="#"><img alt="" src="/wordpress/wp-content/uploads/site-elements/session-rack-home.jpg" title="Session Guitar Display Rack" width="245" height="237" /></a><p class="wp-caption-text">The Session™ Series Guitar Display Rack</p></div><br />

<a href="#"><br />
<h1>Shop For Guitar Display Racks</h1>

    check the post in html mode of the editor.

    Thread Starter goldmember

    (@goldmember)

    i’m not following you. the code i depicted above is from the HTML editor tab.

    please advise. thanks.

    i can see this html in the browser:

    <p><div class="wp-caption alignleft" style="width: 255px"><a href="#"><img alt="" src="/wordpress/wp-content/uploads/site-elements/session-rack-home.jpg" title="Session Guitar Display Rack" width="245" height="237" /></a><p class="wp-caption-text">The Session? Series Guitar Display Rack</p></div><br />

<a href="#"><br />
<h1>Shop For Guitar Display Racks</h1>

    there is obviously some (invisible) code before the h1 tags (two linebreaks <br />, and one empty link <a href="#">) and this is pushing the h1 title down.

    i can only guess, that this is maybe some left over from editing the post.
    you might be able to see and delete this, when you edit the post in the html mode of the wordpress post editor.

    Thread Starter goldmember

    (@goldmember)

    weird, the very first thing in the editor is [caption id="" like i posted above…

    it seems weird – but the browser sees these linebreaks and the extra link html;
    if you want to get rid of it, you have to investigate where it comes from.

    even more weird that it does not show in the html post editor.

    Thread Starter goldmember

    (@goldmember)

    i got it figured out. Had to move the H1 tags to outside the a href=

    thanks.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘can't get image to float left’ is closed to new replies.