WordPress.org

Ready to get started?Download WordPress

Forums

Image HTML (18 posts)

  1. SCO7TY
    Member
    Posted 2 years ago #

    Can somebody tell what i need to add to this html image code to have no margin at the top no margin left no margin right

    <img class="alignnone size-full wp-image-345" width="704" height="160" alt="" src="imagesource" title="beginnerbanner">

    I want it to be at the top of my page as a title banner with no gaps from the sides of the page.

    Thanks.

  2. SNSD Photo
    Member
    Posted 2 years ago #

    you need to style via your theme stylesheet, or you can use inline styling .

  3. SCO7TY
    Member
    Posted 2 years ago #

    How would i do that? Sorry im a bit of a beginner at this but a quick learner!

    Bare in mind i only need to do this on one page not all

  4. alchymyth
    Forum Moderator
    Posted 2 years ago #

  5. SNSD Photo
    Member
    Posted 2 years ago #

    styling via css means you need to edit theme file (usually style.css) but works for all of your images post.

    styling via inline just works for specific content, if you just need to do this on one page. (code below will make the image has no margin at the top)

    <img class="alignnone size-full wp-image-345" style="margin-top:0" width="704" height="160" alt="" src="imagesource" title="beginnerbanner">

    you may need to read http://www.w3schools.com/css/css_margin.asp for an example

  6. SCO7TY
    Member
    Posted 2 years ago #

    Thanks for ur help blacklizt i appreciate it.

    The problem i'm having now is that the image is inside the post content, i can edit the margin in the post content so that the image has no margin but then the text of the blog is too close to the edge.

    Any ideas?

  7. mukesh panchal
    Member
    Posted 2 years ago #

    how we know pls provide live url for better understand

  8. SCO7TY
    Member
    Posted 2 years ago #

    I dont think the URL will be of much use but here u go -

    http://completemuscleandfitness.com/index.php/344-2/

  9. mukesh panchal
    Member
    Posted 2 years ago #

    wp-content/themes/Polished/style.css

    line no:58

    p {
    padding-bottom: 10px;
    }

    check it

  10. SCO7TY
    Member
    Posted 2 years ago #

    I've just had a look, changing the value just moves where the blog starts from. It doesnt actually do anything for the image.

    I have the image up now on the URL posted.

  11. mukesh panchal
    Member
    Posted 2 years ago #

    i dont understood what u say. explain

  12. SCO7TY
    Member
    Posted 2 years ago #

    If you go to this URL - http://completemuscleandfitness.com/index.php/344-2/

    The image at the top of the page i would like to have no gaps from the top of th epage or the left. As you can see it has gaps at the moment.

    I can get rid of these gaps if i change the margins of postconent in my style.css. But, that makes my blog too close to the edge.

    Basically i want to get the image to fit perfectly without moving the blog underneath.

  13. mukesh panchal
    Member
    Posted 2 years ago #

    u have change css file.
    u r create the new class for image and put !important for that

  14. SCO7TY
    Member
    Posted 2 years ago #

    If i do that wont it be on every page? I only want it on one page.

  15. esmi
    Forum Moderator
    Posted 2 years ago #

    1. Do not use !important except as an absolutely & utterly last resort. It can really screw up other CSS changes longer term.

    2. The problem isn't the CSS on the image. It's the margin-top on #content #main .new_post

  16. SCO7TY
    Member
    Posted 2 years ago #

    Ive nearly done it, just a gap above the image now i cant get rid of! Any ideas?

  17. alchymyth
    Forum Moderator
    Posted 2 years ago #

    remove the top margin from:
    #content #main .new_post { clear: both; margin: 19px 0 35px 0; }

  18. SCO7TY
    Member
    Posted 2 years ago #

    Yes! Thanks for all your help! Took a while but got there in the end and learnt a few things along the way! :D

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags