HTML-CSS: List with floating section headings

Last update on March 07 2024 13:22:40 (UTC/GMT +8 hours)

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.