HTML coding

[New Joe]

Any good guides anywhere?

I am wanting to use it for placing images side by side, but can't work out to do it.

 

[Paul B]

http://www.w3schools.com/

 

[Martok]

A good way to learn some HTML, and indeed other languages (CSS, PHP etc) in a step-by-step approach is to use Codecademy, which is free.

http://www.codecademy.com/

 

[turtile]

Any good guides anywhere?

I am wanting to use it for placing images side by side, but can't work out to do it.

You'll need to learn CSS to align images without the use of tables. Of course, you'll want to learn HTML first.

Here is a good book:
http://www.amazon.com/HTML-CSS-Desi...=UTF8&qid=1413241660&sr=8-1&keywords=html+css

 

[New Joe]

Can anyone help me?
I have the look what I want apart from the icons are below each other, I want them to sit next to each other in a line
See how it looks now:

The code I used for the above was:

<div align="left">
<a href="http://www.twitter.com/" target="Go to twitter"><img src="images/icon-twitter.png" border="0" alt=" Go To Twitter"/></a>
</div><div align="left">
<a href="http://www.facebook.com/" target="Go to Facebook"><img src="images/icon-facebook.png" border="0" alt=" Go To Facebookr"/></a>
</div><div align="left">
<a href="http://www.youtube.com/" target="Go to Youtube"><img src="images/icon-youtube.png" border="0" alt=" Go To Youtube"/></a>
</div>

How to adjust that code for them to be inline like this:

 

[Paul B]

You need to float them left.

 

[New Joe]

You need to float them left.

Thanks, I just tried that but it didn't work:

<div align="float:left">
<a href="http://www.twitter.com/" target="Go to twitter"><img src="images/icon-twitter.png" border="0" alt=" Go To Twitter"/></a>
</div><div align="float:left">
<a href="http://www.facebook.com/" target="Go to Facebook"><img src="images/icon-facebook.png" border="0" alt=" Go To Facebookr"/></a>
</div><div align="float:left">
<a href="http://www.youtube.com/" target="Go to Youtube"><img src="images/icon-youtube.png" border="0" alt=" Go To Youtube"/></a>
</div>

 

[turtile]

Thanks, I just tried that but it didn't work:

<div align="float:left">
<a href="http://www.twitter.com/" target="Go to twitter"><img src="images/icon-twitter.png" border="0" alt=" Go To Twitter"/></a>
</div><div align="float:left">
<a href="http://www.facebook.com/" target="Go to Facebook"><img src="images/icon-facebook.png" border="0" alt=" Go To Facebookr"/></a>
</div><div align="float:left">
<a href="http://www.youtube.com/" target="Go to Youtube"><img src="images/icon-youtube.png" border="0" alt=" Go To Youtube"/></a>
</div>

Don't use div align.

Place the following between the head tags:

<style>

.social {
float:left;
}
 
</style>

then use:

<div class="social"><a href="http://www.twitter.com/" target="Go to twitter"><img src="images/icon-twitter.png" border="0" alt=" Go To Twitter"/></a>
</div>
<div class="social"><a href="http://www.facebook.com/" target="Go to Facebook"><img src="images/icon-facebook.png" border="0" alt=" Go To Facebookr"/></a>
</div
<div class="social"><a href="http://www.youtube.com/" target="Go to Youtube"><img src="images/icon-youtube.png" border="0" alt=" Go To Youtube"/></a>
</div>

 

[AndyB]

Instead of using a <div> use a <span>

 

[=MGN=RedEagle]

http://www.w3schools.com/

That is how I learned

 

[New Joe]

I got it sorted thanks for the replies.

 

[BirdOPrey5]

I know you say it's all sorted but the easiest option would be to just put them all in one div, the would naturally be next to each other, no CSS needed.

 

[DennisSkov]

You could also use display: inline-block on the images. Floating tends to mess things up.

 

[New Joe]

I ended up doing it this way:

<div align="left">
<a href="http://www.twitter.com/" target="Go to twitter"><img src="images/icon-twitter.png" border="0" alt=" Go To Twitter"/></a>&nbsp;
<a href="http://www.facebook.com/" target="Go to Facebook"><img src="images/icon-facebook.png" border="0" alt=" Go To Facebookr"/></a>&nbsp;
<a href="http://www.youtube.com/" target="Go to Youtube"><img src="images/icon-youtube.png" border="0" alt=" Go To Youtube"/></a>
</div>