Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <body>
- <style>
- .row {
- float:left;
- border: 1px solid yellow;
- width: 100%;
- overflow: auto;
- }
- .cell {
- float: left;
- border: 1px solid red;
- width: 200px;
- height: 100px;
- }
- </style>
- <div class="row">
- <div class="cell">a</div>
- <div class="cell">b</div>
- <div class="cell">c</div>
- </div>
- </body>
- </html>
- <html>
- <body>
- <style>
- .row {
- float:left;
- border: 1px solid yellow;
- width: 100%;
- overflow: auto;
- white-space: nowrap;
- }
- .cell {
- display: inline-block;
- border: 1px solid red;
- width: 200px;
- height: 100px;
- }
- </style>
- <div class="row">
- <div class="cell">a</div>
- <div class="cell">b</div>
- <div class="cell">c</div>
- </div>
- </body>
- </html>
- <?xml version="1.0" encoding="UTF-8"?>
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
- <head>
- <title>XHTML5 Menu Demonstration</title>
- <style type="text/css">
- * {border: 0; box-sizing: content-box; color: #f0f; font-size: 10px; margin: 0; padding: 0; transition-property: background-color, background-image, border, box-shadow, color, float, opacity, text-align, text-shadow; transition-duration: 0.5s; white-space: nowrap;}
- a:link {color: #79b; text-decoration: none;}
- a:visited {color: #579;}
- a:focus, a:hover {color: #fff; text-decoration: underline;}
- body {background-color: #444; overflow-x: hidden;}
- body > header {background-color: #000; height: 64px; left: 0; position: absolute; right: 0; z-index: 2;}
- body > header > nav {height: 32px; margin-left: 16px;}
- body > header > nav a {font-size: 24px;}
- main {border-color: transparent; border-style: solid; border-width: 64px 0 0; bottom: 0px; left: 0; overflow-x: hidden !important; overflow-y: auto; position: absolute; right: 0; top: 0; z-index: 1;}
- main > * > * {background-color: #000;}
- main > section {float: left; margin-top: 16px; width: 100%;}
- nav[id='menu'] {overflow: visible; width: 20000px;}
- nav[id='menu'] > ul {height: 32px;}
- nav[id='menu'] > ul > li {float: left; width: 140px;}
- nav[id='menu'] > ul > li > ul {background-color: rgba(0, 0, 0, 0.8); display: none; margin-left: -50px; width: 240px;}
- nav[id='menu'] a {display: block; height: 32px; line-height: 32px; text-align: center; white-space: nowrap;}
- nav[id='menu'] > ul {float: left; list-style:none;}
- nav[id='menu'] ul li:hover ul {display: block;}
- p, p *, span, span * {color: #fff;}
- p {font-size: 20px; margin: 0 14px 0 14px; padding-bottom: 14px; text-indent: 1.5em;}
- .hidden {display: none;}
- .width_100 {width: 100%;}
- </style>
- </head>
- <body>
- <main>
- <section style="height: 2000px;"><p>Hover the first menu at the top-left.</p></section>
- </main>
- <header>
- <nav id="location"><a href="">Example</a><span> - </span><a href="">Blog</a><span> - </span><a href="">Browser Market Share</a></nav>
- <nav id="menu">
- <ul>
- <li><a href="" tabindex="2">Menu 1 - Hover</a>
- <ul>
- <li><a href="" tabindex="2">Menu 1 B</a></li>
- <li><a href="" tabindex="2">Menu 1 B</a></li>
- <li><a href="" tabindex="2">Menu 1 B</a></li>
- <li><a href="" tabindex="2">Menu 1 B</a></li>
- <li><a href="" tabindex="2">Menu 1 B</a></li>
- <li><a href="" tabindex="2">Menu 1 B</a></li>
- <li><a href="" tabindex="2">Menu 1 B</a></li>
- <li><a href="" tabindex="2">Menu 1 B</a></li>
- </ul>
- </li>
- <li><a href="" tabindex="2">Menu 2</a></li>
- <li><a href="" tabindex="2">Menu 3</a></li>
- <li><a href="" tabindex="2">Menu 4</a></li>
- <li><a href="" tabindex="2">Menu 5</a></li>
- <li><a href="" tabindex="2">Menu 6</a></li>
- <li><a href="" tabindex="2">Menu 7</a></li>
- <li><a href="" tabindex="2">Menu 8</a></li>
- <li><a href="" tabindex="2">Menu 9</a></li>
- <li><a href="" tabindex="2">Menu 10</a></li>
- <li><a href="" tabindex="2">Menu 11</a></li>
- <li><a href="" tabindex="2">Menu 12</a></li>
- <li><a href="" tabindex="2">Menu 13</a></li>
- <li><a href="" tabindex="2">Menu 14</a></li>
- <li><a href="" tabindex="2">Menu 15</a></li>
- <li><a href="" tabindex="2">Menu 16</a></li>
- <li><a href="" tabindex="2">Menu 17</a></li>
- <li><a href="" tabindex="2">Menu 18</a></li>
- </ul>
- </nav>
- </header>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement