Mit Hilfe der Stylesheets legen Sie das Layout Ihrer Website für den Bildschirm und die Druckausgabe fest.

Screen.css

Mit Hilfe der Stylesheets legen Sie das Layout Ihrer Website für den Bildschirm und die Druckausgabe fest. Da wir hier kein CSS - Kurs abhalten wollen, verzichten wir auf weitere Erläuterungen und zeigen hier das  Stylesheet für das Template 'AllCSS'.

Screen.css

body,td,th {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #000000;
}
body {
  background-color: #F0F0F0;
  background-image: url(background.jpg);
  margin: 0;
}
a:link, a:visited, a:active {
  color: #660033;
  text-decoration: none;
}
a:hover {
  color: #993366;
  text-decoration: none;
}
hr {
  margin: 5px 0px 5px 0px;
  color: #660033;
  border: 0;
  border-top: 1px solid #660033;
  height: 1px;
  width: 580px;
}
h1 {
  font-size: 16px;
  color: #993366;
  text-align: left;
  margin: 8px 2px 8px 2px;
}
form {
  margin: 0;
}
.main {
  width: 750px;
  margin: auto;
  padding: 0;
  background-color: #FFFFFF;
}
.banner, .search_box {
  height: 80px;
  background-image: url(header.jpg);
  background-repeat: repeat-x;
  font-size: 20px;
  font-weight: bold;
  color: #FFFFFF;
  text-align: center;
  padding-top: 20px;
}
.banner {
  width: 530px;
  padding-left: 20px;
  float: left;
  text-align: left;
}
.search_box {
  float: right;
  clear: right;
  width: 200px;
}
.search_string {
  width: 100px;
  height: 16px;
  font-size: 10px;
  vertical-align: middle;
}
.search_submit {
  width: 50px;
  height: 22px;
  font-size: 10px;
  vertical-align: middle;
}
.highlight {
  background-color: #D0D0D0;
}
.banner a {
  color: #FFFFFF;
}
.menu {
  float: left;
  width: 140px;
  margin: 10px;
  margin-top: 3px;
}
.menu ul, .menu li {
  margin: 0;
  padding: 0;
  list-style: none;
  margin-bottom: 5px;
}
.menu ul ul {
  padding-left: 8px;
}
.menu a:link, .menu a:visited, .menu a:active, .menu a:hover {
  display: block;
  padding: 2px;
}
.menu_default a:link, .menu_default a:visited, .menu_default a:active {
  border-bottom: 1px dashed #999999;
}
.menu_default a:hover {
  border-bottom: 1px dashed #333333;
}

.menu_current  {
  border-bottom: 1px dashed #999999;
  font-weight:bold;
}

.login_table {
  border: 1px solid #D0D0D0;
  margin-top: 20px;
  margin-bottom: 5px;
  text-align: center;
  padding-bottom: 3px;
}
.login_table h1 {
  color: #660033;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  margin: 5px 0px 5px 0px;
}
.login_table input {
  text-transform: uppercase;
  font-size: 10px;
  margin: 5px 0px 1px 0px;
  width: 100px;
}
.content {
  margin-left: 150px;
  padding: 4px 10px 14px 10px;
  text-align: justify;
  clear: right;
}
.footer {
  background-color: #FFFFFF;
  clear: both;
  height: 20px;
  background-image: url(footer.jpg);
  background-repeat: repeat-x;
  font-size: 10px;
  color: #666666;
  text-align: center;
  line-height: 18px;
}
.powered_by {
  text-align: center;
  font-size: 10px;
  padding-top: 2px;
}
Stromkostenrechner
Der Stromkostenrechner-jetzt gratis testen