Breadcrumb Types

myquel_ieans · November 30, 2022, 5:17am

Welcome to the Get Help category!

This is where you can ask questions about your code. Some important things to remember when posting in this category

Learn how to ask a good question and get a good answer!
Remember to include a link to the exercise you need help with!
If someone answers your question, please mark their response as a solution
Once you understand a new concept, come back and try to help someone else!

My question begins with this code:

.breadcrumb {
text-align: left;
}
.breadcrumb li {
float: left;
}

.breadcrumb a {
color: #fff;
background: darkcyan;
text-decoration: none;
position: relative;
height: 30px;
line-height: 30px;
text-align: center;
margin-right: 15px;
padding: 0 5px;
}

.breadcrumb a::before,
.breadcrumb a::after {
content: “/”;
position: absolute;
border-color: darkcyan;
border-style: solid;
border-width: 15px 5px;
}

.breadcrumb a::before {
left: -10px;
border-left-color: transparent;
}
.breadcrumb a::after {
left: 100%;
}

.breadcrumb a::after {
left: 100%;
border-color: transparent;
border-left-color: darkcyan;
}

.breadcrumb a:hover {
background-color: blue;
}
.breadcrumb a:hover::before {
border-color: blue;
border-left-color: transparent;
}
.breadcrumb a:hover::after {
border-left-color: blue;
}

the above code is CSS for secondary learning of navigation and it was supposed to teach Breadcrumb Styles. my problem is that I went through all the needed edits for the code in the project and it said I was correct but I saw no change in the outcome product of the website. was it me or is it the website? please send help.

mtf · November 30, 2022, 6:23am

Sending this question your way, ‘what is a breadcrumb?’

myquel_ieans · November 30, 2022, 7:19pm

a breadcrumb (from my understanding) is a type of class in CSS that you can connect to your HTML and make it a button of some sort… i don’t have a lot of understanding.

mtf · November 30, 2022, 9:14pm

Remember ‘Hansel and Gretel’ and the way they were able to find their way home out of the forest? That is where we get the idea of ‘breadcrumbs’ from, or one story, anyway. In a webpage they are links back to pages we’ve already seen or may have followed deeper into a site.

joshuagillispie · January 2, 2023, 1:24am

Hello! Could someone please assist me in understanding something.

I’m currently in the breadcrumbs styles lesson in the Front-End Engineer Career Path.

The lesson is teaching how to style breadcrumbs by using CSS styles to hide and manipulate parts of the background to create a arrow-like background behind the breadcrumbs… My confusion is why does the CSS make the transparent parts triangles?

I edited the code from the lesson for my own understanding so the transparent parts are now visible. I’m just confused why they show up as triangles and if they could be changed to other shapes.

Here is the CSS:
.breadcrumb {
text-align: left;
}
.breadcrumb li {
float: left;
}

.breadcrumb a {
color: #fff;
background: darkcyan;
text-decoration: none;
position: relative;
height: 30px;
line-height: 30px;
text-align: center;
margin-right: 15px;
padding: 0 5px;
}

.breadcrumb a::before,
.breadcrumb a::after {
content: “”;
position: absolute;
border-color: darkcyan;
border-style: solid;
border-width: 15px 5px;
}

.breadcrumb a::before {
left: -10px;
border-left-color: orange;
}

.breadcrumb a::after {
left: 100%;
border-color: transparent;
border-left-color: green;
}

.breadcrumb a:hover {
background-color: blue;
}

.breadcrumb a:hover::before {
border-color: blue;
border-left-color: cyan;
}

.breadcrumb a:hover::after {
border-left-color: blue;
}

and the HTML from the lesson:

<title>Hotels In Singapore</title>

<link href="https://fonts.googleapis.com/css?family=Catamaran:100|Pontano+Sans|Ruda:900" rel="stylesheet">

<link rel="stylesheet" type="text/css" href="./style.css">
<link rel="stylesheet" type="text/css" href="./breadcrumb.css">

Hotels In Singapore

Asia
Singapore
Tourism
Hotels

  <div class="hotel-description">
    <ul>
      <li>
        <h2>Raffles Hotel</h2>
      </li>
      <li>
        <h3>$500/night</h3>
      </li>
      <li>
        <p>Raffles Hotel is a colonial-style luxury hotel in Singapore. It was established by Armenian hoteliers, the Sarkies
          Brothers, in 1887. The hotel was named after British statesman Sir Thomas Stamford Raffles, the founder of
          Singapore. It is the flagship property of Raffles Hotels & Resorts, a subsidiary of Fairmont Raffles Hotels
          International.</p>
      </li>
    </ul>
  </div>
  <div class="book">
    <a href="#">Book Now</a>
  </div>
</div>

<div class="hotel">
  <div class="hotel-img">
    <img src="https://content.codecademy.com/courses/ui-breadcrumbs/conradintl.jpg" width="250px">
  </div>

  <div class="hotel-description">
    <ul>
      <li>
        <h2>Conrad Centennial Singapore</h2>
      </li>
      <li>
        <h3>$400/night</h3>
      </li>
      <li>
        <p>Located in the Downtown Core (near Millenia Tower), Marina Centre, Singapore. The hotel has 507 guestrooms including
          25 suites, and 31 floors with two basements. The hotel's carpark is shared with Millenia Walk. Conrad Centennial
          shares the same laundry services with sister hotel, The Ritz-Carlton Millenia Singapore. Both hotels are owned
          by the same owner, Pontiac Land (owned by the Kwee brothers).</p>
      </li>
    </ul>
  </div>
  <div class="book">
    <a href="#">Book Now</a>
  </div>
</div>

<div class="hotel">
  <div class="hotel-img">
    <img src="https://content.codecademy.com/courses/ui-breadcrumbs/damenlou.jpg" width="250px">
  </div>

  <div class="hotel-description">
    <ul>
      <li>
        <h2>Damenlou Hotel</h2>
      </li>
      <li>
        <h3>$300/night</h3>
      </li>
      <li>
        <p>Damenlou Hotel is a small hotel located at Ann Siang Road, in Chinatown, within the Central Area of Singapore.Damenlou
          Hotel's origins can be traced to the creation of the dish of fishhead mifen (rice vermicelli), which was invented
          by Tang Kwong Swee in the 1920s. The hotel had a famous restaurant, named Swee Kee.</p>
      </li>
    </ul>
  </div>
  <div class="book">
    <a href="#">Book Now</a>
  </div>
</div>

<div class="hotel">
  <div class="hotel-img">
    <img src="https://content.codecademy.com/courses/ui-breadcrumbs/shangrila.jpg" width="250px">
  </div>

  <div class="hotel-description">
    <ul>
      <li>
        <h2>Shangri-La Hotel Singapore</h2>
      </li>
      <li>
        <h3>$200/night</h3>
      </li>
      <li>
        <p>The hotel has 747 guestrooms and suites spread over the Tower Wing, Garden Wing and Valley Wing, 127 serviced
          apartments and 55 luxurious condominium units. The hotel boasts 15 acres of landscaped gardens which are visible
          through the glass walls enclosing the lobby and dining areas, and has been referred to as "Singapore's other
          botanical garden".</p>
      </li>
    </ul>
  </div>
  <div class="book">
    <a href="#">Book Now</a>
  </div>
</div>

<div class="hotel">
  <div class="hotel-img">
    <img src="https://content.codecademy.com/courses/ui-breadcrumbs/swissotel.jpg" width="250px">
  </div>

  <div class="hotel-description">
    <ul>
      <li>
        <h2>Swissotel The Stamford</h2>
      </li>
      <li>
        <h3>$100/night</h3>
      </li>
      <li>
        <p>Designed by architect I.M. Pei, at a height of 226 meters it is one of Southeast Asia's tallest hotels. Situated
          at 2 Stamford Road, the hotel sits above City Hall MRT Station. The 5-star hotel has 1,261 rooms and suites,
          16 restaurants and bars, Raffles City Convention Centre, and one of Asia's largest spas.</p>
      </li>
    </ul>
  </div>
  <div class="book">
    <a href="#">Book Now</a>
  </div>
</div>

Any help would be greatly appreciated. I’m very confused on this.

system · February 12, 2023, 5:24pm

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.