Hallo,
ich habe eine Frage wie folgenden Effekt hinbekomme.
Ich möchte eine Seite erstellen, die mittig zentriert ist und eine feste Breite hat. Die Höhe passt sich je nach Inhalt automatisch an. An den Rändern links und rechts sowie am unteren Rand soll eine Art Schattierung zu sehen sein, die ich mittels einer Grafik einbinden möchte. Das Grundgerüst habe ich bereits, doch wie bekomme ich die Schattierung links und rechts hin.
Ein Beispiel ist für das was ich suche ist unter folgendem Link:
http://www.conception.cc/
Hier mein Code:
Gruss
Julchen
ich habe eine Frage wie folgenden Effekt hinbekomme.
Ich möchte eine Seite erstellen, die mittig zentriert ist und eine feste Breite hat. Die Höhe passt sich je nach Inhalt automatisch an. An den Rändern links und rechts sowie am unteren Rand soll eine Art Schattierung zu sehen sein, die ich mittels einer Grafik einbinden möchte. Das Grundgerüst habe ich bereits, doch wie bekomme ich die Schattierung links und rechts hin.
Ein Beispiel ist für das was ich suche ist unter folgendem Link:
http://www.conception.cc/
Hier mein Code:
HTML:
<?xml version="1.0" encoding="iso-8859-1"?>
<!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" lang="de">
<head>
<title>Neue Seite</title>
<style>
*{
padding:0;
margin:0;
border:0;
}
html, body {
height: 100%; /* wichtig */
font:12px "Trebuchet MS", Verdana, Arial, sans-serif;
color:black;
background:white;
text-align:center;
}
#header{
padding-left:20px;
height:110px;
font-size:20px;
text-transform:uppercase;
background:#ccc;
line-height: 60px;
}
p {
margin: 0;
padding: 1em 0;
line-height: 1.5em;
}
#box{
width:790px;
margin:0 auto;
text-align:left;
position: relative;
height:auto !important;/* moderne Browser */
background:#eaeaea;
}
#menu{
float:left;
position:relative;
width:150px;
height:100px;
background-color:#000066;
}
#top_2{
margin-left:155px;
padding:0;
background-color:#993300;
height:100px;
}
#content{
margin-left:155px;
padding:0;
background-color:#fff;
}
#inhalt {
padding: 0 0 60px 0;
}
#footer {
width: 100%;
background: #CCC;
position: absolute;
bottom: 0;
height: 20px;
line-height: 20px;
text-align:center;
}
</style></head>
<body>
<div id="box">
<h1 id="header">Header</h1>
<div id="inhalt">
<div id="menu">
<ul>
<li>Test</li>
<li>Test</li>
</ul>
</div>
<div id="top_2">Top 2</div>
<div id="content">
<p>Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext </p>
</div>
</div>
<p id="footer">Footer</p>
</div>
</body>
</html>Gruss
Julchen
