tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
1
ZUGRIFFE
880
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 01.06.06 08:11 #1
    julchen julchen ist offline Mitglied Platin
    Registriert seit
    Mar 2004
    Beiträge
    576
    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:

    HTML-Code:
    <?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
     
  2. 01.06.06 08:14 #2
    Maik Tutorials.de Gastzugang
    Dann studiere doch einfach mal den HTML- und CSS-Quelltext der genannten Seite.

    Und bitte benutze zukünftig die Highlight-Tags zum Auszeichnen deines Quelltextes.
     
« Probleme mit Smilies in meinem Gästebuch :-\ | [Problem] Background-Grafik nur bis 100% »

Ähnliche Themen

  1. Rand erstellen
    Von Weißbrot im Forum Photoshop
    Antworten: 9
    Letzter Beitrag: 01.12.07, 23:33
  2. Box mit rundem Rand erstellen
    Von elmyth_ im Forum CSS
    Antworten: 4
    Letzter Beitrag: 15.07.06, 19:35
  3. Rand erstellen?
    Von kalamahari im Forum Photoshop
    Antworten: 2
    Letzter Beitrag: 22.08.05, 13:46
  4. Leiste über website schwebend und immer am unteren Rand
    Von metno im Forum HTML & XHTML
    Antworten: 6
    Letzter Beitrag: 23.06.05, 13:09
  5. räumlicher rand, man sieht es auf jeder website aber nirgends ein tut, plz help!
    Von wha im Forum Photoshop
    Antworten: 15
    Letzter Beitrag: 01.05.03, 23:56