Willkommen in der Webstatt Zum Webstatt Blog und Stories
matschi matschi am 14.02.07 13:04

Hallo,

[img]http://666kb.com/i/altszuq05mshia67b.jpg[/img]

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

Danke
LG

netcup.de Warum gibt es hier Werbung?
BNightSpeeder am 14.02.07 13:08

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

Christian am 14.02.07 13:22

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 :)

fish fish am 14.02.07 13:38

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

Rene Rene am 14.02.07 13:44

Quote
Original von Christian[...]
- 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 :)

matschi matschi am 14.02.07 13:54

vielen dank für eure schnellen antworten

[img]http://666kb.com/i/altu6ues18ktzb1lz.jpg[/img]

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 =)

fish fish am 14.02.07 14:13

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

Christian am 14.02.07 14:18

Quote
Original von fish
mach den header doppelt so hoch.. und dann zupflastern mit bildern.


genau, und n text in den contentbereich :D

matschi matschi am 14.02.07 15:03

okay mach ich sobald ich die fotos bekomme ;)

Sheep Sheep am 14.02.07 17:45

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

BNightSpeeder am 14.02.07 19:02

Ich fände ein Vertikales Menü sowieso besser.

matschi matschi am 18.02.07 11:37

[img]http://666kb.com/i/alxsrpyymn9jfxnm5.jpg[/img]
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)

fish fish am 18.02.07 12:05

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

matschi matschi am 18.02.07 12:10

ähm ja *g* :]

matschi matschi am 18.02.07 13:21

[IMG]http://img.778.at/pics/ver5_new_new.jpg[/IMG]
okay das menü is kleiner geworden ;)

Remo1234 Remo1234 am 18.02.07 13:25

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

matschi matschi am 18.02.07 13:40

[img]http://666kb.com/i/alxvxwpkttybpm3m5.jpg[/img]
so?

Michael Michael am 18.02.07 13:41

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

matschi matschi am 18.02.07 13:52

Quote
Original von Michael
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 ;)

matschi matschi am 18.02.07 14:07

[img]http://666kb.com/i/alxwm5czvwlq5gix9.jpg[/img]

matschi matschi am 18.02.07 21:30

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

Al3x0r Al3x0r am 18.02.07 21:43

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

matschi matschi am 19.02.07 14:26

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 ;)

Al3x0r Al3x0r am 19.02.07 15:13

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.

matschi matschi am 19.02.07 15:40

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 ;)

matschi matschi am 20.02.07 17:44

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

F4n4T!C F4n4T!C am 20.02.07 22:34

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

matschi matschi am 20.02.07 22:40

Quote
Original von matschi
http://778.at/kiga/

;)

F4n4T!C F4n4T!C am 20.02.07 23:07

Quote
Original von matschi
[quote]Original von matschi
http://778.at/kiga/

;)[/quote]

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

matschi matschi am 21.02.07 09:33

danke des du es dir angesehen hast

1. problem:
[img]http://666kb.com/i/am0r325gp138aigx9.jpg[/img]

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

2. problem:
[img]http://666kb.com/i/am0r2bqg7k34jsilp.jpg[/img]
wie weißen striche im ie

danke nochmals

BNightSpeeder am 21.02.07 13:22

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

fish fish am 21.02.07 13:41

Quote
Original von matschi
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.

matschi matschi am 21.02.07 20:44

Quote
Original von BNightSpeeder
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 :])

Remo1234 Remo1234 am 21.02.07 21:55

Quote
Original von matschi
[quote]Original von BNightSpeeder
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 :])[/quote]

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

matschi matschi am 22.02.07 09:12

Quote
Original von Remo1234
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)

Remo1234 Remo1234 am 22.02.07 14:58

Quote
Original von matschi
[quote]Original von Remo1234
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)[/quote]
Mhhh welche Position? Wo ist denn der Unterschied ob dus mit <a> oder <ul> machst?

matschi matschi am 22.02.07 20:03

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

matschi matschi am 25.02.07 13:27

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

Remo1234 Remo1234 am 25.02.07 13:53

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

BNightSpeeder am 25.02.07 14:14

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.

matschi matschi am 25.02.07 14:23

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

BNightSpeeder am 25.02.07 14:35

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

matschi matschi am 25.02.07 15:24

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 :D

matschi matschi am 25.02.07 22:30

ok fast fertig puh :D
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:
[img]http://666kb.com/i/am5cts4ve2i0vhsqk.gif[/img]

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

Remo1234 Remo1234 am 25.02.07 23:23

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!

matschi matschi am 27.02.07 13:36

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 ;)

BNightSpeeder am 27.02.07 14:00

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.

Remo1234 Remo1234 am 27.02.07 14:09

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

matschi matschi am 27.02.07 15:25

Quote
Original von Remo1234
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 ;))

Al3x0r Al3x0r am 27.02.07 15:38

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

der_nic der_nic am 27.02.07 16:20

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

matschi matschi am 27.02.07 16:43

Quote
Original von Al3x0r
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? :D

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

Creative Commons Lizenzvertrag
Alle Inhalte des Webstatt-Archivs stehen unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Impressum & Kontakt