WordPress.org

Forums

Image positioning (7 posts)

  1. asuyker
    Member
    Posted 2 years ago #

    Hello everyone

    I am trying to position images exactly. The general image html code of WP doesn't provide this option.

    This is the general html of an image in WP:
    <img class="alignnone size-full wp-image-32" title="Recensies" src="http://worldcookingworkshops.nl/wp-content/uploads/2012/07/Recensies.jpg" alt="" width="218" height="142" />

    I tried several things to add "top" and "left". For example: <img style="position: absolute; top: 20px; left: 20px; width: 227px; height: 142px;" src="http://worldcookingworkshops.nl/wp-content/uploads/2012/07/Workshops.jpg" alt="" />

    Unfortunatly this html code doesn't work in WP. Doen anyone knows the correct html code of WP, where i can add "top" and "left" ??? Many thanks!

  2. Max
    Member
    Posted 2 years ago #

    There is nothing wrong with WordPress' code! For absolute positioning to work you need a positioning context in your CSS (else what would the relative or absolute positioning be referenced against).

    According to the CSS specifications, an absolutely positioned element is positioned relative to the first parent block that has a positioning context of something other than static (which is the default if you do not specify one), otherwise the <html> element.

    To to this, you need to set the containing DIV or other block in which your image is to have a positioning context of "relative". Subsequent absolute position statements in your CSS with then be absoute to the bounds of this positioning context.

    Read through this for a better grasp: CSS Positioning

  3. you can add custom styles to an image under the 'advanced settings' tab when you edit an inserted image (in the visual editor);

    it might help if you can post a link to a post or page with the issue.

  4. asuyker
    Member
    Posted 2 years ago #

    Thank you all for your reply. The weird thing is, that in the visual the end result i am looking for is right there. But online i don't see anything. I am working with Suffusion Theme by Sayontan Sinha. I don't know much about CSS but i will get in to that. Here is a printscreen:

    http://worldcookingworkshops.nl/wp-content/uploads/2012/07/printscreen1.jpg

  5. asuyker
    Member
    Posted 2 years ago #

    in the printscreen you see one big image, which are in fact 9 different ones. so i can link them al separately to another page

  6. asuyker
    Member
    Posted 2 years ago #

    Ok i really can't figure it out in the CSS of Suffusion. Where exactly do i need to change something, and what kind of code do i have to write in it. Can you please help me?

  7. asuyker
    Member
    Posted 2 years ago #

    I fixed the problem. I was missing the htaccess file! A totally different problem, the positioning html codes i had before are working now!

Topic Closed

This topic has been closed to new replies.

About this Topic