Member Avatar for alyssa.wilkins.77

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{
        height:2.3em;
    }

#crumbs li{
        float:left;
        line-height:2.3em;
    padding-left:.75em;
        color:#777;
    }

#crumbs li a{
        display:block;
        padding:0 15px 0 0;
        }


#crumbs li a:link{
          text-decoration:none;
          color:#008000;

             } 
#crumbs li a:visited{

            text-decoration:none;       
            color:#9400D3;
    }

#crumbs li a:hover{

            text-decoration:none;
            color:red;
    }

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>
<html>
<body>
    <head>
        <title>TEST</title>
    </head>
    <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>
        <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>           
            </ul>
        </div>
</div>  
         <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>


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


        </div>
         <div id="footer">
            <p><small>Copyright &copy; 2000 Ye Olde Soap</small></p>
         </div>
       </div>
</body>
</html>
  • 2 Contributors
  • 10 Replies
  • 237 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by pixelsoul
Member Avatar for pixelsoul

Have you looked at the link?

Member Avatar for pixelsoul

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.

Member Avatar for alyssa.wilkins.77

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

Member Avatar for alyssa.wilkins.77

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

Member Avatar for pixelsoul

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

#crumbs li a:after{
    padding:0 8px 0 8px;
    color:#000;
    content:"/";
}
Member Avatar for alyssa.wilkins.77

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.

Member Avatar for pixelsoul

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.