Intersult: HTML

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.

Links#

Layout