How to Add Bullet points between links

Hi Everyone,

I am currently designing a new website and have reached a stage where I can’t find an answer.

I am looking to insert bullet points between the top links I have in my header as a way of seperating them - Currently I have used a background image which has them spaced appopriately.

The issue with the current method is that as soon as anyone adds something to their basket (cart - as it currently is) the ‘My Cart’ will display ‘My Cart (1)’ meaning that the background image spacing is incorrect…

I was wondering whether there was a way of adding this bullet points through CSS so that they shift with the length of the displayed link?

My site can be found at http://www.slippcases.com

I would be really grateful for any help people can provide.

Many thanks,

Tom :slight_smile:

Cant you just use the list-style to include a bullet point as it is like this by default this way the <li> and <a> will become wider automatically?

Just apply a single dot image to the right of each anchor and then float each anchor to the left. Use padding to allow the space for the image and the text can grow without ever covering up the image.

e.g.


.header .links {
    float:right;
    width:310px;
}
.header .links a {
    color:#808080;
   [B] margin:0;
[/B]    float:left;
 [B]  background: url(../images/dot.jpg) 100&#37; 50%[/B];
[B]padding:0 5px ;[/B]
}


Adjust padding to suit.

Hi,

Thanks so much for your replies they have definitely sent me in the right direction.

I am still struggling to get the padding right however and can’t seem to get them central full stop?

Does anyone have any ideas what I need to change to fix this problem - any help would be much appreciated :slight_smile:

Thanks.

Tom

Hi,

Increase the width of the parent and then float the anchors (as I mentioned in my previous posts) and then adjust the padding to suit.

Something like this should fit.:slight_smile:


.header .links {
  float:right;
  [B]  width:380px;[/B]
}
.header .links a {
    color:#808080;
    margin:0px;
    background: transparent url(http://www.slippcases.com/skin/frontend/default/blank/images/top_links_bullet.jpg) no-repeat 100&#37; 50%;
[B]padding: 0px 20px 0 5px;
float:left;[/B]
}


Gah, that site’s painful - you’ve broken half a megabyte and your don’t even have CONTENT yet… 80% of that being ‘javascript for NOTHING’.

Paul is on the right track so far as spacing those double-diamond images goes, but really you’ve got so much bloat on the page any of two dozen things could be screwing with the code he provided.

You don’t even have a meaningful layout yet - and you’re at 53k of CSS - FOR WHAT? 333k of javascript - FOR WHAT?!? 22k of MARKUP?!? You DON’T EVEN HAVE CONTENT YET!!!

My advice is throw out ALL that javascript while you are trying to make the template work. I’m not seeing anything that warrants that bloat - since from an appearance standpoint not counting images there is no reason for that to be more than 14k COMBINED CSS and HTML… With NOTHING currently on the page needing any javascript. (and most of the javascripted train wreck you have being redundant to CSS’ functionality)

I mean this:

<script type="text/javascript" src="http://www.slippcases.com/js/prototype/prototype.js"></script>
<script type="text/javascript" src="http://www.slippcases.com/js/prototype/validation.js"></script>
<script type="text/javascript" src="http://www.slippcases.com/js/scriptaculous/builder.js"></script>
<script type="text/javascript" src="http://www.slippcases.com/js/scriptaculous/effects.js"></script>
<script type="text/javascript" src="http://www.slippcases.com/js/scriptaculous/dragdrop.js"></script>
<script type="text/javascript" src="http://www.slippcases.com/js/scriptaculous/controls.js"></script>
<script type="text/javascript" src="http://www.slippcases.com/js/scriptaculous/slider.js"></script>
<script type="text/javascript" src="http://www.slippcases.com/js/varien/js.js"></script>
<script type="text/javascript" src="http://www.slippcases.com/js/varien/form.js"></script>
<script type="text/javascript" src="http://www.slippcases.com/js/varien/menu.js"></script>
<script type="text/javascript" src="http://www.slippcases.com/js/mage/translate.js"></script>
<script type="text/javascript" src="http://www.slippcases.com/js/mage/cookies.js"></script>
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="http://www.slippcases.com/skin/frontend/default/blank/css/styles-ie.css" media="all" />
<![endif]-->
<!--[if lt IE 7]>
<script type="text/javascript" src="http://www.slippcases.com/js/lib/ds-sleight.js"></script>
<script type="text/javascript" src="http://www.slippcases.com/skin/frontend/base/default/js/ie6.js"></script>
<![endif]-->

<script type="text/javascript">
//<![CDATA[
optionalZipCountries = [];
//]]>
</script>
<script type="text/javascript">var Translator = new Translate([]);</script></head>

Is **** scary.

You’ve got so much useless unnecessary markup, and so much CSS for nothing it’s a nightmare to try and debug, and it would be faster to start over from scratch than to try and fix it.

Hi Paul,

Thanks for your advice they look good now and properly spaced :slight_smile:

One last question for that part would be how can I remove the end ‘bullet point’ on the last link so that it only has them in between the top links?

I have experimented with various bits of CSS to try and assign to purely that links ‘last’ value but can’t seem to get it right.

deathshadow60 - Thank you too for your reply, I agree with you that there is a lot of javascript that doesn’t do anything. It all came as part of the Magento basic installation and as I don’t have a wealth of experience I am not at a stage yet of learning how to cut it down to improve page weight and load speed. I am sure that there is loads on their that I can cut out but because of the way Magento is created I don’t want to disrupt the installation as it currently is. Can you recommend a better way for me to recreate a fully functional ecommerce website?

Thanks,

Tom

Hi,

The image is on the anchor and you have added the class to the list element so target it like this.:slight_smile:


.header .links li.last a{background:none}

Thanks so much for your help Paul - all is sorted now and looking a lot better :smiley:

Many thanks again,

Tom