Popup-Box mit scrollbarer Tabelle |
| So sieht´s aus |
|
Contact
Keep in touch! |
| Quellcode |
<html>
<head> <style type="text/css"> .button {font-size: 1em; padding: 10px; color: yellow; border: 2px solid #06D85F; Background-color: #06D85F; border-radius: 20px/50px; text-decoration: none; cursor: pointer; transition: all 0.3s ease-out;} .button:hover {background: cyan; color: fuchsia;} .overlay {position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: black; transition: opacity 500ms; visibility: hidden; opacity: 0;} .overlay:target {visibility: visible; opacity: 1;} .popup {margin: 70px auto; text-align:left; padding: 20px; background: lightgrey; border-radius: 5px; width: 50%; position: relative; transition: all 5s ease-in-out;} .popup h2 {margin-top: 0; color: green; font-family: Tahoma, Arial, sans-serif;} .popup .close {position: absolute; top: 20px; right: 30px; transition: all 200ms; font-size: 2em; font-weight: bold; text-decoration: none; color: #333;} .popup .close:hover {color: #06D85F;} .popup .content {min-height: 30%; overflow: auto; text-align:left;} @media screen and (max-width: 700px){ .box{width: 70%;} .popup{width: 70%;} } #products-table {overflow:scroll;} td {border-width:1px;border-color:gray} </style> </head> <body > <center> <div class="box"><a class="button" href="#popup1">Zeige das Popup</a></div> <div id="popup1" class="overlay"><div class="popup"> <h2>html knowhow</h2><a class="close" href="#">×</a> <center> <div class="content"> <a href="../index.php"><img src="../Bilder/HKhlogo.jpg" style="width: 20%; float:left; height:auto; padding-right:20px" alt="diedVIPs" /></a> Htmlknowhow möchte Ihnen keine Lehrstunde in html, css oder Java geben, sondern ganz praktische Tipps, wie Sie ihre Homepage optisch und inhaltlich verbessern können. <br/> Html, CSS und Java bieten da super Möglichkeiten der Webseiten-Gestaltung.<br/> Bevor Sie aber mit Ihrem Homepage-Projekt beginnen, sollten Sie sich über Grundsätzliches informieren, damit Sie wissen, was alles auf Sie zukommt. Ich gebe Homepage-Designern Tipps, wie sie ihren Webauftritt verbessern können. <div style="width:100%; height:150px; overflow:auto;border:1px;border-color:blue" > <table style="width: 100%" cellpadding="2" cellspacing="0" class="auto-style14"> <tr><td class="auto-style13" style="height: 30px;"><strong>Quellcode</strong></td></tr> <tr><td class="auto-style11" valign="top"> <html><br /> <head><br /> <style type="text/css"><br>.header {position: fixed;top: 0;z-index: 1;width: 100%;background-color: #f1f1f1;}<br>.header h2 {text-align: center;}<br>.progress-container {width: 100%;height: 8px;background: #ccc;}<br> .progress-bar {height: 8px;background: #04AA6D;width: 0%;}<br>.content {padding: 100px 0;margin: 50px auto 0 auto;width: 80%;}<br></style><br /> </head><br /> <br /> <body ><br /> <div class="header"><br><h2>Scroll-Fortschritts-Anzeiger</h2><br><div class="progress-container"><br> <div class="progress-bar" id="myBar"></div><br></div> </div><br><div class="content"><br> .... Hier das, was Sie scrollen lassen ...<br></div><br></body><br /> <br /> </html><br /> </td></tr> </table><br/></div> </div></div></div> </body> </html> |
Kontakt Datenschutz Impressum |