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 9 of 9
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Unordered list of images

    Hi all

    I've just found this site and hope you can help me.

    I am putting together a unordered list with images and I am getting what looks like a 30px or 40px margin to the left of the first image.

    I am sure that it is simple to cure but I have tried all sorts.

    All help apprecated.

    Thanks
    Attached Files Attached Files

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    All help apprecated.
    Sorry, we can't provide help by just looking into some CSS. We need to see your complete HTML or a link to your page would be much better.

    PS: The way to comment inside CSS is like
    Code:
    /* 
    text to be commented here.
    */
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Nov 2010
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I have now uploaded it for you to see.

    http://www.justinoakleyandassociates.co.uk/

    Thanks for the commenting advice.

  • #4
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,451
    Thanks
    17
    Thanked 275 Times in 275 Posts
    I've done more testing with this than I care to admit to and not found any good answer. It seems to be due to the 'natural' indentation that lists use. Trying to correct it with a negative margin causes other problems not easily solved. I would say that you should try other arrangements, like divs and divs or divs and paragraphs.

  • #5
    Senior Coder
    Join Date
    Jul 2009
    Location
    South Yorkshire, England
    Posts
    2,318
    Thanks
    6
    Thanked 304 Times in 303 Posts
    What happens if you dump the containing div:

    Code:
    <div class="images">
    [....]
    </div>
    assign the images class to the ul:

    Code:
    <ul class="images">
    and add:

    Code:
    ul.images {padding: 0;}
    ul.images > li {margin: 0; padding: 0;}
    to the CSS?

  • #6
    New Coder
    Join Date
    Nov 2010
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for taking the time to look at this. It has baffled me too.

    BUT....if I put the css in the html file have a look now what happens.

    The large left margin disappears and a black image bottom border appears.

    http://www.justinoakleyandassociates.co.uk/

    ????

  • #7
    Senior Coder
    Join Date
    Jul 2009
    Location
    South Yorkshire, England
    Posts
    2,318
    Thanks
    6
    Thanked 304 Times in 303 Posts
    I'll reiterate. Remove all of the crap you don't need and start with a base setup. When you have the layout as expected, add back which bits you want. You definitely don't need a containing div on a list, however, unless you're planning on clumping some other stuff in there later on. It's there for sake alone as is.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello highandwild,
    Your left margin was the default padding on the ul. This bit highlighted in red below killed that:
    Code:
    * {
    	margin:0;
    	padding:0;
    	font-family:Arial, Helvetica, sans-serif;
    	font-style:normal;
    	background-color: #000000;
    }
    Your use of the * also put a black background on your li which is the "black image bottom border " you're seeing.

    You've made a good example as to why you should not use a global reset like that - read more here.


    Try making your CSS look like this instead:
    Code:
    html, body { 
    	font-family:Arial, Helvetica, sans-serif;
    	font-style:normal;
    	background: #000;
    }
    .images {
    	min-height:500px;
    	width:900px;
    	background:#00FF66;
    }
    .images ul {
    	text-decoration: none;
    	list-style-type: none;
    	float:left;
    	margin-left:3px;
    padding: 0;
    	background:#FFFF00;
    }
    .images ul li {
    	margin: 5px;
    	float: left;
    }
    .images ul li img{border:none;}	
    .images ul li a{text-decoration:none;}
    .images ul li a:hover{text-decoration: none;}
    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

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Thought I might add a link you may find useful - http://nopeople.com/CSS/thumbnail%20...ion/index.html
    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


  •  

    Posting Permissions

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