DRAFT
To be Studied: Scrollable Width Code Box WRAPPER

on
https://copilot.microsoft.com/shares/pLWdbxwkv6ZCEtbmTzXsQ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Scrollable Width Code Box</title>
  <style>
    .shaded-box {
      background-color: #f5f5f5; /* light gray shade */
      border: 1px solid #ccc;
      padding: 15px;
      border-radius: 6px;
      overflow-x: auto;   /* horizontal scroll */
      overflow-y: visible; /* full height, no vertical scroll */
      white-space: nowrap; /* keep code in one line horizontally */
    }
    pre {
      margin: 0;
      font-family: Consolas, Monaco, monospace;
      font-size: 14px;
      line-height: 1.5;
      white-space: pre; /* preserve formatting */
    }
    .tag { color: #008000; }
    .attribute { color: #0000ff; }
    .value { color: #a31515; }
    .comment { color: #808080; font-style: italic; }
  </style>
</head>
<body>
  <div class="shaded-box">
    <pre><code>
<div class='code-box'>
<span class='tag'>&lt;nav</span> <span class='attribute'>style</span>=<span class='value'>"background-color: #333; padding: 10px;"</span><span class='tag'>&gt;</span><br/>
<span class='comment'>&lt;!--^     ^                                                 ^</span><br/>
<span class='comment'>element |                                                 |</span><br/>
<span class='comment'>      attribute (style)                                   |</span><br/>
<span class='comment'>                                                    |</span><br/>
<span class='comment'>    &lt;a href="/" style="color: white; margin: 0 10px;"&gt;Home&lt;/a&gt;</span><br/>
<span class='comment'>&lt;!-- ^   ^        ^                          ^</span><br/>
<span class='comment'>    element     attribute (href)           CSS property</span><br/>
<span class='comment'>                (destination)              (color: white)  --&gt;</span><br/>
    <span class='tag'>&lt;a</span> <span class='attribute'>href</span>=<span class='value'>"/"</span> <span class='attribute'>style</span>=<span class='value'>"color: white; margin: 0 10px;"</span><span class='tag'>&gt;</span>Home<span class='tag'>&lt;/a&gt;</span><br/>
    <span class='tag'>&lt;a</span> <span class='attribute'>href</span>=<span class='value'>"/about"</span> <span class='attribute'>style</span>=<span class='value'>"color: white; margin: 0 10px;"</span><span class='tag'>&gt;</span>About<span class='tag'>&lt;/a&gt;</span><br/>
    <span class='tag'>&lt;a</span> <span class='attribute'>href</span>=<span class='value'>"/contact"</span> <span class='attribute'>style</span>=<span class='value'>"color: white; margin: 0 10px;"</span><span class='tag'>&gt;</span>Contact<span class='tag'>&lt;/a&gt;</span><br/>
<span class='tag'>&lt;/nav&gt;</span>
</div>
    </code></pre>
  </div>
</body>
</html>
Scrollable Width Code Box 



<nav style="background-color: #333; padding: 10px;">

<!--^ ^ ^

element | |

 attribute (style) |

 |

 <a href="/" style="color: white; margin: 0 10px;">Home</a>

<!-- ^ ^ ^ ^

 element attribute (href) CSS property

 (destination) (color: white) -->

    <a href="/" style="color: white; margin: 0 10px;">Home</a>

    <a href="/about" style="color: white; margin: 0 10px;">About</a>

    <a href="/contact" style="color: white; margin: 0 10px;">Contact</a>

</nav>

Comments

Post a Comment