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.