Need HTML? Want to use CSS (cascading style sheets)? Need a touch of help with Javascript, Java, or other coding language? Whether through SBI!'s BlockBuilder 2 or your own HTML Editor, post here. Push the envelope. Learn basics (ex., how to format your text, add tables) or go as "out there" as you like. Problems? Questions? Help and be helped.

Moderators: Laura from Chautauqua, Will from Los Ojos

#1367318 by Mary from Mico
Mon Mar 20, 2017 9:17 pm
Hello all,

I need help with aligning my breadcrumb codes with my left margin.

Also, I see that if I put a second set of breadcrumbs the second set seems indented to the right. I've played with the -40 (tried -30 and now -60) and may not have waited long enough because I do not see the changes yet. The code did change from a numerated list, so that works.

http://sbitips.sitesell.com/breadcrumb-navigation.html

Half way down:

In Add Custom CSS in Site Designer, add this code...


Code: Select all#BreadCrumb ol {
list-style-type:none;
}

#BreadCrumb ol li {
display:inline;
}

#Breadcrumb ol li:first-child {
margin-left:-40px;
}


Note: You may have to change the -40px number to get the first crumb (the home page) to line up with the left edge of the content.


Here is a page that has a multiple breadcrumb code about 3/4 the way down ( :oops: I did not realize how heavy the bottom of my content column and footer are). I've just refreshed the page at the 15 minute mark:

[Domain Private]

Thank you for your help.

Mary
#1367322 by Juri from plainlight.com
Mon Mar 20, 2017 10:13 pm
Hi Mary,

There are some issues with your <div> HTML code which should look like following. Replace your existing Raw HTML block with this:

Code: Select all<div id="BreadCrumb">
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" style="list-style:none;">
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" style="display:inline;">
<a itemprop="item" href="[Domain Private]">
<span itemprop="name">Saint Anne's Helper</span></a>
<meta itemprop="position" content="1">
</li>
&nbsp;›
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" style="display:inline;">
<a itemprop="item" href="[Domain Private]/catholic-prayers.html">
<span itemprop="name">Catholic Prayers</span></a>
<meta itemprop="position" content="2">
</li>
&nbsp;›
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" style="display:inline;">
<a itemprop="item" href="[Domain Private]/prayer-to-st-joseph.html">
<span itemprop="name">Prayer To St Joseph</span></a>
<meta itemprop="position" content="3">
</li></ol>
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" style="list-style:none;">
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" style="display:inline;">
<a itemprop="item" href="[Domain Private]">
<span itemprop="name">Saint Anne's Helper</span></a>
<meta itemprop="position" content="1">
</li>
&nbsp;›
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" style="display:inline;">
<a itemprop="item" href="[Domain Private]/catholic-coloring-pages.html">
<span itemprop="name">Hundreds of Coloring Pages</span></a>
<meta itemprop="position" content="2">
</li>
&nbsp;›
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" style="display:inline;">
<a itemprop="item" href="[Domain Private]/prayer-to-st-joseph.html">
<span itemprop="name">Prayer To St Joseph</span></a>
<meta itemprop="position" content="3">
</li>
</ol>
</div>

This would place both trails under each other.

To left-align them with the rest of your content, you need another style rule, the one with the margin, which seems absent from your current configuration.

In SiteDesigner, it should look like

Code: Select all#BreadCrumb ol li:first-child {
margin-left: -54px;
}

If you want to test it on this page only, include the following at the bottom of This Page Only section of the Head:

Code: Select all<style type="text/css">
#BreadCrumb ol li:first-child {
margin-left: -54px;
}
</style>

I must say, this is a very busy page.

Kind regards,
J.
#1367330 by Mary from Mico
Mon Mar 20, 2017 11:05 pm
Awesome help Juri!

I'll give these a try.

Again, thank you for your very quick and professional help.

Mary
#1367348 by Mary from Mico
Tue Mar 21, 2017 2:03 am
Hi Juri,

I had a note drafted and simply x'd the page. I hope I can resurrect what I'd had. Thank you so much for what you've provided.

1. The first code worked. The two trails now line up under each other. I notice several different codes from what the breadcrumb article had:

    * The itemscope has " "
    * The > has extra ABCs
    * My list did not have the end for the first list
    * And something else I cannot remember.

Would there be any functionality difference from using the code in the article, compared to using what you placed? Perhaps someday I (or some fabulous tech-wizard) could add something sitewide to the " "?

Is the main difference that the first line changed from a class for Return to Nav to an id for Breadcrumbs?

I'll have to change this on all the T2s and a few T3s that I've already re-coded, so it would be nice if I could simply replace that first line (there are no other multi trail breadcrumbs yet).

2. Something's wrong because I did already have the margin code placed in the CSS. I do not know why it is not working or what to change. How do you see my CSS? Is there a way to see it from a visitor's perspective. The code is there. I changed it to -54 while I was there according to your note. I've refreshed the page and the two trails do not yet align to the left margin. For your convenience:

[Domain Private]

3. Yes. The page is busy. Thank you for your observation. All suggestions are welcome. :-)

Again, thank you so much.

Mary
#1367364 by Juri from plainlight.com
Tue Mar 21, 2017 10:46 am
Mary from Mico wrote:Would there be any functionality difference from using the code in the article, compared to using what you placed?

This is exactly the code previously used by you, with the class replaced with the id and corrected tag order.

    This was necessary because apparently you style #BreadCrumb and not .ReturnToNavBox, which still is mentioned in one of the illustrations in the article.
Mary from Mico wrote:Is the main difference that the first line changed from a class for Return to Nav to an id for Breadcrumbs?

Yes, because you added some CSS from the article to your template in SiteDesigner, and these rules refer to #BreadCrumb.

Mary from Mico wrote:How do you see my CSS?

When I click on an element on the page, I can see all style rules applied to it in the developer console in my browser. I can also see all resource files loaded with your page.

Mary from Mico wrote:The code is there. I changed it to -54

That's what is there:
Code: Select all#Breadcrumb ol li:first-child {
   margin-left:-54px
}

Unfortunately, CSS rules are case-sensitive. The rule has to read #BreadCrumb ... in order to work.

Kind regards,
J.
#1367374 by Mary from Mico
Tue Mar 21, 2017 2:23 pm
Thank you Juri!

I'll correct that CSS now. Yea! It worked.

May I send quotes from your notes to Support to let them know so they can make the changes?

Thank you so much!

Mary
Similar Topics Statistics Last post
Breadcrmb CSS Code: Inventing A T4
by Mary from Mico Mon Mar 20, 2017 10:18 pm
2 Replies
323 Views
by Mary from Mico
Mon Mar 20, 2017 11:53 pm
Need coding to remove navbar and side bar from Cityscape template
by Stonehouse from Marshfield Sun Feb 26, 2017 7:49 pm
3 Replies
786 Views
by Juri from plainlight.com
Sun Feb 26, 2017 9:30 pm
Re: Please, need help with a little coding!
1, 2 by Juri from plainlight.com Tue Jan 31, 2017 12:55 pm
26 Replies
3284 Views
by Judith from Quarryville
Mon Feb 06, 2017 11:45 pm
What is CSS?
by Kathy from Mintaro Thu Mar 16, 2017 7:01 am
1 Replies
376 Views
by Jacki from Macleod
Thu Mar 16, 2017 4:05 pm
Javascript Code for Geniuslink Not Working?
1, 2 by Troy from Gowar East Fri Jan 06, 2017 6:55 am
15 Replies
1712 Views
by Judith from Quarryville
Sun Mar 26, 2017 9:42 pm

Users browsing this forum: No registered users and 3 guests