Spieleguru
Mitglied
Hallo,
ich bin dabei ein kleines Template zu schreiben und bin jetzt soweit fertig, bzw. es läuft einwandfrei im Firefox, für andere Browser müssten wohl noch ein Paar Anpassungen gemacht werden, ist aber jetzt nicht von relevanz
Ich wollte jetzt einmal fragen, was ich noch unbedingt ändern sollte, was so gar nicht geht, was noch fehlt und was überhaupt nicht benötigt wird, damit ich ein Template mit gutem Programmierstil habe. Wäre toll wenn der ein oder andere mal kurz rüberschauen würde
ich bin dabei ein kleines Template zu schreiben und bin jetzt soweit fertig, bzw. es läuft einwandfrei im Firefox, für andere Browser müssten wohl noch ein Paar Anpassungen gemacht werden, ist aber jetzt nicht von relevanz
Ich wollte jetzt einmal fragen, was ich noch unbedingt ändern sollte, was so gar nicht geht, was noch fehlt und was überhaupt nicht benötigt wird, damit ich ein Template mit gutem Programmierstil habe. Wäre toll wenn der ein oder andere mal kurz rüberschauen würde
HTML:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html >
<head>
<title>titel</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta content="autor" name="author" />
<meta name="description" content="beschreibung" />
<meta name="keywords" content="keywords" />
<meta name="date" content="2011-05-03T15:21:00+02:00" />
<meta name="robots" content="follow" />
</head>
<body>
<div id="container">
<div id="header">
<img alt="header" width="100%" height="100%" src="images/header.jpg" />
</div>
<div id="menu">
<div id="menu_title">
<h2>Menü</h2>
</div>
<div id="menu_content">
<div class="box2">
<!--Login Formular-->
<form method="post" action="func/login.php">
<p>Nickname</p>
<input type="text" name="nick" maxlength="15" size="12" value="" />
<p>Passwort</p>
<input type="password" name="password" maxlength="100" size="12" value="" />
<input type="submit" value="Login" />
<p><input type="checkbox" name="always_logged" value="1" />Dauerhaft einloggen?</p>
<div>
<a href="index.php?page=reg" title="Registrier dich, wenn du noch keinen Account hast.">Registrieren</a>
|
<a href="index.php?page=sendpass" title="Passwort vergessen? Lass dir ein neues zukommen!">Passwort vergessen?</a>
</div>
</form>
<!--Login Formular Ende-->
</div>
<ul class="navi">
<li><a href="index.php">Startseite</a></li>
<li><a href="index.php?page=reg">Registrieren</a></li>
<li><a href="#">Forum</a></li>
<li><a href="index.php?page=story">Story</a></li>
<li><a href="index.php?page=serverinfo">Serverinfos</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="content_title">
<h1>Startseite</h1>
</div>
<div id="content_content">
<div class="box1">
<p class="fett">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div id="footer">
version, ...
</div>
</div>
</div>
</body>
</html>
Code:
/*Anfang Allgemeine Formatierung*/
html, body, div {
margin: 0;
padding: 0;
}
body {
font: 100% sans-serif;
background-color: #000000;
}
#header {
height: 10em;
position: fixed;
z-index: 3;
border-bottom: #2c4269 solid 1px;
top: 0;
}
#container {
text-align: left;
width: 50em;
margin: 0;
background-color: #ebf0f6;
}
/*Ende Allgemeine Formatierung*/
/*Anfang Allgemeine Formatierung Menü*/
#menu {
float: left;
width: 12em;
background-color: #ebf0f6;
position: fixed;
top: 10em;
z-index: 2;
border: #2c4269 solid 1px;
border-top: 0;
}
#menu_title {
border-bottom: #2c4269 solid 1px;
background-color: #5b7eb8;
}
#menu_content {
font-size: 0.8em;
}
.navi {
list-style-type: none;
margin: 15px 0 15px 0;
padding: 0;
}
.navi li ul {
list-style-type: none;
margin: 0;
padding: 0;
display: none;
}
.navi li:hover ul {
display: block;
position: fixed;
left: 12em;
width: 12em;
background-color: #ebf0f6;
border: #2c4269 solid 1px;
}
.navi a:link, .navi a:visited {
text-decoration: none;
color: #000000;
display: block;
font-weight: bold;
padding: 2px;
border-left: 23px solid #ff9900;
background-color: #ebf0f6;
}
.navi a:hover {
color: #000000;
background-color: #0078ff;
border-left: 23px solid #ffad00;
}
/*Ende Allgemeine Formatierung Menü*/
/*Anfang Allgemeine Formatierung Inhalt*/
#content {
width: 38em;
position: absolute;
top: 10em;
left: 12em;
z-index: 1;
}
#content_title {
border-bottom: #2c4269 solid 1px;
background-color: #5b7eb8;
}
#content_content {
background-color: #ebf0f6;
margin: 0;
padding: 0.1% 0 0 0; /* Sonst oben schwarzer Balken */
font-size: 0.8em;
border-right: #2c4269 solid 1px;
border-bottom: #2c4269 solid 1px;
}
#footer {
background-color: #909090;
font-size: 0.7em;
border: #2c4269 solid 1px;
border-top: 0;
padding-left: 1em;
}
/*Ende Allgemeine Formatierung Inhalt*/
/*Anfang Formatierung Formulare*/
input, button, select, option{
font-size: 1em;
background-color: #ffffff;
border: thin groove;
border-color: #aaaaaa;
}
textarea {
background-color: #ffffff;
border: thin groove;
border-color: #aaaaaa;
}
/*Ende Formatierung Formulare*/
/*Anfang Formatierung Boxen*/
.box1 {
margin: 1.2em;
padding: 0.5em;
background-color: #7E9AC7;
}
.box2 {
margin: 1.2em;
padding: 0.5em;
background-color: #BECEDE;
}
.box3 {
margin: 1.2em;
padding: 0.5em;
border: 1pt solid black;
background-color: #BECEDE;
}
/*Ende Formatierung Boxen*/
p {
margin: 0;
}
h1 {
margin: 0 0 0 2em;
padding: 0;
font-size: 1em;
}
h2 {
margin: 0 0 0 2em;
padding: 0;
font-size: 1em;
font-weight: bold;
}
.fett {
font-weight: bold;
}
.klein {
font-size: 0.9em;
}
.fehler {
font-size: 0.9em;
color: red;
font-weight: bold;
}
.center_fett {
font-size: 1.2em;
font-weight: bold;
text-decoration: underline;
text-align: center;
}
/* Anfang Formatierung für BBC-Text */
.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}
.underline {
text-decoration: underline;
}
.overline {
text-decoration: overline;
}
/* Ende Formatierung für BBC-Text */
/* Anfang Formatierung Tabellen */
table {
border: 1pt solid black;
border-collapse: collapse;
width: 100%;
margin-bottom: 1.2em;
}
td {
border: 1pt solid black;
}
/* Ende Formatierung Tabellen */
