Entwurf für eine Kindergarten Homepage //fertig =)

Hallo,



das währe der Entwurf bin schon auf eure Meinung gespannt

Danke
LG

Die Bilder etc. sehen einfach zu draufgeklatscht aus, und irgendwie geffalen mir die Farben auch nicht.

Ausserdem wäre es nicht Besser die Anmeldung oben rechts reinzutun, also ein Login Formular?

Auch das Menü sieht irgendwie missglückt aus, der Header und dan, ohne einen übergang oder anpassung das Menü, das eine passt einfach nicht zum anderem.

Mfg. BNS

Tut mir leid, gefällt mir garnicht

Blau ist eine sehr kalte Farbe, imo unpassend für spielende und fröhliche Kinder
Das Ganze ist zusammenhangslos und kein wirkliches Konzept ist zu sehen
Der Schrifteffekt könnte dahingehend gedeutet werden, dass du Photoshop gerade anfängst zu verstehen und sofort jeden netten Effekt einbauen willst. Lass diesen "Plastic 3d" Effekt weg, ist weder schön noch modern

Jetzt will ich aber nicht mehr meckern, sondern ein paar Tips geben:

- mach den Header höher, gestalte ihn mit Bildern von Kindern/dem Kindergarten etc aus
- integriere die Elemente im Foter besser, lass die Manschgerl auf etwas draufstehen, nicht so schweben
- Wenn du uns sowas vorstellst, schreib ein Blindtext rein, damit man sich das besser vorstellen kann, in den Text am besten auch schon ein Bild oder so
- Wie wir Arbeiten? Irgendwas sagt mir, dass arbeiten in diesem Fall ein Verb ist

Und noch was Positives:
Die Kante vom Footer ist nett

ohne irgentwas von meinen vorrednern gelesen zu haben: die seite ist zu breit irgentwie.

Original von user-148tian[...]
- mach den Header höher, gestalte ihn mit Bildern von Kindern/dem Kindergarten etc aus
[...]

Das ist mir auch erstes aufgefallen. Der Header ist nicht sehr einfallsreich. Ich würd ein Foto oder mehrere Fotos vom Kindergarten in den Header setzen, wie die Kinder da fröhlich und heiter auf dem Rasen tanzen

vielen dank für eure schnellen antworten



hab in der zwischenzeit
-neue farben
- mehr sachen für den fooder
- neuen header (allerdings bilder fehler noch)

das mit der anmeldung ist nicht als login zu verstehen sodern das eltern ihre kinder online für den kindergarten anmelden können

das mit der breite muss ich mir noch anschauen

danke nochmals =)

mach den header doppelt so hoch.. und dann zupflastern mit bildern.

Original von user-180
mach den header doppelt so hoch.. und dann zupflastern mit bildern.

genau, und n text in den contentbereich

okay mach ich sobald ich die fotos bekomme

Nach dem zweiten Menüpunkt bin ich zu gelangweilt, die restlichen zu lesen, da musst unbedingt was ändern...

Ich fände ein Vertikales Menü sowieso besser.

so bilder sind drinnen
das menü muss ich mir noch ansehen wie ich das am besten löse
und den farbton bei den kindern rechts unten (die kinder müssen drin sein das is das logo)

hat schon jemand gesagt dass es besser aussähe, wenn der header höher wäre?

ähm ja *g* :]

okay das menü is kleiner geworden

Ich würde das menü echt besser vom Header trennen. ZB. einfach nur eine 1px breite schwarze linie zwischen menüleiste und header. den 2. menüpunkt umbennenen...

so?

Ich finde es gut. Das habe ich schon lange nicht mehr gesagt.

Ein paar kleine Anregungen:

- Das Menu vertikal mittig zentrieren, es scheint ein bisschen zu weit oben zu sein, vielleicht ein bisschen breiter
- Das Menu würde ich neu strukturieren. Die Online-Anmeldung ist doch ein sehr wichtiges Feature und sollte einen prominenten Platz bekommen. Zusätzlich kann man ggf manche Menupunkte zusammenfassen. Konzept und Gedanken beispielsweise. Ebenso je nach Inhalt Allgemeines zu unserem Kindergarten, Team.
- Bei der unteren Navigation würde ich Links streichen, das braucht niemand. Thematisch passende Links gehören in die entsprechende Sektion und nicht in eigenen Menupunkt. Online-Anmeldung würde ich in die Hauptnavigation packen und Impressum dann ganz unter die Seite.

Viele Grüße,
Michael

Original von user-251el
Ich finde es gut. Das habe ich schon lange nicht mehr gesagt.

danke *freu*

zu den verbesserungen
- die navigation wird zu textlinks
- unter konzept kommt man zur auswahl:
- regeln
- tagesablauf
- feste
- elternarbeit
- ...

ich poste gleich noch einen entwurf mit den änderungen

so gesliced hab ich sie nur komme ich leider mit css nicht so ganz zusammen
http://778.at/kiga/
ich komm nicht drauf warum sich der footer nicht anpasst.
und im internet explorer hab ich ein loch

sorry wenn der code von mir so "zusammengeschustert"

(alles was ich da gemacht habe hab ich mir selbst beigebracht mit hilfe dieses tutorials und css4you.de, kurzreferenz )

wurde ich muss sagen ich kanns nicht besser :tired:

danke

Das liegt daran, dass du #contents eine feste höhe zuweist...

danke =)
2 probleme hab ich noch *gg*

1. problem:

ich hab jetzt auch auf der linken und rechten seite (schattierung) die höhe heraus genommen, nur er widerholt mir den hintergrund nicht

2. problem:
im ie 6 hab ich einen schönen leeren bereich und unterhalb den content

danke schon im vorraus

so also als hintergrund habe ich dir mal eine grafik gebastelt.

Binde diese Datei als hintergrund für deinen content mit der eigenschaft repeat-y ein.

vielen dank :]

anbei eine aufstellung wie ich ich die seite aufgebaut hab (nur schell in paint gemacht, da in der firma *gg*)

ich überlege wie ich es am besten so umgestallten könnte

okay bis auf 2 probleme hätte ich es fertig

1. problem im ie hab ich noch streifen drinen (zb. zwischen schatten und header=

2. im ffx hab jetzt aus unerklärlichen gründen in der fooder grafik eine art umrandung

danke

Nen Link wäre ganz sinnvoll, da könnten wir uns den Code gleich HiLive anschauen!

Original von user-245
http://778.at/kiga/

Original von user-245

Original von user-245
http://778.at/kiga/

*HUST* ja gut,
aber ichmuss sagen ich seh keinen deiner angeprisenen Fehler????

danke des du es dir angesehen hast

1. problem:


ich weiß nicht wie das am besten löse das es die streifen mit den hintergrundstreifen zusammenpassen

2. problem:

wie weißen striche im ie

danke nochmals

Nur mal so am rande: http://validator.w3.org/check?uri=http%3A%2F%2F778.at%2Fkiga%2F

Original von user-245
ich weiß nicht wie das am besten löse das es die streifen mit den hintergrundstreifen zusammenpassen

http://de.wikipedia.org/wiki/Png
für ie<7 musst kannst du allerdings keine alphatransparenten pngs verwenden, da musst du dann ein extra stylesheet mit einfarbigem bg machen.

Original von user-137
Nur mal so am rande: http://validator.w3.org/check?uri=http%3A%2F%2F778.at%2Fkiga%2F

so css & xhtml valid

das mit dem hintergrund schau ich mir dann (wollte das absichtlich nicht mit png wegen dem sch** ie (also <6) machen :])

Original von user-245

Original von user-137
Nur mal so am rande: http://validator.w3.org/check?uri=http%3A%2F%2F778.at%2Fkiga%2F

so css & xhtml valid

das mit dem hintergrund schau ich mir dann (wollte das absichtlich nicht mit png wegen dem sch** ie (also <6) machen :])

Mh richtig gut ist der Code trotzdem nicht. Mindestens die Hälfte der Divs kannst du dir sparen, ausserdem gibt es keine <h>Tags usw., such mal nach "Image replacement".
Impressum solltes du auch als <a> schreiben...

Ich mein das ist nicht notwendig, aber ich bin der Meinung "wenn schon denn schon"...

Original von user-289
Mh richtig gut ist der Code trotzdem nicht. Mindestens die Hälfte der Divs kannst du dir sparen, ausserdem gibt es keine <h>Tags usw., such mal nach "Image replacement".
Impressum solltes du auch als <a> schreiben...

Ich mein das ist nicht notwendig, aber ich bin der Meinung "wenn schon denn schon"...

ok das mit dem image replacement schau ich mir an
und das impressum hab ich dewegen als <ul> wegen der position (wusste keine anderen möglichkeit)

Original von user-245

Original von user-289
Mh richtig gut ist der Code trotzdem nicht. Mindestens die Hälfte der Divs kannst du dir sparen, ausserdem gibt es keine <h>Tags usw., such mal nach "Image replacement".
Impressum solltes du auch als <a> schreiben...

Ich mein das ist nicht notwendig, aber ich bin der Meinung "wenn schon denn schon"...

ok das mit dem image replacement schau ich mir an
und das impressum hab ich dewegen als <ul> wegen der position (wusste keine anderen möglichkeit)

Mhhh welche Position? Wo ist denn der Unterschied ob dus mit <a> oder <ul> machst?

ja ich hab <ul> die position von unten rechts zugeweisen siehe screens (weiß nicht ob es mit <a> auch gehen würde)

so auf ein neues *g*
link is der gleiche
den header hab ich jetzt mit image replace eingebunden jetzt hab ich nur mehr 1 problem.
und zwar wie soll es anders sein im ie (6)
und zwar hat jemand eine idee wie ich das haus einbinden soll (ich habs bei #links per bg eingebunden) nur im ie wenn ich die höhe angebe hab ich nen weißen steifen ?( und ohne höhenangabe wird es nicht angezeigt

danke

Versuchs mal so:

        <h1><span>Kindergarten Geistthal</span></h1>

        <div id="navi">

             <ul>

                        <li><a href="#">Home</a></li>

                        <li><a href="#">Allgemeines</a></li>

                        <li><a href="#">Team</a></li>



                        <li><a href="#">Konzept</a></li>

                        <li><a href="#">Gedanken</a></li>

                        <li><a href="#">Fotos</a></li>

                        <li><a href="#">Anmeldung</a></li>

            </ul>

        </div>



        <div id="links">

        <!-- <img src="images/haus.jpg" alt="" width="28" height="90" border="0"/> -->



        </div>

Vllt liegts auch an dem Image replacement... Ich hätte die variante benutzt:

<div id="header"><h1><span>Titel der Seite</span></h1></div>

Css:

div#header{

höhe, breite, hintergrund etc.

}



h1 span{

display: none;

}

Edit: Mh, das mit meiner Image replacement variante war unlogisch... aber was bewirkt das text ident und das background-position...

Mach den Text vielleicht noch ein bisschen kleiner und ein bisschen mehr Abstand vom Rand also mehr padding, so ca. 5px, müsste gut passen.

so beinahe passt es im ie
(ich hab die breite von header und navi weggenommen und auf den bg auf no-repeat gestellt.
das einzige was ich noch zu fixen versuche ist das das haus genau anschließt

im FF schließt der BG nicht genau mit dem Content.
Es ist ne leichte 1-2px Verschiebung.

okay der bg passt jetzt mit dem footer zusammen (im ffx halt )
den text hab ich mit padding verschoben
das einzige was noch is das das haus im ie nicht ganz neben der header grafik und der navi is.
gut ich mach mich mal ans content füllen

ok fast fertig puh
2 sachen sind noch zu machen:
- die anmeldung in eine schönere forum bringen
- eine gute bildergalerie intergrieren (mit fällt nur 4images ein, die is aber sehr kompiziert einzubauen hat wer was anderes in der richtung?

achja und eine neue url:


mit www wird es noch ein bisschen dauern (hab gerade erst umgestellt, die dns sind nicht die schnellesten

nice.

Aber such mal einen Css-Hack, um im FF permanent einen vertikalen Scrollbalken anzeigen zu lassen, dieses "zucken" der Seite, wenn man einen anderen Link anklikt, in welchem mehr oder weiniger Content ist find ich recht nervig

Find gard keinen geeigneten hack, bin jetz pennen -> schreib deutsch, bis morgen!

so hab diesen hack eingebaut

/* firefox scrollbar hack */ html {height: 100%; margin-bottom: 1px; }

weil overflow: scroll und dann overflow-y: hidden währe nicht css valid

wäre es beim Team nicht besser es so zu machen, wie im Anhang?
Also eine Art Tabelle?

Ausserdem würde ich auch das Anmelde Formular als Tabelle machen, da wenn du es dir ansiehst irgendwie alles nicht passt. Also ganz unten sind cs. 5 Punkte ohne Feld.

es fehlt noch die kennzeichnung der aktiven seite im menü...

Original von user-289
es fehlt noch die kennzeichnung der aktiven seite im menü...

wie bzw mit was mach ich das am besten?
after?

das auf der team seite soll so bleiben (war die vorgabe so )

mit php einfach den jeweiligen parameter auswerten und dementsprechend einem menüpunkt eine klasse .active{} zuweisen.

übrigens:
mach dieses "optimiert für.." und das "valides xhtml" "valides css" aus dem Impressum... das interessiert keinen der sich nicht mit Webdesign auskennt und ich denke dass die meisten Besucher einer Kindergartenseite das nid tun. Ausserdem kann das die Unwissenden auch verwirren, vor Allem weil es direkt zwischen dem Impressum und der Kontaktadresse steht.

Ich weiss dass man als Webdesigner gerne mal hinschreibt, dass man Standarts achtet und dass man sie beherscht. Das hat auch was mit Stolz zu tun, ich kenne das aber an solchen Stellen sollte darauf verzichtet werden. (Oder wenn du's nicht lassen kannst dann machs irgendwo unten klein)

Diese "optimiert für..." können in manchen Fällen auch kontraproduktiv sein, weil du den User damit andere Gewohnheiten aufzwingst. Ausserdem bedeutet das auch, dass du es nicht geschafft hast deine Seite so zu coden, dass sie Crossbrowsertauglich ist. Damit machst du dich selbst schlecht.

Das soll jetzt nicht ein persönlicher Angriff auf dich oder deine Fähigkeit sein oder so ich wollte dir nur zeigen wie unwissende Leute auf das reagieren könnten...

Original von user-118
mit php einfach den jeweiligen parameter auswerten und dementsprechend einem menüpunkt eine klasse .active{} zuweisen.

hättest du da ein script für mich?

@der_nic
danke für den hinweiß von dieser seite her hab ich es noch nicht betrachtet
habs geändert