Image Alignment

Discussion in 'Web Design and Development' started by yelldogyell, Sep 9, 2015.

  1. yelldogyell macrumors newbie

    Joined:
    Sep 9, 2015
    #1
    I am trying to make 3 images sit side by side horizontally in html, they are so far sitting central and vertically.

    I know i need to style the CSS code but not sure what code to use to achieve this.
    This is what I have so far in terms of the image on the html:
    Script 1.png

    The images are going to sit at the bottom of the page, hopefully central with even space in between.

    Help would be appreciated.
     
  2. 2457244 macrumors regular

    Joined:
    Jul 20, 2015
    #2
    Try Google for: CSS + image + display inline block

    The align element is mostly used for text, it can be used for images too but then you need to make sure the inherited elements from your images are table elements.
    Most common is just using display inline.. and maybe a float.
     
  3. yelldogyell thread starter macrumors newbie

    Joined:
    Sep 9, 2015
    #3

    I have tried both float and display inline neither seem to work :s
     
  4. 2457244 macrumors regular

    Joined:
    Jul 20, 2015
    #4
    Remove that <br> tag at the end of the img/url tag.
     
  5. olup macrumors 6502

    Joined:
    Oct 11, 2011
    #5
    Are you floating the links or the images?

    Can you post the code that you currently have?
     
  6. yelldogyell thread starter macrumors newbie

    Joined:
    Sep 9, 2015
    #6
    The <br> is there for a break up between the text above it and the images below.
     
  7. yelldogyell thread starter macrumors newbie

    Joined:
    Sep 9, 2015
    #7

    I currently have:

    <style>
    logos {
    Display:inline;

    }
    </style>


    <div contents="logos"
    <a href="http://www.bsac.com"><img src="http://www.huddersfielddivecentre.co.uk/images/BSAC_logo_1727x575_rgb.jpg" alt="BSAC" width="125" height="40" border="0" align="left"></a>
    <a href="https://instagram.com/"><img src="Instagram logo.png" alt="Instagram" width="50 Height="50" border="0"</a><br>
    <a href="https://www.facebook.com/shrewsburysubaquaclub?fref=ts"><img src="facebook logo.jpg" alt="Facebook" Width="50" Height="50" border="0"</a></br>
    </div>
     
  8. 960design macrumors 68000

    Joined:
    Apr 17, 2012
    Location:
    Destin, FL
    #8
    Something like this?
    https://jsfiddle.net/u7pouh1p/

    PS. There was quite a bit of 'fixin' needed in your structure (html). Stay away from inline styling as much as you can. It will drive you crazy with pixel pushing later on. First just build the html, then add the css to make it pretty.

    PPS. Resize your images.. that first one is REALLY big
     
  9. yelldogyell thread starter macrumors newbie

    Joined:
    Sep 9, 2015
    #9
    I have never done html before, this is my first time, it is all over the place at the moment, im just happy it works so far.

    not really sure where I have gone wrong as I copied and pasted the stuff and it still hasn't worked :s
     
  10. 960design macrumors 68000

    Joined:
    Apr 17, 2012
    Location:
    Destin, FL
    #10
    Can you show us the full html code in a...
    Code:
    code
    box? We can pinpoint the mistakes.

    Just wrap your code with code tags within the post... [ code ] code goes here [ /code ]
    Without the spaces around the keyword 'code'.
     
  11. yelldogyell thread starter macrumors newbie

    Joined:
    Sep 9, 2015
    #11
    <html>
    <head>
    <Title>Shrewsbury Sub Aqua Club</title>
    </head>
    <body bgcolor="white" text="darkblue"

    <body>
    <header>

    <img src="Logo.jpg" alt=" SSAC Logo" width="200" Height="100" >


    <style>
    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    }

    li {
    display: inline;
    }

    a:link, a:visited {
    display: block;
    width: 60px;
    font-weight: bold;
    color: grey;
    background-color: white;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
    }

    a:hover, a:active {
    background-color: #;
    }
    </style>

    <li><a href="default.asp">Home</a></li></button>
    <li><a href="About Us.asp"> About Us</a></li></button>
    <li><a href="Courses and Training.asp"> Courses and Training</a></li></button>
    <li><a href="Try Diver Experience.asp"> Try Diver Experience</a></li></button>
    <div>
    <img src="slide-1.jpg" alt="Banner1" width="1878" height="500"
    </center>
    </header>


    <center>
    <body>
    <h2><b>About Us</b></h2>
    <p>
    Shrewsbury Sub Aqua Club (SSAC) is a BSAC dive centre (number 0626) based at Shrewsbury’s Quarry Swimming Baths</p>

    <p><br>
    Members of SSAC have a mixed array of diving abilities, ranging from beginning Ocean Divers who are taking their first steps in their diver training to highly skilled Technical Divers who specialize in cave and deeper diving,
    many of whom regularly take part in the calendar of dives and social events frequently organised by the club. We have a group of friendly and experienced instructors, some of which have over 20 years of experience,
    who take our divers through various training courses and qualifications, and there are additional skill development courses such as Drysuit training, First Aid and Boat Handling on offer to members.</br>

    <br>Shrewsbury Sub Aqua Club also has the benefit of a 6.5 metre rib and our own air compressor available for members to use once training has been completed.</br>

    <br>Lectures and pool training all take place on site at the Quarry Swimming Centre, Shrewsbury. When we conduct our open water dives we visit a wide range of dive locations
    from inland quarries to welsh coastal dive sites, plus we have many opportunities for you to experience our holiday trips, for example, our yearly trip to the Red Sea where you can
    take advantage of the stunning reefs and wrecks situated in the warm Egyptian Ocean.</br>

    <br>At Shrewsbury Sub Aqua Club, we strive to provide as much of a service as possible,
    as a result, we offer snorkeling courses to anyone ages 6+ and our unique Try Diver Experience where you can get a feel for the water and ensure that this sport is the one for you.</br>

    <br>We don’t just dive together, we have a great social life too, with loads of events taking place, we at SSAC are a community of members, helping each other out and having a good time whilst doing it.</br>

    div{
    text-align:center;
    }
    img{
    width:120px;
    /*height:60px;*/
    display:inline;
    padding:20px;
    }

    <div contents="logos">
    <a href="http://www.bsac.com">
    <img src="http://www.huddersfielddivecentre.co.uk/images/BSAC_logo_1727x575_rgb.jpg" alt="BSAC"width ="50" height=50" border=0>
    </a>
    <a href="https://instagram.com/">
    <img src="Instagram logo.png" alt="Instagram"width ="50" height=50" border=0>
    </a>
    <a href="https://www.facebook.com/shrewsburysubaquaclub?fref=ts">
    <img src="facebook logo.jpg" alt="Facebook" width ="50" height=50" border=0>
    </a>
    </div>

    div{
    text-align:center;
    }
    img{
    width:120px;
    /*height:60px;*/
    display:inline;
    padding:20px;
    }

    <a href="http://www.bsac.com"><img src="http://www.huddersfielddivecentre.co.uk/images/BSAC_logo_1727x575_rgb.jpg" alt="BSAC" width="125" height="40" border="0" align="left"></a>
    <a href="https://instagram.com/"><img src="Instagram logo.png" alt="Instagram" width="50 Height="50" border="0"</a><br>
    <a href="https://www.facebook.com/shrewsburysubaquaclub?fref=ts"><img src="facebook logo.jpg" alt="Facebook" Width="50" Height="50" border="0"</a></br>


    </body>
    </html>
     
  12. Darth.Titan macrumors 68030

    Darth.Titan

    Joined:
    Oct 31, 2007
    Location:
    Austin, TX
    #12
    Yeah, that's a mess. You can't scatter style declarations all willy-nilly throughout your body content like that, and your <style> has to be in the <head> section. The basic idea you're looking for is:
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Shrewsbury Sub Aqua Club</title>
    <style>
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    
    li {
          display: inline;
    }
    
    a:link, a:visited {
        display: block;
        width: 60px;
        font-weight: bold;
        color: grey;
        background-color: white;
        text-align: center;
        padding: 4px;
        text-decoration: none;
        text-transform: uppercase;
    }
    
    a:hover, a:active {
        background-color: #;
    }
    </style>
    </head>
    
    <body>
    <header> ... </header>
    <div>
    ... other body content ...
    </div>
    </body>
    </html>
    
    
    • There should only be one <body>.
    • You've got closing </button> tags that you never opened.
    • The <center> tag is deprecated so don't use it.
    • You seem to be using <br></br> tags instead of paragraphs. Break tags don't use a closure like that.

    That is just a quick glance, but there's plenty more wrong. I ran it through an HTML validator and it listed 71 total errors.

    You need to find a beginner's online html tutorial. Once you're comfortable with that, then move on with css. You need to crawl before you try to walk.
     

Share This Page