Hallo liebe HTML.de-Community,
ich betreibe diese Seite hier; Elektronik und Programmieren - www.jb-electronics.de
Das Design ist zugegebenermaßen nicht mehr so aktuell, daher habe ich mir was Neues überlegt, mein erster Vorschlag ist hier zu besichtigen (die Links auf der Seite funktionieren natürlich noch nicht): Design-Test
Was meint ihr? Besser, schlechter, so dazwischen? Bin über jeden designtechnischen Tip dankbar. Finde, dass der Header noch ein bisschen „leer“ ist.
Beste Grüße
Jens
jap das 2. ist um längen besser ich würde allerdings nicht dem body einen width geben sondern einen wrapper machen, ausserdem finde ich die 800px ein bisschen gar eng. ansonsten gefällts mir gut.
Ich schließe mich devilseye an.
Ansonsten würde ich den Header nicht so groß machen, der nimmt einfach zu viel Platz ein.
das stört mich hier nicht mal so enorm es gibt viele hps welche das auch machen.
Finde das zweite ebenfalls besser: freundlich und einfach.
Der Header nimmt bei mir jedoch über 2/3 des vertikalen Platzes des Browserfensters ein, das geht garnicht.
[QUOTE=vitus37]
Der Header nimmt bei mir jedoch über 2/3 des vertikalen Platzes des Browserfensters ein
[/QUOTE]
Bei mir ist es ein bisschen mehr als die Hälfte. Aber das ändert nichts daran, dass er zu groß (in der Höhe) ist.
Ansonsten ist das Design auf jeden Fall um einiges besser als das vorherige.
Also das 2. ist auf jeden Fall besser.
Die Navigation-Hovers würde ich nicht so krass machen mit fetter Schrift, sondern nur den Hintergrund wechseln.
Den aktiven Navigations-Punkt vielleicht gleich machen wie der Navigation-Hover.
Danke für euer blitzschnelles Feedback. Habe mir den Hinweis zur Navigationszeile und zur Wrapper-Div zu Herzen genommen, sieht nun besser aus finde ich, danke. Ob und wie genau ich den Header kleiner mache, überlege ich zur Zeit noch.
Aktuelle Fortschritte hier: Design-Test
Aber mir bereitet der IE wie immer (!) ein bisschen Kopfschmerzen, dort sieht die Seite recht schrecklich aus:
Viele Grüße
Jens
Du kannst simple CSS-Hacks anwenden.
Findest du auch bei Google. Let me google that for you
Quick Tip: How to Target IE6, IE7, and IE8 Uniquely with 4 Characters | Nettuts+
Dort findest du hacks wie zum Beispiel
_margin: xxx;
*margin: xxx;
etc. Dann kannst du diese sachen für jeden Browser anpassen.
Gibt auch eine schönere Möglichkeit:
<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie8"> <![endif]-->
<!--[if IE 9 ]> <body class="ie9"> <![endif]-->
zu oberst im Body einfügen. Der hat dann jenach IE-Version eine andere Class. und du kannst im CSS folgendermassen ansprechen:
.ie6 #container zum beispiel 
Viel Spass beim rumexperimentieren.
wesshalb hast du den hintergrund des body wieder entfernt ich fand den noch gut, musst du aber selber wissen.
Edit: den header brauchst du eigentlich nicht mehr da dort ja nur das bild drinn ist, dieses kannst du allerdings auch, entweder als wrapperBG machen mit no-repeat und position top, left oder das bild einfach direkt in den wrapper hineinschieben dann wirds direkt oben links positioniert und dann würde ich das bild mit der startseite verlinken ein h1 darum herum machen und die anderen h1 auf h2 setzen und überall das alt attribut machen wegen der seo.
lg devilseye
Den Beitrag von devilseye möchte ich noch erweitern und erklären:
h1 dürfen nur einmal auf der Seite vor kommen daher müssen alle anderen h2 sein
Jap und das tut dann auch der seo keinen schaden. wobei h1 nur pro seite nicht auf der ganzen hp nur 1x vorkommen.
Danke für eure Tips, der Darstellungsfehler lag am fehlenden Doctype, zum Glück (!) ist keine CSS-Weiche nötig. Design-Test
Weitere Kommentare sind erwünscht :-).
wesshalb gibst du deinem home ein span element? Macht meiner meinung nicht gerade sinn
Das verwende ich nur, um den Text darin mit CSS zu layouten.
aber das kannst du ja auch mit dem a tag
einfach eine eigene klasse oder id machen und bei der jeweiligen seite im entsprechenden tag einfügen dann gehts auch
[HTML]
[/HTML] im css [HTML] .Navigation .active { text-decoration: underline;} [/HTML]Hmm gut, geht, das stimmt, aber der aktuell angewählte Menüpunkt ist aber kein Verweis oder Anker mehr im semantischen Sinn. Daher habe ich als Inline-Analogon zum
Gruß
Jens
{[(die class könnte genauso dem li-Element gegeben werden)]}
Bei Klassen würde ich nicht: .Navigation .active sondern: ul.Navigation li.active, da Klassen ja mehrere Male vorkommen können. Man kann es auch mit ID’s machen, wenn sowieso nur ein Element aktiv ist und dann könnte man nur mit #active ansprechen aber macht nicht so viel Sinn.
Ja gut, das ist ein bisschen Hick-Hack gerade, ich glaube ich nehme da wohl wirklich ein .
Sonst noch irgendwelche Ideen zum Design? Gerade bei längeren Seiten (z.B. hier: Was ist eigentlich eine Kraft? - www.jb-electronics.de) wirkt das neue Design doch recht trist, oder?
Gruß
Jens