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

HTML coding

New Joe

Active member
#5
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:
Screen Shot 2557-10-14 at 3.27.42 PM.png


The code I used for the above was:

Code:
<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:
Screen Shot 2557-10-14 at 3.32.26 PM.png
 

New Joe

Active member
#7
You need to float them left.
Thanks, I just tried that but it didn't work:

Code:
<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

Well-known member
#8
Thanks, I just tried that but it didn't work:

Code:
<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:

Code:
<style>

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

Code:
<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>
 

BirdOPrey5

Well-known member
#12
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.
 

New Joe

Active member
#14
I ended up doing it this way:

Code:
<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>