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

Design bewerten

J

JensB

Neues Mitglied
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.
 
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.
 
vitus37 schrieb:
Der Header nimmt bei mir jedoch über 2/3 des vertikalen Platzes des Browserfensters ein
Zum Vergrößern anklicken....

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:
1) Die Navigationszeile ist zu breit und wird in zwei Zeilen aufgebrochen (liegt es am anderen Boxmodell des IE? Eigentlich ergeben hier die absoluten Breitenangaben schon Sinn, auch wenn mensch sich gerne über das 133.33px streiten darf. Lieber eine Breite nehmen, die auber durch 6 teilbar ist? Dann ist da aber immernoch das Problem mit den verschiedenen Box-Modellen)
2) Die Wrapper-Div ist (warum auch immer) nicht zentriert.

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:

Code: 
    <!--[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 <body> hat dann jenach IE-Version eine andere Class. und du kannst im CSS folgendermassen ansprechen:

.ie6 #container zum beispiel :)

Viel Spass beim rumexperimentieren.
<!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]-->
 
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
 
Zuletzt bearbeitet:
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 :)
 
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: 
<ul class="Navigation">
                <li><a class="active">Home</a></li>
                <li><a href="#">Elektronik</a></li>
                <li><a href="#">Programmieren</a></li>
                <li><a href="#">Physik</a></li>
                <li><a href="#">Kontakt</a></li>
                <li><a href="#">Impressum</a></li>
            </ul>
im css
HTML: 
.Navigation .active { text-decoration: underline;}
 
Zuletzt bearbeitet:
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 <span> als Inline-Analogon zum <div> verwendet.

Gruß
Jens
 
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.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben