Das ist der neue HTML5 Doctype.. stimmt schon so.. bin mir allerdings nciht sicher, ob dieser <br> erlaubt oder ob man <br /> schreiben muss...
Ich glaube HTML5 lehnt sich auch an die Spezifikationen von XHTML an, d.h. <br /> muss so geschrieben werden.
Es stimmt immer noch nicht. Kannst du abschreiben? Ist jetzt nicht böse gemeint, aber so schwierig ist jetzt das wirklich nicht.
Du hast den Container div.push vergessen. Nimm doch meinen Code und erweitere ihn.
Es stimmt immer noch nicht. Du musst Dein Code schon richtig vergleichen.
Also so eine Sache ist das nicht, hättest Du mein Tutorial genommen, hättest du keine Schwierigkeiten gehabt.
Habe Dir einmal das Grundlayout zusammengestellt:
index.html
<!doctype html>
<html>
<head>
<title>[title]</title>
<meta charset="utf-8">
<meta name="content-language" content="de" />
<link href="core.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="wrapper">
<div id="page_margin">
<!-- no content -->
</div>
<div class="push"><!-- no content --></div>
</div>
<div id="footer">
<!-- no content -->
</div>
</body>
</html>core.css
/* style.css */
/* ----------------------------------- */
* {
padding: 0;
margin: 0;
}
/* Footer Stick */
html, body {
height: 100%;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
#footer, .push {
height: 4em;
clear: both;
}
/* Zentrierung Layout */
body {
text-align: center;
min-width: 55.1em;
}
#wrapper {
width: 55em;
text-align: left;
}
/* Layout */
body {
background-color: #ccc;
}
#wrapper {
background-color: #fff;
}Ich habe folgendes Tutorial verwendet. War bisher das Beste das ich gefunden habe. Wie man nachher den Footer Stick zentriert (aus Deinem Layout ersichtlich), kann ich Dir auch gerne erklären, wenn du es nicht selber hinkriegst :wink:
<!-- m --><a class="postlink" href="http://ryanfait.com/resources/footer-stick-to-bottom-of-page/">http://ryanfait.com/resources/footer-st ... m-of-page/</a><!-- m -->
Nein, dann wird es mir zu dunkel. Sollte schon ein bisschen hell sein. Ich lasse es vorerst so. Mal sehen, was mein Lehrbetrieb dazu sagt.
Der "nach oben" Link müsste man anderst machen. Du setzt einfach einen Link auf die aktuelle Seite, d.h. sie wird einfach erneut geladen.
Da gibt es eine andere Lösung:
Diesen Link ganz oben einpflanzen (am Besten direkt nach dem body-Tag):
<a id="top"><!-- no content --></a>und dann den "nach oben" Link folgendermassen einfügen:
<a href="#top">nach oben</a>So verursachst Du keinen unnötigen Traffic.
P.S.: Das neue Design gefällt mir auch nicht. Farben sollte man heutzutage dezenter einsetzen. Das heisst du darfst ruhig auch weiss oder ein blasses Grau nehmen.
Die Farbwahl finde ich persönlich in Ordnung, aber andere Vorschläge sind immer willkommen.
Die Scrollbalken habe ich extra mit CSS erzwungen. Damit wird das Layout nicht immer "bewegt" wenn der Inhalt länger als die Höhe des Bildschirmes wird.
Ja das ist gewollt, auch um den Platz optimal auszunutzen. Finde ich, stört nicht besonders, werde es mir aber einmal ohne Abstand anschauen.
Hallo
Diese Website wurde schon einmal vorgestellt, jedoch hat sich mittlerweile auch einiges verändert. So wird sie sehr wahrscheinlich auch im Endstadium aussehen.
Bitte um Kritik!
<!-- m --><a class="postlink" href="http://www.notterlegal.ch/beta">http://www.notterlegal.ch/beta</a><!-- m -->
Gehts denn überhaupt noch besser?
<!-- m --><a class="postlink" href="http://simpleviewer.net/">http://simpleviewer.net/</a><!-- m -->
Diese haben auch noch interessante Galerien.
Ich habe mir deine Website nochmals angesehen und es bleibt einfach eine wichtige Frage offen. Was ist der Zweck dieser Website?
P.S.: Bitte nimm diesen "HTML-Grundkurs" raus, das ist ja himmeltraurig und so hilfst du wirklich keinem, das verwirrt nur mehr!
Mit HTML-Tags wie <br /> zum Beispiel.
Okay also,
Ich glaube Du hast so im Allgemeinen nicht viel Ahnung von HTML und besonders CSS. Ich habe mir einmal den Code genauer angesehen. Wie schon früher bemerkt hast du dieses Template von einer fremden Seite übernommen. Das ist nicht schlimm, kannst du ruhig machen. Nur ist es so, dass wenn man ein Template nach seinen Wünschen anpassen will, muss man ein Flair für HTML und CSS haben. Jeder Entwickler von solchen Templates hat eine eigene Technik der Layouterstellung. Und um herauszufinden wie der Entwickler vorgegangen ist, muss man schon etwas mehr als nur das HTML-Seminar hier durchgearbeitet haben. Nun zurück zum Thema. Ich sehe genau das wolltest du machen. Du wolltest dieses Template übernehmen und Dir selber gewisse Elemente dazutun oder gewisse Elemente verändern. Weil Du wirklich mehr Übung brauchst, hat sich dieses Vorhaben zu einer Katastrophe entwickelt. Da war einfach alles hinten und vorne nicht richtig. Ist jetzt nicht übertrieben ausgedrückt. Ich bilde mir die Meinung, dass du dich an zu schwierige Sachen wagst. Kannst du mir aus dem Kopf sagen, wie das float-Prinzip funktioniert? Kannst du ein einfaches zweispaltiges Layout erstellen? Kapierst du das Prinzip der Vererbung in CSS? Weisst du eigentlich wann man padding und margin verwenden soll/muss und wann nicht? Das sind ein paar Fragen die man einfach ohne gross zu überlegen beantworten können muss um solche Projekte wie Deine zu verwirklichen. Ich gebe Dir einen Tipp. Gehe wirklich nochmals das Seminar durch. Am Schluss musst Du dich selber abfragen können. Das heisst, das du nach jedem Kapitel kurz Dir selber sagen kannst, was du gelernt hast und die Theorie auch wirklich erklären kannst und auch verstehst was du gerade sagst. Das ist aber noch nicht alles. Theorie alleine nützt dir nichts. Gleichzeitig musst du noch alles ins Praktische übersetzten und ausprobieren. Und damit meine ich nicht, dass Du eine Website erstellst, nein, sondern du machst einzelne Codeschnipsel und experimentierst herum. Nur so lernst Du. Weil wenn ich deinen Code anschaue merke ich einfach, dass du wirklich sehr wenig weisst und auch ziemlich Mühe hast den kleinsten Fehler zu finden. Jetzt gerade in diesem Thread. Wenn du eine solche Website möchtest, müsstest du diesen Fehler auch selbst sehen können.
Nun genug. Ich habe Dir noch den Code überarbeitet:
index.html
<!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>Computer Clan</title>
<link rel="stylesheet" href="design.css" type="text/css" />
<link rel="shortcut icon" href="images/favicon.ico" type="image/vnd.microsoft.icon">
</head>
<body>
<div id="container">
<div id="header">
<h1>Computer Clan</h1>
<span>computers have feelings</span>
</div>
<div id="nav">
<ul>
<li><a href="#" title="#">Home</a></li>
<li><a href="#" title="#">Login</a></li>
<li><a href="#" title="#">Gästebuch</a></li>
<li><a href="#" title="#">Forum</a></li>
<li><a href="#" title="#">Downloads</a></li>
<li><a href="#" title="#">Info</a></li>
<li><a href="#" title="#">Sonstiges</a></li>
</ul>
</div>
<div id="content">
<div id="page">
<div id="page_content">
<h3>Titel h3</h3>
<p>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 empor 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>
<h3>Titel h3</h3>
<p>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 empor 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="sidebar">
<div id="sidebar_content">
<h4>Uhrzeit und Datum</h4>
<p>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.</p>
<h4>Login</h4>
<p>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.</p>
<h4>Links</h4>
<p>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.</p>
<ul>
<li><a target="_blanc" href="http://www.spyka.net" title="Spyka Webmaster resources">Spyka Webmaster</a></li>
<li><a target="_blanc" href="http://www.mywebsolution.de" title="My Websolution">My Websolution</a></li>
<li><a target="_blanc" href="http://www.phpbox.de" title="PHP Box">PHP Box</a></li>
<li><a target="_blanc" href="http://www.php-einfach.de" title="PHP Einfach">PHP Einfach</a></li>
<li><a target="_blanc" href="http://berlin.pennergame.de/change_please/462670...07/ " title="Penner Game">Penner Game Spende</a></li>
</ul>
</div>
</div>
<div id="footer">
<p>COMPUTER CLAN © 2010 - Homepage
<p>written by <a href="mailto:philipp_cc@gmx.net">Philipp Escher</a> and <a href="maitlo:felixus123@yahoo.de">Felix Dirrol</a></p>
<p>designed by <a href="mailto:philipp_cc@gmx.net">Philipp Escher</a></p>
<p><a href="#" onclick="window.print();">Seite drucken</a></p>
</div>
</div>
</body>
</html>design.css
/* Basis */
* {
padding: 0;
margin: 0;
}
body {
background-color: #666;
min-width: 65.1em;
text-align: center;
}
/* Schriften */
h1 {
font-size: 3.4em;
padding: 40px 0 5px 20px;
color: #fff;
letter-spacing: 3px;
font-weight: normal;
}
span {
font-size: 1em;
padding: 0 0 30px 25px;
color: #fff;
display: block;
}
h2 {
font-family: Geneva, Arial, Helvetica, sans-serif;
color: #7491A1;
}
h3 {
font-size: 1.3em;
font-weight: normal;
margin: 0 0 20px 0;
color: #333333;
border-bottom: 1px solid #ddd;
}
h4 {
background-color: #ddd;
border-bottom: 1px solid #ccc;
padding: 5px;
color: #999;
}
p {
line-height: 150%;
padding: 0 0 15px 0;
}
a {
color: #333;
border-bottom: 1px dotted #333;
text-decoration: none;
border: none;
}
a:hover {
color: #7491A1;
border-bottom: 1px solid #7491A1;
}
#footer a {
color: #fff;
text-decoration: underline;
border: none;
}
#footer a:hover {
border: none;
}
#header p {
text-align:left;
padding:0 0 0 30px;
margin:0;
font-size:0.8em;
color:#fff;
}
#sidebar ul li a {
color: #999999;
border-bottom: 1px solid #CCCCCC;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 1.1em;
}
#sidebar ul li a:hover {
background-color: #ddd;
}
ul, ol {
margin:0 0 5px 30px;
}
li {
list-style-type: none;
list-style-position: inside;
}
#nav ul {
margin:0;
padding:0;
}
#nav ul li {
display:block;
float:left;
}
#nav ul li a {
float:left;
border:none;
padding:25px 15px 0 15px;
height:46px;
letter-spacing:2px;
border-right:1px solid #999999;
color:#999;
text-decoration:none;
display:block;
}
#nav ul li a:hover {
background-color:#333333;
}
#sidebar p {
padding:3px 5px;
font-family:Geneva, Arial, Helvetica, sans-serif;
}
#sidebar ul {
list-style:none;
margin:7px 12px;
}
#sidebar ul li {
padding:3px 0;
}
#footer p {
font-size:0.6em;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:center;
padding:5px;
margin: 0;
}
/* Layout */
#container {
background-color: #fff;
width: 65em;
padding: 0 10px 0 10px;
text-align: left;
margin: 0 auto;
}
#header {
background-color: #000;
height: auto;
}
#nav {
height: 70px;
margin-bottom: 30px;
}
#content {
background-color: #fff;
}
#page {
width: 70%;
float: left;
}
#sidebar {
width: 30%;
float: right;
}
#page_content {
padding: 0 10px 10px 10px;
}
#sidebar_content {
padding: 0 10px 10px 10px;
}
#footer {
padding: 20px 5px;
background-color: #636363;
color: #fff;
clear: both;
margin: 30px 0 0 0;
}Danke für das Feedback und entschuldige bitte meine Ungeduld.
Klingt gut, könnte ich den Link kriegen um mir das mal anzusehen?
Danke!
Tut mir leid ich kann Dir nicht helfen, aber markiere Deinen Code auch als Code:
[code][/code]
hier das ist der css-farb-code:
Codebackground-color:#ffffff
background-color: #ffffff;Ähm, lauras, könntest Du einmal bei axel nachhacken? Ich habe das Gefühl der erscheint überhaupt nie mehr...
#999, #eee, #ddd etc. = grau
#fff = weiss
:wink:
Moment, ich glaube ich habe es falsch verstanden. Ich dachte du hättest einen eigenen Webserver. Da wird es schwierig eine Upgrade zu verlangen. Da du ja physikalisch nur einen Teil eines ganzen Servers für deine Domain zur Verfügung hast. Aber früher oder später werden die sicher ein Upgrade einpflanzen.
So besteht das Problem aber immer noch. Wie wäre es, wenn du einen anderen Port ansprichst, oder ist für diesen Stream nur dieser Port anwendbar? Meistens ist es so, das gewisse Webhoster bestimmte Ports nicht freigeben, da sie ein Sicherheitsrisiko darstellen.
Oder habe ich es wieder falsch verstanden, weil der Port für den Stream nur in deinem Netzwerk geblockt ist?