Design und Code bewerten (EDITOR)

[csstester]

Erstmal vorweg ein nettes Hallo an alle hier, hoffe es ist nicht zu frech euch mit meinem ersten Post gleich meine Probleme um die Ohren zu Hauen.

Ich hab mal ein wenig an einer kleinen Website gebastelt, bin auch recht zufrieden fürs erste und habs zumindest auch valide hinbekommen.
doch mein problem liegt in dem schmalen weißen streifen zwischen dem header und der Navigation.

Falls jemand ne Idee hat wo mein Fehler liegt wär ich echt dankbar.

desweiteren würde ich es gern sehen wenn meine Site immer den ganzen browser in der höhe füllen würde, vieleicht hat noch jemand nen Link wo mir das erklärt wird.

Ansonsten würde ich mich halt über ein paar anregende Kritiken über mein bisheriges werk freuen.

startseite

Gruß
HF

 

[Blacky]

So, habe kurz einen Blick drüber geworfen.
Dein Problem sollte beseitigt sein, wenn du das Bild linksbündig ausrichtest (float: left) und danach ein Div Element einfügst, dass mir (clear: left) ausgestattet ist. Das muss aber noch vor dem Endtag von <div id="header">.
Wenn du noch Fragen hast, hau raus, dann bau ich dir auch den Code um, falls das so nicht geht.

Nun zum Design:
Sieht auf den ersten Blick ordentlich aus, aber aus dem Header kannst du deutlich mehr machen. Verleih der Seite ihre persönliche Note, zeig, warum das Orange auf der Seite seine Daseinsberechtigung hat.

Ansonsten freue ich mich, wenn du daran noch weiterbastelst, scheinbt ja ganz gut zu laufen.

 

[csstester]

Danke schön, es funzt, aber warum werd ich bestimmt auch noch rausfinden

warum das Orange ne daseinsberechtigung hat muß ich selbst erst noch rausfinden..lol, aber ich denke ich weiß schon was du meinst.

doch am Design kann ich noch immer mal was fummeln, mir gehts immo eher erstmal um html und css, das muß ich erstmal "richtig" begreifen

 

[neuroleptika]

Ich würde img an der Stelle nicht verwenden, sondern ein backgroundimage einsetzen.
Wenn es ein img sein soll, würde ich aus dem img ein css-Blockelement machen:

img{
    background: #fdba01;
    display: block;
}

warum das so ist, habe ich auf css | Spalten :: css-störende Abstände kurz beschrieben.

 

[csstester]

ja aber das Problem ist ja, wenn ich die Grafik im Header als Background-image einfüge wird sie doch nicht so mitskaliert wie als img, und so habe ich immer nen sauberen Header.
Oder gibts da auch ne elegantere Lösung?

 

[neuroleptika]

..
Oder gibts da auch ne elegantere Lösung?

Die Höhe des headers muss ja nicht unbedingt mitwachsen. Die könntest du in px angeben.
Die Grafik machst du dann so breit wie die größte anzunehmende Breite des headers. Das dürfte auf deiner Seite kein Problem sein, weil das Bild auf der rechten Seite nur aus einem Farbverlauf besteht.

 

[csstester]

jepp, in diesem falle wäre es kein Problem.
Aber ansonsten liege ich also schon ganz richtig mit dem img-Tag, zB wenn ich ne aufwändire Grafik oder ein Foto verwenden würde!?

Das ist nämlich das wo ich grad dran sitze, CSS ist ja ganz schön, und "eigentlich" auch ganz simple zu verstehen;), aber es gibt doch immer wieder das eine oder andere Problemchen wo ich stecken bleibe und mich durch netz klicke auf der Suche nach ner guten Antwort auf meine fragen.

Fehlt manchmal ja einfach nur kleine lick im Kopf bis es gecheckt ist.

Momentan kämpf ich damit diese 100% höhe geschichte zu begreifen.. lach
da häng ich aber echt noch fest weil ich die logik nicht ganz verstehe..

aber das wird wohl noch

 

[Efchen]

Hallo,

Du verlangst nach einer Code-Bewertung...das kann ich ;-)

Ist halt schwierig, da was zu bewerten, solange noch kein Inhalt drin ist. Dann wird sich das ein oder andere sicher noch ändern, damit das keine div-Suppe bleibt. Der Sinn einiger divs erschließt sich mir nämlich nicht. Aber für ein CSS-Design ist es eigentlich immer ratsam, zuerst den Inhalt zu nehmen, auszuzeichnen, valide zu machen und erst dann mit CSS anzufangen. Ohne sauberes Grundgerüst ist CSS nämlich oft reiner Zufall.

Mir ist aber aufgefallen, dass Du ein Element "left" nennst. Im Sinne der Trennung von Inhalt und Layout und auch im Sinne einer leichten Wartbarkeit und Änderungsmöglichkeiten sollte man das nicht "left" nennen, sondern eine id wählen, die den Inhalt dieses Blockes bezeichnet.
Eine tolle Möglichkeit, die CSS Dir bietet, ist ja durch einfachen Austausch des Stylesheets ein komplett anderes Layout zu bekommen (wie Du das vielleicht vom css Zen Garden: The Beauty in CSS Design her kennst). Wenn Du ein Element aber "left" nennst, und es mal rechts anordnen willst, müsstest Du eigentlich korrekterweise wieder durch alle HTML-Dateien und das abändern. Und das ist nicht im Sinne des Erfinders.

Dann ist mir noch was aufgefallen: Deine erste Überschrift kommt erst im Content. Was ist denn aber mit div#header? Das soll doch wohl die Überschrift der Seite sein, oder nicht? Also würde ich das Image mit einem h1 auszeichnen, und die Überschriften im Text erst mit h2.

Das sind meine 2c dazu!

Gruß,
-Efchen

Edit: Ach so, Du fragtest ja auch noch nach height:100%. Das ist doch simpel. height:100% in einem Element bezieht sich immer auf 100% der Höhe des Elternelements, nicht der Höhe des verfügbaren Platzes im Browserfenster. D.h. Du musst nur dem allerobersten Element eine Höhe von 100% geben und diese Höhe auch an die Kinder und Enkel und Urenkel ... weitergeben. Für den IE brauchts ausserdem auch eine Höhe von 100% für das <html>-Tag, nicht nur für den body. Das wars schon. Keine Zauberei. Früher, ohne CSS, war das eher unlogisch und man hat sich an unlogische Arbeitsweisen gewöhnt. Dann auf das logische zurück zu gehen, ist für viele sehr anstrengend.

 

[csstester]

Hallo,

Du verlangst nach einer Code-Bewertung...das kann ich ;-)

Ist halt schwierig, da was zu bewerten, solange noch kein Inhalt drin ist. Dann wird sich das ein oder andere sicher noch ändern, damit das keine div-Suppe bleibt. Der Sinn einiger divs erschließt sich mir nämlich nicht. Aber für ein CSS-Design ist es eigentlich immer ratsam, zuerst den Inhalt zu nehmen, auszuzeichnen, valide zu machen und erst dann mit CSS anzufangen. Ohne sauberes Grundgerüst ist CSS nämlich oft reiner Zufall.

klingt sehr vernünftig, hat aber grad den Nachteil das ich tatsächlich noch keinen Inhalt habe den ich in einer Site unterbringen möchte, versuche einfach nur erstmal CSS zu begreifen.
Aber vieleicht sollte ich mir mal nen imaginären Inhalt suchen und es darüber Probieren, vieleicht erschließt sich mir dadurch ja das eine oder andere Problem ganz von selbst.

Mir ist aber aufgefallen, dass Du ein Element "left" nennst. Im Sinne der Trennung von Inhalt und Layout und auch im Sinne einer leichten Wartbarkeit und Änderungsmöglichkeiten sollte man das nicht "left" nennen, sondern eine id wählen, die den Inhalt dieses Blockes bezeichnet.
Eine tolle Möglichkeit, die CSS Dir bietet, ist ja durch einfachen Austausch des Stylesheets ein komplett anderes Layout zu bekommen (wie Du das vielleicht vom css Zen Garden: The Beauty in CSS Design her kennst). Wenn Du ein Element aber "left" nennst, und es mal rechts anordnen willst, müsstest Du eigentlich korrekterweise wieder durch alle HTML-Dateien und das abändern. Und das ist nicht im Sinne des Erfinders.

Grrrrr, stimmt das wollte ich mir eigentlich abgewöhnen.

Dann ist mir noch was aufgefallen: Deine erste Überschrift kommt erst im Content. Was ist denn aber mit div#header? Das soll doch wohl die Überschrift der Seite sein, oder nicht? Also würde ich das Image mit einem h1 auszeichnen, und die Überschriften im Text erst mit h2.

mmmhhh, ein Bild als h1 auszuzeichnen kommt mir nicht sehr logisch vor, oder würde sich die auszeichnung dann auf das alt beziehen?

Das sind meine 2c dazu!

Gruß,
-Efchen

Edit: Ach so, Du fragtest ja auch noch nach height:100%. Das ist doch simpel. height:100% in einem Element bezieht sich immer auf 100% der Höhe des Elternelements, nicht der Höhe des verfügbaren Platzes im Browserfenster. D.h. Du musst nur dem allerobersten Element eine Höhe von 100% geben und diese Höhe auch an die Kinder und Enkel und Urenkel ... weitergeben. Für den IE brauchts ausserdem auch eine Höhe von 100% für das <html>-Tag, nicht nur für den body. Das wars schon. Keine Zauberei. Früher, ohne CSS, war das eher unlogisch und man hat sich an unlogische Arbeitsweisen gewöhnt. Dann auf das logische zurück zu gehen, ist für viele sehr anstrengend.

getan habe ich dies ja nun, aber ehrlich verstanden hab ich es noch nicht, irgendwas in meinem Hirn sperrt sich dagegen die Logik dahinter zu begreifen. warte aber nur noch darauf das der groschen fällt;).

Danke übrigens nochmal für deine sehr ausführlichen und hilfreichen Antworten.

csstester

 

[Efchen]

mmmhhh, ein Bild als h1 auszuzeichnen kommt mir nicht sehr logisch vor, oder würde sich die auszeichnung dann auf das alt beziehen?

Warum nicht? Denke nicht so kompliziert! Ein Bild ist doch auch Inhalt! Wenn es kein Inhalt wäre, könntest Du es auch von Deiner Seite entfernen. Also zeichnest Du das Bild als Inhalt aus. Ich gehe ja davon aus, dass es nicht nur ein Bild mit Stilleben ist, oder? ;-) Es wird sicher eine Überschrift enthalten. Bei Clients, die Bilder nicht darstellen, kommt dann - richtig - der alt-Text zum Tragen, der wird also (auch) als Überschrift ausgezeichnet.
Wenn Dein Bild aber nur Stilleben enthält, dann ist das img-Tag nicht berechtigt, weil es dann keinen Inhalt hat, sondern nur Zierwerk ist. Dann gehört es als Hintergrundbild eingefügt. Aber dann könnte man es auch der Liste (Menü) hinterlegen, und bräuchte nicht zwingend ein <div>. Ich empfehle immer so wenig divs wie möglich.

getan habe ich dies ja nun, aber ehrlich verstanden hab ich es noch nicht, irgendwas in meinem Hirn sperrt sich dagegen die Logik dahinter zu begreifen. warte aber nur noch darauf das der groschen fällt;).

Du klingt wie jemand, der erst vor kurzem von (eigentlich unlogischen) Tabellenlayouts umgestiegen ist, bei dem die Einfachheit von CSS und semantischem HTML noch nicht angekommen ist. Auch bei mir gab es vor vielen Jahren diesen *Klick*, bei dem sich mir von einem Augenblick auf den nächsten erschlossen hat, was das ganze soll und warum das geradezu trivial einfach ist.

Danke übrigens nochmal für deine sehr ausführlichen und hilfreichen Antworten.

Das mache ich gerne. Sonst würden die nicht so lang werden. Aber mir ist Dank genug, wenn meine Tipps wenigstens zum Nachdenken anregen.

Schönes Wochenende,
-Efchen

 

[koslowski]

Hi,

eine Kleinigkeit noch:

Hast du dir mal dein Layout im IE6 angeschaut, dort sieht es..ähem..., etwas anders aus.

Z.B. ist dein Menü ist weiter nach rechts gerückt.
Das sieht nach dem "Double-Float-Margin-Bug" aus.

Ersetze margin-left durch padding-left, dann sollte es passen.

koslowski

 

[Maxi]

Ich sag mal was zum Design...

gefällt mir!
Vor allem das Menü mit dem Übergang übers Grau in den Inhaltsbereich gefällt mir gut.