Codes & Design

  • Hallo Leute, hab mal endlich wieder an meiner Website weitergemacht also bis jetzt die erste Seite :mrgreen: erstmal zum Test, bezüglich ob alles stimmt HTML,PHP und CSS mäßig. Außerdem würde ich mich freuen wenn ihr mal ein paar Screenshots rein stellt, wie die Website bei euch angezeigt wird. Hier mal die Website http://www.aiizo.de


    Code PHP

    PHP
    1. <span class="syntaxhtml"><!doctype html><br /><html><br /><br /><head><br />    <title>Aiizo - Home</title><br />              <link href="./design.css" type="text/css" rel="stylesheet" /><br />              <meta http-equiv="content-type" content="text/html; charset=ISO-8859-2" /><br />              <meta name="content-language" content="de" /><br />              <meta name="author"           content="Christian Huml" /><br />              <meta name="publisher"        content="Christian Huml" /><br />              <meta name="copyright"        content="Christian Huml" /><br />              <meta name="keywords"         content="" /><br />              <meta name="description"      content="" /><br />              <meta name="page-topic"       content="" /><br />              <meta name="page-type"        content="" /><br />              <meta name="language"         content="Deutsch" /><br />              <meta name="revisit"          content="After 7 days" /><br />              <meta name="robots"           content="INDEX,FOLLOW" /><br /></head><br /><br /><body><br /><div id="head"><br /></div><br /><br /><br /><br /><ul id="navigation"><br /><li> <a href="index.php">Home</a> </li><br /></ul><br /><br /><div id="inhalt"><br /><span class="syntaxdefault"><?php<br />echo </span><span class="syntaxstring">"<p class=\"zeit\"</p>"</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">.</span><span class="syntaxdefault"> date </span><span class="syntaxkeyword">(</span><span class="syntaxstring">"d.m.Y H:i:s"</span><span class="syntaxkeyword">);<br /></span><span class="syntaxdefault"> ?><br /></span><h3>Lorem ipsum</h3><br /><p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /></p><br /></div><br /><br /><br /></body><br /></html></span>


    CSS Datei:


  • Bei deiner Zeitausgabe erzeugst du ziemlich falschen HTML-Code. Richtig müsste es so sein:

    PHP
    1. <span class="syntaxdefault"></span><span class="syntaxkeyword">echo </span><span class="syntaxstring">"<p class=\"zeit\">" </span><span class="syntaxkeyword">. </span><span class="syntaxdefault">date </span><span class="syntaxkeyword">(</span><span class="syntaxstring">"d.m.Y H:i:s"</span><span class="syntaxkeyword">).</span><span class="syntaxstring">"</p>"</span><span class="syntaxkeyword">; </span><span class="syntaxdefault"></span>

    Außerdem hat sowieso jeder ne eigene Uhr am Computer, das ist damit überflüssig.


    In deinem CSS-Code wird zuerst versucht die Schirftart "Arial" zu benutzen, wenn diese nicht da ist wird irgendeine serifenlose Schriftart benutzt, nur wenn keine vorhanden ist, wird "Verdana" verwendet. Da Verdana aber auch eine serifenlose Schriftart ist, kann sie gar nicht da sein, wenn keine serifenlose Schriftart vorhanden ist.


    Die Einheit pt ist nicht für den Bildschirm geeignet, da sie absolut in cm ist. (Hört sich ein bischen komisch an, ich weiß nicht, wie ich das sonst sagen soll^^) Außerdem benutzt du zur Angabe der Schriftgröße px und pt, also zwei komplett verschiedene Einheiten.


    Für margin gibt es genau die Selbe Kurzschreibweise, wie für padding. Du musst da nicht alle Werte einzeln angeben.


    Wenn man die Grafiken entfernt sieht man gar nichts mehr, da Schrift- und Hintergrundfarbe weiß ist, du solltest noch Hintergrundfarben definieren.
    Dies gilt vor allem für den Header, da hier bei großen Auflösungen das Bild rechts wiederholt wird. Hier solltest du das Wiederholen auf der x-Achse verhindern und als Hintergrundfarbe, die Farbe nehmen, mit der das Bild rechts aufhört.

  • Für Screenshoots empfehle ich http://browsershots.org/. Es empfiehlt sich außerdem ein reset-Stylesheet an den Anfang zu stellen, wie z.B.:

    Code
    1. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}q:before,q:after{content:''}abbr,acronym,fieldset,img{border:0}

    Das normt dir quasi alles^^


    Ansonsten hat Sören soweit alles gesagt^^


    PS: Dieser Thread wäre in in 'Eure Werke' besser aufgehoben :P

  • Zitat

    Bei deiner Zeitausgabe erzeugst du ziemlich falschen HTML-Code. Richtig müsste es so sein:


    Code: Alles auswählen
    echo "<p class=\"zeit\">" . date ("d.m.Y H:i:s")."</p>";


    Ok, hab ich korrigiert.


    Zitat

    Für margin gibt es genau die Selbe Kurzschreibweise, wie für padding. Du musst da nicht alle Werte einzeln angeben.


    Ähm, stehe gerade auf der Leitung was meinst du damit? :wink:


    Zitat


    Wenn man die Grafiken entfernt sieht man gar nichts mehr, da Schrift- und Hintergrundfarbe weiß ist, du solltest noch Hintergrundfarben definieren.
    Dies gilt vor allem für den Header, da hier bei großen Auflösungen das Bild rechts wiederholt wird. Hier solltest du das Wiederholen auf der x-Achse verhindern und als Hintergrundfarbe, die Farbe nehmen, mit der das Bild rechts aufhört.


    Kann man denn eine 2 Alternative definieren bezüglich Hintergrundfarben? Das es erst erscheint wenn die Grafiken nicht angezeigt werden.

  • Zu der Kurzschreibweise:
    Du kannst anstelle von

    Code
    1. margin-top: 5px;
    2. margin-right: 10px;
    3. margin-bottom: 3px;
    4. margin-left: 7px;

    auch ganz einfach margin: 5px 10px 3px 7px; (Top | Right | Bottom | Left) schreiben (:
    Wenn der Abstand Rechts und Links gleich ist, dann kannst du sogar einfach margin: 5px 10px 3px; (Top | Right & Left | Bottom) schreiben (:
    Ebenfalls ist es möglich wenn du oben und unten, sowie links und rechts jeweils die gleichen Werte für verwenden willst einfach margin: 5px 10px (Top & Bottom | Right & Left) zu schreiben (=



    Und Zwecks deiner "Alternative", du kannst als erstes eine Hintergrundfarbe definieren und anschließend ein Bild setzten (:

  • Zitat

    auch ganz einfach margin: 5px 10px 3px 7px; (Top | Right | Bottom | Left) schreiben (:
    Wenn der Abstand Rechts und Links gleich ist, dann kannst du sogar einfach margin: 5px 10px 3px; (Top | Right & Left | Bottom) schreiben (:
    Ebenfalls ist es möglich wenn du oben und unten, sowie links und rechts jeweils die gleichen Werte für verwenden willst einfach margin: 5px 10px (Top & Bottom | Right & Left) zu schreiben (=


    Naja, ich habs ehrlich gesagt nicht ganz verstanden.
    Wie muss ich da genau vorgehen?
    Wenn ich in deinen Bsp. 5px habe wie weiß ich dann dass es oben ist und nicht unten? Oder hab ich dass falsch verstanden?
    Das in den Klammern verwirrt mich ein wenig muss dass auch in die CSS?


    Naja, um dass geht es eigentlich nicht, bin schon die ganze Zeit am Tüffteln bezüglich wenn keine Grafik geht dass wenigstens ein Hintergrund vorhanden sein sollte, kein Problem, natürlich sollte der Text auch wieder so sein wie in der Grafik. Nun dass Problem, wenn ich die Schriftgröße vergrößert verschiebt es mir den Abstand von oben, mit margin kein Problem was mach ich falsch?


    Test.php


    PHP
    1. <span class="syntaxhtml"><!doctype html><br /><html><br /><br /><head><br /> <title>Aiizo - Home</title><br /> <link href="./design.css" type="text/css" rel="stylesheet" /><br /> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-2" /><br /> <meta name="content-language" content="de" /><br /> <meta name="author" content="Christian Huml" /><br /> <meta name="publisher" content="Christian Huml" /><br /> <meta name="copyright" content="Christian Huml" /><br /> <meta name="keywords" content="" /><br /> <meta name="description" content="" /><br /> <meta name="page-topic" content="" /><br /> <meta name="page-type" content="" /><br /> <meta name="language" content="Deutsch" /><br /> <meta name="revisit" content="After 7 days" /><br /> <meta name="robots" content="INDEX,FOLLOW" /><br /></head><br /><br /><body><br /><div id="head"><br /><p class="logo">Aiizo</p><br /></div><br /><br /><br /><br /><ul id="navigation"><br /><li> <a href="index.php">Home</a> </li><br /></ul><br /><br /><div id="inhalt"><br /><span class="syntaxdefault"><?php<br /></span><span class="syntaxkeyword">echo </span><span class="syntaxstring">"<p class=\"zeit\">" </span><span class="syntaxkeyword">. </span><span class="syntaxdefault">date </span><span class="syntaxkeyword">(</span><span class="syntaxstring">"d.m.Y H:i:s"</span><span class="syntaxkeyword">).</span><span class="syntaxstring">"</p>"</span><span class="syntaxkeyword">;<br /> </span><span class="syntaxdefault">?><br /></span><h3>Lorem ipsum</h3><br /><p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /></p><br /></div><br /><br /><br /></body><br /></html></span>



    Test CSS:



    PS: Stimmt nicht mit dem was Online ist überein.

  • Ja, du hast was falsch verstanden :( Es kommt auf die Anzahl der Werte und die Position des Wertes an, auf was es sich bezieht .__.
    haben wir 4Werte so steht der erste für den oberen, der zweite für den rechten, der dritte für den unten und der vierte für den linken.
    margin: [Top]px [Right]px [Bottom]px [Left]px;


    Dir ist bewusst was em bedeutet/wofür das steht?^^
    Es bezieht sich auf die Schriftgröße in dem Element :wink: Ergo: Ist die Schriftgröße in dem Element 16px dann ist 1em 16px. 1.5em wären dann 24px.
    Ändern wir nun die Schriftgröße auf z.B. 20px dann ist 1em nicht mehr 16px sondern 20px und 1.5em wären dann 30px (:

  • Zitat

    Wie es aussieht kommt deine Website nicht klar mit grösseren Bildschirmen bzw. mit der Auflösung 1920x1080. Hier ein Screenshot wie es bei mir aussieht:


    <!-- m --><a class="postlink" href="http://img806.imageshack.us/img806/5816/bildschirmfoto20110208u.png">http://img806.imageshack.us/img806/5816 ... 10208u.png</a><!-- m -->


    Habe mir den ansonsten den Code nicht genauer angeschaut, da hilft dir sowieso Sarkkan momentan


    Hallo, nach langer Zeit hab ich wieder Zeit mich ein wenig mit meiner Website zu beschäftigen, ja ich weiß dass es von der Auflösung noch ein wenig happert bin leider noch nicht dazu gekommen, da ich so viel um die Ohren hab, ich werde es versuchen es zu beheben, sollte ich es wirklich nicht zusammenbringen, werde ich natürlich wieder schreiben.

  • falls es noch niemand hier erwähnt hat (hab nicht alle antworten gelesen):


    gib mal deinem layout ne feste breite, weil wenn man nen 21zoll bildschirm hat sieht es nicht sehr schön aus wenn es so breit ist ;)