• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Design und Code bewerten [EDITOR]

R

rapid10

Mitglied
Hallo!

Ich brauche wieder einmal eure Hilfe bzw. euren Rat. Ich bin dabei eine Webseite für meine Dienstleistung zu erstellen.
Alles davon ist selbst gemacht (mit Editor und Gimp), d.h wenn euch etwas nicht gefällt kann ich es jederzeit ändern.

Ich würde gerne, dass ihr das Design und den Code bewertet. Aber bitte etwas genauer den Code.

Leider weiß ich, dass ich auf der Startseite (index.php) einen Fehler habe, ich aber nicht weiß wie man den beseitigen kann, ohne dass ich die ganze Seite umschreiben muss.

Es fehlt jetzt nur noch der Inhalt, also die Texte und das Logo, aber das wird demnächst kommen.
Falls ihr Anregungen bzw. Tipps dazu habt: her damit. ;) Danke!

JB Technology

Vielen Dank für euer Feedback.

Liebe Grüße rapid10
 
Design gefällt mir nicht so, irgendwie zu eckig und blass. Der Code ist teilweiße gut, allerdings noch viel zu viele div's!

Crapfruit, wo hast Du denn ein div in einem li gesehen!?
 
Browsertest
Firefox 3: Bestanden
Internet Explorer 7: Bestanden
Opera 10 beta: Bestanden
Safari 3.1: Bestanden
Google Chrome 2: Bestanden

Design / Aufbau
Das Design gefällt mir, ich freue mich, wenn erstmal Logo und der Rest da sind. Schöne Farben wie ich finde. Übersichtlichkeit ist auf jeden Fall gegebene, da es nicht zu viele Menüpunkte gibt und die gut zu finden sind.

Code
Der Validator spuckt noch ein paar Fehler aus.
Die divs benutzt du etwas großzügig, an Stellen wie z. B.:
HTML: 
<div id="navigation2">
  <h1>Willkommen bei JB Technology</h1>
</div>
ist das unnötig.
Die Linie:
HTML: 
<div id="main">
  <div id="line"></div>
</div>
könntest du doch auch mit einem einfachen <hr /> darstellen ;)

Sonst sieht der Code gut und sauber aus. Im Großen und Ganzen sematisch korrekt.

Gefällt mir die Seite!

MfG Icy
 
DerMitSkill schrieb:
Crapfruit, wo hast Du denn ein div in einem li gesehen!?
Zum Vergrößern anklicken....
Massenweise!

Aber das ist nicht der Fehler. Der Fehler ist div#navigation2, das direkt nach dem <ul> kommt. Nach <ul> darf aber nur ein <li> kommen.

Das h2 (das div ist ja eh überflüssig) macht sich also besser außerhalb der ul.
 
Vielen Dank für euer Feedback! Die Fehler im Quellcode werde ich noch beheben und dann hoffe ich, dass es passt! ;) Bin für Vorschläge immer offen.

Design gefällt mir nicht so, irgendwie zu eckig und blass.
Zum Vergrößern anklicken....
Wie würdest du es machen? Welche Farben würdest du nehmen? Und soll ich alles mit abgerundeten Ecken machen, oder wie meinst du das "zu eckig"?

Nochmals danke für eure Tipps und Verbesserungen. Das Logo ist schon fertig, jetzt fehlt nur noch der Feinschliff. :)

Liebe Grüße rapid10
 
Die divs benutzt du etwas großzügig, an Stellen wie z. B.:
HTML-Code:
<div id="navigation2">
<h1>Willkommen bei JB Technology</h1>
</div>
ist das unnötig.
Zum Vergrößern anklicken....
Kannst du mir vielleicht sagen, wie das gehen sollte? Wenn ich bei navigation2 kein div machen, kann ich den Text nicht mit padding so platzieren wie ich will. Mit dem span Tag habe ich das auch schon probiert, geht aber nicht.

könntest du doch auch mit einem einfachen <hr /> darstellen :wink:
Zum Vergrößern anklicken....
Die Linie ist besonders: sie ist mit einem Schatten versehen. ;) Das kann man meines Wissens nicht mit HTML bzw. CSS erstellen oder? :P Trotzdem danke fürs aufmerksame Schauen. 8-)

EDIT: So habe die Fehler ausgebessert. Ist das mit den divs nun in Ordnung oder muss ich noch stärker "entdiven". THX!
http://beta.jbcompany.org/jbtechnology/index.php
 
Zuletzt bearbeitet:
rapid10 schrieb:
Kannst du mir vielleicht sagen, wie das gehen sollte? Wenn ich bei navigation2 kein div machen, kann ich den Text nicht mit padding so platzieren wie ich will.
Zum Vergrößern anklicken....
Wie kommst Du darauf? Du hast es offensichtlich ja noch nichtmal versucht.
Padding kannst Du für jedes Element vergeben, ob div, span, p, address, body oder dt ist völlig egal.
Früher, als man noch HTML für Layout missbrauchte, gab es etliche Attribute, die nur bei bestimmten Tags funktioniert haben. Bei CSS ist das nicht mehr so, da gilt grundsätzlich mal jede EIgenschaft auch für jedes Element, da gibts nur wenige Ausnahmen. Damit tun sich CSS-Umsteiger komischerweise immer schwer, dass es jetzt viel einfacher geht. Sie sind wohl noch zu sehr die alten Restriktionen gewohnt.

Die Linie ist besonders: sie ist mit einem Schatten versehen. ;) Das kann man meines Wissens nicht mit HTML bzw. CSS erstellen oder?
Zum Vergrößern anklicken....
Klar,
Code: 
xxx {
  border:2px outset #ccc;
}
Das ist genau der Effekt der bei <hr> meist voreingestellt ist. Ein Schatten im eigentlichen Sinne ist das aber nicht.

Ist das mit den divs nun in Ordnung oder muss ich noch stärker "entdiven".
Zum Vergrößern anklicken....
#navigation2 ist überflüssig, wie schon gesagt.
#main und #line haben mangels Inhalt noch nicht unbedingt eine Existenzberechtigung.

"#footer .by b" muss noch weg, <b> vermittelt keine Semantik. Wenn Du etwas nur fett haben willst, ohne damit eine Bedeutung zu verinden, setze innerhalb eines einzigen <p> ein <span> um diesen Text und gib ihm font-weight:bold. Wenn der Text wichtig ist, zeichne ihn als wichtig (mit <em>) aus, wenn er besonder wichtig sein soll, mit <strong>. Das wird dann beim Vorlesen entsprechend betont.
 
Wie kommst Du darauf? Du hast es offensichtlich ja noch nichtmal versucht.
Zum Vergrößern anklicken....
Doch habe ich versucht, aber es geht nicht. Wenn ich h2 den Hintergrund gebe, den ich jetzt #div navigation2 gegeben habe, dann kann ich den Text nicht verschieben - wie auch? Da verschiebe ich ja den Hintergrund mit.
Klar, Das ist genau der Effekt der bei <hr> meist voreingestellt ist. Ein Schatten im eigentlichen Sinne ist das aber nicht.
Zum Vergrößern anklicken....
Ich lasse lieber die jetzige Linie. :) Gefällt mir besser. Trotzdem danke!
#main und #line haben mangels Inhalt noch nicht unbedingt eine Existenzberechtigung.
Zum Vergrößern anklicken....
Wie soll ich denn sonst den Hintergrund bei #main machen? Und Text kommt noch, dann ist es nicht umsonst.
Zu #line: Wo soll ich sonst die Linie hingeben bzw. wie soll ich sie anzeigen lassen und wo?
"#footer .by b" muss noch weg, <b> vermittelt keine Semantik. Wenn Du etwas nur fett haben willst, ohne damit eine Bedeutung zu verinden, setze innerhalb eines einzigen <p> ein <span> um diesen Text und gib ihm font-weight:bold. Wenn der Text wichtig ist, zeichne ihn als wichtig (mit <em>) aus, wenn er besonder wichtig sein soll, mit <strong>. Das wird dann beim Vorlesen entsprechend betont.
Zum Vergrößern anklicken....
Ok, danke! Habe ich bereits umgesetzt. :)

Vielen Dank für deine Hilfe und deine Erklärungen.
 
Ich habe der Quellcode nun optimiert und nach eurem Feedback angepasst. Der Header wurde ebenfalls verändert.

Ich habe jetzt nur noch das Problem, wenn man zoomt, dass "scheußliche" Linien die Grafiken voneinander trennen. Und: h1 wird nach rechts verschoben.
Wie kann ich den Darstellungsfehler beseitigen?

Vielen Dank für eurer bisheriges Feedback!

http://beta.jbcompany.org/jbtechnology/index.php

Liebe Grüße Jakob

P.S.: Wenn ihr Lust und Zeit habt, wäre es schön, wenn ihr (vielleicht) auch die Unterseiten kurz anschauen würdet. Vielen Dank!
 
Ich habe jetzt nur noch das Problem, wenn man zoomt, dass "scheußliche" Linien die Grafiken voneinander trennen. Und: h1 wird nach rechts verschoben.
Wie kann ich den Darstellungsfehler beseitigen?
Zum Vergrößern anklicken....
Wisst ihr keinen Rat? Ich habe zuerst gedacht, dass ich padding falsch gesetzt habe, aber das war es, glaube ich, nicht, da in der Normalansicht (kein Zoom) überhaupt keine Darstellungsfehler sind.
Das kommt nur bei einer Zoom-Stufe vor.

Danke! Jakob

http://beta.jbcompany.org/jbtechnology/index.php
 
Bei deinem Problem kann ich dir leider nicht helfen, aber inzwischen hat sich ja einiges am Design verändert. Sieht jetzt richtig gut aus (nur der Header etwas überladen). :)
 
Danke! Den Header wollte ich so haben, weil ich finde, dass das übrige Design eher einfach gehalten ist. :) Und außerdem er soll auffallen. ;)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben