mein html-code
- Code: Alles auswählen
<!doctype html>
<html>
<head>
<title>Startseite | Homepage von Philipp Schuster</title>
<meta http-equiv="content-language" content="de" />
<meta charset="UTF-8" />
<link href="design.css" type="text/css" rel="stylesheet" />
</head>
<body> <div id="rahmen" class="boxStyle rTL rTR rBL rBR"> <div id="seitenbereich">
<script>
document.createElement("header");
document.createElement("nav");
document.createElement("section");
document.createElement("footer");
</script>
<header class="boxStyle rTL rTR rBL rBR">
Startseite | Homepage von Philipp Schuster
</header>
<nav>
<ul>
<li><a href="#" class="rTL">Hyperlink</a></li>
<li><a href="#">Hyperlink</a></li>
<li><a href="#">Hyperlink</a></li>
<li><a href="#">Hyperlink</a></li>
<li><a href="#" class="rBL">Hyperlink</a></li>
</ul>
</nav>
<section class="boxStyle rTL rTR rBL rBR">
<h1>Coming Soon ...</h1>
</section>
</div> </div> </body>
</html>
CSS-datei:
- Code: Alles auswählen
body {
text-align:center;
background-color:#ffdd73;
}
#rahmen {
margin: 0 auto;
width:960px;
background-color:#ffb800;
text-align:left;
border-top-width:1;
border-bottom-width:1;
border-left-width:1;
border-right-width:1;
border-style:double;
}
#seitenbereich {
margin-top:5px;
margin-bottom:5px;
margin-left:5px;
margin-right:5px;
padding-bottom:50px;
}
header {
background-color:#bf9730;
font-size:large;
line-height:26px;
padding-left:5px;
}
section {
background-color:#ffd873;
margin-top:10px;
margin-left:205px;
padding-left:5px;
padding-bottom:200px; /* nur solange seite nicht mit inhalt voll ist --> dann 20-40px */
}
section a {
color:#0047FF;
}
section a:hover, section a:focus, section a:active {
color: #0047FF;
text-decoration: underline;
}
h1, h2, h3 {
text-decoration:underline;
}
nav {
float:left;
font-size:large;
width:200px;
margin-top:10px;
}
.rTL { border-top-left-radius: 8px; }
.rTR { border-top-right-radius: 8px; }
.rBL { border-bottom-left-radius: 8px; }
.rBR {border-bottom-right-radius: 8px; }
nav li {
margin-top:10px;
list-style:none;
background-color:#ffca40;
}
nav a {
display:block;
padding-left:16px;
height:22px;
line-height:22px;
font-size:16px;
border: 1px solid #000000;
text-decoration:none;
color:#000000;
}
nav a:hover, nav a:focus, nav a:active {
text-decoration:underline;
background-color:#000000;
color:#ffca40;
}
