[Schlangenseite] Designüberarbeitung

[SerivaSenkalora]

Hallo,

nachdem ich vor kurzem endlich meine HP von Frames auf CSS umgeschrieben habe (Thema dazu ist ), fiel mir auf, dass mir das Design irgendwie nicht mehr gefällt. Frau halt. xD

Habe deshalb mal das bestehende Design genommen und ein wenig verändert. Mir pers. gefällt es so nun besser, würde aber gerne von Euch noch ein wenig Kritik hören.



Die Grundzüge möchte ich erhalten, sprich es wird weiterhin ein Innenfenster geben in welchem die Contents zu sehen sind, da ich pers. es sehr hässlich finde, wenn beim scrollen der Header und das Menü komplett verschwinden und der Inhalt somit aus dem Design herausläuft.

Die Menübuttons sind allerdings atm noch provisorische Platzhalter, da weiß ich aber auch noch nicht wie ich die machen möchte. Vllt hat jemand von Euch eine Idee dafür. Mir schwirrt noch der Mouseover Effekt im Kopf herum, den ich auf meiner derzeitigen HP mittels CSS umgesetzt habe und der auch brav funktioniert.

Vor allem der Button "Aktuelles" bedarf einer schöneren Version. ^^

Die Aufteilung des Menüs selbst in links und oben habe ich gemacht, damit man auch bei einer Auflösung unter 1024*768 keine Scrolleisten in der linken Navigation bekommt.

Und nochwas: Ist es vllt zu bunt? Habe bei manchen Grafiken schon ein wenig Sättigung herausgenommen.

Danke schon mal.

LG
Seriva

 

[sunny_76m]

AW: [Schlangenseite] Designüberarbeitung

Hey, muss sagen das finde ich recht ansprechend

Vielleicht für die oberen Nav-Leiste (Home...) noch ne andere Farbe als grau gewählt? (evtl. n leichter braun-touch zwecks Anpassung an den Rest?)

Wenn das "Aktuelles" so bleiben würde wie jetzt würde es mir aufgrund der unterschiedlichen Größe zu den linken Buttons nicht gefallen - aber du schreibst ja dass du das umgestalten willst - ich würde es als komplett andersartigen Button gestalten so dass das richtig schön auffällt - vielleicht mit nem Bild einer Schlange??

 

[SerivaSenkalora]

AW: [Schlangenseite] Designüberarbeitung

Hallo,

ich habe im oberen NaviBereich mal ebenfalls eine Textur in den Hintergrund gelegt. Ausserdem wollte mir einfach kein schöner "Aktuelles" Button einfallen, also hab ich den weggelassen. Die Idee da ein Schlangenbild reinzuarbeiten klingt schön, aber dann wird es mW wieder zu überladen.

Habe das mal testweise zusammenprogrammiert (und mich mit der rechten divbox herumgeärgert, da diese seltsamerweise nicht automatisch die maße des hintergrundbildes annimmt wie es bei der linken der Fal ist).

So schauts nun aus:


Das Ganze bekommt noch einen 1px breiten Rahmen und soll dann mittig oben zentriert werden. Ich schätze mal, dass ich dafür eine große Box drumrumlegen muss, oder?

LG
Seriva

 

[TMP2k1]

AW: [Schlangenseite] Designüberarbeitung

Seh ich da 'ne Comic Sans?
Ganz böses Foul
Probier mal ein paar andere Schriftarten, dann sieht das Schriftbild schon mal nicht mehr so ungleichmäßig und "kindlich" aus.

Mit der großen DIV drumherum dürftest du wohl recht haben, so wie das klingt. Genau kann ich's natürlich ohne Code auch nicht sagen.

 

[wex_stallion]

AW: [Schlangenseite] Designüberarbeitung

Hallo, Frau Nachbarin

Das ist alles was gedrückt, eng. Merke: Platz ist ein Gestaltungselement, ebenso wie Bilder, Schriften usw.

Bisschen mehr Luft, dann können die Schlangen sich auch mal strecken.

 

[SerivaSenkalora]

AW: [Schlangenseite] Designüberarbeitung

Ich bin eigentlich so ein Comic Sans Fan. Aber ich werd mal schauen ob ich mich auch mit Verdana oder Arial anfreunden kann. Times new roman scheidet aus, die mag ich nicht. ^^

Anbei mal die style.css, falls da noch gravierende Fehler drin sind bitte melden. http://www.seriva-senkalora.de/schlangen/style.css Die Box für die Zentrierung und den schwarzen, dünnen Rahmen haben ich schon eingebaut.

@nachbar
Wo würdest du denn noch etwas strecken?

Ich mag diese leeren Seiten eigentlich nicht so. Also sowas wo nur links oben ein menü klebt und der rest uni oder schwach gemuster ist gefällt mir überhaupt nicht.

Unter http://www.schlangen.seriva-senkalora.de/ kann man sich das btw in "Action" angucken. Hab mir gedacht ich schreib die einfach mal zusammen, ändern kann man Dinge ja hinterher ganz leicht. ^^

LG
Seriva

 

[cebito]

AW: [Schlangenseite] Designüberarbeitung

Anbei mal die style.css, falls da noch gravierende Fehler drin sind bitte melden.

body {
         background-color:#878787;
         background-image:url(design/bg.gif);
         background-repeat:repeat;
         overflow:[COLOR=Red]hidden[/COLOR];
}

Das ist ein ziemliches nogo, keine Chance für die Besucher den kompletten Content zu sehen zu bekommen.

 

[SerivaSenkalora]

AW: [Schlangenseite] Designüberarbeitung

Wenn ichs wegmach hat man blöde Scrollbalken wo man keine braucht und das Design flutscht herum. Die Contentbox hat ihre eigenen Scrollbalken und ist komplett sichtbar.

Das gesamte Layout hat 1000 px Breite und 750px Höhe, ist aber nat. aufgrund der Grafiken nicht dynamisch, damit es sich nicht verschiebt. Alles unter 1024*768 macht dann horizontale und vertikale Scrollbalken hin. Habe es mal geändert, damit man sehen kann was ich meine.

Wie kann ich das anders lösen, damit man auch bei kleineren Auflösungen (die gibt es sicherlich noch) keine Balken bekommt aber den Content sieht?

LG
Seriva

 

[cebito]

AW: [Schlangenseite] Designüberarbeitung

Wenn ichs wegmach hat man blöde scrollbalken woe man keine braucht und das design flutscht herum. Die Contentbox hat ihre eigenen Scrollbalken und ist komplett sichtbar.

Wie kann ich das anders lösen?

LG
Seriva

Also ich kann hier grad nichtmal den content bis zu ende lesen, geschweige denn den footer sehn, und das mit ner Auflösung die größer ist als der immer noch gültige 1024-Standart. Dein Layout ist 629px hoch, dabei hast aber noch nicht mitgerechnet, das der Browser auch seinen Platz braucht.
Was "flutscht" denn bei deinem Layout rum? Mach mal das hidden raus und dann einen Screen...

 

[SerivaSenkalora]

AW: [Schlangenseite] Designüberarbeitung

Ist schon draußen.

Mach mal das Fenster kleiner als das Layout und dann hast du diese blöden Querscrollbalken da drin und das Design schiebt sich von links nach rechts. Die sind hässlich und nervig. Dazu rauben sie nochmal ein paar Pixel.

Deshalb habe ich die Frames immer vorgezogen, die machen so einen Mist nicht.

Das Design werd ich um ein paar Pixel kürzen, den Browserplatz hab ich nur in der Breite berücksichtig und in der Höhe glatt vergessen. oO

LG
Seriva

 

[cebito]

AW: [Schlangenseite] Designüberarbeitung

Aber Hallo, die sind doch normal, wenn der Browser kleiner ist als das Layout. Willst du den Besuchern mit kleineren Auflösungen deswegen den Rest der Seite vorenthalten? Die kommen nicht wieder! Und, bei Frames ist das noch viel schlimmer, denn da hat dann jeder Frame seine Scrollleisten.

 

[SerivaSenkalora]

AW: [Schlangenseite] Designüberarbeitung

Nö. Bei meiner alten HP die ich mit Frames gemacht hatte, hatte ich keine einzige Scrolleiste im Design selbst. Nur im Content, da wo sie hingehört. Das Menü links konnte bei Bedarf gescrollt werden, der Rest (Header, rechte Grafik, untere Grafik) ließ sich brav abschneiden ohne dass einem irgendwas entgangen wäre. Wenn halt vom Design ein bisschen Grafik fehlt tut das dem Inhalt keinen Abbruch. *find*

Aber da war das auch wie bei meiner alten Seite -> rechts und unten kam wirklich nur noch ein bisschen Bild und nix wichtiges mehr. Jetzt hab ich aber rechts die kleine Infobox (wo je nach Unterseite später was anderes drinstehen soll) und die darf nat. nicht abgeschnitten werden, das stimmt.

Habe das Layout mal um knapp 100px gekürzt, jetzt dürfte auch bei 1024*768 alles sichtbar sein (ohne Scrollbalken) und wer eine kleinere Auflösung hat der muss dann leider hin und her bzw. rauf und runter scrollen. Finde ich zwar sehr hässlich, aber ich kann ja nun nicht extra so eine 640*480 px HP machen, dann guckt sich bei 1280*800 keiner mehr die Seite an. *fg*

Vllt mache ich später mal mehrere Versionen, so dass man sich bei Betreten seine Auflösung auswählt, aber dafür muss ich erstmal für eine die richtigen Seitenverhältnisse haben, dann muss ich nur noch verkleinern/vergrößern.

Danke für die Hilfe, kann ich das nun so lassen?
Vielleicht weißt Du auch, wie ich die nun noch vertikal zentriert bekomme, damit die nicht immer am oberen Rand klebt?

EDIT: Die oberen Navibuttons mache ich grad mal noch was kleiner, dann bleibt mehr Platz für den Content.

EDIT2: Noch zwei Kleinigkeiten:

1) Problem der verschobenen Pixel gelöst

2) Der IE schubst mir meinen Footer unten raus, was FF und Opera nicht tun. (Trotz angegebener Größen und so.) Kennt da jemand einen Code um den IE auch dazu zu bringen das korrekt anzuzeigen?



LG
Seriva

 

[SerivaSenkalora]

AW: [Schlangenseite] Designüberarbeitung

So, ich hab die vertikale Zentrierung auch hinbekommen.

Jetzt fehlen mir nur noch Statements ob's von der Auflösung her passt (ab 1024*768 ohne Scrollbalken ausserhalb der Contentbox) und ob mir wer beim IE Problem helfen kann. ^^

Mag sich wer dazu äußern? *hoff*

LG
Seriva

 

[jmewes]

AW: [Schlangenseite] Designüberarbeitung

Nur als Idee, du könntest vielleicht noch ein paar grüntöne reinbringen, (z.b. den dunkelgrauen Rahmen um den Haupttext einen Grünstich geben - ist glaube ich doch eine blöde Idee ), damit das ganze noch etwas natürlicher aussieht, und das Grün des kleinen Bildes unten rechts und der Grashalm oben links nicht ganz so sehr hervorstechen!

 

[SerivaSenkalora]

AW: [Schlangenseite] Designüberarbeitung

Hallo,
hm, ich denke, dass es mir dann zu bunt wird, aber Danke. ^^

So, HP ist oben, danke an die die mir geholfen haben.

LG
Seriva

 

[TMP2k1]

AW: [Schlangenseite] Designüberarbeitung

Schöne Tiere und z.T. sehr coole Namen

 

[ZeRoCoke]

AW: [Schlangenseite] Designüberarbeitung

Sehr einfaches Design, dennoch ansprechend =)

 

[SerivaSenkalora]

AW: [Schlangenseite] Designüberarbeitung

Ja die Namen sind immer so spontane Geistesblitze. ^^

Freut mich, dass die Seite gefällt.

LG
Seriva