#all {
position:relative;
margin:0 auto;
width:1030px;
height:auto;
}
<body>
<div id="all">
<!-- hier alles rein, was bisher zw. <body> und </body> steht -->
</div>
</body>
Noch nicht viel geschrieben
Nicht mehr ganz neu hier
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" >
<head>
<meta http-equiv="content-type" content="text/html; UTF-8" />
<title>vertical-alignedSites</title>
<style type="text/css" media="screen, projection">
/* reset
----------------------------------------------------------------------------------------*/
* { margin: 0; padding: 0; }
a img { border: 0; }
ol, ul { list-style: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; }
/* rebuild
----------------------------------------------------------------------------------------*/
html,body {
font: 100% "Lucida Grande", "Lucida Sans", Tahoma, Verdana, sans-serif;
background: url() repeat;
color: #333;
text-align:center; height: 100%;
}
#dummy {
width:1px;
height:50%;
margin-bottom:-12.5em; /* die haelfte deiner gesammthoehe fuer den Inhalt */
float:left; /* ie 6 u 7 haben so ihre probleme, damit umgeht man das */
}
#wrap {
background: orange url(); /* nur um den container und den effekt zu sehen - farbe ausradieren */
margin: 0 auto;
position: relative;
text-align: left;
height: 25em; /* deine Gesammthoehe */
width: 25em;
clear: left;
}
#nav li { float: left; }
#nav a { display: block; }
#main {
float:right; /* ie 6 u 7 haben so ihre probleme, damit umgeht man das */
font-size: .68em;
}
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0 }
</style>
</head>
<body id="vertical-alignedSites">
<div id="dummy"></div>
<div id="wrap">
<div id="main">
<div id="header">
<h1>headline</h1>
<ul id="nav">
<li><a href="#" title="menu 1">menu item 1</a></li>
<li><a href="#" title="menu 2">menu item 2</a></li>
<li><a href="#" title="menu 3">menu item 3</a></li>
<li><a href="#" title="menu 4">menu item 4</a></li>
</ul>
<!--endMenue -->
<br class="clear" /> <!-- avoiding floting issues -->
</div>
<!-- endHeader -->
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!-- endContent -->
</div>
<!-- endMain -->
</div>
<!-- endWrap -->
</body>
</html>
Willkommen auf PSD-Tutorials.de
In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.
Nächster neuer Gratisinhalt
Statistik des Forums