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

Site für mich

Hallo,
also auf den ersten Blick ist es ein ungewöhnliches Design, aber sehr interessant gestaltet. Die Schriften ragen leider etwas ineinander, gerade beim Hover-Effekt in der Navigation ist das seltsam.

Aber was mir nicht gefällt ist die übertriebene Verwendung von <div>s und ids. So etwas wie
HTML:
<body id='body'>
ist ziemlich sinnfrei. Eine ID bezeichnet ein einmaliges Element innerhalb einer HTML-Datei, aber ein HTML-Dokument kann nur einen Body haben. Daher ist das sinnlos.

Genauso sinnlos ist es, <div>s mit nur einem Element zu verwenden:
HTML:
<div id=ueberschrift_Flemming>
    Flemming
    </div>
    <div id='sitetitle'>
    Startseite
    </div>
Für Überschriften gibt es die h1, h2, ... Tags, die du per CSS ebenfalls designtechnisch anpassen kannst.

Und ich würde mir auch überlegen OB ICH ALLES AUF MEINER WEBSEITE GROßSCHREIBE, WEIL DAS AUF DAZER EHER KOMISCH AUSSIEHT, FINDEST DU NICHT? AUßERDEM GIBT ES (NOCH) KEIN GROßES ß IM ZEICHENSATZ, DAHER SIEHT DAS AUCH KOMISCH AUS ;-)

Gruß
Jens
 
Hallo Flemli200,
die Designidee gefällt mir. Es ist ganz gut gelöst, dass der weiße Streifen mit Navigation sich auf die volle Breite ausdehnt. Hat natürlich den Nachteil, dass das Bild verzerrt wird - bei dieser Grafik aber nicht besonders auffällig. Mit welcher Bildschirmauflösung hast du das entwickelt? Bei meinen 1600px Breite sieht das noch in Ordnung aus, aber bei den weiter verbreiteten 1024px Breite rutschen die Links schon etwas ineinander, und bei den Referenzen wird der Text ungünstig umgebrochen. Bei 800 x 600 Pixeln und kleineren Auflösungen kann man die Navigation fast vergessen, da einige Links ins Schwarze verschwinden, vom viel zu kleinen Textfeld ganz zu Schweigen.
An sich ist die Idee, die Positionen anhand des Viewports festzulegen, nicht schlecht, aber das Problem ist, dass du nicht weißt, welche Auflösung der Besucher hat und ob das Design + Usability nicht völlig kaputt gehen wegen dessen Auflösung. Wenn du ein bisschen mit der Größe des Browserfensters herumspielst, siehst du wo es hakt.

Des weiteren sind etwas viele Divs im Code, die man weglassen oder durch semantisch sinnvollere Tags ersetzen kann. Die Navigation ist eine unsortierte Liste (ul), die Abstände und Umbrüche von den <br>-Tags macht man mit CSS. Einige Styleangaben aus den style-Attributen sollten noch ausgelagert werden (Referenzen).
Der weiße Streifen ist über das img-Tag eingebunden, obwohl es sich um eine Hintergrundgrafik ohne Inhaltsbezug handelt und müsste via CSS als Hintergrundbild eingebunden werden. Da sich Hintergrundbilder (noch) nicht per CSS auf 100% Breite und Höhe anpassen lassen, hast du es so eingebunden - das lässt sich aus Designersicht noch verschmerzen ;)

Insgesamt eine interessante Idee, aber an der Umsetzung lässt sich noch was machen.

EDIT: Attribute in HTML-Tags gehören immer in Anführungszeichen. Anderes ist (beim von dir verwendeten HTML 4) zwar möglich, aber es sollten immer "doppelte Anführungszeichen" verwendet werden!
 
Zuletzt bearbeitet:
Das mit den Anführungszeichen ist, weil ich die Site in PHP geschrieben hab und im echo ""; dürfen keine doppelten anführungszeichen stehen^^

Weißt du wie ich das hinbekomme, das wenn man auf einen link klickt, nicht das ganze hintergrundfenster (#links) in weiß angezeigt wird?
 
Die idee finde ich gut, gelungen, ausgefallen und vor allem einfach (dehalb aber nicht weniger gut), der hover effekt ist nicht meins, zumal er nur dann angezeigt wird, wenn man genau über den text fährt. ich würde den text zwar hovern, aber nicht aus dem menü herausrücken.

den content bereich darf man dann wohl auch etwas gösser machen, was eventuelle scrollbalken eleminiren kann.
 
Das mit den Anführungszeichen ist, weil ich die Site in PHP geschrieben hab und im echo ""; dürfen keine doppelten anführungszeichen stehen^^
Dann nimm doch echo ''; mit einfachen Anführungszeichen oder den Backslash \" um das Zeichen zu maskieren^^

Weißt du wie ich das hinbekomme, das wenn man auf einen link klickt, nicht das ganze hintergrundfenster (#links) in weiß angezeigt wird?
bei mir wird im Hintergrund nichts weiß, aber vielleicht meinst du den gepunkteten Rahmen beim Klicken. Das ist der outline-border beim aktivieren von Elementen, zu beseitigen mit CSS:

Code:
a:active {
 outline: 0 !important;
}

EDIT: Jetzt weiß ich was du meinst, probier mal dem #links background-color: transparent zuzuweisen. Oder mach es gleich Semantisch korrekt und mach eine Liste daraus, dann brauchst du den großen Div erst gar nicht...
 
Ich guck mir immer zuerst eine Seite ohne CSS an (Im Firefox Menü unter Ansicht > Webseiten Stil), dann macht die Seite nicht mehr soviel Eindruck, vor allem die Grafik stört. Ausserdem sollte HTML Code den Inhalt auszeichnen, nicht nur gruppieren.
 
Ich guck mir immer zuerst eine Seite ohne CSS an (Im Firefox Menü unter Ansicht > Webseiten Stil), dann macht die Seite nicht mehr soviel Eindruck, vor allem die Grafik stört. Ausserdem sollte HTML Code den Inhalt auszeichnen, nicht nur gruppieren.
Meiner Meinung nach ist es egal wie die Seite ohne CSS aussieht. Der Sinn von HTML liegt ja nicht im Aussehen.
 
Naja, du erkennst ohne CSS wie und ob überhaupt das HTML verwendet wird. Und ohne optische Elemente macht die Seite eben keinen so guten Eindruck
 
Naja, du erkennst ohne CSS wie und ob überhaupt das HTML verwendet wird. Und ohne optische Elemente macht die Seite eben keinen so guten Eindruck

Ausserdem muss man, wenn man Seiten programmiert, damit rechnen dass die Seite auch Leute anschauen welche eine Sehschwäche haben und das CSS deshalb ausschalten. Was nun beduetet das die Page auch ohne das Design-Layout gut zu überschauen sein sollte. Nur so ein kleiner Gedankenanstoss.

MFG devilseye
 
Ausserdem muss man, wenn man Seiten programmiert, damit rechnen dass die Seite auch Leute anschauen welche eine Sehschwäche haben und das CSS deshalb ausschalten. Was nun beduetet das die Page auch ohne das Design-Layout gut zu überschauen sein sollte. Nur so ein kleiner Gedankenanstoss.

MFG devilseye
Wieso sollten Sehbehinderte CSS ausschalten?
 
nun ja wenn du z.B. eine extreme sehschwäche hast oder farbenblind bist dann kannst du unter umständen die schrift nicht mehr vom Hintergrund unterscheiden daher finde ich, wenn man eine Website für alle machen will, sollte die Website auch ohne CSS klar zu erkennen und übersichtlich sein.
Ich weiss ja nicht wie ihr das seht aber ich finde das gehört für mich ebenso in die Sparte Benutzerfreundlichkeit.
 
Dafür is die Site ja schwarz weiß gehalten... da hat kaum einer eine Sehschwäche, weil sie auf starke kontraste aufgebaut is ^^
 
Hallo,

wenn ich so die Text auf deiner Webseite lese komme ich mir vor als würdest du mich permanent anschreien. Was soll das ständige Uppercase? Dem Content würde ausserdem ein wenig padding gut tun.

Der Code ist furchtbar:

Hintergrundbilder definiert man auch als solche
Text kommt in <p>-Tags
Überschriften kommen in <h>-Tags
Listen kommen in <ul> und <li> - Tags
<br> wird nich für Absätze sondern für Zeilenumbrüche verwendet. Dafür ist <p> da.
Dein Favicon ist falsch eingebunden

Ein "ß" wird generell nie in Uppercase-Texten benutzt.

Ansonsten ist die Webseite eine ganz nette Idee, auch wenn ich einen Content-Bereich ohne ewige Scrollerei bevorzugen würde.

Greetz

EDIT: Durch die falsche Verwendung von HTML sehen Blinde, Seh - oder sonstige Behinderte natürlich nichts.
 
Das hat keinen Zweck.

Die Seite sah vorher - also als wir die Seite begutachten sollten - eine völlig andere.
 
Ich komm mir auch die ganze Zeit angeschrien vor :P

Soweit finde ichs vom Design her ganz gut, mit den "Hintergrund"Bildern und der Box, die könnte aber grösser sein > Scrollen :)
 
Design ist sehr schön.
1-2 Fragen hab ich allerdings noch,
1. Hast du Geprüft ob die Bilder Rechtlich geschützt sind?
2. Und das ist mir nur aufgefallen weil ich mir nicht sicher bin ob das nicht auch anders geht, braucht es soviele divs und ids im Menü?
HTML:
<div id='main'>
	<div id='top_12'><a href='index.php' id='top_1'>Startseite</a></div>
<div id='top_22'><a href='persoenliches.php' id='top_2'>Pers&ouml;nlich</a></div>
<div id='top_32'>
	<ul class='menu'>
	  <li onmouseover='show(this)' onmouseout='hide(this)' >
	   <div id='top_3'>Sonstiges</div>
	    <ul class='submenu' onmouseover='show(this)' onmouseout='hide(this)' >
	     <li><a href='bilder.php' id='dropdown'>		Bilder		</a></li><br>
	     <li><a href='websites.php' id='dropdown'>		Websites	</a></li><br>
	     <li><a href='downloads.php' id='dropdown'>		Downloads	</a></li><br>
	     <li><a href='call_of_fear.php' id='dropdown'>	Call of F.E.A.R	</a></li>
	    </ul>
	  </li>
	</ul>
</div>
<div id='bottom_12'><a href='gaestebuch.php' id='bottom_1'>G&auml;stebuch</a></div>
<div id='bottom_22'><a href='kontakt.php' id='bottom_2'>Kontakt</a></div>
<div id='bottom_32'><a href='impressum.php' id='bottom_3'>Impressum</a></div>

MFG
deilvseye
 
Zurück
Oben