Neues Design, bitte bewerten!

Dark Hunter

Bekanntes Gesicht
Mitglied seit
21.08.2006
Beiträge
406
Reaktionspunkte
0
Hi, ich habe mir in den letzten Wochen mal ein neues Design überlegt.
Es soll für eine private Page sein. Wäre netr, wenn ihr mir sagen könntet, wie ihr den Stil findet. Zum Code bitte nichts sagen, den habe ich schnell zusammengeschustert, der wird definitiv noch einmal von grundauf neu gemacht.
~~> Zum Design <~~

MfG Dark Hunter
 
Zuletzt bearbeitet:
Ist ja ganz nett, aber etwas trist. Versuch mal, etwas mehr farbliche Akzente zu setzen, mit Farben wie Gelb, Orange oder Rot.
 
Der Code ist zum davonlaufen! Das hat mit modernem, semantisch korrektem, barrierefreien Webdesign nichts zu tun.

- Tabellenlayout
- nicht valides Dokument
- Dekografiken im Markup statt in CSS
- ohne Grafiken ist alles hin


Design:
Sieht gar nicht so übel aus, fehlt natürlich noch sehr viel Inhalt, Strukturierung, eine Navigations(-struktur) usw.
 
Zuletzt bearbeitet:
Der Code ist zum davonlaufen! Das hat mit modernem, semantisch korrektem, barrierefreien Webdesign nichts zu tun.

- Tabellenlayout
- nicht valides Dokument
- Dekografiken im Markup statt in CSS
- ohne Grafiken ist alles hin


Design:
Sieht gar nicht so übel. Aus fehlt natürlich noch sehr viel Inhalt, Strukturierung, eine Navigations(-struktur) usw.
Wie gesagt, den Code habe ich nur zusammengeschustert ;-) Ich habe nämlich nur schnell mein Design gesliced unn gleich eine html-Datei mit anfertigen lassen. Diese habe ich dann nur ganz gering verändert (praktisch nur Hintergrund und einige überflüssige Bilder entfernt...)! Es ging ja nur ums aussehen, wie bereits geschrieben. Dennoch danke;)
Und in CSS muss ich mich erstmal reinarbeiten. Aber ich werde versuchen, das hinzubekommen.
 
Weil der Inhalt/Thema wäre wichtig, um die Farben und verschiedenen Dinge darauf auszurichten. ;)
 
Jo, weiß ich. Ich denke mal, so ein grau würde auch in einem pinken Stil(pinker Header, pinke Schrift, etc.) gut aussehen. Orange passt meiner Meinung nach auch sehr gut.
 
Ich habe jetzt begonnen, die Website in CSS zu "bauen". Allerdings habe ich so gut wie keine CSS-Kenntnisse. Mein Problem ist folgendes: Zwischen den einzelnen Buttons wird ein automatischer Abstand gemacht. Was genua mache ich falsch? Könnt ihr mir sonst noch irgendwelche Tipps geben?

Hier der Link zum ersten Entwurf: ~~> Klick <~~
Und hier der Link zur style.css: ~~> Klick <~~
 
Erstmal danke für den Link, werde mir das mal anschauen:hoch:
Habe jetzt wie "befohlen" die img-Tags aus der index-Datei rausgenommen. Den Header habe ich nun per CSS eingefügt. Hat vorher nicht richtig geklappt, deswegen habe ich die Alternative genutzt! Jetzt funktionert es aber. Nun muss ich noch den Header in die Mitte ausrichten und die anderen Bilder platzieren. Ich lass demnächst nochmal von mir hören;)
 
Zuletzt bearbeitet:
Ich bin nun ganz gut vorran gekommen. Ich habe das Design vollständig in CSS nachgebaut.
Danke nochmal für deine Tipps, ich98! Du kannst ja nochmal was dazu sagen, z.B. wie du es jetzt mit vernünftigen Code (oder auch nicht vernünftig...) findest.

Hier nochmal der Link: ~~> Klick <~~

MfG Dark Hunter

//edit:
Im Internet Explorer wirds mal wieder nicht korrekt angezeigt, obwohl die Website valide ist... -.-
 
Zuletzt bearbeitet:
Das Menü ist immer noch keine Liste.
Das sollte ungefähr so aussehen:
Code:
<ul id="navi">
<li>Seite 1</li>
<li>Seite 2</li>
<li>Seite 3</li>
<li>Seite 4</li>
<li>Seite 5</li>
</ul>
Dafür musst du dann dein CSS schreiben, um die Hintergrundbild, die Innen/Außenabstände, die Listenpunktausrichtung zu definieren. Tipps dazu stehen in den Tutorials.


CSS heißt nicht, dass man die alten Tabellenzellen durch "Divs" ersetzt, sondern, dass man die vorhanden und semantisch korrekten Elemente entsprechend gestaltet. ;)
Division sind inhaltlich wertlos und sollte somit nur verwendet werden, um anderen semantisch wichtig Element zu gruppieren. Einzelne Elemente werde nur in Ausnahmefällen mit einer Division umschlossen!

Dein <div id="header"> ist leer und somit unpraktisch. Keine Suchmaschine wird deinen Seitentitel so lesen können. Da der Header wohl auch deinen Seitentitel enthalten wird, solltest du ihn als <h1> auszeichen, den Titel reinschreiben und dann diese Methode anwenden, um den Text verschwinden zu lassen:
Gilder/Levin-Methode: http://meiert.com/de/publications/articles/20050513/#toc-gilder-levin


Die Fehlinterpretationen, Bugs bzw. Besondere Handhabungen des IEs lassen sich selten mit einem gültigen Dokument beheben. Da muss man je nach Fall entscheiden und handeln, was genau für ein Problem vorhanden ist.
Um dein normales Dokument nicht mit Hacks zu zu müllen, solltest du ein eigenes CSS-Datei für den IE einbinden und diese per "Conditional Comments" verstecken.
IE-Bug-Liste: http://www.positioniseverything.net/explorer.html
 
Zuletzt bearbeitet:
Ok, dem Bug beim IE werde ich wohl noch entgegenwirken müssen. Allerdings ist die Liste sehr schwer zu realisieren. Meiner Meinung nach sogar gar nicht, da ich verschiedene Bilder im Menü verwende. Ich könnte höchstens ein einziges großes Bild nehmen. Und die Gilde-/Levin-Methode ist meiner Meinung nach für mich sinnlos. Da es um eine private Website geht, sind mir Suchmaschinen-Ergebnisse unwichtig. Außerdem ist es mehr oder weniger cheaten. Dann könnte ich auch gleich den ganzen Quellcode mit "unsichtbaren" Schlüsselwörtern vollstopfen, was mir wahrscheinlich ein sehr gutes Ergebnis bringen würde. Aber das ist eine Methode, die nicht gerne gesehen wird und somit zum Löschen meiner Seite vom Index führen könnte!

//EDIT:

Der Fehler lag im Quelltext. Ich hatte aus welchem Grund auch immer beim Content padding: 2px; eingestellt. So hat der IE das halt anders angezeigt, nun klappt es aber.
 
Zuletzt bearbeitet:
Nein, eben dieses Cheaten ist es nicht, da du nur den Titel widergibst und so allen Benutzern, die keine Grafiken sehen bzw. überhaupt nichts sehen, die Möglichkeit nimmst, deinen Seitentitel zu lesen. ;)
 
Na ok, wenn der Meister es will, werde ich es nochmal integrieren... :rolleyes:
Den Links habe ich jetzt auch ein Hover gegeben. Sieht schon mal meiner Meinung nach deutlich besser aus, auch wenn, wie du schon sagtest, der Code nicht perfekt ist.;)
 
Deine Seite! ;) Ich vertrete nur die meiner Meinung nach besten Methoden.
Mhm, ich werde mir das mal überlegen! Aktuell habe ich noch ein Problem mit dem IE. So wird die Seite wie folgt angezeigt:
Nun ist das Problem, dass ich nicht einfach die beiden Sachen auf "float: left;" stellen kann, da ich faux columns benutze und der Text somit zu weit nach links verschoben wird.

Hier noch ein Auszug aus dem Code:
Code:
/*      Navigation      */

#navigation_left    {
        width: 150px;    
        padding: 0;
        margin: auto;
        background-color: #3f3f3f;
        float: left;
}                


#navigation_right    {
        width: 150px;    
        padding: 0px;
        margin: auto;
        background-color: #3f3f3f;
        float: right;
}    


/*      News     */

#news {
        width: 500px;
        padding: 0px;
        margin: auto;

}            


/*      Content      */

#content_image {
        width: 500px;
        height: 30px;
        padding: 0px;
        margin: auto;
        background-image: url(images/2_14.jpg);
        background-position: top;
        background-repeat: no-repeat;
}    

#content {
        width: 500px;
        padding: 0px;
        margin: auto;
}

Und hier noch einmal der Link zur gesamten CSS:>Klick<
 
Zuletzt bearbeitet:
Zurück