Einzelnen Beitrag anzeigen
  #3 (permalink)  
Alt 01.07.2008, 18:13
csski csski ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.07.2008
Beiträge: 2
csski befindet sich auf einem aufstrebenden Ast
Standard HTML und CSS

Anbei HTML sowie CSS Code:

HTML Template:

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Website</title>
<link href="../lib/code.css" rel="stylesheet" type="text/css" />
<!--[if IE 5]><link href="../lib/ie5.css" rel="stylesheet" type="text/css" /><![endif]-->
</head>
<body>
<div id="logo"></div>
<div id="allwrap">
  <div id="kopf">
    <div id="topbox">
      <div id="oben">
        <ul>
          <li><a href="">Home</a></li>
          <li><a href="">Sitemap</a></li>
          <li><a href="">Impressum</a></li>
        </ul>
      </div>
      <div id="unten">
        <div id="sprache"></div>
      </div>
    </div>
    <div class="streifen"></div>
  </div>
  <div class="cleardiv"></div>
  <div id="leiste">
    <div class="left">
      <div class="rootline">Aktuelle Seite: Home</div>
    </div>
    <div class="right">
      <ul>
        <li class="print"><a href="#" class="druck">Seite drucken</a></li>
        <li class="pdf"><a href="#" class="pdf">Seite als PDF</a></li>
      </ul>
    </div>
    <div class="cleardiv"></div>
  </div>
  <div id="inhalt">
    <div id="links">
      <div id="navigation">
        <ul>
          <li><a href="">Unternehmen</a></li>
          <li><a href="">Produkte</a></li>
          <li><a href="">Ihre Produktanforderung</a></li>
          <li><a href="">Neuheiten</a></li>
          <li><a href="">Geschäftsfelder</a></li>
          <li><a href="">Kontakt</a></li>
        </ul>
      </div>
      <div id="suchform">
        <form action="" method="post">
          <input name="" type="text" class="suchfeld" onfocus="if(this.value==defaultValue)this.value='';" value="Suchbegriff eingeben" />
          <input name="" type="button" class="suchego" value="&gt;&gt;" />
        </form>
      </div>
    </div>
    <div>
      <div id="mitte">
        <h1>Herzlich willkommen</h1>
        <div class="textbild">
          <h1>Herzlich willkommen</h1>
        </div>
        <div class="anker">
          <div class="totop"></div>
        </div>
        <div class="copyleft">
          <div class="cleft"></div>
          <div class="cleardiv"></div>
        </div>
      </div>
    </div>
    <div id="rechts">
      <h2>News</h2>
      <div class="aktuell"></div>
    </div>
    <div class="cleardiv"></div>
  </div>
</div>
</body>
</html>
CSS:

Code:
/* CSS Document */

* {
	margin: 0px;
	padding: 0px;
}

html {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}
body {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 5px;
	font-family: Arial, Helvetica, sans-serif;
}
div.cleardiv {
	clear: both;
	line-height: 0px;
	font-size: 0px;
	height: 0px;
	padding: 0px;
	margin: 0px;
	color: #FFF;
}
form {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}
#allwrap {
	padding: 0px 0px 0px 0px;
	margin: 0px 10px 0px 0px;
	max-width: 980px;
	min-width: 780px;
}
* html #allwrap {
 width: 980px;
 width: expression(
  (document.documentElement && document.documentElement.clientHeight) ?
   (document.documentElement.clientWidth < 780) ? "780px" : (( document.documentElement.clientWidth > 980 ) ? "980px" : "auto") :
   (document.body.clientWidth < 780) ? "780px" : (( document.body.clientWidth > 980 ) ? "980px" : "auto")
 );
}

#kopf {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	height: 290px;
	background: url(../img/pic.jpg) no-repeat bottom left;
}
#logo {
	padding: 8px 0px 0px 20px;
	position: absolute;
}
* html #logo {
	top: 8;
	left: 20;
	z-index: 30;
	width: 150px;
	height: 101px;
	padding: 0px 0px 0px 0px;
	overflow: hidden;
}
#topbox {
	float: right;
	font-size: 0.72em;
	width: 300px;
	/* height: 85px; */
}
#topbox #oben {
	padding: 5px 0px 0px 0px;
	clear: both;
	float: right;
}
#topbox #oben ul {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}
#topbox #oben li {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	list-style-type: none;
	display: inline;
}
#topbox #oben ul li a {
	padding: 0px 10px 0px 10px;
	background: url(../img/pic.gif) repeat-y top right;
	text-decoration: none;
	color: #333;
}
#topbox #oben ul li a:hover {
	text-decoration: underline;
}
#topbox #oben ul li a.aktiv {
	text-decoration: underline;
}
#topbox #unten {
	padding: 45px 0px 0px 0px;
	padding: 20px 0px 0px 0px;
	clear: both;
}
* html #topbox #unten {
	padding: 45px 0px 0px 0px;
	padding: 20px 0px 0px 0px;
}
*+html #topbox #unten {
	padding: 23px 0px 0px 0px;
	padding: 20px 0px 0px 0px;
}
#topbox #sprache {
	float: right;
	margin: 0px 0px 6px 0px;
}
#topbox #sprache li {
	list-style-type: none;
	float: left;
	line-height: 20px;
}
#topbox #sprache ul li a {
	display: block;
	line-height: 20px;
	height: 20px;
	width: 30px;
	font-size: 0px;
	text-decoration: none;
	color: #FFF;
}

div.streifen {
	background: url(../img/pic.png) repeat-x top left;
	margin: 0px 0px 0px 0px;
	height: 25px;
	clear: both;
}

#leiste {
	background: url(../img/pic.png) repeat-x top left;
	height: 25px;
	margin: 4px 0px 30px 0px;
	line-height: 25px;
}
#leiste div.left {
	padding: 0px 200px 0px 5px;
	position: absolute;
	max-width: 780px;
	min-width: 680px;
}
* html #leiste div.left {
	width: 100%;
	min-width: 680px;
}

#leiste div.left div.rootline {
	padding: 10px 0px 0px 10px;
	font-size: 0.66em;
	line-height: 25px;
}
#leiste div.left div.rootline span {
	padding: 0px 0px 5px 0px;
	margin: 0px 4px 3px 4px;
	font-size: 14px;
	color: #B5B5B5;
}
#leiste div.left div.rootline a {
	color: #000;
	color: #B5B5B5;
	text-decoration: none;
	
}
#leiste div.left div.rootline a:hover {
	text-decoration: underline;
}
#leiste div.right {
	width: 186px;
	position: relative;
	padding: 10px 0px 0px 10px;
	margin: 0px 0px 0px 0px;
	float: right;
}
* html #leiste div.right {
	width: 195px;
}
#leiste ul {
	
}
#leiste li {
	display: inline;
	list-style-type: none;
}
#leiste div.right a {
	padding: 2px 0px 2px 20px;
	font-size: 0.66em;
	display: inline;
	text-decoration: none;
	color: #333;
	color: #B5B5B5;
	line-height: 25px;
	height: 25px;
	background: url(../img/pic.gif) no-repeat center left;
}
#leiste div.right a:hover {
	text-decoration: underline;
}
#leiste div.right a.druck {
	background: url(../img/pic.gif) no-repeat center left;
	padding: 2px 5px 2px 20px;
}
#leiste div.right a.pdf {
	background: url(../img/pic.gif) no-repeat center left;
	padding: 2px 0px 2px 20px;
}
* html #leiste div.right a.druck {
	padding: 0px 5px 0px 20px;
}
 * html #leiste div.right a {
	padding: 0px 0px 0px 20px;
}
#inhalt {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	max-width: 980px;
	min-width: 780px;
}
* html #inhalt {
 width: 980px;
 width: expression(
  (document.documentElement && document.documentElement.clientHeight) ?
   (document.documentElement.clientWidth < 780) ? "780px" : (( document.documentElement.clientWidth > 980 ) ? "980px" : "auto") :
   (document.body.clientWidth < 780) ? "780px" : (( document.body.clientWidth > 980 ) ? "980px" : "auto")
 );
}
#links {
	width: 195px;
	padding: 1px 0px 0px 0px;
	position: absolute;
	z-index: 2;
	font-size: 0.72em;
}
#links h2 {
	padding: 0px 10px 8px 10px;
	margin: 0px 0px 0px 0px;
	color: #666;
	font-size: 12px;
	letter-spacing: 1px;
	font-weight: bold;
	text-transform: uppercase;
}
#links img {
	padding: 0px 0px 0px 20px;
}
#links ul {
	padding: 0px 0px 0px 0px;
	margin: 0px 5px 0px 10px;
	background: url(../img/pic.gif) repeat-x bottom left;
}
#links li {
	padding: 1px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	list-style-type: none;
	background: url(../img/pic.gif) repeat-x top left;
}
#links ul li a {
	display: block;
	padding: 7px 0px 7px 15px;
	margin: 0px 0px 0px 0px;
	text-decoration: none;
	color: #333;
	font-weight: bold;
	line-height: 12px;
}
#links ul li a:hover {
	background-color: #EBEBEB;
}
#links ul li a.aktiv {
	display: block;
	text-decoration: none;
	background: none;
	background: url(../img/pic.gif) no-repeat center left;
	background-color: #EBEBEB;
}
#links ul li.ifsub {
	background-color: #EBEBEB;
	padding: 0px 0px 2px 0px;
}
#links ul li.ifsub a.aktiv {
	background: url(../img/pic.gif) no-repeat center left;
	padding: 7px 0px 7px 15px;
	margin: 0px 0px 0px 0px;
}
#links ul li.sub {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	list-style-type: none;
	background-image: none;
}
#links ul li.sub a {
	display: block;
	padding: 0px 0px 8px 15px;
	margin: 0px 0px 0px 0px;
	text-decoration: none;
	background-color: #EBEBEB;
	font-weight: normal;
	line-height: 13px;
	background-image: none;
}
#links ul li.sub a:hover {
	background: none;
	background-color: #EBEBEB;
	text-decoration: underline;
}
#links ul li.sub a.aktiv {
	background-image: none;
	text-decoration: underline;
}

#links #suchform {
	float: left;
	width: 180px;
	padding: 10px 0px 10px 10px;
	margin: 10px 0px 10px 0px;
	margin: 0px;
}
* html #links #suchform {
	width: 180px;
}
#links #suchform form {
	background-color: #FFE707;
	padding: 5px 0px 5px 0px;
}
#links input.suchfeld {
	border: 1px solid #666;
	width: 140px;
	margin: 0px 3px 0px 8px;
	padding: 1px 2px 1px 2px;
	color: #666;
}
* html #links input.suchfeld {
	width: 135px;
}

#mitte {
	padding: 0px 185px 0px 200px;
	position: absolute;
	font-size: 0.73em;
	line-height: 19px;
	max-width: 600px;
	min-width: 400px;
	float: left;
}
* html #mitte {
	width: 100%;
	min-width: 400px;
}
*+html #mitte {
	max-width: 600px;
	min-width: 400px;
}
#mitte div.textbild {
	margin: 0px 20px 0px 25px;
	padding: 0px 25px 0px 0px;
	background: url(../img/pic.gif) repeat-y top right;
}
#mitte div.textbild div.csc-textpic {
}

#mitte h1 {
	padding: 0px 20px 10px 25px;
	margin: 0px 20px 0px 0px;
	font-size: 1.95em;
	line-height: 1.07em;
	color: #444;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: normal;
	background: url(../img/pic.gif) repeat-y top right;
	vertical-align: top;
}
#mitte div.textbild h1 {
	padding: 0px 0px 12px 0px;
	margin: 0px 0px 0px 0px;
	font-size: 1.95em;
	line-height: 1.07em;
	color: #444;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: normal;
	background-image: none;
	vertical-align: top;
}
#mitte div.textbild h2 {
	padding: 0px 0px 8px 0px;
	margin: 0px 0px 0px 0px;
	font-size: 1.4em;
	line-height: 1.16em;
	color: #444;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-weight: bold;
	vertical-align: top;
}
#mitte div.textbild ul {
	padding: 4px 0px 4px 0px;
	margin: 0px 0px 0px 25px;
}
#mitte div.textbild ul li {
	padding: 0px 0px 6px 0px;
	margin: 0px 0px 0px 0px;
	list-style-image: url(../img/ul-li.gif);
}
#mitte div.textbild ol {
	padding: 4px 0px 4px 0px;
	margin: 0px 0px 0px 25px;
}
#mitte div.textbild ol li {
	padding: 0px 0px 6px 0px;
	margin: 0px 0px 0px 0px;
}

#mitte div.anker {
	margin: 0px 45px 0px 25px;
	padding: 0px 0px 0px 0px;
	color: #999;
	background-color: #FFF;
	clear: both;
}
#mitte div.anker div.totop {
	padding: 5px 0px 0px 0px;
	text-align: right;
	float: right;
	width: 25%;
}
#mitte div.anker div.totop a {
	background: url(../img/pic.gif) no-repeat center left;
	padding: 0px 0px 0px 16px;
	color: #999;
	text-decoration: none;
	font-size: 0.98em;
}
#mitte div.anker div.totop a:hover {
	text-decoration: underline;
}
#mitte div.copyleft {
	margin: 0px 45px 5px 25px;
	padding: 0px 0px 10px 0px;
	background: url(../img/pic.gif) repeat-x top left;
	color: #999;
	background-color: #FFF;
	font-size: 0.98em;
	clear: both;
}
#mitte div.copyleft div.cleft {
	padding: 5px 0px 0px 0px;
	float: left;
}

#rechts {
	width: 185px;
	position: relative;
	padding: 0px 0px 20px 10px;
	margin: 0px;
	float: right;
	font-size: 0.72em;
	line-height: 17px;
}
* html #rechts {
	width: 195px;
}
#rechts h2 {
	padding: 0px 0px 18px 0px;
	margin: 0px 0px 8px 0px;
	font-size: 1.5em;
	vertical-align: top;
	color: #444;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: normal;
	background: url(../img/pic.gif) repeat-x bottom right;
}
#rechts div a {
	color: #333;
	background: url(../img/pic.gif) no-repeat bottom left;
	padding: 0px 3px 0px 11px;
}
#rechts div img {
	margin: 4px 0px 4px 0px;
}
Mit Zitat antworten