iframe images display

  • armon99

    (@armon99)


    13 years, 2 months ago

    Hi
    I have a little problem of displaying this iframe images. The way they are showing now is all on top of the other vertically lining up but i like them to be side by side, so it would take less space and look better. I know i need to do something with the css.
    Can someone help me please?
    The theme is anaximander and my url is http://getsoftskin.com/how-to-whitening-your-skin
    Thanks in advance.

Viewing 1 replies (of 1 total)
  • Chris Olbekson

    (@c3mdigital)

    13 years, 2 months ago

    You will need to use the css float property and float the iframes left then add a margin. You can do this directly in the iframe code tag or add a rule to your css.

    iframe {
    float: left;
    margin-right: 5px;
    margin-left: 5px;
    overflow: hidden;
}

    Using the css approach above would apply to any iframe on your site so if you were to do this you would need to add a class to the iframe code.

    <iframe class=”ad-left” src=”xxxxxx

    Then your css would look like this:

    iframe.ad-left {
    float: left;
    margin-right: 5px;
    margin-left: 5px;
    overflow: hidden;
}

    You also have extra markup ( p and br tags) littered around the iframes. The CSS floats will stair step unless you remove them. To prevent WordPress from auto adding the p tags just make sure you are using the text editor and don’t add any lines between the code. Like so:

    <iframe foo="bar" bar="foo" ect="etc"></iframe><iframe foo="bar" bar="foo" ect="etc"></iframe><iframe foo="bar" bar="foo" ect="etc"></iframe>

Viewing 1 replies (of 1 total)

The topic ‘iframe images display’ is closed to new replies.