bitte Design bewerten
- Ersteller fiedel
- Erstellt am
Hab mich mal ans Werk gemacht und mein Design umgesetzt:
Webdesign Testgebiet
Die Navigation habe ich jetzt komplett aus Grafiken gemacht, weil das mit dem Ausdehnen, wenn man die Schrift verstellt, nicht funktionieren wollte. Dafür ist aber die Schrift im Content mit em gemacht.
P.S.: Ich weiß, der Quellcode sieht sehr nach Div-Suppe aus. Das ließ sich aber nicht vermeiden.
Webdesign Testgebiet
Die Navigation habe ich jetzt komplett aus Grafiken gemacht, weil das mit dem Ausdehnen, wenn man die Schrift verstellt, nicht funktionieren wollte. Dafür ist aber die Schrift im Content mit em gemacht.
P.S.: Ich weiß, der Quellcode sieht sehr nach Div-Suppe aus. Das ließ sich aber nicht vermeiden.
Ja, den Streifen habe ich weggemacht, weil ich dachte, dass es ohne diesem besser aussieht. (Edit: dafür habe ich was anderes hingemacht, ich hoffe es sieht auch gut aus ;))
Habe mich gerade auch mal in CSS 3 probiert, wie findet ihr die Textmarkierung? (funktioniert nicht in jedem Browser, aber im FF3 auf jeden Fall)
Zuletzt bearbeitet:
E
Efchen
Guest
Kann ich so auf Anhieb nicht nachvollziehen, aber auf jeden Fall sieht es schlecht aus, wenn Grafiken deaktiviert sind.
Das, was da nach div-Suppe aussieht, sind halt die runden Ecken. Das lässt sich nunmal nicht vermeiden, stört aber auch nicht wirklich im Code.
Was halt der Perfektion leider noch einen abbricht, ist die fixe Breite des Layouts.
Und ein seltsamer Effekt beim Verkleinern des Fensters: Wenn ich das Fenster so klein mache, dass nur noch der Content reinpasst, hört das Hintergrundbild rechts daneben plötzlich auf und es kommt ein schwarzer Balken (ohne Inhalt, der liegt rechts neben div.container), der dann auch für einen horizontalen Scrollbalken sorgt (obwohl alles, was von Dir als Content gesetzt wurde, vollständig sichtbar ist).
Danke Efchen, für deinen Kommentar.
Frage (damit ich was dazulernen kann ;-)): Wie könntest du es denn nachvollziehen?
Hat jemand eine Ahnung, wie ich das ändern könnte, dass keine Balken mehr entstehen, sondern sich das Hintergrundbild über die ganze Breite wiederholt und kein merkwürdiger Abstand neben dem Container mehr ist?
Gruß
fiedel
Wieso sieht es dann schlecht aus? Ich habe das mal zur Probe gemacht, und da wurden dann die Alternativtexte der Grafiken angezeigt. Sah nicht unbedingt schön aus, war aber voll und ganz funktionsfähig. Aber ich denke, diejenigen, die die Grafiken deaktivieren legen sowieso nicht soviel Wert auf das Aussehen...
Frage (damit ich was dazulernen kann ;-)): Wie könntest du es denn nachvollziehen?
Wie gesagt, das mit "em" hat nicht so wirklich funktionieren wollen, habe auch kaum Erfahrungen damit (wie man bei meiner aktuellen Homepage sehen kann). Oder meinst du ich soll es in Prozent angeben?
Oh, den habe ich gar nicht entdeckt... seltsam...
HTML:
div.container {
background: #501F1A url(../img/red-texture.jpg) scroll repeat 0 0;
width: 100%;
border-top: 2px solid #806360;
margin: 57px 0 0 0;
}Gruß
fiedel
Loon3y
Neues Mitglied
hihi wenn mang anz schnell zwischen 2 und 3 wechselt ist das voll *splatteR* ;D oder *matsch* XD...die überschrift ist bei design 3 etwas weiter nach rechts verschoben..
Ansonsten geil! sofern es sicha uch alles schön vergrößern / -kleinern lässt..
Grüßli
Loon3y
EDIT: ups...war auf Seite 1 noch...sry..änders gliech noch ab ;D
E
Efchen
Guest
Ist "nicht schön" und "schlecht" bei Dir nicht in etwa das Gleiche oder zumindest ähnlich? :-)
Bei mir waren die Worte aneinandergeklebt ohne Abstand. Das halte ich für nicht schön. Zwischen zwei Worten macht man halt für gewöhnlich einen Abstand.
Wie viele kennst Du, die das so machen? Wie viele haben Dir schon gesagt, aus welchem Grund sie keine Images angezeigt bekommen?
- Vorlesebrowser, weil blind
- Langsames Modem (heißt das zwangsläufig, man legt keinen Wert auf Aussehen?)
- Lynx (auch da kann eine Site schlecht "aussehen").
- Es ist so vorgeschrieben (An Regeln muss man sich halten, aber legt man deswegen keinen Wert auf Aussehen?)
- Verlinkung von Dir falsch oder Dein Server liefert aus irgendeinem Grund die Images nicht aus (impliziert das, dass man kein Wert auf Aussehen legt?)
Und nur weil man Grafiken abschaltet, legt man kein Wert auf Aussehen? Gerade bei Text gibts nichts schlimmeres, als wenn jemand ohne Punkt, Komma, Absätze und ohne Groß-/Kleinschreibung schreibt.
Na, gar nicht. Warum soll das nicht funktionieren? Im Zweifellsfalle mehrere Definitionslisten nebeneinander, Image/Text übereinander, jeweils text-align:center; und es ist immer zentriert, auch wenn man die Schriftgröße ändert.
Es ist ja tatsächlich nicht immer so trivial, wie es sich anhört, dasmal zu Deiner Verteidigung. Aber fix ist halt fix und wenn die Größe des eigenen Viewports nicht passt, empfindet man (zumindest ich) die Website als minderwertig.
Und ob "em" oder "%" ist doch Wurscht. Da braucht man IMHO auch keine Erfahrung dafür. em macht die Größe halt abhängig vom Text.
Das größte Problem beim flexiblen Layout ist, dass leider nicht jeder Browser min-width/max-width versteht. Sonst wäre es in der Praxis genauso leicht wie in der Theorie.
Das ist glaub ich der body außen rum, der die Wolken(?) als Hintergrundbild hat, die nicht in y-Richtung wiederholt werden. Dann ists dahinter natürlich schwarz. Also fehlt dem body wahrscheinlich nur die Hintergrundfarbe wie beim div.container.
Ich weiß, hab ich auch gemerkt, als ichs hochgeladen hab. :grin:
Okay, hast mich überzeugt ;-)Zitat:
Ist "nicht schön" und "schlecht" bei Dir nicht in etwa das Gleiche oder zumindest ähnlich?
Bei mir waren die Worte aneinandergeklebt ohne Abstand. Das halte ich für nicht schön. Zwischen zwei Worten macht man halt für gewöhnlich einen Abstand.
Wie viele kennst Du, die das so machen? Wie viele haben Dir schon gesagt, aus welchem Grund sie keine Images angezeigt bekommen?
- Vorlesebrowser, weil blind
- Langsames Modem (heißt das zwangsläufig, man legt keinen Wert auf Aussehen?)
- Lynx (auch da kann eine Site schlecht "aussehen").
- Es ist so vorgeschrieben (An Regeln muss man sich halten, aber legt man deswegen keinen Wert auf Aussehen?)
- Verlinkung von Dir falsch oder Dein Server liefert aus irgendeinem Grund die Images nicht aus (impliziert das, dass man kein Wert auf Aussehen legt?)
Und nur weil man Grafiken abschaltet, legt man kein Wert auf Aussehen? Gerade bei Text gibts nichts schlimmeres, als wenn jemand ohne Punkt, Komma, Absätze und ohne Groß-/Kleinschreibung schreibt.
Also quasi für jeden Punkt eine Liste nach diesem Schema?
HTML:
<dl>
<dt><img src="img" alt="alt" /></dt>
<dd>Text</dd>
</dl>Eben das ist das Problem... dann bleibt mir also nur noch die "em"-Variante.
Ja, so habe ich es auch schon erkannt, aber das ist ja auch nicht das Optimum, da ja ganz unten das Gras auch nicht mehr zur Seite wächst! Geht das auch irgendwie anders?
Edit: Ja geht! Der Rand wird ja nur dadurch verursacht, dass der Header zu breit ist! Habs am Anfang irgendwie nicht gleich geblickt! ;)
Zuletzt bearbeitet:
Und wie richte ich sie dann nebeneinander aus? Ich mein floaten funktioniert ja da nicht, oder doch?
E
Efchen
Guest
Ja, so hatte ich mir das gedacht.
Naja, es kommt ja nicht primär darauf an, dass der Code schlank ist, sondern das er richtig ist und letztlich auch, dass er die richtige Grundlage für das Design schafft.
Und wenn etwas mehr Code die Nutzbarkeit spürbar erhöht, dann ist es das IMHO wert.
Gute Frage...ich würds nach meinem Gefühl weglassen. Man macht ja auch nur 6 Listen draus, weil mit einer die Optik nicht klappt[1]. Sinnvoll wäre wenn dann noch ein div außen rum, zum Gruppieren, aber ob Du das CSS-technisch brauchst, glaube ich eher nicht.
Ob em oder %, das Problem mit dem min/max löst das natürlich beides nicht.
[1]
Siehe auch:
:-)
Ich hab nochmal drüber nachgedacht, wenn ich das jetzt mit Definitionslisten mache, dann verschwindet mein Hovereffekt und für Text lässt sich so ein Schein nur sehr schwer realisieren. Gäbe es nicht irgendwie ne Möglichkeit (per JavaScript o.ä.) je nach Einstellung der Schriftgröße im Browser größere/kleinere Bilder in der Navigation anzeigen zu lassen? Damit sich das dann so ähnlich wie em verhält.
Die Alt-Texte habe ich übrigens jetzt weiter auseinander gesetzt!
Die Alt-Texte habe ich übrigens jetzt weiter auseinander gesetzt!
Naja, aber zu mindest ist das Problem mit em nicht so schwerwiegend, denn kleinerer Text kommt auch mit kleineren "Container"-Größen aus. Bei % bleibt die Schriftgröße und der Container wird kleiner.
E
Efchen
Guest
Tja, willkommen auf dem Grat zwischen gutem Aussehen und Nutzbarkeit. Ich entscheide mich idR für die Nutzbarkeit.
Ich wüsste nicht, dass man mit JavaScript die Browser-Schriftgröße auslesen kann. Aber wer weiß? Ansonsten geht das eher in Richtung SVG. Aber das ist ja IIRC auch noch nicht flächendeckend funktionstüchtig.
Hmm, ich wollte mich eigtl nicht unbedingt davon trennen.
Ich habe es mir auch nicht vorstellen können, deshalb hab ichs auch auf "oder ähnliches" ausgeweitet! ^^
SVG? Hab mal gegooglet, sowas wäre ganz brauchbar, wenns nicht nur für Vektorgrafiken ginge, aber nur die lassen sich ja mathematisch darstellen und somit leicht vergrößern/verkleinern.
E
Efchen
Guest
Ja, das ist der Witz von scalable-vector-grafics. Sie lassen sich stufenlos in der Größe ändern, d.h. damit kann man auch Schrift als Grafik skalieren, wenn man die Größe des Images in "em" angibt. Aber ausprobiert hab ich sowas noch nicht :-)
Hallo Fiedel,
bei der Gratwanderung zwischen Aussehen und Nutzbarkeit würde ich auch
noch den Aufwand berücksichtigen, den eine eventuelle spätere Änderung
verursachen könnte. Stell Dir mal vor, da kommt eines Tages eine zweite
Sprache dazu: im einen Fall beschriftest Du die Links nur neu, im anderen Fall
fängst Du erstmal an, Bildchen zu basteln...
Mein Lösungsvorschlag:
CSS:
(die Bilder setze ich als Vordergrundbild ein, um es beim print.css einfacher zu haben,
außerdem werden sie bei hidden vorausgeladen, ohne dass ich weiteren Code brauche)
Edit: hab jetzt erst gesehen, dass Du gar keinen Bildwechsel brauchst...
Den Schrift-Effekt bekommst Du doch fast auch mit dem Schatten hin:
Position: absolute - Anwendungsbeispiele
Grüße
Bernhard
bei der Gratwanderung zwischen Aussehen und Nutzbarkeit würde ich auch
noch den Aufwand berücksichtigen, den eine eventuelle spätere Änderung
verursachen könnte. Stell Dir mal vor, da kommt eines Tages eine zweite
Sprache dazu: im einen Fall beschriftest Du die Links nur neu, im anderen Fall
fängst Du erstmal an, Bildchen zu basteln...
Mein Lösungsvorschlag:
Code:
<ul>
<li>
<a href="#" id="link1"><img src="bild1.jpg" alt="" title="" height="100" width="100">Link3</a>
</li>
<li>
<a href="#" id="link2"><img src="bild2.jpg" alt="" title="" height="100" width="100">Link1</a>
</li>
<li>
<a href="#" id="link3"><img src="bild3.jpg" alt="" title="" height="100" width="100">Link3</a>
</li>
</ul>
Code:
a {
color:#0000ff;
}
a:hover {
color:#ff0000;
}
a#link1 img,a#link2 img,a#link3 img {
visibility:hidden;
}
#link1 {
background-image:url(../img/bild1-over.jpg);
background-repeat:no-repeat;
}
#link1:hover {
background-image:url(../img/bild1.jpg);
background-repeat:no-repeat;
}außerdem werden sie bei hidden vorausgeladen, ohne dass ich weiteren Code brauche)
Edit: hab jetzt erst gesehen, dass Du gar keinen Bildwechsel brauchst...
Den Schrift-Effekt bekommst Du doch fast auch mit dem Schatten hin:
Position: absolute - Anwendungsbeispiele
Grüße
Bernhard
Es ist zwar wahrscheinlich sehr unwahrscheinlich, dass meine Seite mal zweisprachig wird (zu mindest derzeit), aber deine Argumente klingen sehr überzeugend! Ich werds auf jeden Fall mal ausprobieren!
Gruß
fiedel
EDIT: Habe das jetzt mal so getestet und bin zum Entschluss gekommen, die Grafiken so zu lassen, denn wenn ichs als Text mache, und ihn vergrößere, dann sind die Menüpunkte nicht mehr zentriert, sondern kleben links in dem Navi-Container und der Container weitet sich extrem in x-Richtung aus; verkleinere ich die Schrift, dann passen die Icons nicht mehr nebeneinander!
Sollte die Seite einmal mehrsprachig werden, dann habe ich ja immer noch meine PSD-Dateien, in denen ich rasch den Text ändern kann.
Nochmal EDIT: Was habe ich denn da geschrieben? LOL
Zuletzt bearbeitet:
