images within a box

[ttmw]

im trying to make an area that holds thumbnail pictures next to each other and when it reaches the end of the box it will start a new row.which is supposed pretty easy as i understand.

the code im using is :

#popList{
margin-left:auto;margin-right:auto;
height:310px;width:360px;
background-color:#330066;
position:absolute;top:178px;left:76px;
}

#popList img{
height:87px;width:74px;
padding:3px;border: solid;border-color:#FFFFFF;border-width:3px;
}

and the html is:

<div id="popList">

<a href="fdgkdfgfg"><img src="img2.jpg"/></a>
<a href="home.html"><img src="img3.jpg"/></a>

</div>



when i run this code it puts all the links/images on top of each other near the bottom right of the box element.any suggestions what im doing wrong?

[KDLA]

I like to use lists:

.box {height: 310px; width: 360px; margin: 0 auto; background: #330066;}
#images {margin: 0; padding: 0;}
#images li {display: block; float: left; list-style-type: none; padding: 3px; border: 1px solid #fff;}
#images li a img {display: block: border: 0;}


<div class="box">
<ul id="images">
<li><a href="asldflasj"><img src="img2.jpg" /></a></li>
<li><a href="a;lsdkfj;"><img src="img3.jpg" /></a></li>
</ul>
</div>

[ttmw]

ok i have just tried you're method and its still the same.i dont understand why its doing what its doing.any other suggestions?

[KDLA]

Can't tell -- we'll really need to see all of your code. Could be that you've got something else going on.

BTW -- You did take out the absolute positioning right? If not, try it without it and see if the problem still exists.

KDLA

[ttmw]

ok i went through the code deleting different bits to see if any other parts were causing it to misbehave,and ive come to the conclusion the problem lies within this bit of code,is there anything obvious that could be causing the problem do you think? thanks

#homeOption a{
background:url(components/homeOption.png) no-repeat;
margin-left:auto;margin-right:auto;
height:17px;width:70px;
position: absolute;top:108px;left:146px;
text-align:center;
}

#homeOption a:focus,#homeOption a:hover{background: url(components/homeOptionOver.png) no-repeat;}


#accountOption a{
background: url(components/accountOption.png) no-repeat;
margin-left:auto;margin-right:auto;
height:17px;width:80px;
position: absolute;top:108px;left:220px;
text-align:center;
}

#accountOption a:focus,#accountOption a:hover{background: url(components/accountOptionOver.png) no-repeat;}


#prizesOption a{
background: url(components/prizesOption.png) no-repeat;
margin-left:auto;margin-right:auto;
height:17px;width:70px;
position: absolute;top:108px;left:322px;
text-align:center;
}

#prizesOption a:focus,#prizesOption a:hover{background: url(components/prizesOptionOver.png) no-repeat;}

[ray326]

We need a link to a sample page.

[ttmw]

sorry i haven't got a link or any way to put the page up because i havn't sorted a host yet im afraid.is there any other way i could show you what u want?

[ttmw]

finally found the problem,so i thought id let you or any others that see the post in the future know what the problem was in case they do he same silly mistake.lol.

i put:

<div id="1Option"><a href="fdgdfgfg"></a>
<div id="2Option"><a href="fdgkdfgfg"></a>
<div id="3Option"><a href="fdgkdfgfg"></a>

instead of :

<div id="1Option"><a href="fdgdfgfg"></a></div>
<div id="2Option"><a href="fdgkdfgfg"></a></div>
<div id="3Option"><a href="fdgkdfgfg"></a></div>

so all i did was forget the closing div tags witch caused me so much time to sort out a simple mistake.thanks to everyones help

[ray326]

BTW, your IDs are invalid. They can't start with a digit.