Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „[Schlangenseite] Designüberarbeitung“

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

Hat es drauf

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??
 
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

... is learning by doing

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

Motzerator

Teammitglied
PSD Beta Team
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.
 
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
 
Zuletzt bearbeitet:

cebito

undefined

AW: [Schlangenseite] Designüberarbeitung

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

Code:
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.
 
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
 
Zuletzt bearbeitet:

cebito

undefined

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...
 
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

undefined

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.
 
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
 
Zuletzt bearbeitet:
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

Kreativer

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 :rolleyes: ), 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!
 
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
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.158
Beiträge
2.581.881
Mitglieder
67.226
Neuestes Mitglied
Alec168
Oben