Verbesserungsvorschläge zum perfekten Code...

[blabla333]

Hallo,

ich habe gerade sehr viel Spaß an der Programmierung bzw. an dem Erlernen von CSS3 und HTML5 und habe mir deshalb das persönliche Ziel gesetzt den perfekten Code umzusetzen ;-)
Nun bräuchte die Meinung von den Profis unter euch, was schlichtweg einfacher oder besser programmiert werden kann, da ich sicher manchmal über drei Ecken denke. Ziel ist außerdem die maximale Benutzerfreundlichkeit, optimierte Darstellung für (sämtliche) Geräte und Browser.
Da mein kleines Projekt leider auch auf Rechnern aufgerufen wird, die veraltete Browser einsetzt, sollte es dennoch auch da reibungslos funktionieren. D.h. der IE8 und vielleicht sogar der IE7 sollten mit berücksichtig werden.

Die Frage, inwieweit der Einsetz von jquery sinnvoll ist, konnte ich mir leider nicht selbst beantworten, bin deshalb auch über jeden Gedanken dankbar...

Titel der Website

Ein paar Unklarheiten sind mir bereits aufgefallen:
1. Wie kann man besser das Suchfeld über die ganze Breite gehen lassen? Derzeit habe ich das mit "box-sizing" gemacht (was aber natürlich mit dem IE7 nicht geht). Aber kann man das nicht mit simplem CSS3 realisieren? Ich habe es leider nicht hinbekommen, da das Eingabefeld immer zu groß wurde bei width: 100%;
2. Wie macht man die Symbollupe des Suchfeldes klickbar? Nicht jeder benutzt immer die Eingabetaste...
3. Kann man die Container der Navigation irgendwie ausdünnen? Ich verwende derzeit drei Container. Zu kompliziert gedacht?

Ich hoffe auf viele Anregungen und bedanke mich für eure Hilfe! Ich denke und hoffe, dass ich durch jeden Tipp mein Wissen deutlich erweitern kann... denn ich habe den Anspruch auf einen absolut korrekten Code und nicht einfach nur etwas zusammengebasteltes, was zwar so angezeigt wird, wie man es möchte, aber eigentlich nicht sauber programmiert ist.

Dementsprechend versuche ich auch html5 Tags sinnvoll einzusetzen, aber daran muss ich noch arbeiten...

Liebe Grüße
blabla333

 

[Cheffchen]

Hallo,

also das width: 100%; passt schon aber halt nicht in kombi mit padding.
Die Luppe anklickbar machts in dem das form stylst wie das jetzt ist mit border und weiß, dann input 100% und dann lupe einfach als botton positionieren, fertig.

Cheffchen

 

[blabla333]

Ich habe für das Input-Feld width:100%; angegeben (ohne padding) und input image. Allerdings wird der Button bzw. das Bild so unter dem Textfeld in der nächsten Zeile angegeben. Ich möchte das aber praktisch über der rechten Seite des Textfeldes haben. Wie geht das?

 

[Tronjer]

Ein paar Tipps / Anmerkungen.

- Den perfekten Code gibt es nicht. Aber du könntest z.B. ein HTML-Framework wie Initializr einsetzen. Das liefert auch Fallbacks für den IE.

- Wenn du schon semantische HTML5-Tags benutzt, dann tue es auch konsequent. Die <nav> in ein <div> zu packen ist nicht schön. Es gibt auch Dinge wie <header> und <section> Denke außerdem daran, dass dem IE jedes fremde Tag per JS mit document.createElement im HTML sowie display:block im CSS bekannt gemacht werden muss.

- Gegen den Einsatz von jQuery spricht nichts, sofern du ohnehin JavaScript verwendest. Für die Suchleiste würde ich mir an deiner Stelle mal die Ajax-Livesearch von jQuery UI anschauen.

 

[blabla333]

Erst mal Danke für die Tipps.

Die <nav> in ein <div> zu packen ist nicht schön. Es gibt auch Dinge wie <header> und <section>

<nav> ist jetzt korrigiert bzw. die zusätzlichen <div>-Container sind entfernt. Allerdings habe ich jetzt zwei Probleme:
1) Die weiße untere Leiste für die Unterkategorien geht nicht über die gesamte Breite. Irgendwie bräuchte ich da noch etwas im Hintergrund.
2) Wie zentriere ich das jetzt wieder sauber? Die jetzigen margin: 0 0 0 30%; sind ja nicht wirklich korrekt.

Denke außerdem daran, dass dem IE jedes fremde Tag per JS mit document.createElement im HTML sowie display:block im CSS bekannt gemacht werden muss.

Ist das nicht damit abgedeckt:

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

 

[blabla333]

Hallo,

also das width: 100%; passt schon aber halt nicht in kombi mit padding.
Die Luppe anklickbar machts in dem das form stylst wie das jetzt ist mit border und weiß, dann input 100% und dann lupe einfach als botton positionieren, fertig.

Cheffchen

Leider will das nicht so recht klappen.

So funktioniert das ganz gut - auch mit padding:

<div style="width: 500px; height: 200px; background-color: gray;">	<form><formfield><input type=text style="width:100%; display: block;z-index:2;height:40px;padding: 5px 50px 5px 20px"><input type=button style="width:30px;height:40px;float: right; margin-top: -40px; display: block; z-index:1;"></formfield></form></div>

Sobald ich das aber genauso auf der Website einsetzte (siehe Link erster Post) verzieht sich alles aufgrund des "paddings", so dass ich wieder "box-sizing "einsetzen muss. Woran liegt das?

 

[Cheffchen]

Hallo,

also das erste div ist quatsch, mach die style in das form tag.
ich hatte nichts mit margin und minus gesagt sondern positioierung. der form tag bekommt relativ und der button absolute bottom:0 und right:0 und schon ist das so ca. der rest ist fein abstimmung.

Cheffchen