Hier finden sich nützliche HTML- und CSS-Elemente um Web-Seiten zu gestalten.
Fixed Header#
CSS:body { margin: 0; padding: 90px 0 0 0; } div#header { position: absolute; top: 0; left: 0; width: 100%; height: 90px; } @media screen { body>div#header { position: fixed; background-color: white; } } * html body { overflow: hidden; } * html div#content { height: 100%; overflow: auto; }HTML:
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" <header> ... </header> <body> <div id="header"> ... <div> <div id="content"> ... </div> </body> </html>
Element Layout#
Ab und zu braucht man ein Layout innerhalb eines DIV-Elements oder anders gearteten Panels. Das kann folgendermaßen erreicht werden:<div style="display: inline-block; width: 100%; height: 100%;"> <div style="float: left;"/> <div style="float: left;"/> <div style="float: right;"/> </div>
Es brauchen nur benötigte Elemente angegeben werden.