Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Thanked 0 Times in 0 Posts

    Aligning images with no spaces


    I'm still fairly new to coding, and I'm having a problem that In my mind should be so simple.

    I want to align 5 linked images side by side with only a small amount of padding in between. I have specified that there should be no padding or margins in my css and even tried in my html but nothing seems to work. I just can't figure out what I'm doing wrong.

    Any help would be appreciated.

    This is the website: http://kieronhuntdesign.com/index.html

    here is my html:

    <a href="about.html"><img src="images/button_1.png" alt="about me" width="300" height="200" /></a>

    <a href="design.html"><img src="images/button_2.png" alt="design" width="300" height="200"/></a>

    <a href="illustration.html"><img src="images/button_3.png" alt="illustration" width="300" height="200" /></a>

    <a href="photography.html"><img src="images/button_4.png" alt="photography" width="300" height="200" /></a>

    <a href="contact.html"><img src="images/button_5.png" alt="contact" width="300" height="200" /></a>
    Last edited by viciouskitten; 01-06-2013 at 11:04 AM. Reason: Thanks this is now resolved, just don't know how to change it

  2. #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Thanked 1,874 Times in 1,858 Posts
    Hello viciouskitten,
    Float those and you'll be able to get them closer together. Look at it this way -
    #container {
      width: 840px;
      margin: 0 auto;
    	/*clear: right;
    	display: inline;
    	padding: 0px 0px 0px 0px;
    	margin : 0;
    	float: center;*/
    #container a {display: block;}
    #container img {float: left;}
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  3. #3
    New to the CF scene
    Join Date
    Jan 2013
    Thanked 0 Times in 0 Posts
    Thank you excavator, i tried that then realised quite late that the problem was not with my code but with the images. They are png and had been saved (not by me!) with space around them, which for some reason was showing up. I cropped them to the right size and all is now working.

    Thank you for taking the time to reply


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts