michaelsinterface.de
css.layout
- In diesem Experiment stelle ich CSS-gestützte Modelle für (tabellenlose) Seiten-Layouts vor.
"position"-Techniken
position.01
-
Online-Demo
Quellcode
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>:::css.layout | position.01:::</title>
<style type="text/css"><!--
div.centerDiv {
position:absolute;
left:50%;
width:650px;
margin-left:-325px;
top:50%;
height:360px;
margin-top:-180px;
background:#eee;
border:1px solid #607b9e;
}
--></style>
</head>
<body>
<div class="centerDiv">
<p>.centerDiv</p>
</div>
</body>
</html>
position.02
- Online-Demo
Quellcode
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>:::css.layout | position.02:::</title>
<style type="text/css"><!--
div.contentDiv {
position:relative;
left:50%;
width:650px;
height:98px;
margin-left:-325px;
margin-top:20px;
background: #eee;
border: 1px solid #607b9e;
}
--></style>
</head>
<body>
<div class="contentDiv">
<p>multiple rows</p>
</div>
<div class="contentDiv">
<p>.contentDiv</p>
</div>
<div class="contentDiv">
<p>.contentDiv</p>
</div>
<div class="contentDiv">
<p>.contentDiv</p>
</div>
</body>
</html>
position.03
- Online-DemoQuellcode
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>:::css.layout | position.03:::</title>
<style type="text/css"><!--
div.contentDiv {
position:relative;
left:50%;
width:650px;
height:460px;
margin-left:-325px;
margin-top:20px;
background:#eee;
border:1px solid #607b9e;
}
div.menuDiv
{
position:relative;
z-index:1;
float:left;
width:150px;
height:150px;
margin-right:50px;
background:#607b9e;
}
--></style>
</head>
<body>
<div class="contentDiv">
<div class="menuDiv">
<p>.menuDiv</p>
</div>
<p>.contentDiv</p>
</div>
</body>
</html>
position.04
- Online-DemoQuellcode
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>:::css.layout | position.04:::</title>
<style type="text/css"><!--
div.contentDiv {
position:relative;
left:50%;
width:650px;
height:460px;
margin-left:-325px;
margin-top:20px;
background:#eee;
border: 1px solid #607b9e;
}
div.menuDiv {
position:relative;
z-index:1;
float:right;
width:150px;
height:150px;
margin-left:50px;
background:#607b9e;
}
--></style>
</head>
<body>
<div class="contentDiv">
<div class="menuDiv">
<p>.menuDiv</p>
</div>
<p>.contentDiv</p>
</div>
</body>
</html>
position.05
- Online-DemoQuellcode
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>:::css.layout | position.05:::</title>
<style type="text/css"><!--
div.mainDiv {
position:absolute;
left:50%;
width:650px;
margin-left:-325px;
margin-top:20px;
background:#eee;
border:1px solid #607b9e;
}
div.headDiv {
height:80px;
border-bottom:1px dashed #607b9e;
}
div.menuDiv {
float:left;
width:140px;
height:360px;
border-right:1px dashed #607b9e;
padding-top:20px;
}
div.contentDiv {
float:right;
width:500px;
padding-top:20px;
}
--></style>
</head>
<body>
<div class="mainDiv">
<div class="headDiv">
<p>.headDiv</p>
</div>
<div class="menuDiv">
<p>.menuDiv</p>
</div>
<div class="contentDiv">
<p>.contentDiv</p>
</div>
</div>
</body>
</html>
position.06
- Online-DemoQuellcode
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>:::css.layout | position.06:::</title>
<style type="text/css"><!--
div.mainDiv {
position:absolute;
left:50%;
width:650px;
margin-left:-325px;
margin-top:20px;
background:#eee;
border:1px solid #607b9e;
}
div.headDiv {
height:80px;
border-bottom:1px dashed #607b9e;
}
div.leftmenuDiv {
float:left;
width:140px;
height:360px;
border-right:1px dashed #607b9e;
padding-top:20px;
}
div.rightmenuDiv {
float:right;
width:140px;
height:360px;
border-left:1px dashed #607b9e;
padding-top:20px;
}
div.contentDiv {
width:auto;
margin:0 150px;
padding-top:20px;
}
--></style>
</head>
<body>
<div class="mainDiv">
<div class="headDiv">
<p>.headDiv</p>
</div>
<div class="leftmenuDiv">
<p>.leftmenuDiv</p>
</div>
<div class="rightmenuDiv">
<p>.rightmenuDiv</p>
</div>
<div class="contentDiv">
<p>.contentDiv</p>
</div>
</div>
</body>
</html>
position.07
- Online-DemoQuellcode
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>:::css.layout | position.07:::</title>
<style type="text/css"><!--
div.menuDiv {
position:absolute;
top:20px;
left:10px;
width:170px;
height:460px;
background:#eee;
border:1px solid #607b9e;
}
div.contentDiv {
height:460px;
margin:20px 10px 10px 190px;
background:#eee;
border:1px solid #607b9e;
}
--></style>
</head>
<body>
<div class="menuDiv">
<p>.menuDiv</p>
</div>
<div class="contentDiv">
<p>.contentDiv</p>
</div>
</body>
</html>
position.08
- Online-DemoQuellcode
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>:::css.layout | position.08:::</title>
<style type="text/css"><!--
div.leftmenuDiv {
position:absolute;
top:20px;
left:10px;
width:170px;
height:460px;
background:#eee;
border:1px solid #607b9e;
}
div.rightmenuDiv {
position:absolute;
top:20px;
right:10px;
width:170px;
height:460px;
background:#eee;
border:1px solid #607b9e;
}
div.contentDiv {
width:auto;
height:460px;
margin:20px 190px;
background:#eee;
border:1px solid #607b9e;
}
--></style>
</head>
<body>
<div class="leftmenuDiv">
<p>.leftmenuDiv</p>
</div>
<div class="rightmenuDiv">
<p>.rightmenuDiv</p>
</div>
<div class="contentDiv">
<p>.contentDiv</p>
</div>
</body>
</html>
position.09
- Online-DemoQuellcode
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>:::css.layout | position.09:::</title>
<style type="text/css"><!--
div.headDiv {
height:50px;
margin:20px 10px 10px 10px;
background:#eee;
border:1px solid #607b9e;
}
div.leftmenuDiv {
position:absolute;
top:80px;
left:10px;
width:170px;
height:400px;
background:#eee;
border:1px solid #607b9e;
}
div.rightmenuDiv {
position:absolute;
top:80px;
right:10px;
width:170px;
height:400px;
background:#eee;
border:1px solid #607b9e;
}
div.contentDiv {
width:auto;
height:400px;
margin:-1px 190px 0 190px;
background:#eee;
border:1px solid #607b9e;
}
--></style>
</head>
<body>
<div class="headDiv">
<p>.headDiv</p>
</div>
<div class="leftmenuDiv">
<p>.leftmenuDiv</p>
</div>
<div class="rightmenuDiv">
<p>.rightmenuDiv</p>
</div>
<div class="contentDiv">
<p>.contentDiv</p>
</div>
</body>
</html>
- » to be continued
"float"-Techniken
float.01
- Online-DemoQuellcode
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>:::css.layout | float.01:::</title>
<style type="text/css"><!--
#mainDiv {
width:650px;
margin:20px auto;
border:1px solid #607b9e;
}
.wrapperDiv {
margin:10px;
}
.wrapperDiv:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.wrapperDiv {display:inline-block;}
/* Hides from IE-mac \*/
* html .wrapperDiv {height:1%;}
.wrapperDiv {display:block;}
/* End hide from IE-mac */
.col {
width:310px;
height:350px;
background:#eee;
}
.floatLeft {
float:left;
display:inline;
}
.marginRight {
margin-right:10px;
}
--></style>
</head>
<body>
<div id="mainDiv">
<div class="wrapperDiv">
<div class="col floatLeft marginRight">
<p>.col 1</p>
</div>
<div class="col floatLeft">
<p>.col 2</p>
</div>
</div>
</div>
</body>
</html>
float.02
- Online-DemoQuellcode
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>:::css.layout | float.02:::</title>
<style type="text/css"><!--
#mainDiv {
width:650px;
margin:20px auto;
border:1px solid #607b9e;
}
.wrapperDiv {
margin:10px;
}
.wrapperDiv:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.wrapperDiv {display:inline-block;}
/* Hides from IE-mac \*/
* html .wrapperDiv {height:1%;}
.wrapperDiv {display:block;}
/* End hide from IE-mac */
.col {
width:203.333px;
height:350px;
background:#eee;
}
.floatLeft {
float:left;
display:inline;
}
.marginRight {
margin-right:10px;
}
--></style>
</head>
<body>
<div id="mainDiv">
<div class="wrapperDiv">
<div class="col floatLeft marginRight">
<p>.col 1</p>
</div>
<div class="col floatLeft marginRight">
<p>.col 2</p>
</div>
<div class="col floatLeft">
<p>.col 3</p>
</div>
</div>
</div>
</body>
</html>
float.03
- Online-DemoQuellcode
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>:::css.layout | float.03:::</title>
<style type="text/css"><!--
#mainDiv {
width:650px;
margin:20px auto;
border:1px solid #607b9e;
}
.wrapperDiv {
margin:10px;
}
.wrapperDiv:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.wrapperDiv {display:inline-block;}
/* Hides from IE-mac \*/
* html .wrapperDiv {height:1%;}
.wrapperDiv {display:block;}
/* End hide from IE-mac */
.col {
width:150px;
height:350px;
background:#eee;
}
.floatLeft {
float:left;
display:inline;
}
.marginRight {
margin-right:10px;
}
--></style>
</head>
<body>
<div id="mainDiv">
<div class="wrapperDiv">
<div class="col floatLeft marginRight">
<p>.col 1</p>
</div>
<div class="col floatLeft marginRight">
<p>.col 2</p>
</div>
<div class="col floatLeft marginRight">
<p>.col 3</p>
</div>
<div class="col floatLeft">
<p>.col 4</p>
</div>
</div>
</div>
</body>
</html>
float.04
- Online-DemoQuellcode
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>:::css.layout | float.04:::</title>
<style type="text/css"><!--
#mainDiv {
width:650px;
margin:20px auto;
border:1px solid #607b9e;
}
.wrapperDiv {
margin:10px;
}
.wrapperDiv:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.wrapperDiv {display:inline-block;}
/* Hides from IE-mac \*/
* html .wrapperDiv {height:1%;}
.wrapperDiv {display:block;}
/* End hide from IE-mac */
.col {
width:118px;
height:350px;
background:#eee;
}
.floatLeft {
float:left;
display:inline;
}
.marginRight {
margin-right:10px;
}
--></style>
</head>
<body>
<div id="mainDiv">
<div class="wrapperDiv">
<div class="col floatLeft marginRight">
<p>.col 1</p>
</div>
<div class="col floatLeft marginRight">
<p>.col 2</p>
</div>
<div class="col floatLeft marginRight">
<p>.col 3</p>
</div>
<div class="col floatLeft marginRight">
<p>.col 4</p>
</div>
<div class="col floatLeft">
<p>.col 5</p>
</div>
</div>
</div>
</body>
</html>
float.05
- Online-DemoQuellcode
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>:::css.layout | float.05:::</title>
<style type="text/css"><!--
#mainDiv {
width:650px;
margin:20px auto;
border:1px solid #607b9e;
}
.wrapperDiv {
margin:10px;
}
.wrapperDiv:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.wrapperDiv {display:inline-block;}
/* Hides from IE-mac \*/
* html .wrapperDiv {height:1%;}
.wrapperDiv {display:block;}
/* End hide from IE-mac */
.col {
background:#eee;
}
.floatLeft {
float:left;
display:inline;
}
.floatRight {
float:right;
display:inline;
}
.lefttopDiv {
width:150px;
line-height:60px;
}
.righttopDiv {
width:470px;
line-height:60px;
}
.leftDiv, .rightDiv {
height:250px;
}
.leftDiv {
width:150px;
}
.rightDiv {
width:470px;
}
--></style>
</head>
<body>
<div id="mainDiv">
<div class="wrapperDiv">
<div class="col floatLeft lefttopDiv">
<p>.lefttopDiv</p>
</div>
<div class="col floatRight righttopDiv">
<p>.righttopDiv</p>
</div>
</div>
<div class="wrapperDiv">
<div class="col floatLeft leftDiv">
<p>.leftDiv</p>
</div>
<div class="col floatRight rightDiv">
<p>.rightDiv</p>
</div>
</div>
</div>
</body>
</html>
float.06
- Online-DemoQuellcode
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>:::css.layout | float.06:::</title>
<style type="text/css"><!--
#mainDiv {
width:650px;
margin:20px auto;
border:1px solid #607b9e;
}
.wrapperDiv {
margin:10px;
}
.wrapperDiv:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.wrapperDiv {display:inline-block;}
/* Hides from IE-mac \*/
* html .wrapperDiv {height:1%;}
.wrapperDiv {display:block;}
/* End hide from IE-mac */
.col {
background:#eee;
}
.floatLeft {
float:left;
display:inline;
}
.floatRight {
float:right;
display:inline;
}
.lefttopDiv {
width:150px;
line-height:60px;
}
.righttopDiv {
width:470px;
line-height:60px;
}
.leftDiv, .rightDiv {
width:150px;
height:250px;
background:#eee;
}
.centerDiv {
height:250px;
margin:0 160px 0 160px !important;
margin:0 157px 0 157px; /* 3px-Bug im IE korrigieren */
}
--></style>
</head>
<body>
<div id="mainDiv">
<div class="wrapperDiv">
<div class="col floatLeft lefttopDiv">
<p>.lefttopDiv</p>
</div>
<div class="col floatRight righttopDiv">
<p>.righttopDiv</p>
</div>
</div>
<div class="wrapperDiv">
<div class="col floatLeft leftDiv">
<p>.leftDiv</p>
</div>
<div class="col floatRight rightDiv">
<p>.rightDiv</p>
</div>
<div class="col centerDiv">
<p>.centerDiv</p>
</div>
</div>
</div>
</body>
</html>
float.07
- Online-DemoQuellcode
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>:::css.layout | float.07:::</title>
<style type="text/css"><!--
#mainDiv {
width:650px;
margin:20px auto;
border:1px solid #607b9e;
}
.wrapperDiv {
margin:10px;
}
.wrapperDiv:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.wrapperDiv {display:inline-block;}
/* Hides from IE-mac \*/
* html .wrapperDiv {height:1%;}
.wrapperDiv {display:block;}
/* End hide from IE-mac */
.col {
background:#eee;
}
.floatLeft {
float:left;
display:inline;
}
.floatRight {
float:right;
display:inline;
}
.lefttopDiv {
width:470px;
line-height:60px;
}
.righttopDiv {
width:150px;
line-height:60px;
}
.leftDiv, .rightDiv {
height:250px;
}
.leftDiv {
width:470px;
}
.rightDiv {
width:150px;
}
--></style>
</head>
<body>
<div id="mainDiv">
<div class="wrapperDiv">
<div class="col floatLeft lefttopDiv">
<p>.lefttopDiv</p>
</div>
<div class="col floatRight righttopDiv">
<p>.righttopDiv</p>
</div>
</div>
<div class="wrapperDiv">
<div class="col floatLeft leftDiv">
<p>.leftDiv</p>
</div>
<div class="col floatRight rightDiv">
<p>.rightDiv</p>
</div>
</div>
</div>
</body>
</html>
float.08
- Online-DemoQuellcode
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>:::css.layout | float.08:::</title>
<style type="text/css"><!--
#mainDiv {
width:650px;
margin:20px auto;
border:1px solid #607b9e;
}
.wrapperDiv {
margin:10px;
}
.wrapperDiv:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.wrapperDiv {display:inline-block;}
/* Hides from IE-mac \*/
* html .wrapperDiv {height:1%;}
.wrapperDiv {display:block;}
/* End hide from IE-mac */
.col {
background:#eee;
}
.floatLeft {
float:left;
display:inline;
}
.floatRight {
float:right;
display:inline;
}
.lefttopDiv {
width:470px;
line-height:60px;
}
.righttopDiv {
width:150px;
line-height:60px;
}
.leftDiv, .rightDiv {
width:150px;
height:250px;
background:#eee;
}
.centerDiv {
height:250px;
margin:0 160px 0 160px !important;
margin:0 157px 0 157px; /* 3px-Bug im IE korrigieren */
}
--></style>
</head>
<body>
<div id="mainDiv">
<div class="wrapperDiv">
<div class="col floatLeft lefttopDiv">
<p>.lefttopDiv</p>
</div>
<div class="col floatRight righttopDiv">
<p>.righttopDiv</p>
</div>
</div>
<div class="wrapperDiv">
<div class="col floatLeft leftDiv">
<p>.leftDiv</p>
</div>
<div class="col floatRight rightDiv">
<p>.rightDiv</p>
</div>
<div class="col centerDiv">
<p>.centerDiv</p>
</div>
</div>
</div>
</body>
</html>
float.09
- Online-DemoQuellcode
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>:::css.layout | float.09:::</title>
<style type="text/css"><!--
#mainDiv {
width:650px;
margin:20px auto;
border:1px solid #607b9e;
}
.wrapperDiv {
margin:10px;
}
.wrapperDiv:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.wrapperDiv {display:inline-block;}
/* Hides from IE-mac \*/
* html .wrapperDiv {height:1%;}
.wrapperDiv {display:block;}
/* End hide from IE-mac */
.col {
background:#eee;
}
.floatLeft {
float:left;
display:inline;
}
.floatRight {
float:right;
display:inline;
}
div.leftCol, div.rightCol {
width:310px;
}
.contentDiv {
height:170px;
}
.marginTop {
margin-top:10px;
}
--></style>
</head>
<body>
<div id="mainDiv">
<div class="wrapperDiv">
<div class="floatLeft leftCol">
<div class="col contentDiv">
<p>.contentDiv</p>
</div>
<div class="col contentDiv marginTop">
<p>.contentDiv</p>
</div>
</div>
<div class="floatRight rightCol">
<div class="col contentDiv">
<p>.contentDiv</p>
</div>
<div class="col contentDiv marginTop">
<p>.contentDiv</p>
</div>
</div>
</div>
</div>
</body>
</html>
- » to be continued