Breadcrumb displaying in reverse order

7 posts by 2 authors in: Forums > CMS Builder
Last Post: October 10, 2017   (RSS)

By Mikey - October 9, 2017

Hey Dave,

Try this CSS style sheet and see if it works out your issue.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Bread</title>

<style type="text/css">
    .breadcrumb {
        margin:0 auto;
        padding:0;
    }
    ul.breadcrumb, .breadcrumb li {
        list-style:none;
    }
    .breadcrumb li {
        margin:0;
        padding:0;
        display:inline-block;
    }
    .breadcrumb li {
    }
    .breadcrumb li a {
        text-decoration:none;
        text-transform:uppercase;
        padding:0.5em !important;
        color:#CC0000;
    }
    .breadcrumb li a:hover {
        color:#000000;
    }
    .breadcrumb li:after {
        content: " / ";
    }
</style>

</head>

<body>

<ul class="breadcrumb">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
</ul>

</body>
</html>

Zicky

Hi Zicky,

Your CSS does almost the same as mine except that it does not appear inline but as a list. After once I replace part of my original (below) to your CSS it makes it inline.

    .breadcrumb li ul {      display: inline;      margin: 0;      padding: 0;      float: left;    }

HOWEVER, the breadcrumb display generated by  CMSB still appears in reverse order. Clearly the solution has to be in the CSS which I cannot locate so I am wondering whether there is an equivalent to an orderBy where clause to make the breadcrumb appear in the correct sequence.

Thanks

Terry

By Mikey - October 10, 2017

View the source code from your browser, copy and paste into the thread, and I'll take a look at what the final results of what's generated and used on the web page displayed. That's where I would start to rectify the issues with the CSS, because it may be that something on the php generating the list is introducing additional ul and li elements.

Okay, I found the problem style ... I removed the float:left and everything is back in the correct sequence.

Why that should affect the CMSB output I have no idea but it works.

Terry

By Mikey - October 10, 2017

Yea - I had a feeling float-left was the issue originally.

It really doesn't effect the actually CMSB output, but instead rearranges the outputted data in reverse because items where already displayed inline, and with float-left added it was reversing the display of data in the browser.

It behaves differently in this instance to previous ones I've designed. But ... I used it primarily to float div's not nested lists.

Thanks for your help Zicky.