Hello. I have the css coding for my breadcrumbs but now all I need is a divider class that will put a simple symbol such as / between my breadcrumbs. I have been having problems styling this. Each time I try to do it, the divider will appear far away from my breadcrumbs. From what my teacher said, I either need to do a divider class in css or use javascript. I rather stick with css. So that I can just use the <span> tags to place my dividers. Here is my css for the breadcrumbs.


#crumbs li{

#crumbs li a{
        padding:0 15px 0 0;

#crumbs li a:link{

#crumbs li a:visited{


#crumbs li a:hover{


And here is the testing page I am using to test all features before committing them to my actual pages. You can see I have the proper tags for a divider but I am not sure how to do the divider in my css.

<!doctype html>
    <link rel="stylesheet" type="text/css" href="TestBase.css">

<div id="container">
          <div id="header">
            <a href="/"><img src="myLogo.jpg"></a>
            <h2>Ye Olde Soap</h2>
        <div id="topnav-container">
            <ul id="topnav">
                <li><a href="index.html">Home</a></li>
                <li><a href="About Us.html">About Us</a></li>
                <li><a href="Contact Us.html">Contact Us</a></li>
                <li><a href="Login.html">Login Page</a></li>
                <li><a href="Products.html">Products</a></li>           
         <div id="content">

        <ul id="crumbs">
            <li><a href="#">Home</a></li> <span class="divider">></span>  
            <li><a href="#">Services</a></li>
            <li><a href="#">Web Design</a></li
            <li><a href="#">Portfolio</a></li>
            <li>Current Page Title</li>

            <h3>My Test</h3>
        <p>I am testing all features before they are committed to all my actual pages.</p>

         <div id="footer">
            <p><small>Copyright &copy; 2000 Ye Olde Soap</small></p>

Have you looked at the link?

I am not using javascript to do that, it is just some of your html and css. I am using the css selector :after which allows you to "inject" or add something after another element.

Okay. Where does that occur exactly then. Because when I look at the coding, it seems the same to me.

I see it. I overlooked it where you had it. I will try to see if it works right now.

You need to really look closely at all of the css.

#crumbs li a:after{
    padding:0 8px 0 8px;

Yea sorry. I scrolled to fast and missed it till I went back and looked harder. It works on all my pages. You are a life saver. I am now done with this whole assignment. I can now just do minor changes if I need to.

Awesome, glad I could introduce you to something new. Don't forget to mark the thread solved if you are done ;-)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.