...

View Full Version : Unordered list of images



highandwild
11-06-2010, 05:51 PM
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

abduraooft
11-06-2010, 06:03 PM
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
/*
text to be commented here.
*/

highandwild
11-06-2010, 06:47 PM
I have now uploaded it for you to see.

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

Thanks for the commenting advice.

DrDOS
11-06-2010, 08:05 PM
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.

MattF
11-06-2010, 08:13 PM
What happens if you dump the containing div:



<div class="images">
[....]
</div>


assign the images class to the ul:



<ul class="images">


and add:



ul.images {padding: 0;}
ul.images > li {margin: 0; padding: 0;}


to the CSS?

highandwild
11-06-2010, 08:40 PM
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/

????

MattF
11-06-2010, 09:48 PM
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.

Excavator
11-07-2010, 08:34 PM
Hello highandwild,
Your left margin was the default padding on the ul. This bit highlighted in red below killed that:

* {
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 (http://www.html-advisor.com/css/what-is-global-css-reset/).


Try making your CSS look like this instead:

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;}

Excavator
11-07-2010, 08:37 PM
Thought I might add a link you may find useful - http://nopeople.com/CSS/thumbnail%20presentation/index.html



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum