mystic-garden : Design 4 « Templates « HTML / CSS






mystic-garden

   

<!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">
<head>
<title>Mystic Garden - Bildergalerie</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
html,body {
  height: 100%;
  margin:0;
  padding:0;

  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  color: #333333;
  line-height: 16px;
  background-color: #2c3c37;
}
#container {
  margin:auto;
  width: 760px;
}
#kopf {
  float: left;
  width: 760px;
  height: 190px;
  padding: 0;
  margin: 0;
  background-image: url(mystic-garden-grafik/kopf.jpg);
  background-repeat: repeat-x;
}
#menue {
  float: left;
  width: 760px;
  height: 26px;
  padding: 0;
  margin: 0;
  background-image: url(mystic-garden-grafik/menuebg.jpg);
  background-repeat: repeat-x;
}
#contentkopf {
  float: left;
  width: 760px;
  height: 48px;
  padding: 0;
  margin: 0;
  background-image: url(mystic-garden-grafik/contentkopf.gif);
  background-repeat: repeat-x;
}
#content{
  float: left;
  width: 760px;
  padding: 0;
  margin: 0;
  background-image: url(mystic-garden-grafik/contentbg.jpg);
  background-repeat: repeat-y;
}
#sidebar{
  float: left;
  width: 171px;
  padding: 0;
  margin: 0;
  padding-left: 50px;
}
#inhalt{
  float: left;
  width: 440px;
  padding: 0;
  margin: 0;
  padding-left: 50px;
}
#fuss {
  float: left;
  width: 720px;
  height: 39px;
  padding: 0;
  padding-top: 53px;
  padding-right: 40px;
  margin: 0;
  background-image: url(mystic-garden-grafik/fussbg.gif);
  background-repeat: repeat-x;
  text-align: right;
  color: #a3b1ac;
}
.mp1 {
  float: left;
  width: 81px;
  height: 19px;
  padding: 0;
  padding-top: 5px;
  padding-right: 4px;
  padding-left: 69px;
  margin: 0;
  text-align: center;
  color: #a3b1ac;
}
.mp {
  float: left;
  width: 81px;
  height: 19px;
  padding: 0;
  padding-top: 5px;
  padding-right: 4px;
  padding-left: 5px;
  margin: 0;
  text-align: center;
  color: #a3b1ac;
}

h1 {
  margin: 0px;
  margin-top: 3px;
  margin-bottom: 5px;
  padding: 0px;
  padding-top: 3px;
  height: 20px;
  border: none;
  border-bottom: 1px solid #666666;

  font-size: 12px;
  text-align: left;
}
h2 {
  margin: 0px;
  margin-bottom: 6px;
  margin-top: 6px;
  padding: 0px;
  padding-top: 1px;
  padding-left: 2px;
  height: 17px;
  background-color: #a7b8b2;

  font-size: 10px;
  text-align: left;
}

a:link, a:visited, a:active {
  color: #ffffff;
}
a:hover {
  color: #98f4ea;
}

a.mp:link, a.mp:visited, a.mp:active,
a.mp1:link, a.mp1:visited, a.mp1:active {
  color: #a3b1ac;
  text-decoration: none;
}
a.mp:hover, a.mp1:hover {
  color: #98f4ea;
  text-decoration: none;
}

form {
  padding: 10px;
  margin: 0px;
  margin-top: 20px;
  width: 420px;
  text-align: left;
}
select {
  border-style: solid;
  border-width: 1px;
  border-color: #999999;
  background-color: #e1ffff;
  padding: 0;
  margin: 5px;
  font-size: 11px;
  color: #000000;
}
option {
  border: none;
  background-color: #e1ffff;
  padding: 0px 2px 0px 2px;
  margin: 0;
  font-size: 11px;
  color: #000000;
}
input,textarea{
  border-style: solid;
  border-width: 1px;
  border-color: #999999;
  background-color: #e1ffff;
  padding: 2px 2px 2px 5px;
  margin: 5px;
  font-size: 11px;
  color: #000000;
  width: 270px;
  vertical-align: baseline;
}
.submit,.reset {
  width: auto;
  background-color: #36a0a5;
  border: 1px solid #dedede;
  font-weight: bold;
  color: #ffffff;
  padding: 2px 5px 2px 5px;
}
.beschriftung{
  width: 110px;
  line-height: 200%;
  float: left;
  clear: left;
  vertical-align: baseline;
  color: #333333;
  font-size: 10px;
  font-weight: bold;
  text-align: right;
}

</style>


</head>
<body>
<div id="container">
  <div id="kopf"> </div>
  <div id="menue"> <a href="http://www.free-css.com/" class="mp1">&raquo; Home</a> <a href="uebermich.php" class="mp">&raquo; &Uuml;ber mich</a> <a href="bildergalerie.php" class="mp">&raquo; Bildergalerie</a> <a href="gaestebuch.php" class="mp">&raquo; G&auml;stebuch</a> <a href="links.php" class="mp">&raquo; Links</a> <a href="kontakt.php" class="mp">&raquo; Kontakt</a> <a href="impressum.php" class="mp">&raquo; Impressum</a> </div>
  <div id="contentkopf"> </div>
  <div id="content">
    <div id="sidebar">
      <h2>&raquo; Aktuelles</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
      <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
      <h2>&raquo; Partnerseiten</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
      <p align="center"><a href="http://validator.w3.org/check?uri=referer"><img border="0" src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01!" height="31" width="88" /></a> <a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /></a></p>
    </div>
    <div id="inhalt">
      <h1>&raquo; Bildergalerie</h1>
      <p>Erg?en Sie diese kostenlose Homepage Vorlage einfach durch Ihre eigenen Texte und Bilder.</p>
      <p><strong>Mit den besten W?n f?en erfolgreichen Internetauftritt<br />
        Ihre Sabine Kunkel-D?</strong></p>
    </div>
  </div>
  <div id="fuss"> Design by <a href="http://www.hpvorlagen24.de">www.hpvorlagen24.de</a> copyright &copy; 2005 </div>
</div>
</body>
</html>

   
    
    
  








Related examples in the same category

1.arrangement
2.arthemia
3.artica
4.aspherical
5.assiduous
6.asterisk
7.astounded
8.astroturfd
9.atomohost
10.atrandafir582
11.AttainDigital
12.audi-template
13.aurelius
14.authenticity
15.autoportal
16.axian
17.azulmedia2-1
18.azure
19.bagatelle
20.balanced
21.bananaleaf
22.barricade
23.begrimed
24.belowthehorizon
25.bennevis
26.bermuda01
27.besmart
28.bestwebdesign
29.beta
30.beyond
31.bigdeal
32.BigSpaceLove
33.bioessence
34.Biru_Manteb
35.bittersweet
36.Black
37.chamberlandsrestaurant
38.chara
39.characterized
40.charcoal
41.charitable-organization
42.chary
43.chasmogamous
44.chesspiece
45.chic
46.chicanery
47.chromz
48.churchsitev.2
49.citrus-island1-1
50.clementine
51.clicker
52.modernclassic
53.modernmagic
54.modernworld
55.A_Simple_Theme
56.minimalistica
57.miniseries
58.mint-idea
59.minty
60.mirax
61.miscellaneous
62.mistybud
63.mlpdesign02
64.mlpdesign03
65.mlpdesign04
66.mlpdesign08
67.model-4-me
68.model-portfolio
69.modelagency
70.modelportfolio
71.model_2
72.moderna
73.Modified
74.modulation
75.module-mag
76.mokofactory
77.monster
78.mork-horisont
79.mountainbreeze
80.mouse
81.mrtechie
82.multiflex2
83.multiple
84.multiplex
85.music
86.muzzle
87.MyCode
88.mydiary
89.myfamily
90.myhedspacefree08
91.mykindathing
92.myportfolio
93.Mythology
94.myvalentine
95.naeve
96.natheless
97.nationalpark
98.neapolitan
99.neatness
100.nebuladog
101.nedweb
102.NelVoize
103.neoneon
104.neonix
105.neoplanet-01
106.neotech
107.netindustries
108.neuphoric
109.neutral
110.neutraldesk
111.neutralgreen
112.new kitchen design
113.new-fast-host
114.new-home
115.new-rise
116.new-year