Design und Code bewerten

[Rostgnom]

Hallo Community,

mir war langweilig also habe ich mal ein Template erstellt: Homepage
Bitte bewertet Code und Design!

Noch einige Fragen:
- Soll ich zwischen Inhalt und News mehr Platz lassen? Wenn ja, wie?
- Die Farbe, mit der "Startseite" geschrieben ist, soll sie noch öfter vorkommen? Wenn ja, wo?
- Wie bekomme ich die schwarze Zeile ganz unten genau ans Ende der Seite? Im Moment muss man um die Länge dieses Balkens nach unten Scrollen um ihn zu sehen. Der Code im Moment:

.footer {
  text-align: center;
  font-size: 0.7em;
  background-color: black;
  bottom: 0;
  height: auto;
}

Mit margin-bottom funktioniert es nicht

 

[tarik02]

Sieht insgesamt ganz schön aus!


Aber:

-zu dunkel
-irgendwie zu sehr and den linken Rand gequetscht
-bekommt man diese abtrennende Linie nicht auch als <hr>-Linie hin?
Hätte den Vorteil wenn man die Grafiken deaktiviert man die Linie trotzdem sieht


Mfg tarik02

 

[Rostgnom]

Sieht insgesamt ganz schön aus!


Aber:

-zu dunkel
-irgendwie zu sehr and den linken Rand gequetscht
-bekommt man diese abtrennende Linie nicht auch als <hr>-Linie hin?
Hätte den Vorteil wenn man die Grafiken deaktiviert man die Linie trotzdem sieht


Mfg tarik02

Aaargh ich krieg die Krise mit den Browsern ^^
Also so wie es in Opera und Firefox aussieht gehört es.
Das IST eine <hr>-Linie


Kann mir jemand sagen wie ich diese Seite auch im Internet Explorer richtig darstellen kann?

 

[Icy]

Naja ich weiß nicht, der Hintergrund mag mir nicht gefallen. Zu dunkel für meinen Geschmack. Sonst ist die Aufteilung der Seite ganz gut.

Der Code geht jedoch gar nicht. Der ist zwar valide, semantisch aber von vorn bis hinten nicht korrekt.

Beispiele:

- Aufteilung der Seite durch eine Tabelle, und das nur, um das Menü neben den Inhalt zu bekommen? Das bekommst du auch problemlos durch's Floaten hin. Tabellen sind nur zur Auszeichnung tabellarischen Inhaltes da, auch wenn mir der Satz mittlerweile aus den Ohren heraushängt.

- deine Überschriften:

<div class="banner">
  <span class="header_font">&Uuml;berschrift</span>
</div>

Warum um alles in der Welt zeichnest du eine Überschrift nicht als solche aus (<h1>, <h2> etc), anstatt ein span- und ein div-Element drumherum zu legen? Das selbe gilt auch für "Startseite" und "News".

- deine Navigation solltest du als horizontale Liste auszeichnen

- CSS in die externe Stylesheet-Datei auslagern; auch Dinge, die du bis jetzt per HTML gelöst hast (z. B. border)

MfG Icy

 

[Rostgnom]

Ich habe den Code jetzt soweit überarbeitet.
Wie kann ich den Abstand zwischen den einzelnen Links in meiner Navigation vergrößern und/ oder ein Trennzeichen ("|") hinzufügen?

@Icy: Soll ich den Hintergrund ganz einfach ein wenig heller gestalten?

 

[_Thor_]

<div class="banner">
  <h1>&Uuml;berschrift</h1>
</div>

Warum ist um diese Überschrift noch ein <div>? Was gruppiert es? Du hast auch keine Rahmen, für die du es brauchen würdest, also unnötig, weg damit.

<div class="menu">
  <ul class="navi">
    <li><a href="index.html">Startseite</a></li>
    <li><a href="index.html">Link 1</a></li>
    <li><a href="index.html">Link 2</a></li>
    <li><a href="index.html">Link 3</a></li>
  </ul> 
</div>

Hier das gleiche, was gruppiert das <div>? Nichts, also weg damit.

<div class="column_left">
      <span class="firstup">I</span>psum dolor sit amet, consectetuer 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. 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.
      Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla 
      facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te 
      feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut 
      laoreet dolore magna aliquam erat volutpat.
      Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
      consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu 
      feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue 
      duis dolore te feugait nulla facilisi.  
      </div>

Fließtext gehört in ein <p>, nicht in ein <div>.

<div class="footer">
  Created By Joscha G&ouml;tzer | <a href="#">Kontakt</a> | <a href="#">Impressum</a>
</div>

Der Footer wäre korrekter als Liste ausgezeichnet, nicht als <div>.

Aber die Optik gefällt mir.

 

[Rostgnom]

<div class="banner">
  <h1>&Uuml;berschrift</h1>
</div>

Warum ist um diese Überschrift noch ein <div>? Was gruppiert es? Du hast auch keine Rahmen, für die du es brauchen würdest, also unnötig, weg damit.

Ich setze es zur Formatierung ein also konkret zum floaten des Banners links vom Menü. Wie kann ich das besser lösen?

<div class="menu">
  <ul class="navi">
    <li><a href="index.html">Startseite</a></li>
    <li><a href="index.html">Link 1</a></li>
    <li><a href="index.html">Link 2</a></li>
    <li><a href="index.html">Link 3</a></li>
  </ul> 
</div>

Hier das gleiche, was gruppiert das <div>? Nichts, also weg damit.

Und die gleiche Antwort ;)

<div class="column_left">
      <span class="firstup">I</span>psum dolor sit amet, consectetuer 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. 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.
      Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla 
      facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te 
      feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut 
      laoreet dolore magna aliquam erat volutpat.
      Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
      consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu 
      feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue 
      duis dolore te feugait nulla facilisi.  
      </div>

Fließtext gehört in ein <p>, nicht in ein <div>.

Dieses <div> benutze ich auch wieder, um es als Spalte zu verwenden. Icy meinte Tabellen seien hier nicht korrekt.

<div class="footer">
  Created By Joscha G&ouml;tzer | <a href="#">Kontakt</a> | <a href="#">Impressum</a>
</div>

Der Footer wäre korrekter als Liste ausgezeichnet, nicht als <div>.

Das funktioniert irgendwie nicht... Wie soll das gehen?

Aber die Optik gefällt mir.

Dankeschön Ist dir der Hintergrund auch zu dunkel?

 

[_Thor_]

Um zuerst mal deine Frage zu beantworten

Wie kann ich den Abstand zwischen den einzelnen Links in meiner Navigation vergrößern und/ oder ein Trennzeichen ("|") hinzufügen?

Abstände regelt man mit margin, das wäre der Aussenabstand und padding, das wäre der Innenabstand. http://www.css4you.de/wsboxmodell/index.html

Ich setze es zur Formatierung ein also konkret zum floaten des Banners links vom Menü. Wie kann ich das besser lösen?

Floate die Überschrift.

Und die gleiche Antwort ;)

Auch hier kannst du die Liste floaten.

Dieses <div> benutze ich auch wieder, um es als Spalte zu verwenden.

Das kannst du ebenso mit einem <p> machen.

Icy meinte Tabellen seien hier nicht korrekt.

Da hat er auch Recht, Tabellen sind für die Auszeichnung tabellarischer Daten.

Wird sofort geändert ^^

Gut, hoffentlich auch verstanden, denn sonst wirst du es bei der nächsten Seite evtl auch wieder falsch machen.

Dankeschön Ist dir der Hintergrund auch zu dunkel?

Der Hintergrund geht, wenn man nicht stundenlang drauf schauen muss, aber die helle Schrift blendet fast etwas und strengt sehr an.

 

[Rostgnom]

Das Menü bekomme ich nicht mehr nach rechts. right: 0; funktioniert nicht, um es wieder an den rechten Rand zu rücken. Was tun?

Außerdem ist der News-Teil irgendwie verrutscht.

Ich werde mal schauen was ich noch an der Farbe verändern kann.

 

[_Thor_]

Das Menü bekomme ich nicht mehr nach rechts. right: 0; funktioniert nicht, um es wieder an den rechten Rand zu rücken. Was tun?

text-align: right; z.B. oder du gibst dem Menü eine feste Breite, dann funktioniert float: right auch wieder.

Außerdem ist der News-Teil irgendwie verrutscht.

Der News-Teil war schon richtig in dem <div>, dort werden ja die Überschrift und die Liste gruppiert, damit du sie gemeinsam formatieren kannst, dort ist das <p> nicht richtig, es ist ja kein Textabsatz.

 

[Rostgnom]

text-align: right; z.B. oder du gibst dem Menü eine feste Breite, dann funktioniert float: right auch wieder.


Der News-Teil war schon richtig in dem <div>, dort werden ja die Überschrift und die Liste gruppiert, damit du sie gemeinsam formatieren kannst, dort ist das <p> nicht richtig, es ist ja kein Textabsatz.

Das klappt jetzt soweit ganz gut. Nur möchte ich das Menü genau in der Mitte des Wortes "Überschrift" haben. vertical-align: middle; funktioniert nicht...

 

[_Thor_]

Entferne das margin-top der Überschrift.

 

[Rostgnom]

Entferne das margin-top der Überschrift.

Huch, da ist es ja ^^ Nach sowas hab ich gesucht Danke

Jetzt blebit nur noch die letzte Frage, nämlich wie ich die Position des schwarzen Balkens ganz ans Ende der Seite setzen kann (siehe Erstbeitrag)

 

[_Thor_]

Jetzt blebit nur noch die letzte Frage, nämlich wie ich die Position des schwarzen Balkens ganz ans Ende der Seite setzen kann (siehe Erstbeitrag)

Ist er doch.

 

[assmaje]

Also das Design gefällt mir sehr gut (mal davon abgesehen, dass es meiner Meinung nach etwas zu breit ist). Schön übersichtlich, der Farbverlauf ist gut gelungen. Tipp: Blocktext sieht besser aus. ;) Und ein Impressum fehlt.

 

[Rostgnom]

Also das Design gefällt mir sehr gut (mal davon abgesehen, dass es meiner Meinung nach etwas zu breit ist). Schön übersichtlich, der Farbverlauf ist gut gelungen. Tipp: Blocktext sieht besser aus. ;) Und ein Impressum fehlt.

- Soll ich auf 60% Breite umsteigen?
- Blocksatz kommt.
- Brauch ich für ein Template ein Impressum??

@Thor: Bei mir muss man einmal um die Länge dieses Balkens nach unten scrollen um ihn zu sehen, d.h. er müsste um seine eigene Länge nach oben rutschen.

 

[_Thor_]

Aso, dann suchst du sowas hier html fixed footer - Google-Suche

 

[assmaje]

Soll ich auf 60% Breite umsteigen?

Du kannst es so lassen, es wird immer Leute geben, die es schmaler oder breiter besser finden werden. Man kann es ja nicht jedem recht machen. ;)

Brauch ich für ein Template ein Impressum??

Deine Website (auch wenn es momentan nur ein Template ist) ist online, du musst also ein Impressum haben.

 

[Rostgnom]

Aso, dann suchst du sowas hier html fixed footer - Google-Suche

Genau das war es Dankeschön ^^

Okay das mit dem Impressum werde ich noch nachholen.