You must be logged in to post Login


Lost Your Password?

Search Forums:


 






Minimum search word length is 4 characters – Maximum search word length is 84 characters
Wildcard Usage:
*  matches any number of characters    %  matches exactly one character

What Is the HTML Code To Put Images Side By Side?

UserPost

10:22 am
March 12, 2012


Financial Samurai

Admin

posts 1803

Hi HTML Gurus out there,

 

We all know how to drop an HTML code into a Text Widget to put up an image/ad.  Below, for example is a sample HTML code for a 125X125 button.

Given the widget of my blog's column is 350 for example, it would be nice to put another image to the right of the below code to fill out the white space.  Using the same HTML code below, how does one put the image side by side?

<a href="http://www.financialsamurai.com/"><img src="http://www.financialsamurai.com/wp-content/uploads/2011/05/fs.jpg" alt="Hola" ></a>

Thanks!

Sam

PS and good HTML code books for bloggers anybody can recommend?

Regards,

 

Sam

Financial Samurai - Helping you achieve financial freedom sooner, rather than later.

Yakezie Network Founder 

10:34 am
March 12, 2012


Tushar @ Everything Finance

Atlanta, GA, United States

Member

posts 386

You could try this:

 

<table>

<tr>

<td>

<a href="http://www.financialsamurai.com/"><img src="http://www.financialsamurai.com/wp-content/uploads/2011/05/fs.jpg" alt="Hola1" ></a>

</td>

<td>

<a href="http://www.financialsamurai.com/"><img src="http://www.financialsamurai.com/wp-content/uploads/2011/05/fs2.jpg" alt="Hola2" ></a>

</td>

</tr>

</table>

Tushar @ Everything Finance

 

Everything Finance

Email:    tusharm at gmail dot com
Twitter:  @AllFinance

10:40 am
March 12, 2012


Financial Samurai

Admin

posts 1803

Tushar @ Everything Finance said:

You could try this:

 

<table>

<tr>

<td>

<a href="http://www.financialsamurai.com/"><img src="http://www.financialsamurai.com/wp-content/uploads/2011/05/fs.jpg" alt="Hola1" ></a>

</td>

<td>

<a href="http://www.financialsamurai.com/"><img src="http://www.financialsamurai.com/wp-content/uploads/2011/05/fs2.jpg" alt="Hola2" ></a>

</td>

</tr>

</table>

Well whadaya know, that works Tushar!  Thanks mate!

Regards,

 

Sam

Financial Samurai - Helping you achieve financial freedom sooner, rather than later.

Yakezie Network Founder 

10:40 am
March 12, 2012


Eric – PersonalProfitability.com

Portland, OR

Member

posts 2120

Whenever I have HTML questions, I always head to http://www.w3schools.com/.

I agree with Tushar that a table is probably going to be best for what you are trying to do

10:44 am
March 12, 2012


Mike – Saving Money Today

Member

posts 520

I picked up a copy of HTML for Dummies a few years back and it was a good primer on the basics.  I'm no expert though, I know just enough to be dangerous.  Laugh

10:47 am
March 12, 2012


Financial Samurai

Admin

posts 1803

Post edited 10:48 am – March 12, 2012 by Financial Samurai


For my records and others who might be curious, here might be another way someone mentioned:

 

<div id="second_125ads">
    <ul>
        <li>
            <a href="http://www.financialsamurai.com/"><img src="http://www.financialsamurai.com/wp-content/uploads/2011/05/fs2.jpg" alt="Hola2" ></a>
        </li>
        <li>
            [SECOND 125x125 BANNER GOES HERE]
        </li>
    </ul>
</div>

Regards,

 

Sam

Financial Samurai - Helping you achieve financial freedom sooner, rather than later.

Yakezie Network Founder 

11:46 am
March 12, 2012


BeatingBroke

North Dakota, USA

Member

posts 860

Financial Samurai said:

For my records and others who might be curious, here might be another way someone mentioned:

 

<div id="second_125ads">
    <ul>
        <li>
            <a href="http://www.financialsamurai.com/"><img src="http://www.financialsamurai.com/wp-content/uploads/2011/05/fs2.jpg" alt="Hola2" ></a>
        </li>
        <li>
            [SECOND 125x125 BANNER GOES HERE]
        </li>
    </ul>
</div>

If I'm reading that right, I think it would put them top-to-bottom (or stacked) rather than side-by-side.  The easiest way to do it is likely going to be the table code that you've got further up the thread.  You could also try using alignment to do it (e.g. one image aligned left, and one aligned right), but that's not a very elegant way to do it and is going to more prone to issues with changes to site layout and such.

7:36 am
March 13, 2012


Jackie

Member

posts 664

W3 Schools is  a great resource:

http://www.w3schools.com/html/

 

(They have sections for CSS & other stuff too, but that's the html section)

MoneyCrush (Member Blog)
http://www.moneycrush.com • @moneycrush • Facebook

9:31 am
March 13, 2012


TightFistedMiser

Member

posts 361

Looking at the page source of another site that is doing what you want to do will often give you the information you need.  I am not much of a coder but I've been able to figure out a lot of things by looking at the page source of different sites and googling what I want to learn.


About the Yakezie.com Forum

Forum Timezone: America/Los_Angeles

Forum Stats:

Groups: 2
Forums: 9
Topics: 6383
Posts: 84794

Membership:

There are 13651 Members
There have been 20 Guests

There are 9 Admins
There are 8 Moderators

Top Posters:

My Personal Finance Journey – 3159
Khaleef @ KNS Financial – 3149
Budgeting in the Fun Stuff – 3048
Sustainable PF – 2759
Miss T @ Prairie Eco-Thrifter – 2213
Eric – PersonalProfitability.com – 2120

Administrators: The College Investor (1935 Posts), Financial Samurai (1803 Posts), LaTisha @YoungFinances (1715 Posts), Forest Parks (1337 Posts), 20s Finances (1147 Posts), Money Reasons (697 Posts), Chris Johnson (78 Posts), Sydney at Untemplater (0 Posts), Suba (0 Posts)

Moderators: Suba @ Wealth Informatics (1876 Posts), sooverthis (1041 Posts), PK @ DQYDJ (361 Posts), jmichelsen (208 Posts), Ramona (13 Posts), JeremyNJohnson (4 Posts), Moderator (0 Posts), rackgeek (0 Posts)