Breadcrumb displaying in reverse order
7 posts by 2 authors in: Forums > CMS Builder
Last Post: October 10, 2017 (RSS)
By terryally - October 7, 2017
Hi Dave,
My breadcrumb is displaying in reverse order when I style it hroizontally. If I left it as an unordered list, it would be correct.
Rather than getting Projects >> 2015-2020 >> City >> Main Square. I am getting Main Square >> City >> 2015-2020 >> Projects.
How do I rectify this? My CMSB code is:
<?php
$ThisPage = $_SERVER['REQUEST_URI'];
$NumberOfHyphens = substr_count($ThisPage, "-");
$ThisPageQueryString = explode("?", $ThisPage);
if($NumberOfHyphens = 0) {
$ProjName = $ThisPageQueryString[1];
} else {
$ProjName = str_replace("-", " ", $ThisPageQueryString[1]);
}
// load record from 'navigation_menu'
list($navigation_menuRecords, $navigation_menuMetaData) = getRecords(array(
'tableName' => 'navigation_menu',
'limit' => '1',
'where'=> 'name="'.$ProjName.'"',
));
$navigation_menuRecord = @$navigation_menuRecords[0]; // get first record
$CurrentPageNum = $navigation_menuRecord['num'];
// load records from 'navigation_menu'
list($navigation_menuRecords, $selectedNavigation_menu) = getCategories(array(
'tableName' => 'navigation_menu',
'categoryFormat' => 'breadcrumb',
'selectedCategoryNum' => $CurrentPageNum,
));
?>
<ul class="breadcrumb">
<?php foreach ($navigation_menuRecords as $categoryRecord): ?>
<?php echo $categoryRecord['_listItemStart'] ?>
<?php if ($categoryRecord['_isSelected']): ?>
<b><a href="<?php echo $categoryRecord['_link'] ?>"><?php echo $categoryRecord['name'] ?></a></b>
<?php else: ?>
<a href="<?php echo $categoryRecord['_link'] ?>"><?php echo $categoryRecord['name'] ?></a>
<?php endif; ?>
<?php echo $categoryRecord['_listItemEnd'] ?>
<?php endforeach; ?>
</ul>
My CSS is:
.breadcrumb li ul {
display: inline;
margin: 0;
padding: 0;
float: left;
}
.breadcrumb li {
list-style-type: none;
}
.breadcrumb li ul li {
padding-right: 10px;
}
.breadcrumb li ul li:after {
content: " > ";
font-weight: bold;
font-size: 75%;
font-family: 'Arial Black';
}
Thanks
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.