Basic HTML Question..

10 replies
I tried google, found some results but I'm still confused because my affiliate links are so long, I don't know what goes where. I'm just wondering how I can get these two images to line up side by side ..

Here's the page ..

UFC 92 - Forrest Griffin vs. Rashad Evans | Fight Passport

You'll see at the bottom of the article, there's two images (gloves and focus mitts)..

These are the codes..

<a href="http://www.shareasale.com/m-pr.cfm?merchantID=14282&userID=270588&productID=45 9085413" target="_blank"><img src=http://www.mmawarehouse.com/v/vspfiles/photos/hay-1004-2T.jpg border=0></a>

<a href="http://www.shareasale.com/m-pr.cfm?merchantID=14282&userID=270588&productID=46 4228096" target="_blank"><img src=http://www.mmawarehouse.com/v/vspfiles/photos/hay-1012-2T.jpg border=0></a>

Any advice would certainly be appreciated..

Thanks in advance,

Bill
#basic #html #question
  • Profile picture of the author Johnathan
    There are a few different ways...

    Try adding this tag "<nobr>" and then "</nobr>" at the end.
    Signature
    Make money from writing, find out how now.
    {{ DiscussionBoard.errors[607487].message }}
  • Profile picture of the author anth.elias
    Not sure if there is enough room in that column for both images to be side by side. Try reducing the size of your images and remove the border completely.
    {{ DiscussionBoard.errors[607517].message }}
  • Profile picture of the author 4Highflyers
    Forget the above...

    You currently have those items in 2 separate tables.
    If you want them side by side, split the table that holds the 'Focus' mitts into
    2 columns, and paste the content for the other mitts into the new cell - try this...

    Code:
    <table width="200" border="1" cellpadding="3">
    <tbody><tr>
    <td align="center"><font size="-1" point-size="9" face="verdana"><a target="_blank" href="http://www.shareasale.com/m-pr.cfm?merchantID=14282&amp;userID=270588&amp;productID=464228096"><img border="0" src="http://www.mmawarehouse.com/v/vspfiles/photos/hay-1012-2T.jpg" ilo-full-src="http://www.mmawarehouse.com/v/vspfiles/photos/hay-1012-2T.jpg"/><br/><b><font color="0852A5">Hayabusa Optistrikeâ„¢ Focus Mitts</font></b></a><b><font color="0852A5"/></b><font color="0852A5"/> - $   119.99<br/><font size="-1" point-size="8" face="verdana"> OptiStrikeâ„¢ Pro concave striking surface Extreme light weight construction for maximum maneuverability Superior impact absorption for exceptional hand and wrist protection Unparalled comfort for the holder Engineered with a form fitting, precurved molded design<br/></font></font></td>
    <td align="center"><font size="-1" point-size="9" face="verdana"><a target="_blank" href="http://www.shareasale.com/m-pr.cfm?merchantID=14282&amp;userID=270588&amp;productID=459085413"><img border="0" src="http://www.mmawarehouse.com/v/vspfiles/photos/hay-1004-2T.jpg" ilo-full-src="http://www.mmawarehouse.com/v/vspfiles/photos/hay-1004-2T.jpg"/><br/>
            <b><font color="0852A5">Hayabusa Pro 16oz. Sparring Gloves (Black or White)</font></b></a><b><font color="0852A5"/></font></b><font color="0852A5"/></font> - $    89.99<br/>
      <font size="-1" point-size="8" face="verdana"> Authentic hand crafted Mexican style design Ergonomically-designed for maximum striking power and precision 100% Premium leather and foam complex  construction Dual cross closure sytem for ultimate wrist support and stability Suitable for all types of combat training <br/>
      </font></font></td>
    </tr>
    </tbody></table>
    {{ DiscussionBoard.errors[607554].message }}
    • Profile picture of the author webpagesrus
      4Highflyers is right on the money....
      I just took your code and create one table with two cells, here is the code for that:


      <table border=1 width=400>
      <tr>
      <td align=center valign="top"><p><a href="http://www.shareasale.com/m-pr.cfm?merchantID=14282&userID=270588&productID=46 4228096" target="_blank"><img src=http://www.mmawarehouse.com/v/vspfiles/photos/hay-1012-2T.jpg border=0 align="top"><BR>
      <font size="-1"><strong><font face="Verdana, Arial, Helvetica, sans-serif">Hayabusa Optistrikeâ„¢ Focus Mitts</font></strong></font></a><font size="-1" face="Verdana, Arial, Helvetica, sans-serif"><strong></font></strong></font><font size="-1"><strong></strong></font></p>
      <p><strong>$ 119.99</a></strong><BR>
      <font face=verdana point-size=8 size=-1> OptiStrikeâ„¢ Pro concave striking surface Extreme light weight construction for maximum maneuverability Superior impact absorption for exceptional hand and wrist protection Unparalled comfort for the holder Engineered with a form fitting, precurved molded design</font></p></td>
      <td align=center>
      <p><font face=verdana point-size=9 size=-1><a href="http://www.shareasale.com/m-pr.cfm?merchantID=14282&userID=270588&productID=45 9085413" target="_blank"><img src=http://www.mmawarehouse.com/v/vspfiles/photos/hay-1004-2T.jpg border=0><font face=verdana point-size=9 size=-1><BR>
      <strong>Hayabusa Pro 16oz. Sparring Gloves (Black or White)</strong></a></font></p>
      <p><strong>$89.99</a></strong><BR>
      <font face=verdana point-size=8 size=-1> Authentic hand crafted Mexican style design Ergonomically-designed for maximum striking power and precision 100% Premium leather and foam complex construction Dual cross closure sytem for ultimate wrist support and stability Suitable for all types of combat training </font></p>
      <p><font face=verdana point-size=8 size=-1><BR>
      </font></p></td>

      </tr>
      </table>
      {{ DiscussionBoard.errors[607577].message }}
      • Profile picture of the author webpagesrus
        What is the BB Code to create a text box to contain the code like 4Highflyers did in his post above?
        {{ DiscussionBoard.errors[607645].message }}
  • Profile picture of the author pjCheviot
    Banned
    What is the BB Code to create a text box to contain the code like 4Highflyers did in his post above?
    Go to your user Control Panel
    Edit Options
    Scroll to the very bottom
    Use - Enhanced Interface - Full WYSIWYG
    Save

    Then use Go Advanced when posting

    Much easier editor than BB codes etc

    HTH
    {{ DiscussionBoard.errors[607675].message }}
  • Profile picture of the author MuayThaiGuy
    Thanks for the advice, this forum and its members are amazing.

    To be honest, I'm still a little confused - I think due to the length of the code..
    I don't really understand what I'm looking at..
    I understand that I have to create one table with two cells ..

    What exactly do I have to do in order to do that?

    The thing that stands out to me is the ..

    <table border=1 width=400>
    <tr>

    .. at the top and the ..

    </tr>
    </table>

    .. at the bottom.

    My HTML skills are basic at best. For example .. if my code is ..

    <center><table border=1 width=200><tr><td align=center><font face=verdana point-size=9 size=-1><a href="http://www.shareasale.com/m-pr.cfm?merchantID=14282&userID=270588&productID=46 4228096" target="_blank"><img src=http://www.mmawarehouse.com/v/vspfiles/photos/hay-1012-2T.jpg border=0><BR><B><font color=0852A5>Hayabusa Optistrikeâ„¢ Focus Mitts</a></b></font> - $ 119.99</a><BR><font face=verdana point-size=8 size=-1> OptiStrikeâ„¢ Pro concave striking surface Extreme light weight construction for maximum maneuverability Superior impact absorption for exceptional hand and wrist protection Unparalled comfort for the holder Engineered with a form fitting, precurved molded design<BR></font></td></tr></table></center>

    What would I put before and after?..

    As soon as I have time, I really gotta start doing some of those online HTML tutorials because it'll certainly make life in the IM world a whole lot easier ..

    Thanks to everyone that has helped so far..

    Bill
    {{ DiscussionBoard.errors[607809].message }}
    • Profile picture of the author webpagesrus
      Bill,
      basically
      the tag <table border=1 width=400> tells the browser to build a table with a border of 1 pixel and 400 pixels wide....

      then the tag <tr> stands for table row....so that is the first "row" of the table....
      since you want the images side by side (in the same row)
      you will only have one <tr> tag


      so the next tag is <td> this is table data, you should have two <td> tags because you are creating two "cells" side by side in the same row (<tr>)

      so in other words,
      <table border=1 width=400>
      <tr>
      <td>test</td>
      <td>test2</td>
      </tr>
      </table>

      will create a table 400 pixels wide with 2 side by side cells that contain the text "test and "test2" in them.

      Hopefully I didnt confuse you further, just trying to help you understand.
      {{ DiscussionBoard.errors[607846].message }}
  • Profile picture of the author MuayThaiGuy
    Thanks so much for the help, I really appreciate it..

    Bill
    {{ DiscussionBoard.errors[608382].message }}

Trending Topics