w3resource

HTML-CSS: List with floating section headings

HTML-CSS : Exercise-5 with Solution

Using HTML, CSS create a list with floating headings for each section.

  • Use overflow-y: auto to allow the list container to overflow vertically.
  • Use display: grid on the inner container (<dl>) to create a layout with two columns.
  • Set headings (<dt>) to grid-column: 1 and content (<dd>) to grid-column: 2.
  • Finally, apply position: sticky and top: 0.5rem to headings to create a floating effect.

HTML Code:

<!--License: https://bit.ly/3GjrtVF--><!-- License information -->
<!DOCTYPE html><!-- Document type declaration -->
<html><!-- Opening HTML tag -->
<head><!-- Head section containing metadata -->
<meta charset="utf-8"><!-- Character encoding declaration -->
<meta name="viewport" content="width=device-width"><!-- Viewport meta tag for responsive design -->
<title>Using HTML, CSS create a list with floating headings for each section</title><!-- Title of the HTML document -->
</head><!-- Closing head tag -->
<body><!-- Body section of the HTML document -->
<strong>Preview:</strong><!-- Strong tag for emphasizing the preview label -->
<div class="container"><!-- Opening div container with class container -->
<div class="floating-stack"><!-- Opening div floating-stack with class floating-stack -->
<dl><!-- Definition list tag -->
<dt>A</dt><!-- Definition term for section A -->
<dd>Aaban</dd><!-- Definition description for item Aaban -->
<dd>Aabel</dd><!-- Definition description for item Aabel -->
<dd>Aabheer</dd><!-- Definition description for item Aabheer -->
<dd>Aadam</dd><!-- Definition description for item Aadam -->

<dt>B</dt><!-- Definition term for section B -->
<dd>Baabul</dd><!-- Definition description for item Baabul -->
<dd>Baalaji</dd><!-- Definition description for item Baalaji -->
<dd>Baalkrishan</dd><!-- Definition description for item Baalkrishan -->
<dd>Baanke Bihaari</dd><!-- Definition description for item Baanke Bihaari -->

<dt>C</dt><!-- Definition term for section C -->
<dd>Caddam</dd><!-- Definition description for item Caddam -->
<dd>Cameroon</dd><!-- Definition description for item Cameroon -->
<dd>Campbell</dd><!-- Definition description for item Campbell -->
<dd>Cane</dd><!-- Definition description for item Cane -->

<dt>D</dt><!-- Definition term for section D -->
<dd>Daanesh</dd><!-- Definition description for item Daanesh -->
<dd>Dadvar</dd><!-- Definition description for item Dadvar -->
<dd>Daghan</dd><!-- Definition description for item Daghan -->
<dd>Daivya</dd><!-- Definition description for item Daivya -->
<dd>Daamini</dd><!-- Definition description for item Daamini -->

<dt>E</dt><!-- Definition term for section E -->
<dd>Eadmer</dd><!-- Definition description for item Eadmer -->
<dd>Earnest</dd><!-- Definition description for item Earnest -->
<dd>Eddward</dd><!-- Definition description for item Eddward -->
<dd>Edmond</dd><!-- Definition description for item Edmond -->
</dl><!-- Closing definition list tag -->
</div><!-- Closing div floating-stack -->
</div><!-- Closing div container -->
</body><!-- Closing body tag -->
</html><!-- Closing HTML tag -->

Explanation:

  • The HTML document contains a list with floating headings for each section.
  • The data is organized using a definition list (<dl>), where each term (<dt>) represents a section heading and each description (<dd>) represents an item within that section.
  • Comments are provided to explain each section of the HTML code, including the purpose of each element and attribute.

CSS Code:

<style> /* Opening style tag for CSS */

.container {
  display: grid; /* Use grid layout for the container */
  place-items: center; /* Center the items within the grid */
  min-height: 400px; /* Set minimum height for the container */
}

.floating-stack {
  background: #3365a4; /* Set background color for the floating stack */
  color: #fff; /* Set text color to white */
  height: 80vh; /* Set height of the floating stack */
  width: 320px; /* Set width of the floating stack */
  border-radius: 1rem; /* Apply border radius for rounded corners */
  overflow-y: auto; /* Enable vertical scrolling when content exceeds container height */
}

.floating-stack > dl {
  margin: 0 0 1rem; /* Set margin for the definition list */
  display: grid; /* Use grid layout for the definition list */
  grid-template-columns: 2.5rem 1fr; /* Set grid columns for the definition list */
  align-items: center; /* Align items vertically in the grid */
}

.floating-stack dt {
  position: sticky; /* Make the term sticky */
  top: 0.5rem; /* Position the term from the top */
  left: 0.5rem; /* Position the term from the left */
  font-weight: bold; /* Set font weight to bold for the term */
  background: #263238; /* Set background color for the term */
  color: #cfd8dc; /* Set text color for the term */
  height: 2rem; /* Set height for the term */
  width: 2rem; /* Set width for the term */
  border-radius: 50%; /* Apply border radius for rounded shape */
  padding: 0.25rem 1rem; /* Set padding for the term */
  grid-column: 1; /* Position the term in the first column of the grid */
  display: inline-flex; /* Use inline flexbox layout */
  align-items: center; /* Align items vertically within the term */
  justify-content: center; /* Center content horizontally within the term */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.floating-stack dd {
  grid-column: 2; /* Position the description in the second column of the grid */
  margin: 0; /* Remove margin for the description */
  padding: 0.75rem; /* Set padding for the description */
}

.floating-stack > dl:first-of-type > dd:first-of-type {
  margin-top: 0.25rem; /* Set margin-top for the first description in the first definition list */
}

</style> /* Closing style tag */

Explanation:

  • The CSS code defines styles for a container and a floating stack with a list of terms and descriptions.
  • Comments are provided to explain each section of the CSS code, including the purpose of each rule and its styling effects.
  • The container is styled to use grid layout and center its items.
  • The floating stack has a background color, rounded corners, and vertical scrolling for overflow content.
  • Definition list items (dt and dd) are styled to be displayed in a grid layout with specific column sizes.
  • Sticky positioning is applied to the terms (dt) to keep them fixed when scrolling.
  • The first description in the first definition list has a margin-top to separate it from the stack's top edge.

HTML-CSS Editor:

See the Pen html-css-practical-exercises by w3resource (@w3resource) on CodePen.


What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Follow us on Facebook and Twitter for latest update.