2 replies [Last post]
bmmedia
Offline
newbie
Last seen: 9 years 46 weeks ago
Timezone: GMT+1
Joined: 2011-07-29
Posts: 1
Points: 3

Hi people,

having a fun time, and cannot get my head round this basic problem.

I have a right hand side div, with list of images, acting as offers menu.

Here is the code.

The problem is it will not align and fit close together flush, there is always a space between the images, making the menu look horrid.

Hopefully someone can help me figure this!

CSS
 
 
 
#group-right {
	hright:340px;
	width:270px;
	clear:none;
	display:block;
	padding:0;
	Margin:0;
}
 
#group-right ul {
	    display:block;
		list-style: none;
		margin: 0;
		padding: 0;
		border: none;
		clear:none;
		margin-bottom:0px;
		vertical-align:top;
}
 
#group-right li {
	    display:block;
		list-style: none;
		margin:0;
		padding:0;
		border:none;
		clear:none;
		margin-bottom:0px;
		vertical-align:top;
}

HTML -

<div id="group-right">
      <ul>
<li><img src="<?php echo $this->getSkinUrl('images/groupontop.png') ?>"</li>
<li><a href="#"><img src="<?php echo $this->getSkinUrl('images/groupon6040.png') ?>"</a></li>
<li><a href="#"><img src="<?php echo $this->getSkinUrl('images/groupon8060.png') ?>"</a></li>
<li><a href="#"><img src="<?php echo $this->getSkinUrl('images/groupon8060a4.png') ?>"</a></li>
    </ul>
</div>

Any advice would be so grateful

kind regards,

BM

lukewakeford
lukewakeford's picture
Offline
Enthusiast
UK, West Sussex, Dorset
Last seen: 1 year 21 weeks ago
UK, West Sussex, Dorset
Joined: 2010-07-24
Posts: 71
Points: 84

Hello!

Hello!

Had a little play with your code, I just found that removing a lot of your '0' margins and '0' paddings helped.. Plus I set the li's to display inline... try this css instead of yours..

I'm pretty sure that all the defaults for margins and paddings are 0px so you don't need to put these in.. Also remember to include your measurement 'px'

#group-right {
	height:340px;
	width:270px;
}
 
#group-right ul {
 
}
 
#group-right li {
	    display:inline;
            list-style:none;
}

oh also here is a little test page that i used > http://www.wezdezign.com/test/inlineli.html

Luke Wink

bmmedia
Offline
newbie
Last seen: 9 years 46 weeks ago
Timezone: GMT+1
Joined: 2011-07-29
Posts: 1
Points: 3

Thanks Luke

Thanks, for the working preview, but still this does not work, still having space btw at the top. I think it may be conflicting to other css styles within cart system, but not sure where.

Firebug isnt helping as much as it usualy does lol :/

here is the link, - newsite

kind regards,

BM