1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

WP, HTML design question...

Discussion in 'Blogging' started by montyp, Feb 1, 2009.

  1. montyp

    montyp BANNED BANNED

    Joined:
    Jan 1, 2008
    Messages:
    68
    Likes Received:
    140
    i'm trying to add products on a page and would like to list them visually left to right. as of now they are just showing up on top of each other, top to bottom and i have alot of white space to the right of the objects. i obviously don't know code but this is how i've been doing it:

    <code>product aff link</code>

    <code>product aff link</code>

    please let me know what i can do to get what i am looking for.

    thanks for your help.
     
  2. Allie Albatross

    Allie Albatross Junior Member

    Joined:
    Jan 31, 2009
    Messages:
    116
    Likes Received:
    44
    Location:
    Austin, TX
    Can we see your page? Or, if not, maybe a snippet of your source? Sounds like you need to float one or the other.
     
  3. katika

    katika Junior Member

    Joined:
    Feb 15, 2008
    Messages:
    108
    Likes Received:
    113
    Wrap it like this

    <p>product aff link</p>
    <p>product aff link</p>
     
  4. montyp

    montyp BANNED BANNED

    Joined:
    Jan 1, 2008
    Messages:
    68
    Likes Received:
    140
    the <p></p> didnt work for me or maybe i was inserting in the wrong place. here is the code from the page as it stands now:

    HTML:
    
    
    <code><iframe src="http://rcm.amazon.com/e/cm?t=xxxxxxxxx=1&p=8&l=as1&asins=0470228784&fc1=000000&IS2=1&lt1=_blank&m=amazon&lc1=00FF08&bc1=000000&bg1=FFFFFF&f=ifr" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>
    </code>

    <code><iframe src="http://rcm.amazon.com/e/cm?t=xxxxxxxx=1&p=8&l=as1&asins=0743292545&fc1=000000&IS2=1&lt1=_blank&m=amazon&lc1=00FF20&bc1=000000&bg1=FFFFFF&f=ifr" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>
    </code>

    <code><iframe src="http://rcm.amazon.com/e/cm?t=xxxxxxxxx=1&p=8&l=as1&asins=0061031763&fc1=000000&IS2=1&lt1=_blank&m=amazon&lc1=10FF00&bc1=000000&bg1=FFFFFF&f=ifr" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>
    </code>
    HTML:
    
    
     
  5. singa

    singa BANNED BANNED

    Joined:
    Jan 5, 2009
    Messages:
    92
    Likes Received:
    12
    You want it to become like this?

    Your aff 1 Your aff 2

    But it become like this?

    Your aff 1
    Your aff 2

    Like that?
     
  6. Uncle Kracker

    Uncle Kracker Registered Member

    Joined:
    Sep 15, 2008
    Messages:
    89
    Likes Received:
    184
    Location:
    Detroit
    When I put your code on a page it works fine left to right. You could always wrap it in a DIV to see if that helps. (or a table if you must)


    <div width='360'>

    <code><iframe src="http://rcm.amazon.com/e/cm?t=xxxxxxxxx=1&p=8&l=as1&asins=0470228784&fc1=00 0000&IS2=1&lt1=_blank&m=amazon&lc1=00FF08&bc1=0000 00&bg1=FFFFFF&f=ifr" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe></code>

    <code><iframe src="http://rcm.amazon.com/e/cm?t=xxxxxxxx=1&p=8&l=as1&asins=0743292545&fc1=000 000&IS2=1&lt1=_blank&m=amazon&lc1=00FF20&bc1=00000 0&bg1=FFFFFF&f=ifr" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe></code>

    <code><iframe src="http://rcm.amazon.com/e/cm?t=xxxxxxxxx=1&p=8&l=as1&asins=0061031763&fc1=00 0000&IS2=1&lt1=_blank&m=amazon&lc1=10FF00&bc1=0000 00&bg1=FFFFFF&f=ifr" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe></code>

    </div>
     
    • Thanks Thanks x 1
  7. montyp

    montyp BANNED BANNED

    Joined:
    Jan 1, 2008
    Messages:
    68
    Likes Received:
    140
    sorry so late with a reply. yes, singa, you are correct. uk, i paste the code just as you put it, but still comes out;

    aff product 1
    aff product 2

    instead of
    aff product 1, aff product 2

    i am wondering if it is the theme i'm using.

    any suggestions?

    ps-would use a table but on mac with no editor. just using wordpress.
     
  8. singa

    singa BANNED BANNED

    Joined:
    Jan 5, 2009
    Messages:
    92
    Likes Received:
    12
    Do it like this.

    HTML:
    
    <div style="width:200px; height:auto; float:left;">
           <div style="width:80px; height:auto; float:left;">aff 1</div>
           <div style="width:80px; height:auto; float:left;">aff 2</div>
    </div>
    
    
    Make sure the width of div 1 and 2 did not exceed the main container width.
     
    • Thanks Thanks x 1
  9. montyp

    montyp BANNED BANNED

    Joined:
    Jan 1, 2008
    Messages:
    68
    Likes Received:
    140
    getting there. they are overlapping a bit, but at least they are side by side. i think i should experiment with what you suggest?

    thanks again, singa and all who have replied.
     
  10. singa

    singa BANNED BANNED

    Joined:
    Jan 5, 2009
    Messages:
    92
    Likes Received:
    12
    If it is overlapping...
    Try to make the width of the main container wider, or try to narrowing the two div for your aff1 and aff2.

    CSS is fun to learn.
    It's like magic spell. Wrong spell won't get what you want... :p