Hello and welcome to our community! Is this your first visit?
Register
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
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Aligning images with no spaces

    Hi

    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 12:04 PM. Reason: Thanks this is now resolved, just don't know how to change it

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello viciouskitten,
    Float those and you'll be able to get them closer together. Look at it this way -
    Code:
    #container {
      width: 840px;
      margin: 0 auto;
    	/*clear: right;
    	display: inline;
    	padding: 0px 0px 0px 0px;
    	margin : 0;
    	margin-left:auto;
    	margin-right:auto;
    	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 the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    8
    Thanks
    0
    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
    •