Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

yelldogyell

macrumors newbie
Original poster
Sep 9, 2015
6
0
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.
 
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.
 
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.


I have tried both float and display inline neither seem to work :s
 
Are you floating the links or the images?

Can you post the code that you currently have?


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>
 
I am trying to make 3 images sit side by side horizontally in html, they are so far sitting central and vertically.
Help would be appreciated.
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
 
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
 
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'.
 
<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>
 
Code:
<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>
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.
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.