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

HTML coding

Discussion in 'Off Topic' started by New Joe, Oct 13, 2014.

  1. New Joe

    New Joe Active Member

    Any good guides anywhere?

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

    Brogan XenForo Moderator Staff Member

  3. Martok

    Martok Well-Known Member

    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/
     
    DEZero likes this.
  4. turtile

    turtile Well-Known Member

  5. New Joe

    New Joe Active Member

    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
     
  6. Brogan

    Brogan XenForo Moderator Staff Member

    You need to float them left.
     
  7. New Joe

    New Joe Active Member

    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>
     
  8. turtile

    turtile Well-Known Member

    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>
    
     
  9. AndyB

    AndyB Well-Known Member

    Instead of using a <div> use a <span>
     
  10. =MGN=RedEagle

    =MGN=RedEagle Well-Known Member

  11. New Joe

    New Joe Active Member

    I got it sorted thanks for the replies.
     
    =MGN=RedEagle likes this.
  12. BirdOPrey5

    BirdOPrey5 Well-Known Member

    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.
     
  13. DennisSkov

    DennisSkov Active Member

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

    New Joe Active Member

    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>
     
    AlexKim and BirdOPrey5 like this.

Share This Page