# [Website entsteht] Website wünscht sich Feedback und Hilfe



## Speeedymauss (16. Juni 2014)

*[Website entsteht] Website wünscht sich Feedback und Hilfe*

Hallo zusammen,
ich arbeite schon etwas länger an ner Seite für meine Casemods und habe jetzt erstmal die Betaseite fertig, also so grob steht die Seite.
Ich würde mich mal etwas über Feedback zur seite freuen, ich möchte die schließlich so gut wie möglich hinbekommen.

Momentan ist das noch ne Flash Seite mit dem Magix Editor erstellt, da ich momentan kene Ahnung von HTML und so habe, vlt baue ich die irgendwann mal auf HTML um...

Also die Seite ist momentan noch unter meiner alten Domain www.edencraft.de erreichbar. Ich würd mich freuen, wenn ihr mir etwas Feedback und Tipps geben könntet 

Website für Snapshots: http://andrea-taube.de


----------



## Bunny_Joe (16. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*

Hat sich angefühlt wie ne Zeitreise in die 90er^^


Vorschläge: 
 - Mach diese ganzen Farben weg. rot und blau beißen sich. Ich würde mich eher an grau-weißen Farben orientieren. Wie bei der Apple Seite
 - Die news-Box ist ganz unten auf der Seite?   --> ändern
 - Lass dir ein gutes Logo einfallen, aber nicht in diesem neumodischem flat-design, sondern was einprägsames
 - Es wäre schön sich in der Galerie durchklicken zu können(wenn dann mehr Bilder da sind)
 - Vielleicht ein Forum anbieten?(bin mir da aber nicht ganz sicher)

So das wäre mal meine Einschätzung


----------



## R4Z0R1911 (16. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*

Flat ist in  Siehe Windows 8 und oder die neue PCGames Webseite. Würde mich z.B. sehr ansprechen. 
Du hast auf deiner Seite sehr viele Neon RGB Farben, das finde ich zu Aggro.


----------



## Speeedymauss (16. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*



Bunny_Joe schrieb:


> Hat sich angefühlt wie ne Zeitreise in die 90er^^
> Vorschläge:
> - Mach diese ganzen Farben weg. rot und blau beißen sich. Ich würde mich eher an grau-weißen Farben orientieren. Wie bei der Apple Seite
> - Die news-Box ist ganz unten auf der Seite?   --> ändern
> ...


 
1) An den Areben arbeite ich noch, wobei ich die blauen Ramen um die Bilder nicht schlecht finde
2) Kommt noch, das ist noch die Beat updatebox, da muss auch noch nen gutes Design für die Box her dann kommt die nach oben
3) Ist in arbeit, eine Freundin von mir arbeitet an einem
4) Ma gucken, lässt sich aber machen
5) Wenn mir das jemand programmiert 

Danke fürs Feedback, ich werde mal gucken, was ich davon einbringen werde, hilfreich wars allemal!



R4Z0R1911 schrieb:


> Flat ist in  Siehe Windows 8 und oder die neue PCGames Webseite. Würde mich z.B. sehr ansprechen.
> Du hast auf deiner Seite sehr viele Neon RGB Farben, das finde ich zu Aggro.


 
Ich habe gerade auch keine andere Wahl als flash 
Alternative zu den Farben? Ich hätte gern schon iwo nen blauton drin, weil das son bischen die markenfarbe der Seite wird, wie könnte man das dann machen, damit es nicht so ins Auge sticht?


----------



## Bunny_Joe (16. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*

Ja, aber ein Logo soll vor allem einprägsam sein. Und der flat-look macht das meistens kaputt.
Hier mal ein Vergleich des Netflixlogos: alt gegen "neu" http://beatgeek.mx/wp-content/uploads/2014/05/tpJHPXZ.jpg


----------



## Bunny_Joe (16. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*



Speeedymauss schrieb:


> Alternative zu den Farben? Ich hätte gern schon iwo nen blauton drin, weil das son bischen die markenfarbe der Seite wird, wie könnte man das dann machen, damit es nicht so ins Auge sticht?


 
Wenns blau sein soll würde ich es eher so machen:NeoGAF
Dort ist das Blau nicht so(wie oben schon erwähnt)"aggressiv".

Hier, ich würde mich bei diesem Beispiel eher an den Farben weiter rechts orientieren:http://1.bp.blogspot.com/-hFJx9guAr.../shades-of-blue-wallpapers_35201_1280x800.png


Edit: sry doppelpost


----------



## Speeedymauss (16. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*

Ok, ich warte aber erstmal ab was da entsteht

zu den Farben: Danke, ich werds die tage mal umbauen und hier melden wenns soweit ist


----------



## Paulebaer1979 (17. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*

Sieht ganz gut aus. Was mich stört:

- kein html
- von Unterseiten kommt man nicht auf die Startseite, da der Button "Homepage" nicht läuft
- Layout ist etwas schmal für heutige Monitore (läßt sich per html/css leicht ändern)


----------



## Suebafux (17. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*



Speeedymauss schrieb:


> ....
> Momentan ist das noch ne Flash Seite mit dem Magix Editor erstellt, da ich momentan kene Ahnung von HTML und so habe, vlt baue ich die irgendwann mal auf HTML um...


HTML (und das drumherum wie zB css) ist ganz einfach, keine Scheu davor und wenn du deinen Content bequem per Admin-Login ändern willst (neue Bilder, Artikel, Usermeinungen...) dann schau dir noch 1-2 Wochen zusätzlich php an, auch keine Hexerei oder hol die gleich ein freies content-management-system.

Sonst finde ich sie zu groß (Schriften, Header) und halt Flash, aber für den Anfang ganz ok.
Flash war zwar mal hoch modern, da wurde aber eher auf künstlerische/grafische/spielerische Inhalte wert gelegt.


----------



## Paulebaer1979 (17. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*



Suebafux schrieb:


> HTML (und das drumherum wie zB css) ist ganz einfach, keine Scheu davor und wenn du deinen Content bequem per Admin-Login ändern willst (neue Bilder, Artikel, Usermeinungen...) dann schau dir noch 1-2 Wochen zusätzlich php an, auch keine Hexerei oder hol die gleich ein freies content-management-system.


 Jepp. Das ist ein guter Vorschlag. html/css und dazu ein CMS ala Joomla oder ähnliches. Das jetzige Design ließe sich recht schnell in html umsetzen.


----------



## Speeedymauss (17. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*



Paulebaer1979 schrieb:


> Sieht ganz gut aus. Was mich stört:
> - kein html
> - von Unterseiten kommt man nicht auf die Startseite, da der Button "Homepage" nicht läuft
> - Layout ist etwas schmal für heutige Monitore (läßt sich per html/css leicht ändern)


 
Danke, ja HTML ich gucke mal was ich da machen kann

Das dein Hompage nicht funzt ist komisch, damit hab ich keine probleme




Suebafux schrieb:


> HTML  (und das drumherum wie zB css) ist ganz einfach, keine Scheu davor und  wenn du deinen Content bequem per Admin-Login ändern willst (neue  Bilder, Artikel, Usermeinungen...) dann schau dir noch 1-2 Wochen  zusätzlich php an, auch keine Hexerei oder hol die gleich ein freies  content-management-system.
> 
> Sonst finde ich sie zu groß (Schriften, Header) und halt Flash, aber für den Anfang ganz ok.
> Flash war zwar mal hoch modern, da wurde aber eher auf künstlerische/grafische/spielerische Inhalte wert gelegt.



Das  hört sich für mich jetzt noch so total kompliziert an, habe halt noch  keine Ahnung, würde mir aber mehr infos wünschen, auch vlt mal ne  empfehlung womit ich mir die Dinge für ne Website beibringen kann






Paulebaer1979 schrieb:


> Jepp. Das ist ein guter Vorschlag. html/css und dazu ein CMS ala Joomla oder ähnliches. Das jetzige Design ließe sich recht schnell in html umsetzen.



Selbiges wie oben: Bitte mehr infos womit ich als nicht-wissener was anfangen kann um dann in die richtung weiter zu gehen


-----------------------------
Allgemein:
Ich werde erstmal jetzt mich um die Flashseite kümmern, dass ich die soweit schonmal fertig mache und später dann als vorlage für html nutze. Ich werde mich da gleich mal an die Farbgestaltung machen und das hier melden sobald ich da was neues habe:

Zu HTML und sonstiges: bitte mehr infos auch weiterführende, wie ich das lernen kann und bitte was ich brauce wenn ich auf html umbaue:  (Webspace, welche programmiersprachen, Datenbanken?, tool, etc.) würde mich da sehr über eure unterstützung mit tipps freuen!


EDIT:
Ich habe mal auf dieser Seite die Farben geändert, ich würd mich freuen wenn ihr mir zu denen was sagt, welche am besten aussueht oder ob noch was ganz anderes rein sollte. Ich selbst tendiere zu der farbei bei dem Schild an der Athlon Verpackung


----------



## Paulebaer1979 (17. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*



Speeedymauss schrieb:


> Ich werde erstmal jetzt mich um die Flashseite kümmern, dass ich die soweit schonmal fertig mache und später dann als vorlage für html nutze. Ich werde mich da gleich mal an die Farbgestaltung machen und das hier melden sobald ich da was neues habe.


Spricht auch nichts dagegen.


Speeedymauss schrieb:


> Zu HTML und sonstiges: bitte mehr infos auch weiterführende, wie ich das lernen kann und bitte was ich brauce wenn ich auf html umbaue:  (Webspace, welche programmiersprachen, Datenbanken?, tool, etc.) würde mich da sehr über eure unterstützung mit tipps freuen!


Da kann ich dir die Seite selfhtml.org wärmstens empfehlen. Die Grundlagen werden da ganz gut erklärt. Als Editor eignet sich NVU ganz gut. Der kann sowohl html als auch css.
Was den Webspace angeht: solltest du ja eigentlich schon haben. Wie hast du im Moment Zugriff auf deine Seite? Wie machst du Änderungen? Theoretisch sollte da schon jetzt eine index.html-Datei stehen, die dann die jetzige Flashseite aufruft.


----------



## Speeedymauss (17. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*



Paulebaer1979 schrieb:


> Da kann ich dir die Seite selfhtml.org wärmstens empfehlen. Die Grundlagen werden da ganz gut erklärt. Als Editor eignet sich NVU ganz gut. Der kann sowohl html als auch css.
> Was den Webspace angeht: solltest du ja eigentlich schon haben. Wie hast du im Moment Zugriff auf deine Seite? Wie machst du Änderungen? Theoretisch sollte da schon jetzt eine index.html-Datei stehen, die dann die jetzige Flashseite aufruft.


 
Werd ich mir nachher angucken!
Ja ich habe den, ich habe aber keinen direkten zugang zu dem Server. Magix hat da eine Onlineanwendung für mit der man die Seite bearbeiten kann, damit mache ich das, wenn du möchtest kann ich davon ja mal nen Bild machen


----------



## Paulebaer1979 (17. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*



Speeedymauss schrieb:


> Magix hat da eine Onlineanwendung für mit der man die Seite bearbeiten kann, damit mache ich das, wenn du möchtest kann ich davon ja mal nen Bild machen


 Bild würde helfen. Aber mir reicht auch schon die Info, welches Paket du bei denen gebucht hast.


----------



## Speeedymauss (17. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*

Ich hab Websitemaker 5 im PLUS Angebot, hier das grobe Interface:



			Dieser Inhalt steht nur eingeloggten Mitgliedern zur Verfügung.


----------



## Paulebaer1979 (17. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*

Also die "deluxe"-Version? Wow. Für das Geld bekommst du woanders richtig viel Ausstattung. Ich hatte von 2006 bis 2013 dieses Paket hier und war sehr zufrieden.
Wenn ich den Inhalt der Seite von deinem Hoster richtig verstanden habe, dann kannst du html-Code importieren (und er macht dann wieder Flash daraus) - ne reine html-Seite ist wohl nicht vorgesehen. Solltest du also mal Richtung html/css wollen, dann müsstest du mit deiner Seite umziehen.


----------



## Speeedymauss (17. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*

ne das hab ich: Website Maker _easy PLUS

_mit dem was da steht kann ich aber in den meisten fällen nicht viel anfangen weil ich die ja nicht selbst programmieren kann, ich war froh dass ich son tool zum getsalten habe


----------



## Paulebaer1979 (17. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*

Was das selber programmieren angeht: lade dir mal NVU runter und mache ein paar Experimente. Ist ein ganz guter WYSIWYG-Editor.
Naja du zahlst jetzt 1,99€ pro Monat für 2GB Speicherplatz und etwas  "Zubehör". Für 1€ mehr gibt´s z.B. 10GB Speicherplatz, 100 Emailadressen  und Unterstützung für die gängigsten Techniken im Internet - auch ein Forum wäre möglich. Deine jetzige Flaschseite würde da auch laufen nach einem Umzug.
Lustigerweise  braucht HTML mit CSS nicht viel Platz. Meine alte Seite hatte insgesamt  ca. 30 Unterseiten und war ohne Bilder grade mal 120MB groß.


----------



## Speeedymauss (17. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*

ok, mache ich ab morgen wenn ich zeit habe, ich denke ich werde das lange wochenende schonmal etwas dafür nutzen
ja wenn ich soweit bin und mit dem anderen packet was anfangen kann, dann kann ich ja auch umziehen...
Ist nen Forum nicht voll aufwändig zu programmieren?


----------



## BennHi (17. Juni 2014)

Ich würde die blauen Ränder an den Überschriften auf jeden Fall wegmachen, und auch an den Bildern weglassen. Bei "Galerie" gilt das selben und ich würd die Bilder unten nicht schräg anordnen.
Wichtig bei der Startseite finde ich auch, dass die Kästen wegkommen, dafür würde ich einfache Trennstriche machen, auch zwischen den 3 Spalten.

Alles in allem sieht das schon ganz schick aus aber ein wenig schlichter würds auch tun. Diese Leuchtenden schriften irritieren mich, da wäre ein schlichter Schatten ansprechener und ich würd auch ein wenig Zeit in die Suche einer Individuelleren Schriftart Investieren. sie sollte einfach, schlicht und serifenlos sein. (Serifen die die Füßchen & Co bei z.B. Times New Roman, Arial hat als Beispiel keine Serifen)


----------



## Laudian (17. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*

Ja, ein Forum ist schon ein ziemlich großer Aufwand, aber man kann sich fertige Foren runterladen die man dann nurnoch auf dem Server installieren muss.

Würde ich übrigens auch für die Website empfehlen, WordPress z.B. kann mit wenig Aufwand schon verdammt gut aussehen.


----------



## Speeedymauss (17. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*



BennHi schrieb:


> Ich würde die blauen Ränder an den Überschriften auf jeden Fall wegmachen, und auch an den Bildern weglassen. Bei "Galerie" gilt das selben und ich würd die Bilder unten nicht schräg anordnen.
> Wichtig bei der Startseite finde ich auch, dass die Kästen wegkommen, dafür würde ich einfache Trennstriche machen, auch zwischen den 3 Spalten.
> 
> Alles in allem sieht das schon ganz schick aus aber ein wenig schlichter würds auch tun. Diese Leuchtenden schriften irritieren mich, da wäre ein schlichter Schatten ansprechener und ich würd auch ein wenig Zeit in die Suche einer Individuelleren Schriftart Investieren. sie sollte einfach, schlicht und serifenlos sein. (Serifen die die Füßchen & Co bei z.B. Times New Roman, Arial hat als Beispiel keine Serifen)


 
ok, ich werds mir mal überlegen

Ich kann aufgrund des Editors leider keine Schriftarten hinzufügen, ich kann da nur aus wenigen vorgegebenen wählen, solange ich also noch mit magix arbeite geht das nicht


----------



## DarkMo (17. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*

auf jedenfall mutig, ohne irgendwelche kenntnisse ne webseite zu bauen ^^


----------



## Speeedymauss (17. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*



Laudian schrieb:


> Würde ich übrigens auch für die Website  empfehlen, WordPress z.B. kann mit wenig Aufwand schon verdammt gut  aussehen.


 
wofür jetzt Wordpress verwenden?




DarkMo schrieb:


> auf jedenfall mutig, ohne irgendwelche kenntnisse ne webseite zu bauen ^^


 
wer nicht wagt, der nicht gewinnt 
und ich hab ja euch alle, die hier so nett mitschreiben, da kann das ja eig nicht großartig schiefgehen


----------



## DarkMo (17. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*

ach, generell isses ja nich verkehrt, einfach mal was neues zu probieren. und html ist ja nun auch nich sooo schwer. das neue css3 is auch echt super und kompfortabel, passt scho. php für dynamisches zeugs is dann halt schon wieder bissl was andres.


----------



## Speeedymauss (17. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*

jo

ich bin gerade mal dabei mir so grob nen überblick über html zu machen, indem ich mir mal nen paar tuts auf yt gebe


----------



## Speeedymauss (17. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*

so ich hab jetzt mal so grob geguckt was es sich mit html css etc auf sich hat und ich denke ich könnte das hinbekommen, daher jetzt meine frage an die dies können, da ich mich übern urlaub dann mit passenden büchern beschäftigen würde:
Was sollte ich mir als analoges buch holen? da ich noch gefühlt millionen thalia gutscheine habe würde ich da dann gut zuschlagen, könnt ihr mir da ücher empfehlen? was muss ich jetzt alles für ne website können?


----------



## Paulebaer1979 (17. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*



Speeedymauss schrieb:


> was muss ich jetzt alles für ne website können?


 - einen Editor bedienen können!
Für den Rest reicht eine offene Seite mit Erklärungen (z.B. selfhtml) vollkommen aus. Lies dir dort erstmal die Beschreibungen der wichtigsten tags (html, body, head, title, meta, link, style) und die Anwendung durch. Danach überlegst du dir, wie du dein gewünschtes Layout am besten umsetzt. Durch die unterschiedlichen Bereiche deiner Seite hast du da (per css) viele Optionen.
Alternativ schaust du dir den Code von einer Seite an und versuchst ihn zu verstehen. Habe leider kein Backup mehr von meiner HP - sonst hätte ich dir den zu Verfügung gestellt.


----------



## Suebafux (17. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*

Naja, Buch brauchste nicht wirklich 
Wie Paulebaer1979 erwähnte: SELFHTML 8.1.2 (HTML-Dateien selbst erstellen) , reicht völlig, da findest du was du wissen musst.


----------



## Speeedymauss (17. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*

ich möchte aber im urlaub am strand nich mit nehm tablet oder laptop sitzen, da wäre nen buch doch deutlich angenehmer


----------



## Paulebaer1979 (17. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*

Macht aber in meinen Augen wenig Sinn, solche Infos zu lesen und sie nicht gleich im Editor zu probieren. Bin aber auch eher der pragmatische Typ - also eher learning by doing. Am besten gehst du in einen guten Buchladen und stöberst dort mal durch die vorhandenen Bücher zu dem Thema - wobei viele auch direkt ne CD mit Codebeispielen dabei haben.


----------



## Rho (17. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*



Paulebaer1979 schrieb:


> Lustigerweise  braucht HTML mit CSS nicht viel Platz. Meine alte Seite hatte insgesamt  ca. 30 Unterseiten und war ohne Bilder grade mal 120MB groß.



"[G]rade mal" ist gut...

*Zum eigentlichen Thema:*

Wie ja bereits einige male erwähnt wurde, werde so schnell wie möglich diesen Flash-Müll los. Ich bin übrigens nicht der Meinung, dass man sich dazu erst mal in HTML & Co. einarbeiten muss. Mach dir einfach einen kostenlosen Account auf https://wordpress.com/ oder einem ähnlichen Anbieter und das wars.


----------



## Speeedymauss (17. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*



Paulebaer1979 schrieb:


> Macht aber in meinen Augen wenig Sinn, solche Infos zu lesen und sie nicht gleich im Editor zu probieren. Bin aber auch eher der pragmatische Typ - also eher learning by doing. Am besten gehst du in einen guten Buchladen und stöberst dort mal durch die vorhandenen Bücher zu dem Thema - wobei viele auch direkt ne CD mit Codebeispielen dabei haben.


 
ich mach das normalerweise eig auch so aber so kann ich ittags schonmal lesen und abend dann nochmal überprüfen und anwenden


----------



## Suebafux (17. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*

Das schwierigste an Webseiten ist das Design. Es brauch einfach einiges an Fantasie und Kreativität um eine hübsche Seite zu gestalten.
Darüber würde ich im Urlaub am Strand nachdenken, wie aufgebaut, welche Farben, welche Inhalte und wie eingebunden... . Wie es dann technisch umgesetzt wird ist vorerst Nebensache. HTML ist einfach Text, viel copy&paste, paar Tabellen und die verschachteln... dafür würd ich auch nicht am Strand mit dem Läppi spielen


----------



## Paulebaer1979 (18. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*



Suebafux schrieb:


> Das schwierigste an Webseiten ist das Design. Es brauch einfach einiges an Fantasie und Kreativität um eine hübsche Seite zu gestalten.


Ich ging bisher davon aus, daß das jetzige Design umgesetzt werden soll.


Suebafux schrieb:


> Darüber würde ich im Urlaub am Strand nachdenken, wie aufgebaut, welche Farben, welche Inhalte und wie eingebunden... . Wie es dann technisch umgesetzt wird ist vorerst Nebensache.


Kann mit nem Ausdruck der jetzigen Version, nem Block und dem Buch gehen. Wäre aber nicht mein Fall.


Suebafux schrieb:


> HTML ist einfach Text, viel copy&paste, paar Tabellen und die verschachteln... dafür würd ich auch nicht am Strand mit dem Läppi spielen


 Ja zum copy&paste - nein zu Tabellen. Wird schon seit 2008 von Profis nicht mehr genutzt (ausser sie wollen wirklich ne Tabelle in der Seite haben). divs mit float-Eigenschaften sind da geschickter und flexibler - grade was die Gestaltung angeht.


----------



## bofferbrauer (18. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*



Speeedymauss schrieb:


> Das  hört sich für mich jetzt noch so total kompliziert an, habe halt noch  keine Ahnung, würde mir aber mehr infos wünschen, auch vlt mal ne  empfehlung womit ich mir die Dinge für ne Website beibringen kann


 
auf Codeacademy kann man gratis einen kompletten HTML/CSS Kurs machen. Weitere Spezialisierung ist nachher auch noch mit Javascript, jQuery und PHP möglich. Nebenbei kann man dort auch noch Python, Ruby und API Programmation lernen


----------



## DarkMo (18. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*

wegen dem "mach dir gedanken zum design":
dazu is das buch lesen nebenher eigentlich auch nich verkehrt ^^ man liest dort schonmal viel über die ganzen möglichkeiten und dann spielt da schon die fantasie von ganz alleine. wenn man die möglichkeiten kennt, kann man auch viel gezielter ideen für ein design entwickeln. die grenzen des ganzen sind aber natürlich auch klar: fehlinterpretation des geschriebenen zum bsp. dann merkt man beim selber probieren später, dass das ganze doch nich so klappt.

aber so is das halt beim lernen. keiner der je angefangen hat, hatte nie probleme ;P


----------



## Speeedymauss (18. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*

jo, ich werd mal in ne bücherrei gehen und mal gucken was die so haben...

Ich brauch jetzt eure Hilfe, welches blau?



			Dieser Inhalt steht nur eingeloggten Mitgliedern zur Verfügung.
        


ich hab schon ein paar meinungen, ich hätt aber gern noch ein paar mehr  einfach sagen was auf dem bild ist für die entsprechende farbe, würd mich freuen


----------



## jamie (18. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*

Ich würde nicht nur den Farbton ändern, sondern das gesamte Design. Das sieht alles sehr zusammengewürfelt aus. Das Menü z.B. passt gar nicht zu dem ansonsten vorherrschenden Neon-Gedöns. Du brauchst irgendein Konzept, also zurück an's Reissbrett! Ich würde wirklich empfehlen, dass Ganze mal von Grund auf zu designen. Im Moment sieht's so aus, als hättest du dich direkt an den Code gesetzt und dann nach und nach einfach alles reingekloppt. Hübsch ist das nicht.


----------



## Laudian (18. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*

Ich würde wie gesagt eher eine Wordpress Seite nehmen, mir eins von den tausenden fertigen Designs aussuchen und dass dann leicht an deine Wünsche anpassen.

Da hast du dann echt alles dabei, vor allem einen vernünftigen Bildbetrachter.


----------



## rtf (19. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*

bei den Bildern würde ich den blauen Rand weglassen.Dadurch das der Rand auch noch rund ist, wirkt es überhaupt nicht stimmig zu den eckigen Bildern. oder geht es dir jetzt direkt nur um die Farbe?
Bei den Farben würde die beiden ersten links oben nehmen.

Und wenn es dir nur darum geht eine eigene Seite zu besitzen würde ich dir, wie Laudian, ein CMS, vorzugsweise Wordpress, empfehlen. Dort gibt es genug kostenlose Templates und Plugins das du dort sicher fündig wirst.


----------



## Speeedymauss (19. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*



jamie schrieb:


> Ich würde nicht nur den Farbton ändern, sondern das  gesamte Design. Das sieht alles sehr zusammengewürfelt aus. Das Menü  z.B. passt gar nicht zu dem ansonsten vorherrschenden Neon-Gedöns. Du  brauchst irgendein Konzept, also zurück an's Reissbrett! Ich würde  wirklich empfehlen, dass Ganze mal von Grund auf zu designen. Im Moment  sieht's so aus, als hättest du dich direkt an den Code gesetzt und dann  nach und nach einfach alles reingekloppt. Hübsch ist das nicht.


 
aha, problem ist halt, da ich noch mit magix arbeite,  habe ich die Navigationen und andere sachen mehr oder weniger  vorgegeben, ich muss da halt das beste draus machen. Was stöft dich  denn? dann würd ich mich über konkrete verbesserungsvorschläge freuen 




Laudian schrieb:


> Ich  würde wie gesagt eher eine Wordpress Seite nehmen, mir eins von den  tausenden fertigen Designs aussuchen und dass dann leicht an deine  Wünsche anpassen.
> 
> Da hast du dann echt alles dabei, vor allem einen vernünftigen Bildbetrachter.


 
Ich  werd mir die Software die Tage mal angucken, aber vlt baue ich auch  komplett selbst wenn ich mir mal html etwas beigebracht habe




rtf schrieb:


> bei den Bildern würde ich den blauen Rand weglassen.Dadurch das der Rand auch noch rund ist, wirkt es überhaupt nicht stimmig zu den eckigen Bildern. oder geht es dir jetzt direkt nur um die Farbe?
> Bei den Farben würde die beiden ersten links oben nehmen.
> 
> Und wenn es dir nur darum geht eine eigene Seite zu besitzen würde ich dir, wie Laudian, ein CMS, vorzugsweise Wordpress, empfehlen. Dort gibt es genug kostenlose Templates und Plugins das du dort sicher fündig wirst.



Momentan gehts mir hauptsächlich erstmal um die Farbe, der rest kommt später, aber die Bilder so komplett ohne Rahmen fänd ich doof, sowas mag ich nicht.
Mir geht es nicht darum, dass ich unbedingt ne internetseite haben möchte, ich möchte mich nur auch gerne außerhalb des forums noch präsentieren können und ne kleinere Datenbank mit Tipps u.ä. für Modding anlegen um dann auch anderen helfen zu können


----------



## BennHi (19. Juni 2014)

Also ich lern des ganze Design-Gedöns grad in der Schule und es ist Wahnsinn was für Gedanken sich die Profis der großen Seiten machen. 


Meine Tipps: 

- Such dir 2-3 Farben die auf der Seite immer wiederkehren und gut zusammenpassen (siehe Komplementär-, Quantitätskontrast & Co. (einfach mal googlen)) 

- Such Inspiration bei modernen, hochwertigen seiten (Apple & Co, pcgames.de, Google, Twitter, Facebook....) 

- Rahmen sind grundsätzlich nicht verkehrt aber der Trend geht eher in Richtung schlicht und ohne Farbverläufe. d.h: diesen Glüheffekt weglassen und dafür was (breiteres) einfarbiges. 

- Vielleicht n Logo oder einprägsamen Schriftzug. 


Tipp: Bei allem was du tust: denk an den goldenen schnitt (5:8 bzw. drittelteilungen)


----------



## Speeedymauss (20. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*



BennHi schrieb:


> Also ich lern des ganze Design-Gedöns grad in der Schule und es ist Wahnsinn was für Gedanken sich die Profis der großen Seiten machen.
> 
> 
> Meine Tipps:
> ...



Danke für die Tipps!

Es gibt auch neues von mir, ich war heute ma bei Thalia 



			Dieser Inhalt steht nur eingeloggten Mitgliedern zur Verfügung.
        


 wenn ich normal arbeite müsste ich das ganze sogar vor dem urlaub schaffen...dann müsste ich die grundlagen drin haben...


----------



## Paulebaer1979 (20. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*



HARDL1NE schrieb:


> beschäftige dich eher mit google (seo)


Braucht er nicht, wenn er die Tags im Title ordentlich nutzt/ausfüllt. Die Infos dazu findet er im Buch.


HARDL1NE schrieb:


> und photoshop sowie social media einbindung...


 Bildbearbeitung ist ok. Allerdings scheint das nicht so das Problem zu sein. Wozu sollte man social media auf eine private Seite einbinden? Die Freunde aus dem Gesichtsbuch werden die Seite eh kennen.


----------



## Speeedymauss (22. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*

So, ich habe jetzt nochmal ne andere frage bzw. zwei:

Einmal wegen der Domain.
www.speeedysmods.de oder www.speeedys-mods.de ?
oder noch anders?

was hat es sich mit joomla auf sich? wie funktioniert das so grob?


----------



## Paulebaer1979 (23. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*

Domain würde ich eher zweite nehmen. Aber das ist Geschmackssache.

Joomla ist ein CMS (Content-Management-System). Das heißt, du erstellst einmal ein HTML-Template und das System erstellt dann die Menüstruktur und die einzelnen Unterseiten. Macht in meinen Augen nur Sinn, wenn:
- mehrere Leute die Seite ändern/ergänzen wollen
- du ohne große HTML-Kenntnisse ne Seite aus vorhandenen Designs "bauen" willst
Zumal man bei Joomla (und auch anderen CMS) trotzdem ein paar Kenntnisse in Bezug auf die Webseite und deren Aufbau (Hauptmenü, Untermenüs, etc.) braucht.
Ich würde dir empfehlen, dein jetziges Design mal mit HTML und CSS nachzubauen und bei Fragen einfach hier zu fragen. Alternativ kannst du dir ähnliche Seiten suchen und dir deren HTML-Code anschauen. So lernt man auch viel.


----------



## Speeedymauss (23. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*

ok

ok danke für die auskunft


----------



## rtf (24. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*

würde mich auch für die 2.te Domain entscheiden. 

Ergänzung zu Paulebaer:
Finde ein CMS macht auch Sinn, wenn man viele Texte(Content *haha* ) bereitstellt, sonst verliert man schnell die Übersicht in der HTML - Datei.


----------



## DOcean (24. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*

1. Domain, ich mag den Strich einfach nicht....

hau bloß das Flash weg, vorallem bei so einer Seite wie deiner, das kann man alles mit HTML5 erledigen....

Ich würde aber auch auf Joomla und Konsorten setzen, für sowas wie deine HP brauch man kein HTML/CSS lernen (schadet natürlich nicht)...


----------



## Paulebaer1979 (24. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*



rtf schrieb:


> Finde ein CMS macht auch Sinn, wenn man viele Texte(Content *haha* ) bereitstellt, sonst verliert man schnell die Übersicht in der HTML - Datei.


 Kommt auf den Editor an. Bei NVU sieht man je nach Einstellung "nur" den eigentlichen Inhalt und muß am HTML-Code nur noch minimal was ändern für ne Unterseite.


DOcean schrieb:


> Ich würde aber auch auf Joomla und Konsorten setzen, für sowas wie deine HP brauch man kein HTML/CSS lernen (schadet natürlich nicht)...


 Sofern man vorgefertigte Desings nutzen kann/will macht die Aussage Sinn. Wenn der TE was völlig anderes machen will, wird er um HTML und CSS nicht herum kommen. Da auch schon ein Buch gekauft wurde, würde ich erstmal von nem CMS abraten. Kann man später immer noch "nachrüsten", wenn man die Grundseite in HTMl erstellt hat.


----------



## DOcean (24. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*



Paulebaer1979 schrieb:


> Sofern man vorgefertigte Desings nutzen kann/will macht die Aussage Sinn. Wenn der TE was völlig anderes machen will, wird er um HTML und CSS nicht herum kommen. Da auch schon ein Buch gekauft wurde, würde ich erstmal von nem CMS abraten. Kann man später immer noch "nachrüsten", wenn man die Grundseite in HTMl erstellt hat.



bin da eher andere Meinung, ein CMS nimmt einem einfach so viel Arbeit ab, da lohnt das selber häkeln kaum, lieber das schreiben eines Template/Design lernen...


----------



## Paulebaer1979 (24. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*

Naja das Design will ja im Falle eines Falles auch von Grund auf "gehäkelt" werden. Dazu braucht man automatisch HTML-Kenntnisse sonst klappt´s auch mit dem CMS nicht. Wenn man sich die Grundlage "gehäkelt" hat, kann einem ein CMS Arbeit abnehmen, stimmt. Wobei ich es einfacher Finde, ein paar Dateien zu ändern, als per Joomla neue Unterseiten einzubauen. Da hat wohl jeder so seine Vorlieben und Stärken.


----------



## DarkMo (24. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*

kommt ja auch drauf an, was der TE will  möchte er einfach nur irgendwie ne seite bauen? -> cms (wobei wie paule sagt, nen paar grundkenntnisse glaube generell nich verkehrt sind ^^). möcht er aber vllt das selber "häkeln" lernen? -> dann is son cms ding natürlich nur hinderlich.


----------



## rtf (24. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*



Paulebaer1979 schrieb:


> Kommt auf den Editor an. Bei NVU sieht man je nach Einstellung "nur" den eigentlichen Inhalt und muß am HTML-Code nur noch minimal was ändern für ne Unterseite.


 
Meinst du damit die Register, womit man Code ausblenden kann?

Ich gehe davon aus, dass er später merken wird, dass ein CMS einfacher zu bedienen ist. Das bald erworbene HTML/CSS Wissen kann er später bei seinem eigenen Template verwenden. 
Schlecht ist es daher nicht erst in reinem HTML/CSS zu programmieren. Später kann noch PHP/Javascript/etc dazu kommen.


----------



## Speeedymauss (24. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*

So ich melde mich jetzt auch mal wieder 

Zu "häkeln" vs CMS sag ich erstmal:

es soll meine Seite werden und ganz persönlich für das angepasst, was ich mal möchte (nur weiß ich momentan mal wieder nicht wirklich was ich möchte, ihr bringt hier so viele neue Aspekte ein...) daher tendiere ich zum häkeln und ich denke mal HTML und CSS lernen ist vlt gar nicht so verkehrt

Dann hab ich weiter an der Seite gearbeitet (ich hatte noch nicht die Ruhe mal ins Buch zu gucken) ich hab schonmal die homepage ganz anders gemacht, allerdings gefällt mir jetzt Header + Navigation nicht mehr. Wegen dem Header muss ich einfach mal meine Bildbearbeitungsskills rausholen, bei der Navigation gefällt mir einfach keine von den Vorgegebenen

aber ich würd mich freuen wenn ihhr nochmal drüber guckt


----------



## Paulebaer1979 (24. Juni 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*

Also bis auf die über dem Inhalt liegenden Untermenüs läßt sich deine Seite im jetzigen Zustand ohne großen Aufwand in HTML umsetzen. Wäre sehr einfach. Wenn die Punkte in den Untermenüs nicht unter- sondern auch nebeneinander stehen dürfen, könnte man das recht einfach per Script lösen.

Dein Gedanke, dich intensiver mit HTML und CSS zu befassen, finde ich gut.


----------



## Munro22983 (7. Juli 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*

Hallo Speeedy,

also ich würde ebenfalls empfehlen auf Wordpress umzusteigen. 
Ich habe mit meinem Blog auch mit Magix angefangen und schnell gemerkt, dass das nicht lange Spaß macht. Ist vielleicht ganz net für eine Visitenkarten-Homepage. Aber für ein Projekt wie Deins, wirst du damit nicht lange Spaß haben.


----------



## Speeedymauss (7. Juli 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*

So ich kann ja mal kurz nen Update machen:

Ich bin soweit eigentlich recht weit mit HTML und CSS. Es fehlen nur noch ein paar kleinere Elemente die ich mir angucken muss und dann kann ich Anfangen meine Seite in HTML umzusetzen. Ich werde jetzt auch nichts mehr an meiner Magix seite machen. Ich plane aber schonmal im Kopf den Aufbau der neuen Seite. Falls es erste ergebnisse gibt werde ich diese natürlich mit euch teilen!


----------



## Paulebaer1979 (18. Juli 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*

Hast du schon was bei dir lokal auf dem Rechner geschrieben in HTML? Oder bist du noch am Buch lesen und lernen?


----------



## Speeedymauss (19. Juli 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*

ich habe mich noch nichts ans html gemacht, das habe ich jetzt die woche vor. Ich habe aber schonmal überlegt wie ich die neue Seite aufbau und habe schon ein paar skizzen angefertigt wie ich das vlt umsetzen kann usw. . Die Website an sich ist also schonmal recht durchdacht, ich werde jetzt bald dann mit dem ersten HTML Anfangen. Ich denke mal ich werde euch dann hier immer auf dem Laufenden halten


----------



## Speeedymauss (23. Juli 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*

So
ich habe gestern mal angefangen meine Website zu schreiben.
Die Homepage ist erstmal grob übernommen, ich muss noch einiges am CSS machen aber die grobe Strucktur ist da.
Ich lad mal meinen bisherigen stan im Anhang hoch, wer will kann ja mal nen Blick reinwerfen



			Dieser Inhalt steht nur eingeloggten Mitgliedern zur Verfügung.
        



So das wars auch dann erstmal wieder


----------



## Paulebaer1979 (23. Juli 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*

Sieht ganz gut aus. Weiter so.


----------



## BenRo (23. Juli 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*

Ist zwar "Beta" und vieles wirst du selbst wissen, aber ich liste trotzdem mal alles, was mir auffällt:
- standard (Name der CSS-Datei) schreibt man mit d.
- Dein Seitentitel lautet Speedy's Mods mit zwei e, die Überschrift (und dein Nick) enthalten aber drei e.
- header class="header" ist ein bisschen redundant, aber macht nichts
- Du hast dich oft beim Wort "Tabelle" vertippt und ein b zuviel verwendet (Tabbellenzeile, tabbellencontainer). Dadurch werden auch manchmal CSS-Regeln nicht angewendet
- Dein CSS enthält Fehler, denn beim "margin: 0px;" fehlt der Doppelpunkt. Ein guter Editor / eine gute IDE würde dir sowas anzeigen
- Meine persönliche Meinung ist, IDs für CSS möglichst zu vermeiden und stattdessen mit Klassen zu arbeiten.
- Galerie hat im deutschen nur ein l
- Die Überschriften in deinen articles sind h1 und h3 - das ergibt keinen Sinn, es sollte h1 und h2 sein. Bedenke, dass die Zahl nur die semantische Ordnung angibt, verkleinern oder dünner machen usw. kannst du die Überschrift immer noch per CSS
- Das "=> Genaues" sollte besser "=>Genaues" heißen, genauso später bei => Startseite; Da könnten sonst einige Browser drüber stolpern
- Dem Haupttext würde eine Rechtschreib- und Grammatikprüfung guttun
- Anstatt dieser Anführungszeichen: "Test" fände ich diese schöner: „Test“
- Das Arbeit von "in Arbeit" schreibt man groß
- Du verwendest article und section nicht so, wie die Spezifikation das vorsieht. Ich würde für News, Projekte und Aktuelle Casemods jeweils einen section-Tag verwenden, innerhalb dieser für jede einzelne News und jedes einzelne Projekt einen article. Für das was bei dir section id="main" ist würde ich ein div nehmen, da diese "section" keinen semantischen Wert hat. Merke: article ist Zeug, was auch sinnvoll aggregiert werden kann (Nachrichtenartikel, Produkte, Aktuelle Blogeinträge, Teaser von Inhalten), section ist das, wofür du article hältst. 
- footer id="fusszeile" finde ich auch wieder redundant.

EDIT: Sorry, jetzt stimmts. ^^


----------



## Speeedymauss (23. Juli 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*



Paulebaer1979 schrieb:


> Sieht ganz gut aus. Weiter so.


 Dankö




BenRo schrieb:


> Ist zwar "Beta" und vieles wirst du selbst wissen, aber ich liste trotzdem mal alles, was mir auffällt:
> - standard (Name der CSS-Datei) schreibt man mit d.
> - Dein Seitentitel lautet Speedy's Mods mit zwei e, die Überschrift (und dein Nick) enthalten aber drei e.
> - header class="header" ist ein bisschen redundant, aber macht nichts
> ...


 
Erstmal danke für den ausführlichen "Fehlerbericht" 
Wegen rechtschreibung etc. lasse ich später mal meine bessere Hälfte drüber gucken. Wenn ich halt grade so dabei bin und schnell mal was tippen möchte weil ich grad so viel im Kopf habe wird das bei mir schonmal etwas vernachlässigt . Sowas wird aber natürlich vor der eigentlichen Veröffentlichung genaustens geprüft, ich weiß ja selber, dass ich da gern Fehler einbaue.

Was HTML und CSS angeht, bin ich halt noch nen blutiger Anfänger, für solche Fehler habe ich dann zum glück euch 
Ich hab mir auch mel den Luxus gegönnt und arbeite mit Dreamwaver um die gröbsten Fehler zu vermeiden  obs aber immer funzt ist die andere sache...


----------



## BenRo (23. Juli 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*

Ist dafür, dass du gerade angefangen hast sehr gut.


----------



## Speeedymauss (23. Juli 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*



BenRo schrieb:


> Ist dafür, dass du gerade angefangen hast sehr gut.


 
danke, ich würde mich freuen wenn du dran bleibst und ab und zu nochmal drüber guckst wenn du lust hast. Das hilft mir bei späteren Fehlern bestimmt sehr, wenn ich Feedback von jemanden bekomme, der das richtig kann


----------



## rtf (24. Juli 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*

Nur so als kleiner Tipp für dich.
Die W3C ist für die Standardisierung im Web zuständig. Passend dazu gibt es eine Seite, die deinen Code überrpüft. 

The W3C Markup Validation Service


----------



## Speeedymauss (24. Juli 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*



rtf schrieb:


> Nur so als kleiner Tipp für dich.
> Die W3C ist für die Standardisierung im Web zuständig. Passend dazu gibt es eine Seite, die deinen Code überrpüft.
> 
> The W3C Markup Validation Service


 
Ich weiß, ich kenne die Seite, in Dreamwaver gibts sogar ne Funktion die den Quelltext automatisch mit W3C überprüft, aber tro danke für den Hinweis!


----------



## Speeedymauss (24. Juli 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*

So ich habe mal etwas weiter gemacht, ich habe aber jetzt etwas was mich stört.


Ich habe für die Seite "Tagebuch" und "Quickie" den selben aufbau und gleiches CSS, nur ist das Tabellenlayout bei Tagebücker vernünftig, an den Seiten mit dem eingstellten Außenabstand. Bei Quickie aber ist der Außenabstand an der rechten Seite größer, sobald ich die Seite in der kompletten größe meines Full-HD Monitors öffne. Wenn ich das Fenster etwas schmaler mache geht es. Ich finde den Fehler einfach nicht, hat da wer Lust mal drüber zu gucken?

Download mit dem Fehler:



			Dieser Inhalt steht nur eingeloggten Mitgliedern zur Verfügung.


----------



## Speeedymauss (24. Juli 2014)

*AW: Neue Website (Beta) wünscht sich Feedback*

Zusatzfrage:
wie kann ich z.b. eine vertikale Navigation mittig in einer <section> anordnen?

mir fehlt da iwie das passende CSS dafür...bzw steh ich aufm schlauch


----------



## DarkMo (24. Juli 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

style="text-align:center" ? bzw eben der inhalt vom style="" in css geschrieben. funzt das ned? um nen sichtbaren erfolg zu haben, sollte die section natürlich größer sein, wie der inhalt ^^ (width:100% oder so). aber section sagt mir auf anhieb jetz garnich soviel *duck*


----------



## Speeedymauss (25. Juli 2014)

Dann wird der text in einem nav button zentral gesetzt, die buttons aber nicht...
Section funktioniert wie div, ist nur etwas spezieller


----------



## Festplatte (25. Juli 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

margin: 0 auto;


----------



## --EpoX-- (25. Juli 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Ich hoffe man hat dir Firebug schon empfohlen! Unverzichtbar wenn du viel mit CSS rumbasteln willst, lies dich 10 Minuten ein und Spar dir anschließend mehrere Stunden Sucharbeit für verschiedene Formatierungsfeatures in CSS


----------



## Speeedymauss (25. Juli 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



Festplatte schrieb:


> margin: 0 auto;


 
danke, auf die einfachen sachen kommt man natürlich nicht 




--EpoX-- schrieb:


> Ich hoffe man hat dir Firebug schon empfohlen! Unverzichtbar wenn du viel mit CSS rumbasteln willst, lies dich 10 Minuten ein und Spar dir anschließend mehrere Stunden Sucharbeit für verschiedene Formatierungsfeatures in CSS


 
nein, das kenne ich noch nicht


----------



## --EpoX-- (25. Juli 2014)

Ja das tool ist super du kannst CSS quasi in the fly ändern und sehen was passiert


----------



## Speeedymauss (25. Juli 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Ich werds mir mal angucken

Ich habe aber nochmal ne Frage:
Kann mir einer sagen, warum meine Pseudoklassen bei den links der Navigationen nicht funktionieren?
Download aktuelle Website:



			Dieser Inhalt steht nur eingeloggten Mitgliedern zur Verfügung.


----------



## Speeedymauss (26. Juli 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

So aktueller stand mit ausfürhlicher ToDo Liste.

Was sagt ihr eig zum Design? Habt ihr da verbesserungsvorschläge?

Download:



			Dieser Inhalt steht nur eingeloggten Mitgliedern zur Verfügung.


----------



## Paulebaer1979 (27. Juli 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Das Design sieht gut aus. Habe da nur mal ein paar Fragen:
- warum legst du die Unterseiten in seperate Ordner?
- warum haben die Unterseiten eigene CSS-Dateien?

Wäre einfacher, wenn alle html-Dateien im Hauptverzeichnis liegen würden - macht die Verlinkung untereinander leichter. Eine CSS-Datei für alle Seiten macht eine Design-/Layoutänderung leichter, da du nur eine Datei ändern mußt, um z.B. die Hintergrundfarbe oder ne Schriftgröße zu ändern.


----------



## Speeedymauss (27. Juli 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



Paulebaer1979 schrieb:


> Das Design sieht gut aus. Habe da nur mal ein paar Fragen:
> - warum legst du die Unterseiten in seperate Ordner?
> - warum haben die Unterseiten eigene CSS-Dateien?
> 
> Wäre einfacher, wenn alle html-Dateien im Hauptverzeichnis liegen würden - macht die Verlinkung untereinander leichter. Eine CSS-Datei für alle Seiten macht eine Design-/Layoutänderung leichter, da du nur eine Datei ändern mußt, um z.B. die Hintergrundfarbe oder ne Schriftgröße zu ändern.


 
Ich habs für meine übersicht gemacht. Ich fand das übersichtlicher als alle seiten in einen ordner zu packen. Macht man das normalerweise nicht?

Ja meine CSS Dateien sind noch nicht soo ideal, da arbeite ich auch noch dran.
Meine Standart CSS beinhaltet momentan eigentlich alle grundlegenden CSS Regeln, in den CSS Dateien der einzelnen Seiten dann noch sachen, die von dem Standart abweichen. Aber ich werde da nochmal für ordnung sorgen müssen, dass mache ich vlt im Urlaub oder spätestens wenn ich wieder daheim bin


----------



## Paulebaer1979 (27. Juli 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



Speeedymauss schrieb:


> Ich habs für meine übersicht gemacht. Ich fand das übersichtlicher als alle seiten in einen ordner zu packen. Macht man das normalerweise nicht?


Also die Seiten, die ich bisher erstellt habe, waren immer so sortiert:
- im Hauptverzeichnis alle html-Dateien
- ein Ordner für Scripte
- ein Ordner für Bilder (mit Unterordner groß/mini)
- ein Ordner für CSS-Dateien (print, screen, mobile, etc.)


Speeedymauss schrieb:


> Meine Standart CSS beinhaltet momentan eigentlich alle grundlegenden CSS Regeln, in den CSS Dateien der einzelnen Seiten dann noch sachen, die von dem Standart abweichen. Aber ich werde da nochmal für ordnung sorgen müssen, dass mache ich vlt im Urlaub oder spätestens wenn ich wieder daheim bin


 Da bieten sich dann einzelne Klassen für an.


----------



## Festplatte (27. Juli 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



Speeedymauss schrieb:


> Ich fand das übersichtlicher als alle seiten in einen ordner zu packen. Macht man das normalerweise nicht?



Auf keinen Fall macht man das. Macht keinen Sinn und ist völlig unnötig.


----------



## Speeedymauss (27. Juli 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

OKee...dann muss ich wohl nochmal umstruckturieren, aber das ist ja zum glück noch nicht so aufwändig, danke für den hinweis


----------



## ofhouse (3. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Hallo, ich klinke mich mal kurz ein 

Was ich so auf den ersten Blick gesehen hab:

*- Normale Schrift & Überschrift haben die gleiche Schriftart*
=> Wirkt unübersichtlich, besser andere Schriftart für die normale Schrift nehmen, wenn's was spezielles sein soll, kann ich Google Fonts empfehlen.

*- Pfeil "=>" durch einen Button bzw. Ascii-Zeichen "→" ersetzen.*
Sieht ein bisschen behelfsmäßig aus, an manchen Stellen kannst du den Pfeil auch einfach weglassen, gibt halt ein bisschen viele davon auf der Seite, so dass der "Hey, schau mal hier" Effekt verloren geht.

*- Zu viele H1 Tags im Quellcode*
H1-Tags sind nur für Titel der Webseite (Also "Speeedy's Mods") gedacht, für Überschriften von einzelnen Bereichen sollte man H3 nehmen, solche Sachen sind aber eher wichtig für die interne Struktur.

Ansonsten schon ganz ordentlich für eine erste richtige Webseite, meine ersten Versuche waren da auch nicht besser 

Da ich als Programmierer übrigens keine Angst mehr vor endlosem Quellcode hab, bin ich von Wysiwyg-Editoren wie Dreamweaver schon lange weg und benutze nur noch Brackets und Chrome zur Webentwicklung.
Dadurch hat man zwar auch mehr Arbeit, aber auch eine deutlich bessere Kontrolle über den Quellcode.
Wenn du Chrome nutzt, kannst du statt Firebug übrigens auch einfach die Entwicklertools von Chrome nehmen, dazu einfach [F12] drücken.
Mir persönlich gefällt Chrome mittlerweile besser zum entwickeln, obwohl ich vorher ein paar Jahr nur mit Firefox/Firebug verbracht hab, da bringt es auch was, mal über den Tellerrand zu schauen. 

Edit: Darauf bin ich selbst erst sehr spät gekommen, aber mit das Beste was man machen kann, ist bei den Profis zu schauen.
Auch wenn es noch Jahre dauern kann, bis man selbst sowas hin bekommt, kann man sich bei Dribbble sehr viele kleine Ideen / Inspirationen holen, einfach mal dort die Suche mit Begriffen wie "Website", "Homepage", "Blog" etc. füttern


----------



## Speeedymauss (4. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

@ofhouse
wenn ich könnte, würde ich ausführlicher antworten, meine umstände erlauben das aber gerade nicht.
Danke erstmal für deine ganzen Tipps ich werde mal sehen was ich davon alles umsetzen werde, kann sein, dass ich da nochmal auf die zurück komme!

Allgemein:
ich bin ja jetzt im urlaub und irgendwie schaffe ich doch weniger als ich gedacht habe  naja es wird also erst später ein neues Update rauskommen. Da ich jetzt erstmal meine verzeichisstrucktur ändern werde und ich daher die meisten internen links neu machen muss, da werd ich noch etwas dran arbeiten.
Ich meld ich spätestens wenns was neues gibt!


----------



## BenRo (5. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



ofhouse schrieb:


> *- Pfeil "=>" durch einen Button bzw. Ascii-Zeichen "→" ersetzen.*


Warum ASCII und nicht UTF-8? Als Charset ist ja auch UTF-8 angegeben.



> *- Zu viele H1 Tags im Quellcode*
> H1-Tags sind nur für Titel der Webseite (Also "Speeedy's Mods") gedacht, für Überschriften von einzelnen Bereichen sollte man H3 nehmen, solche Sachen sind aber eher wichtig für die interne Struktur.


Das ist nicht korrekt, siehe hier:
h1 – heading - HTML5
Edit: Beispiel aus dem Wiki:
HTML/Elements/h1, h2, h3, h4, h5, and h6 - W3C Wiki


----------



## ofhouse (5. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Irgendwie hab ich schon gewusst, als ich den Beitrag geschrieben hab, dass jemand ne Diskussion über die H1-Tags anfangen würde 

Guter Einwand, durch die einzelnen Sections wird die Überschriften-Hierarchie schließlich wieder aufgehoben, trotzdem sollte in einem Section-Bereich nicht mehr als ein H1-Tag auftauchen.
Deshalb bevorzuge ich noch die klassische absteigende Hierarchie über die komplette Seite, weil man dort deutlich schneller erkennen kann, auf welcher Ebene man gerade ist.
Das ist halt, wie beschrieben, die fehlende Kontrolle über den Quellcode bei Wysiwyg-Editoren, sie können ja nicht selbst erkennen, wie man seinen Inhalt aufbauen will, deswegen lass ich da die Finger von.

Und welcher Zeichensatz nun genommen wird, ist mir völlig egal, ich wollte damit nur sagen, dass es schönere Lösungen gibt. 


@Speeedymauss:
Auch wenn es dir schon vorgeschlagen wurde, könnte es sein, dass du glücklicher mit dem Projekt wirst, wenn du dein Design auf einem CMS umsetzt.
Das Problem, was du ja jetzt schon hast, ist die Redundanz. D.h. änderst du etwas an einer Stelle, musst du das auf x-Seiten auch machen.
Sowas fällt mit einem CMS weg, weil du mit deren Template-Engine die Seite in logische Teile (Dateien) zerlegen (z.B. Kopf-, Fuß-Bereich) kannst.
Die Engine setzt dann beim Seitenaufruf alle Teile wieder zusammen zu einer Seite, aber wenn du z.B. nur etwas am Footer ändern willst, musst du das nicht bei x Dateien machen, sondern nur an einer.

Von Joomla kann ich persönlich nur abraten, aber in Wordpress ist das Ganze auch sehr Einsteiger-freundlich gelöst.


----------



## TessaKavanagh (5. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

PHP/MySql/html/css ggf. JavaScript

dann brauchst du kein Joomla oder Wordpress mehr


----------



## BenRo (5. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Wenn die WYSIWYG-Editoren nicht mit h1-Tags zurecht kommen, sind es miese WYSIWYG-Editoren.

Das hier ist zum Thema h1 ganz lesenswert - ist zwar SEHR lang, aber auch sehr hilfreich, wie ich finde:
The Truth About Multiple H1 Tags in the HTML5 Era - Tuts+ Web Design Article

Man beachte, dass in dem Kontext Sectioning Elements nicht zwangsläufig <section>-Elemente sind (sondern eben auch z. B. <article> usw.)

Welcher Zeichensatz genommen wird, sollte einem nie egal sein.  Du hast aber völlig Recht, dass ein Pfeilchen schöner ist, als =>

Ein CMS zu verwenden ist ne sehr gute Idee. Alternativ könnte man auch
a) PHP lernen und Menüstruktur per require_once einbinden
b) Javascript lernen und eine tabbed-Lösung, z. B. sowas Tabs | jQuery UI umsetzen


----------



## DarkMo (5. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

mir stellt sich gerade die frage: was will der TE eigentlich?

folgende kleine metapher: er sagt, er möchte gerne lernen, wie man einen text-editor baut. und als antwort kommt "wozu? nimm doch einen fertigen texteditor"  cms mögen ja schön und gut sein, aber man lernt dabei nich wirklich, wie man selber eine webseite baut. meines erachtens sollte der anspruch eines lernwilligen sein, mal dahin zu kommen, das man selber ein cms bauen kann  sowas zu nutzen ist keine kunst. aber wie gesagt: wenn das dem TE langt, ist das ja ok. wenn ers aber selber lernen will, finde ich das nur hinderlich ^^


----------



## ofhouse (5. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

PHP und SQL sind in dem Fall aber wirklich Kanonen auf Spatzen. 
Sollte aber mal einer auf die Idee kommen wollen, sowas zu machen, kann ich ihm Rails sehr empfehlen, sehr viel besser für sowas geeignet als das olle PHP.

Zurück zum Thema:
So eine Webseite ist eine Standardkonstruktion, für die ich immer ein CMS nehmen würde, schon allein aus Sicherheitsgründen.
Vorteil beim CMS ist noch, dass man die Trennung von Inhalt und Design gleich hat und man braucht auch nicht wirklich viel PHP-Code dafür zu verstehen.

Content-Management mit Javascript würde an der Stelle keinen Sinn machen, weil das erfahrungsgemäß immer in einem ziemlichen Sumpf aus Code und Design ausartet.
Es sei denn man macht es Server-seitig mit node.js, aber da sind wir wieder beim Thema Kanonen von oben...


----------



## BenRo (5. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Stimmt Rails wäre auch ne Möglichkeit. Leider gibts immer noch viele Hoster, die kein Ruby anbieten.


----------



## TessaKavanagh (5. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

CMS aus Sicherheitsgründen? Joomla oder WordPress als sicher zu bezeichnen empfinde ich als mutig . Schwachstellen hat jedes Script und bei einem "fertigen" CMS wie Joomla oder WordPress kommt hinzu das der Aufbau und die internen variablen jedem bekannt sind. Die ganzen tollen Module zum nach installieren hauen da noch mehr Sicherheitslücken rein. 

Statistiken sagen glaub ich dazu mehr als 1000 Worte 

Vernünftig Programmiert ist jedes selbst erstelle Scipt jedenfalls sicherer als die o.g. CMS. Man kann sagen schon alleine aus Sicherheitsgründen ist so was eigentlich nicht zu empfehlen. Denn wenn ich mir Gedanken um die Erstellung machen muss, dann mache ich mir auch Gedanken um die Sicherheit. Wenn ich nur drei mal klicken muss, dann nehme ich halt die Standart Einstellungen (und die kennt leider jeder).
Ein Admin Accountname + Passwort ist z.B. nur solange hilfreich wie er nicht im Handbuch steht


----------



## BenRo (5. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

ofhouse hat schon Recht, bewährte CMS sollten sicherer sein, als das, was ein Anfänger beim ersten Versuch bastelt.
Nur weil du "obskure Software X" benutzt, ist sie nicht sicherer als verbreitete Systeme
Ich zitiere mal Wikipedia:
Security through obscurity


> Auf diese Weise führt security by obscurity zu einem Verlust von Sicherheit, da wegen security by obscurity die vermeintlichen Sicherheitsmethoden nicht auf ihre Wirksamkeit überprüft, die unwirksamen Methoden nicht frühzeitig als solche verworfen werden.


----------



## TessaKavanagh (6. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Jo aber grade WordPress ist das verbreitetste CMS das es gibt.

Durch diese Verbreitung ist es das beliebteste Angriffsziel für Hacker. Da es m.E. keine vollkommen sichere Software gibt finden entsprechende Profi's ziemlich schnell eine Sicherheitslücke in Version XY die es ihnen ermöglicht die Seite zu übernehmen. Diese Lücke im Kernsystem wird dann nach 2 Wochen von WordPress durch eine neue Version geschlossen. Der Großteil der Nutzer installiert dann die neue Version aber nicht oder zumindest nicht sofort.

Jetzt kommt ein dahergelaufenes ScriptKiddi das den Seiteninhaber nicht mag und will dem Seiteninhaber eins auswischen. Es guckt auf der Website und sieht das die Seite mit WordPress Version XY läuft. 

Eine Google suche später (Stichwort:"WordPress Version XY Hacken Anleitung") hat er dann eine vollkommen korrekte Anleitung die Ihm in 10 Schritten erklärt wie er die Seite knacken kann ohne irgend eine Ahnung davon haben zu müssen was er da eigentlich grade tut .

Bei der vollkommen unsicheren Custom Lösung hätte er das trotz riesiger Sicherheitslücken nicht selber hinbekommen (denn er hat ja keine Ahnung wie). Der Profihacker hingegen hat vermutlich gar kein Interesse sich mit der Custom Lösung zu befassen, da es die ja nur einmal gibt und die Seite keinen für Ihn relevanten Inhalt enthält. Eine Anleitung wird folglich nie existieren.

Das viele Plugins in WordPress die Sicherheit eh ziemlich reduzieren, sollte hier genau geschaut werden welches Plugin man wirklich benötigt.


----------



## BenRo (6. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Wordpress ist verbreitet -> Sicherheitslücken werden daher schneller entdeckt
Mittlerweile passieren Wordpress-Updates automatisch. Im Übrigen ist die Idiotie von Benutzern für mich kein Argument. Ich unterstelle Leuten in diesem Forum, das sich mit Programmierung und Webdesign befasst, erstmal, dass sie ihre Software aktuell halten.

Ein Scriptkiddie findet durch Googeln z. B. nach "website hacken" auch Seiten zu SQL Injection oder anderer allgemeiner Angriffstaktiken, die bei einem selbstgeschriebenem Skript funktionieren könnten.

Diese Grundsatzdiskussion entfernt sich jedoch vom ursprünglichen Thema. Und ich glaube eh nicht, dass wir uns gegenseitig überzeugen können.


----------



## TessaKavanagh (6. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Sehe ich auch so also zurück zum Thema


----------



## Speeedymauss (6. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

zu eurer CMS Diskussion möchte ich eigentlich nur kurz sagen, dass ich keines verwenden möchte. Ich möchte dieses Projekt auch nutzen um mit HTML und CSS beizubringen daher werde ich die Seite komplett selber machen und vorerst auf ein CMS verzichten. Außerdem ist dieses Wissen über die beiden "Sprachen" nicht schlecht, da diese beiden auch bei bestimmten Ausbildungsstellen gefragt werden wo ich evt. mal hin gehen möchte.

Ob ich im späteren Verlauf der Seite auf ein CMS umsteige halte ich mir offen. Ich habe jetzt schon eins von drei Büchern durch und werde mir die anderen trotzdem angucken.

Soweit dazu.
Abschließend zum Stand der Dinge: Ich habe es gestern schonmal grob geschafft die Verzeichnisstrucktur zu überarbeiten und habe die links angepasst. Außerdem habe ich die <hx> Tags alle angepasst, dass ich nicht ,mehr so viele h1 Tags habe.

Mal gucken was ich noch schaffe


----------



## ofhouse (6. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Wenn du bei HTML & CSS bleiben möchtest, ist das völlig in Ordnung, aber wenn du die Lernerei auf dich nimmst, um eine Ausbildung in der Richtung anzustreben, wirst du da zumindest ohne einfache Programmier-Kenntnisse wenig Erfolg haben.
Aber da muss jeder selbst seinen Weg gehen, ich hab z.B. viel ausprobiert und dabei viele Projekte wieder fallen gelassen, wenn mich die Lust verlassen hat und neue angefangen.
Dadurch hab ich zwar ein recht großes Wissen in vielen Dingen, allerdings hab ich bei Planung & Management noch so meine Schwächen, eben weil ich selten etwas zum Ende gebracht hab 

Deshalb hab ich mich dann auch dazu entschlossen zu studieren, weil ich dadurch jetzt die Möglichkeit hab, Sachen, die ich aus Desinteresse übersprungen hab, nachzuholen.
Im Prinzip versuche ich immer, meinen Skilltree schnellstmöglich zu leveln, aber ich kann auch jeden verstehen, der sagt, ich möchte da Ebene für Ebene vorgehen. 

Aber genug der Lebensweisheiten, jetzt noch was Nützliches:

Wenn du bei künftigen Webseiten mal neue Herausforderungen suchst, macht es Sinn, sich mit einem Vektorgrafik-Programm (z.B. Adobe Illustrator oder die Open-Source Lösung Inkscape) vertraut zu machen.
Damit kannst du erstmal ganz in Ruhe den Aufbau einer Seite bis ins Detail gestalten ohne auf irgendwelche HTML-Konventionen zu achten zu müssen.
Wenn du mit dem Entwurf zufrieden bist, kommt dann erst die Umsetzung in HTML & CSS.
Und da zeigt sich wirklich, ob du HTML und CSS verstanden hast, weil sich mit Vektorgrafik-Programmen zwar schöne Entwürfe zeichnen lassen, allerdings wirst du ziemlich schnell feststellen, dass die Umsetzung, damit es genau so aussieht wie im Entwurf, dich auch mal an deine Grenzen bringen kann


----------



## Carlss (7. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Codest du selber? Du kannst dir ja auch ein CMS zulegen.


----------



## Speeedymauss (7. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



Carlss schrieb:


> Codest du selber? Du kannst dir ja auch ein CMS zulegen.


 
 da sag ich jetzt nix mehr zu...


----------



## Carlss (7. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Huch! Habe was überlesen es war schön spät. Sorry.


----------



## Speeedymauss (14. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

So ich bin wieder daheim, dass heißt es geht weiter.
Ich habe in zwischen auch das Grundlagenbuch zu HTML und CSS durch, ich hab jetzt noch eins Speziell für Webdesign vor mir liegen, danach noch eins für HTML5 und Javascript 
Ich werd also in der nächsten Zeit wieder dran arbeiten. Ich werd auch nochmal wegen dem Design gucken, iwie hätt ich vlt auch lieber was moderneres, bin leider zu Ideenlos...


----------



## rtf (15. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Ich möchte dir bei Ideenlosigkeit diese Seite empfehlen. Codrops (hoffe du bist des englischen mächtig ). Dort gibt es eine Menge guter Tutorials, wie Komponenten einer Seite erstellt werden können. Du kannst die Scripte benutzen, solltest aber die Lizenz beachten. Sollte in deinem Fall aber nichts ausmachen.
Fürs lernen würde ich die gezeigten Sachen einfach versuchen nachzubauen. 

Naja wenn es um komplette Templates geht, würde ich dir empfehlen einfach bei den CMS Systemen Wordpress, Joomla etc. sich einige Templates anzuschauen, um auf eigene Ideen zu kommen. Somit sollte die Ideenblockade eigentlich verschwinden

Von elmastudio gibt es auch eine schöne Anleitung zur Ideensammlung.

Edith sagt: Wenn du jetzt kein großartiger Grafiker bist, holft dir die Creative Commons Lizenz weiter. Veröffentlicht einer seine Texturen, Bilder als CC kannst du sie meist im privaten und kommerzielen Bereich benutzen. Viele wollen einfach nur ein Link auf sie zurück. Sone Texturen findest du bei flickr.com, deviantart.com, usw.... kannst dich ja mal umschauen.


----------



## ofhouse (15. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



Speeedymauss schrieb:


> Ich werd auch nochmal wegen dem Design gucken, iwie hätt ich vlt auch lieber was moderneres, bin leider zu Ideenlos...



Die gute Sache ist: Kreativität lässt sich trainieren. Die Schlechte: Du brauchst viel Geduld und es helfen dir Bücher nur bedingt.
Das Problem ist, dass Design an sich nochmal was völlig anderes ist, als bloß CSS & HTML zu können.
Beim Design geht es wirklich darum, dein Auge für Details aller Art zu trainieren. Denn im Web ist es z.B. sehr wichtig, auf den Pixel genau zu arbeiten.

Wenn du sagst, ich möchte nur 1 - 2 Webseiten im Jahr machen, dann reicht es, sich aus Ideen & Skripten anderer zu bedienen und das irgenwie in Form und Reihe zu bekommen.

Ich habe das vllt. ein Jahr ausgehalten und hab mir dann gedacht (Wie der typische Programmierer eben denkt^^) das Bisschen, was die Designer können, kann ich schon lange.
Also hab ich nach guten Designern im Internet (Dribbble & Behance sind da gute Quellen) gesucht und angefangen, deren Arbeit zu studieren (mind. 0.5 - 1 Stunde pro Tag).
Das ist nun schon bestimmt 6 Jahre her und 2D-Design hat sich mittlerweile zu einem Hobby neben dem Programmieren weiterentwickelt und jetzt bin ich langsam an dem Punkt angekommen, wo ich eigene Projekte umsetzte.

Da es manchmal echt hart ist und auch mal gerne 1 - 2 Wochen völlig unkreativer Phasen bei mir folgen, wird Design für mich immer nur ein Hobby bleiben.
Aber es macht einen gewaltigen Unterschied, sich nur Web-Designer (z.B. weil man HTML & CSS kann  ) zu nennen oder Web-Design zu können.


----------



## rtf (15. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



> Also hab ich nach guten Designern im Internet (Dribbble & Behance sind da gute Quellen) gesucht und angefangen, deren Arbeit zu studieren (mind. 0.5 - 1 Stunde pro Tag).


Darf ich mal fragen wie du das gemacht hast, ne Stunde lang auf deren bild geschaut oder was 
wie bist du da vorgegangen, ich mein du musst ja auch wissen wie die ihre Idee umgesetzt haben, das Endprodukt alleine reicht doch nicht?


----------



## ofhouse (15. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Nein, natürlich starrt man nicht ne Stunde auf ein Bild 

Mein Ansatz ist der, sich eher kontinuierlich die Arbeiten mehrerer Designer anzuschauen, deren Werke einem persönlich gefallen.
Jeder Designer hat ja seine eigene Designsprache und die kannst du auch erst erkennen, wenn du dir mehrere Werke angesehen hast.

Die Entwicklung der eigenen Designsprache erfolgt ja nicht Sprunghaft, sondern sie entwickelt sich mit jedem Projekt ein bisschen weiter.
Du schaust dir ja bei deinen eigenen Projekt an, was dir gefallen hat und was nicht und nimmst es ins nächste Projekt mit und so ist es bei Designern auch.
Diese Entwicklung kannst du dann beobachten. Ich mache das mittlerweile nicht mehr bei allen so genau, sondern nur wenn ich neue Techniken lernen will.

Das ist halt auch einzige Weg in dem Bereich besser zu werden, in dem man möglichst vieles einfach mal ausprobiert und aus seinen eigenen Fehlern lernt.

Blättere zum Beispiel mal die Werke des Designers Ryan Putnam von hinten nach vorn durch:
Er hat sich innerhalb von 4 Jahren sehr konstant weiterentwickelt und seine Zeichentechnik immer weiter verbessert.

Eine andere Möglichkeit ist auch, die Designer direkt anzuschreiben, oder mit ihnen persönlich in Kontakt zu kommen.
Das ist zwar der beste Weg, allerdings machte das in meinen Augen als Hobby-Designer nicht wirklich Sinn, die Profis mit meinen Anfängerfragen zu quälen


----------



## hann96 (15. August 2014)

Ich gebe dir auch noch einen Tipp, suche dir einfach ein paar Webseiten raus und versuche die nachzubauen. Dadurch habe ich (es ist schon etwas länger her) in ca. 2 Monaten einen gewaltigen "Wissens-sprung" gemacht. Wenn du nicht weißt, wie man manches umsetzt, benutze die Entwickler Konsole. Durch diese Entwickler Konsole habe ich mir den css Code angeguckt und dadurch mir alles, sozusagen selbst beigebracht.

Was deine Seite betrifft, sie ist insgesamt (sorry  ) schrecklich, wie schon genannt, von den Farben her nicht ansehnlich, kein html/css, nicht responsive (was ich sehr wertschätze), kein php. 

Es gibt insgesamt sehr viel Entwicklungspotenzial.  

Gruß

hannover96xdneu

EDIT///
Aber jeder fängt ja mal klein an


----------



## Speeedymauss (15. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



hannover96xdneu schrieb:


> Ich gebe dir auch noch einen Tipp, suche dir einfach ein paar Webseiten raus und versuche die nachzubauen. Dadurch habe ich (es ist schon etwas länger her) in ca. 2 Monaten einen gewaltigen "Wissens-sprung" gemacht. Wenn du nicht weißt, wie man manches umsetzt, benutze die Entwickler Konsole. Durch diese Entwickler Konsole habe ich mir den css Code angeguckt und dadurch mir alles, sozusagen selbst beigebracht.
> 
> Was deine Seite betrifft, sie ist insgesamt (sorry  ) schrecklich, wie schon genannt, von den Farben her nicht ansehnlich, kein html/css, nicht responsive (was ich sehr wertschätze), kein php.
> 
> ...


 
Ja sowas in dieser Richtung habe ich vor, nur kann ich mich noch nicht wirklich auf ein Gesamtbild einigen

Ja ich weiß, dass die Seite noch recht bescheiden ist, momentan habe ich aber leider noch nicht das wissen etwas anderes hinzubiegen, wie meinst du das mit "kein html/css"?, php werde ich so schnell nicht anfassen.

---

Falls echt einer von euch gerade viel langeweile hat und Lust hat mir auch etwas genauer zu helfen, bin ich immer gern für erfahrene Hilfe offen


----------



## rtf (15. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

PHP wird MMn nicht zwangsweise für eine gute Seite benötigt nur für eine Umfangreiche.

@speeeedy wenn du fragen hast, frag doch einfach hier. So hast du eine gebalte Ladung an Wissen


----------



## hann96 (15. August 2014)

rtf schrieb:


> PHP wird MMn nicht zwangsweise für eine gute Seite benötigt nur für eine Umfangreiche.



Falsch. Auch wenn es deine Meinung ist, stimmt das nicht . Willst du etwa deine Homepage mit ca. 20 unter Seiten jedesmal, bei einem neu hinzugekommenen Unterpunkt in der Navigation, ändern? 

Stichwort: include 

Bsp:

```
...
```

Gruß 

Hannover96xdneu


Edit ///
Gute Seiten sind zum html / css lernen:

1. http://blog.kulturbanause.de
2. http://www.mediaevent.de
3. Self html wie schon erwähnt
4. http://www.css4you.de (eigentlich nur css) 
5. http://www.html-seminar.de (die Video Reihe ist sehr (!) sehr sehr sehr gut! 

Und http://www.html-einfach.de

Und auch wenn ich ein Magix "Fan" bin, schmeiß diese Magix Homepage schei*e weg. Die zeit die man in dieses Programm investiert, kann man auch in html css investieren...


----------



## DarkMo (15. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

da hier mal gleich die frage, da ich es in letzter zeit immer wieder lese: responsives design - wad? unter responsive (naiv übersetzt) stell ich mir ein antwortendes design vor. worauf antwortet das denn? ^^

btw: FF entwicklerkonsole um css code anzuschauen? oO geht doch auch ohne >< seiten quelltext ansehen (das geht seit den 90ern? ^^), den css verweis raussuchen und die url dementsprechend bauen - voila, la css file ^^


----------



## rtf (15. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



> Falsch. Auch wenn es deine Meinung ist, stimmt das nicht .  Willst du etwa deine Homepage mit ca. 20 unter Seiten jedesmal, bei  einem neu hinzugekommenen Unterpunkt in der Navigation, ändern?


Schrieb ja extra nicht zwangsweise nur wenn es *umfangreich* wird. Für 3 - 5 Seiten würd ich mir nicht extra ein PHP Skript schreiben, wenns nicht nötig ist.(Persönliche Meinung )


edit: ich gib hier jetzt mal schnell Parallax an, welches auch glaub ich ohne PHP eingesetzt werden kann um schöne Pages zu erstellen.


----------



## Speeedymauss (15. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



rtf schrieb:


> edit: ich gib hier jetzt mal schnell Parallax an, welches auch glaub ich ohne PHP eingesetzt werden kann um schöne Pages zu erstellen.


 
Wat fürn Ding?

BTW:
Ich arbeite gerade an nem anderen Design, ich scheiter aber gerade an der bildbeschriftung, die will einfach nicht da hin wo sie soll.

Diese Silber hinterlegten beschreibungen sollen an den unteren rand der bilder sein und halt im bild. Aber die dinger schweben mittendrin und übereinander, die für die unteren bilder bleiben nicht unten.

Achso und vlt könnt ihr ja schonmal was zu dem Design sagen, da fehlt zwar noch viel aber man müsste ne richtung erkennen können.

So der Download: 


			Dieser Inhalt steht nur eingeloggten Mitgliedern zur Verfügung.


----------



## rtf (15. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Parallax ist ein Scrolling Effekt für Webseiten. Meist bewegt sich beim Mausbewegen und Keytasten deine Seite.
Hier ist mal ein schönes Beispiel, aber für dich es es glaub ich eher uninteressant 


Bei deinem Casemods hast du scheinbar laut Firefox ein </div> zuviel


> <div class="tabellencontainer">
> <div class="tabellenzeile casemodstitel">
> <div class="tabellenzelle">
> <h3>Casemods</h3>
> ...


Dein Fehler sollte in deiner Klasse .Bildbeschriftung liegen, da du hier Bottom 0px; hinzugefügt hast. Mit position:absolute; setzt du das Element aus dem Dokumentenfluss und mit bottom:0px; setzt du das Element am Ende deines Viewports. Dein Viewport ist das was du als erstes siehst wenn du die Seite aufrufst. Hast du z.B. ein Zoom drin, mit firefox geht das mit strg + Mausrad, wirst du erkennen das er deine Beschriftung immer am Ende deines Browserfenster setzt wenn du aktualisierst. Hoffe du verstehst was ich meine 

Ansonsten hilft dir das zum Viewport vielleicht weiter.


----------



## Speeedymauss (15. August 2014)

Und wie mache ich das jetzt, dass es klappt?


----------



## rtf (15. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

position:absolute; + bottom:0; aus deiner Klasse herausnehmen und margin-top:-50px; hinzufügen
50 dabei mit deinem Wert austauschen den du benötigst. 

So sieht mein schneller Code dafür aus.
	
	



```
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Speeedy's Mods Homepage</title>
        <style type="text/css">
    img{
        
        }
    #text{
    position:relative;
    margin-top:-50px;
    width:100%;
    background-color:rgb(255,255,255);
    }

</style>
    </head>

    <body>
    <div id="wrapper">
        <img src="pictures/720int28fertigthumbnail.jpg" alt="" />
        <div id="text">some text</div>
    </div>
        
    </body>
</html>
```


----------



## hann96 (16. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Züruck zu deinem Bildern:
Kleiner Tipp, positioniere deine Bilder mit margin (Google einfach mal) und setze für das erste Bild ein float: left; ein damit alle anderen Bilder daneben angeordnet werden. Das letzte Bild der Galerie musst du dann aber clearen. Weil sonst alle anderen Elemente im html Code ebenfalls gefloatet werden.

Das ganze dürfte dann so aussehen: (Frage: hast du schon in deinem Buch was von id's und Klassen gelesen? Damit kann man nämlich Div Elemente ansprechen. Unterschied ist, dass id's nur EINMAL in einem html Dokument vorkommen dürfen und Klassen so oft wie möglich. Vorteil von Klassen ist vorallem, dass man z. B. Jedem <b> in der Css Datei Werte zuweisen kann und sie dann einmal in der css Datei Ändert und dies dann bei allen Elementen auf der Website mit <b> passiert.)*

So sieht dann ungefähr deine html Datei aus: (ich lasse bei den meisten Tags die größer kleinen Zeichen weg, weil ich vom Handy schreibe und das sonst zu umständlich ist) 


```
.... 
<body>
 
<div id="picturegalery">
    <img src="... " alt"="...">
    <img src="... " alt"="...">
    <img src="... " alt"="...">
   ... 
</div>

...
```

Im CSS Code schreibst du dann:


```
#picturegalery:first-child { float: left; }  . 

#picturegalery:last-child { clear: both; } 

/* designen kann man das auch noch */

#picturegalery img { boder-radius: 4px solid #ccc; padding: 6px; } /* rundet das Bild ein bisschen ab und setzt das Bild ein bisschen vom Rand weg */

#picturegalery img:hover { opacity: 0.6;} /* sorgt für eine Art Durchsichtigkeit bei einem mouseover */
```

Keine Garantie, dass es funktioniert. Ich habe den css Code  mit dem Handy geschrieben und keine Möglichkeit es mir im Browser anzuschauen. Bitte habt Verständnis.


----------



## hann96 (16. August 2014)

DarkMo schrieb:


> da hier mal gleich die frage, da ich es in letzter zeit immer wieder lese: responsives design - wad? unter responsive (naiv übersetzt) stell ich mir ein antwortendes design vor. worauf antwortet das denn? ^^
> 
> btw: FF entwicklerkonsole um css code anzuschauen? oO geht doch auch ohne >< seiten quelltext ansehen (das geht seit den 90ern? ^^), den css verweis raussuchen und die url dementsprechend bauen - voila, la css file ^^



Eine Responsive website ist eine flexible Seite, die sich automatisch an alle viewports anpasst. Bsp man verkleinert das Browser Fenster, bei rührt Pixel basierten Seite wurden nun scrollbalken erscheinen. Bei Prozenten nicht.


----------



## DarkMo (16. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

asö, mehr is das nich? >< k, thx für die antwort.


----------



## BenRo (16. August 2014)

Naja, es kann auch bedeuten, dass bestimmte Elemente beim Verkleiner verschwinden (z. B. große nicht unbedingt notwendige Bilder) oder sich in etwas anderes verändern, z. B das Menü in winen Button mit der Aufschrift Menü usw.


----------



## hann96 (16. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



BenRo schrieb:


> Naja, es kann auch bedeuten, dass bestimmte Elemente beim Verkleiner verschwinden (z. B. große nicht unbedingt notwendige Bilder) oder sich in etwas anderes verändern, z. B das Menü in winen Button mit der Aufschrift Menü usw.


Das stimmt auch.  habs nur vergessen zu schreiben


----------



## ofhouse (16. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Kritik zur Version 2:

Es ist ein wichtiger Punkt, an dem du gerade bist, wenn du eine weitere Version der Seite machst, die dir besser gefällt.
Pass aber auf, dass du nicht 20 Mal neu anfängst, weil irgendwann solltest du schon zu dem Punkt kommen, wo du sie online stellen kannst.

Deswegen wäre es aus meiner Sicht besser, wenn du Entwicklungen am Design in einem Grafik-Programm auslagerst.
Weil wenn du dich noch 20 Mal umentscheidest, musst du auch 20 Mal alles neu coden.

Zum Design an sich kann ich dir sagen, dass du bei Fullscreen-Seiten besser fährst, wenn du wichtige Elemente wie Menü & Logo zentrierst.
Für die Projektvorschau würde sich zudem eine zentrierte Slideshow besser machen (Sowas in der Art wie hier).
Weil durch ein mehrspaltiges Design mit Bildern ist es für den Leser sonst sehr schwer den Fokus zu bekommen.

Versuch am besten mal selbst mit den Augen deine Webseite von oben nach unten bewusst herunterzufahren, dann siehst du, wie ein Leser deine Webseite wahrnimmt.
Denn dein Fokus kann immer nur einen kleinen Teil der Webseite betrachten und der Fokus ist niemals linear, sondern springt immer von einem markanten Punkt zum nächsten.
Deshalb ist es wichtig, den Fokus des Lesers mit besonderen Elementen wie z.B. Slideshows auf der Seite kontrollieren.
Wenn du dem Fokus aber durch mehrere gleich aussehende Elemente nebeneinander (gleiche Priorität) eine Wahlmöglichkeit gibst, wird es für den Leser anstrengend.


Hmm, irgendwie hab ich das Gefühl, das ist etwas viel Technik für den Anfang... Am besten du vergisst alle guten Ratschläge wieder und machst einfach dein eigenes Ding, so wie du denkst.
Ich hab mir in deiner Situation schließlich auch nichts aus Ratschlägen gemacht, deswegen komisch, dass ich jetzt selbst damit anfange 
Wichtig ist letzendlich nur, dass du selbst mit deiner Arbeit zufrieden bist, weil irgendwer findet sich immer, der was zu meckern hat


----------



## Speeedymauss (16. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

erstmal danke für die ganzen tipps, ich werd mich die tage mal mit allem genau beschäftigen

@ofhouse

wie mach ich das mit der slideshow? wie binde ich die ein?


----------



## ofhouse (16. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Du brauchst zunächst mal die Bootstrap-Dateien (bootstrap.min.css & bootstrap.min.js), sowie das Javascript-Framework jQuery und bindest sie im HTML-Header ein.

Und dann kannst du den Beispielcode in dein Projekt übernehmen und dann solltest du dort genau so eine Slideshow haben.
Ich hab das mal eben gemacht (Die neuen Dateien sind im Ordner *assets*), weil sowas raubt einem echt Zeit, wenn es nicht klappt: 


			Dieser Inhalt steht nur eingeloggten Mitgliedern zur Verfügung.
        



Aber Vorsicht, Bootstrap ist ein komplettes Framework (d.h. es bringt erstmal sein eigenes Layout mit), so dass deine Seite hier und da etwas verzerrt aussehen könnte, als du es ursprünglich hattest.
Es hat also im Prinzip viel mehr zu bieten, als das was du aktuell brauchst. Man kann das zwar auch teilen, aber das wäre noch komplizierter zu erklären 

Es gibt auch viele Leute, die dadurch in Bootstrap eine Art Heilsbringer sehen, weil du damit relativ einfach saubere Webseiten hinbekommst, aber ich finde, dass dadurch die Persönlichkeit der Seite sehr stark leidet.
Du kannst dir aber mal die Beispiele ansehen und dir selbst ein Bild davon machen, was mit Bootstrap möglich ist: Getting started · Bootstrap
Ist auf jeden Fall auch mal einen Blick in den Quellcode wert, weil Bootstrap einen sehr guten Programmierstil für HTML hat, von dem man sich was abschauen kann.


----------



## DarkMo (16. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

seh ich das gerade richtig? er versucht sich gerade überhaupt erstmal in html und css einzufuchsen und du kommst hier mit irgendwelchen frameworks und krams? wie war das mit kanonen auf spatzen? 

ich glaube sinnvoller wären ein paar kleinere schritte. scheiss doch druff, wie das alles erstmal aussieht. mit der ersten seite will man ja keine millionen scheffeln -.- experimentier doch einfach mal nen bissl rum. diese ganze css3 geschichte find ich so cool ^^ runde ecken, überblendungen (transitions oder so) und all son krams. alles sehr sehr easy umzusetzen. schau dir zum bsp auch an, wie man mit frames eine seite gestalten kann, wie es alternativ mit tabelen geht und wie es mit div's funktioniert. lerne die unterschiede kennen, finde heraus, was dir eher liegt. welche vorteile haben die unterschiedlichen herangehensweisen, welche nachteile bringen sie mit? ich hab früher frames immer gemocht, da man eben das menü nicht 20 mal machen musste. aber die sind halt aus der mode  table-layouts sind uch belächelt, obwohl ich die immer sehr einfach zu realisieren finde. aber es stimmt schon, bei komplizierten verschachtelten designs wird man mit den tabellen kirre.

also wie gesagt: pfeiff erstmal komplett auf diesen ganzen kram da. mach pures html und designe das mit css. finde raus, wie du mit einer css datei die komplette seite mit wenigen änderungen umgestalten kannst. was musst du beim html basteln beachten, damit das auch funzt. mach einfach mal ein paar fehler, ein paar gute erfahrungen und lerne schritt für schritt. gleich mit jQuery und sonem ruß anzufangen halte ich persönlich für völlig überzogen. anstelle davon würd ich mich ganz stupide selber mit javascript beschäftigen (jQuery is ja auch nix anderes, nur das dir eben "könner" fertige funktionen in die hand geben. das is aber nix, was man prinzipiell nich auch hinbekommen kann). ein beliebtes bsp wäre zum bsp das ändern des inhalts einer selectbox durch den ausgewählten wert einer anderen. oder einfacher gesagt: eine selectbox (so ein dropdown teil) und ein input-field, dass die gemachte auswahl einfach nochmal als value ausgibt. macht keinen sinn, aber das grundprinzip lässt sich lustig portieren.

lerne, wie man auf elemente eines html dokuments zugreift. welche möglichkeiten gibt es? welche findest du am besten usw usf. mit einer kombination dieser 3 dinge lässt sich schon unkompliziert viel erreichen. und mit js betritts du auch wirklich erstmalig den bereich des programmierens (html hat nix mit proggen zu tun  ).


----------



## hann96 (17. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

@DarkMo Nein! Bitte keine html frames. Weg damit. Das geht mit php tausendmal einfacher. Html frames sind veraltet. Geh mal zu einem Frontend developer. Der wird dir den Kopf dafür ausreißen. ^^

Auch wenn er sich erstmal einen Überblick verschaffen soll und du selbst ja sagst, dass sie außer Mode sind, bitte rede ihm keine html frames ein. 

Grüße 

Hannover96xdneu


----------



## DarkMo (17. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

man kann nur beurteilen, was man auch kennt. also: nutzen! und bei php sind wir hier noch lange nicht, also ist das auch keine alternative  und ohne php ist das eigentlich ne tolle sache *find* is mir auch relativ bumms, was irgendwelche designer sagen  ich nutz sie dennoch nich mehr, da ich - wie du sagtest - sowas eher mittels php löse. aber nuja, wie gesagt. ist hier keine alternative und "kenne deinen feind"


----------



## hann96 (17. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



DarkMo schrieb:


> man kann nur beurteilen, was man auch kennt. also: nutzen! und bei php sind wir hier noch lange nicht, also ist das auch keine alternative  und ohne php ist das eigentlich ne tolle sache *find* is mir auch relativ bumms, was irgendwelche designer sagen  ich nutz sie dennoch nich mehr, da ich - wie du sagtest - sowas eher mittels php löse. aber nuja, wie gesagt. ist hier keine alternative und "kenne deinen feind"


Meinetwegen kann der thread ersteller ja frames ausprobieren, aber in der Zeit könnte er sich auch auch mit html / css besser bekannt machen.  

Nochmal zu php. Ich rede von einfachen php. Die include Funktion ist das einfachste im php. Das ist eine Zeile und man versteht sofort was diese Zeile bewirkt. 

Gruß


----------



## DarkMo (17. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

dennoch braucht man gleich nen webserver programm aufm rechner - selbst für die einfachste art von php  bisher langt ihm notfalls der editor und ein browser (den er eh hat).


----------



## hann96 (17. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



DarkMo schrieb:


> dennoch braucht man gleich nen webserver programm aufm rechner - selbst für die einfachste art von php  bisher langt ihm notfalls der editor und ein browser (den er eh hat).


 
Das ist doch kein Problem, dann installiert er halt XAMPP. Man sollte sowieso, auch wenn man ohne php, sondern nur mit HTML / CSS arbeitet, einen webserver (XAMPP) benutzen, denn sonst können sich fehler einschleichen.


----------



## DarkMo (17. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

naja, das fand ich damals aber nicht gerade als trivial. zumal man sich uU damit riesen sicherheitslöcher in den rechner stanzt, wenn man was falsch macht. zumindest hab ich das gelesen...


----------



## Rho (17. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Mal wieder Expertendiskussion auf höchstem Niveau. Da kann man nur hoffen, das der TE Rat von Unrat unterscheiden kann...


----------



## hann96 (17. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



DarkMo schrieb:


> naja, das fand ich damals aber nicht gerade als trivial. zumal man sich uU damit riesen sicherheitslöcher in den rechner stanzt, wenn man was falsch macht. zumindest hab ich das gelesen...


 
Natürlich kann XAMPP unsicher sein, aber nur wenn der Anwender nicht weiß wie man dieses Programm zu benutzten hat, also irgendetwas anklickt, wo er aber nicht die Folgen kennt. Es ist nämlich unter anderem möglich, dass andere Leute übers Netzwerk auf dein localhost zugreifen können. Außerdem sollte man PhpMyAdmin / MySQL Datenbanken mit einem Passwort schützen.

----------------------------

Was mir gerade noch eingefallen ist:
Nochmal zu den Frames, wenn der Thread Ersteller von Frames überzeugt sein würden, dann müsste er jedoch mit einer alten HTML Version arbeiten, denn frames wurden aus der neuesten Version (HTML5) wieder entfernt, weil sie eben nicht mehr zeitgemäß sind.

Aber was bringt dieses Gelaber Eigentlichkeit, es liegt ja an einem selbst mit was man arbeiten will! 

Gruß

hannover96xdneu


EDIT///


Rho schrieb:


> Mal wieder Expertendiskussion auf höchstem Niveau. Da kann man nur hoffen, das der TE Rat von Unrat unterscheiden kann...


 
Bitte definieren


----------



## BenRo (17. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Frames: Nein! Wenn sich hier jemand zu einem neuen Computer beraten lässt, wird ihm immer aktuelle Hardware empfohlen und nicht etwa der Sockel 775. Genauso sollte man hier Speeedymaus den aktuellen HTML-Standard HTML5 empfehlen und da gibt es keine Frames. Es gibt iframes, aber davon sprachst du nicht (und sie wären in diesem Fall auch mMn Quatsch).

Tabellen: Nein! Das wichtigste, wenn man HTML lernt, ist zu verstehen, dass man ein Dokument semantisch beschreibt. Die korrekte Semantik zu achten hilft Suchmaschinen, Menschen mit körperlichen Benachteiligungen die z. B. einen Screenreader benutzen, mobilen Geräten, und letztlich dem HTML-Autor selbst, weil der Code leichter les- und wartbar wird. In den meisten Fällen ist der Code sogar kleiner (läd also schneller), wenn die korrekten Tags (hier: keine Tabelle) zum Einsatz kommen. Zu guter Letzt ist es deutlich einfacher das Design später mal zu ändern, wenn es keine Tabellen verwendet. Tabellen sollten nur für tabellarischen Inhalt verwendet werden, nicht für Design-das-die-Form-einer-Tabelle hat. Wer irgendwas in HTML aus Designgründen einsetzt (z. B. "Ich will den Text ganz groß haben, ich benutzte <h1>") hat HTML nicht verstanden.

Zu der ganzen Dynamisierungsdiskussion: Ja, ich habe selbst bereits in diesem Thread empfohlen die Seitenstruktur entweder mit einem bewährten System, oder mit einer serverseitigen Sprache (PHP, Ruby, Python) oder per JavaScript (hui, Tabs die sich sehr schnell wechseln lassen) umzusetzen. Das sollte allerdings erstmal als Plan für die Zukunft angedacht werden, wichtiger ist, dass erstmal die Basics stehen, sprich HTML und HTTP, sowie CSS fürs Design.

@Rho: Deine Antwort ist auch nicht sonderlich hilfreich, da du nicht erklärst was Unfug ist und was nicht und somit dem TE nicht weiterhilfst.


----------



## hann96 (17. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



BenRo schrieb:


> Frames: Nein! Wenn sich hier jemand zu einem neuen Computer beraten lässt, wird ihm immer aktuelle Hardware empfohlen und nicht etwa der Sockel 775. Genauso sollte man hier Speeedymaus den aktuellen HTML-Standard HTML5 empfehlen und da gibt es keine Frames. Es gibt iframes, aber davon sprachst du nicht (und sie wären in diesem Fall auch mMn Quatsch).
> 
> Tabellen: Nein! Das wichtigste, wenn man HTML lernt, ist zu verstehen, dass man ein Dokument semantisch beschreibt. Die korrekte Semantik zu achten hilft Suchmaschinen, Menschen mit körperlichen Benachteiligungen die z. B. einen Screenreader benutzen, mobilen Geräten, und letztlich dem HTML-Autor selbst, weil der Code leichter les- und wartbar wird. In den meisten Fällen ist der Code sogar kleiner (läd also schneller), wenn die korrekten Tags (hier: keine Tabelle) zum Einsatz kommen. Zu guter Letzt ist es deutlich einfacher das Design später mal zu ändern, wenn es keine Tabellen verwendet. Tabellen sollten nur für tabellarischen Inhalt verwendet werden, nicht für Design-das-die-Form-einer-Tabelle hat. Wer irgendwas in HTML aus Designgründen einsetzt (z. B. "Ich will den Text ganz groß haben, ich benutzte <h1>") hat HTML nicht verstanden.
> 
> ...



Du sprichst mir aus der Seele!


----------



## Rho (17. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



BenRo schrieb:


> Deine Antwort ist auch nicht sonderlich hilfreich, da du nicht erklärst was Unfug ist und was nicht und somit dem TE nicht weiterhilfst.



War auch nicht mein Ziel. Aber Glückwunsch dazu, das Offensichtliche erkannt zu haben.


----------



## BenRo (17. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Und dein Ziel war...? Deinen Beitragscounter zu erhöhen? Allen anderen zu zeigen, dass du der Oberchecker bist und der Rest der Foristen nur Idioten die keine Ahnung haben?


----------



## Rho (17. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Falsch, falsch und teilweise richtig. Bei weniger Offensichtlichem tust du dir anscheinend schon schwerer.


----------



## DarkMo (17. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



BenRo schrieb:


> Frames: Nein! Wenn sich hier jemand zu einem neuen Computer beraten lässt, wird ihm immer aktuelle Hardware empfohlen und nicht etwa der Sockel 775.


 leider die falsche analogie 

es geht (mir) dabei nicht darum, ihm das zur nutzung schmackhaft zu machen, er soll es einfach mal selber probiert haben. es kennen. meinetwegen auch einfach mal drüber gelesen haben. er will etwas lernen, nicht etwas "kaufen" (deiner metapher nach). um bei besagter metapher zu bleiben, will er quasi was über rechner lernen, nicht unbedingt jetzt einen nutzen. das kommt freilich irgendwann, aber du weist, worauf ich hinauswill.

stells dir jetzt mit ner ausbildung oder dem studium vor. da fängst du auch mit dem urschleim an. touringmaschine, microcontroler, uralt-cpu's, da deren architektur noch einigermaßen verständlich ist und für die veranschaulichung eines prinzips ausreicht. ich habe NIE davon geredet, dass er irgendwas davon im "produktiveinsatz" nutzen soll. aber er soll doch bitte wenigstens nen bissl mehr lernen wie "state of the art". wieso sind wir heute, wo wir sind? wieso ist geschichtsschreibung so wichtig - nur als bsp.

edit: aha, über die tabellen ziehste auch her - dabei hab ich die nachteile selber schon angedeuted. aber auch hier das gleiche prinzip: etwas lesen und verstehen fällt weit schwieriger als es selber zu praktizieren und zu verstehen. daher war einfach mein anliegen, das zu verdeutlichen: probieren geht über studieren!


----------



## ofhouse (17. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Hmm, wir drehen uns wieder im Kreis, weil wir uns lieber mit uns selbst beschäftigen, statt mit dem Problemen des TE (Ich schließe mich da bewusst selbst nicht aus^^)...

Ich bin mir sicher, wir könnten hier binnen kürzester Zeit 20 Leitfäden zusammenstellen, wie man am Besten mit Web-Programmierung beginnt.
Allein daran sieht man schon, dass es nicht den Weg gibt. Jeder muss bei dem Thema seine eigenen Erfahrungen machen, da helfen gut gemeinte Ratschläge wenig.

Der Knackpunkt an der Diskussion ist, dass sich hier viele zu sehr darauf versteifen, den TE in Richtung Programmieren zu bewegen.
Ist aus meiner Sicht zwar ein richtiger Weg, den man einschlagen kann, man sollte aber bedenken, dass nicht jeder, der gerne Webseiten erstellt, auch unbedingt gleich eine Programmiersprache lernen will.
Muss man auch nicht, wichtig ist erstmal der Spaß an der Sache. Und Spaß kann sich nur entwickeln, wenn man selbst Dinge entdeckt.
Dafür ist es aus meiner Sicht aber wichtig, den Horizont stetig erweitern. Statt sich mit Frames herumzuärgern, kann man sich genau so gut auch ein Framework anschauen, was spricht dagegen?

Speedy hat auf jeden Fall noch eine Menge Potential und wir sollten ihm die Freiheit gestatten, das auch zu nutzen, egal wohin ihn sein Weg führt.


Und noch zum Abschluss, weil ich das Thema gefühlt alle 2 Wochen lese:
Mir ist es völlig egal, ob Jemand meint, dass er HTML programmiert oder schreibt. Ein 3 Zeilen Hello-World Programm darf als Programmieren bezeichnet werden, aber ein 2000 Zeilen HTML-Dokument nur als gute Schreibarbeit?
Diese Unterscheidung ist völliger Schwachsinn und zeigt nur immer wieder die Eitelkeit des Mathematikers im Informatiker. Meinetwegen kann auch Jemand seine Fernbedienung programmieren, mich juckt das nicht.


----------



## BenRo (17. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

An DarkMo:
Ich finde nicht, dass man als Einsteiger HTML-Tags lernen sollte, die im aktuellen Standard nicht existieren. Es verschwendet Zeit. Falls man irgendwann dringend ein System in HTML 3.0 oder sowas warten muss, dann kann man die spezifischen Tags ja immer noch lernen (der Standard ist ja nach wie vor online). SpeeedyMaus erstellt aber eine NEUE Webseite, warum also Tags verwenden, die nicht mehr aktuell sind? Ich finde da passt meine Sockel-Analogie durchaus. Etwas zu lernen ist so ähnlich, wie etwas zu kaufen (Geld ist auch nur umgewandelte Zeit)...

Über Tabellen ziehe ich nicht her. Natürlich sollte man wissen, wie man eine Tabelle in HTML beschreibt, dies aber auch nur dann einsetzen, wenn es sich um tabellarischen Inhalt handelt. Klar muss man Verschiedenes ausprobieren, aber muss man unbedingt ausprobieren, einen Nagel mit einem Schraubenzieher in die Wand zu hauen? Oder ist es nicht sinnvoller, wenn hier Leute, die in der Materie erfahren sind sagen, "Nimm einen Hammer!"?

ofhouse: Programmieren/Schreiben: Ja, das ist einerseits Erbsenzählerei, aber es kann auch beim Verständnis helfen. Wenn ich weiß "Ich beschreibe, wie ich ein Dokument strukturiere" werde ich niemals nachfragen müssen: "Wie kann ich in HTML mit einer Schleife dreimal das Selbe wiederholen?", weil das eine Frage ist, die sich auf Programmierung richtet und nicht auf das Beschreiben einer semantischen Struktur.


----------



## Speeedymauss (17. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

So wegen der ganzen Diskussion wegen PHP und so weiter:

Ich werde erstmal nur HTML und CSS benutzen (später Javascript noch, das kommt auch noch in nem Buch dran wo ich dran arbeite).

Ich habe hier 3 gute Bücher fürs lernen von HTML CSS und Javascript, die muss ich aber ach erstmal durch bekommen und verstehen. Wenn ich die alle durch habe könnte ich mir irgendwann mal PHP und so angucken, zunächst benutze ich aber nur das, was ich schon gelernt habe. Es hilft auch nicht viel wenn ihr mit so mega komplexen Dingen an kommt wo ich noch nie was von gesehen habe, das kann ich nicht so einfach verstehen. Ich würde mich da freuen wenn ihr einfach bei normalem, einfacheren HTML/CSS bleibt wenn ihr mir helfen wollt, da ist die wahrscheinlichkeit am höchsten, dass ich eure Antwort verstehen und anwenden kann.

Ich möchte mich aber auch bedanken, dass ihr hier alle mit lest und mich so gut unterstützt, das ist auch nicht selbstverständlich! 

Ich denke mal ich werde mich gleich wieder etwas an die Seite begeben und mal gucken wie ich das mit den bildbeschriftungen hinbekomme.

Ich habe die Lösung:



rtf schrieb:


> position:absolute; + bottom:0; aus deiner Klasse herausnehmen und margin-top:-50px; hinzufügen
> 50 dabei mit deinem Wert austauschen den du benötigst.
> 
> So sieht mein schneller Code dafür aus.
> ...


 
schonmal ausprobiert aber nur in der schnelle und da hats nicht richtig geklappt, ich werde das gleich also nochmal in ruhe testen und gucke was draus wird


----------



## BenRo (17. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Ich würde es so ähnlich lösen:

```
<!doctype html>
<html>
     <head>
         <meta charset="utf-8">
         <title>Speeedy's Mods Homepage</title>
         <style type="text/css">
                
      figure {
        position: relative;
      }
      
      figcaption {
        background-color: hsla(0, 0%, 100%, 0.5);
        position: absolute;
        bottom: 20px;
        left: 10px;        
      }
         </style>
   </head>
   <body>
      <figure>
         <img src="pictures/720int28fertigthumbnail.jpg" alt="Bildunterschrift" />
         <figcaption>Bildunterschrift</figcaption>
      </figure>
  </body>
</html>
```
Allgemeine Hinweise:


Achte darauf, dass du bei sowas class statt id verwendest, id ist ein eindeutiger Identifier, der nur einmal pro Seite vorkommen darf, ein Beispiel wäre z. B. (bei vielen Seiten) id="company_logo" (sofern jenes nur einmal im Design vorkommt). Da du aber vermutlich mehrere Bilder mit Bildunterschriften hast, bietet sich stattdessen class an. Allgemein vermeidest du bei komplexeren Projekten mit classes später auftretende komplizierte specifity-Probleme
figure und figcaption anstatt divs für Bilder mit Bildunterschriften verwenden, diese sind genau hierfür da und du bewahrst die Übersicht
Anstatt "text" würde ich aussagekräftigere ids/Klassen verwenden
Es ist sinnvoll das CSS in eine Extradatei auszulagern


----------



## hann96 (17. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

So, ich habe auch mal was vorbereitet:
Bildergalerie

Hier der Code:

```
<!DOCTYPE html>
<html>
<head>
	<title>Bildergalerie</title>
	<link href='http://fonts.googleapis.com/css?family=Arimo|Asap' rel='stylesheet' type='text/css'>

<style type="text/css">

* {
	margin: 0;
	padding: 0;
}

body {
	margin-top: 30px;
	background-color: #222;	
}

h1 {
	text-align: center;
	font-weight: 400;
	font-family: arimo;
	margin-bottom: 20px;	
}

#wrapper {
	padding: 20px;
	width: 960px;	
	margin: 0 auto;	
	background-color: white;
}

.kleines-bild {
	width: 250px;
}

.galerie img {
	margin-right: 20px;
	margin-bottom: 20px;
	border-radius: 6px;
	border: 3px solid #ccc;	
	transition: all 500ms;
}

.galerie img:hover {
	opacity: 0.79;
	transition: all 500ms;
	width: 280px;
}

.galerie img:first-child {
	float: left;
}

.galerie img:last-child {
	clear: both;
}

</style>

</head>
<body>

<div id="wrapper">

	<div class="galerie">

		<h1>Bildergalerie</h1>

		<img src="http://static.universal-music-services.de/asset_new/290211/881/view/Pulcino-Pio-Das-kleine-Kueken-piept.jpg" class="kleines-bild">
		<img src="http://static.twoday.net/cordulamueller/images/bvb-logo-schwarz.jpg" class="kleines-bild">
		<img src="http://www.naturfoto-cz.de/bilder/sevcik/kleine-streifenschwalbe--hirundo-abyssinica.jpg" class="kleines-bild">
		<img src="http://upload.wikimedia.org/wikipedia/commons/f/f9/Stausee_kleine_kinzig.jpg" class="kleines-bild">
		<img src="http://www.manager-magazin.de/images/image-250667-panoV9-cuuk.jpg" class="kleines-bild">
		<img src="http://imalbum.aufeminin.com/album/D20111116/810354_XM4V5Y86DDCEKLM4ZMK6AKNJNGACML_katzenbabys-europaische-kurzhaarkatze-3_H154527_L.jpg" class="kleines-bild">

	</div>

</div>

</body>
</html>
```

Für die Übersicht habe ich den CSS Code in den <head> Bereich geschrieben, aber bitte mach das nicht für deine Website, benutze eine externe css Datei!
Natürlich besteht noch die Möglichkeit Bildunterschriften zu setzen. Siehe BenRo. (dann musst du aber clearen, sonst verrutscht der Text wegen dem float left!)


----------



## rtf (17. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



Speeedymauss schrieb:


> So wegen der ganzen Diskussion wegen PHP und so weiter:
> 
> Ich habe die Lösung:
> 
> schonmal ausprobiert aber nur in der schnelle und da hats nicht richtig geklappt, ich werde das gleich also nochmal in ruhe testen und gucke was draus wird



Mein Code kannst du nicht 1 zu 1 übernehmen. Ich wollte dir nur zeigen wie das gehen könnte. Einige Sachen müssen da halt noch auf deinen Code angepasst werden, aber ich finde nur so kannst du etwas lernen. Du sollst selber wissen wie sich der Code/Struktur verhält wenn du etwas veränderst und warum er sich so verhält. Dementsprechend musst du auch selber nachdenken. Bringt ja nichts wenn wir hier schon fertige Ergebnisse liefern und du nur Copy & Paste machen musst. Und das es viele Wege gibt merkst du ja wahrscheinlich selber an den Diskussionen im Thread


----------



## hann96 (17. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Nun kommen die erklärungen für meinen CSS Code!

Also...


```
* {
	margin: 0;
	padding: 0;
}
```
Der Universalselektor setzt die Einstellungen des jeweiligen Browsers zurück.




```
body {
	margin-top: 30px;
	background-color: #222;	
}
```
Hier wird der <body> TAG im html-Dokument angesprochen! 
Margin sorgt für einen oberen Außenabstand zum Browser Fenster von 30px.
background-color sollte wohl klar sein... 


```
h1 {
	text-align: center;	
	font-family: arimo;
	margin-bottom: 20px;	
}
```
Hier wird die Überschrift zentriert.
Schrift "Familie" wird festgelegt. Ganz oben im head Bereich wird mit 

```
<link href='http://fonts.googleapis.com/css?family=Arimo|Asap' rel='stylesheet' type='text/css'>
```
ein Font über Google eingebunden. Vorteil, die Schirftart muss nicht auf dem PC des Besuchers sein. 

Margin-bottom sorgt für einen optisch schönen Abstand nach unten.




```
#wrapper {
	padding: 20px;
	width: 960px;	
	margin: 0 auto;	
	background-color: white;
}
```
padding setzt den Innenabstand auf 20px, nun werden alle Elemente im HTML Dokument, die im div mit der id wrapper sind, 20px "eingedrängt".
Die Breite des Wraper wird bestimmt, damit man die Seite per
margin: 0 auto; zentrieren kann.

.kleines-bild {
	width: 250px;
}

Setzt Bilder mit der Klasse .kleines-bild auf die gleiche Breite. Sieht m. M. n. optisch besser aus.




```
.galerie img
```
Stelle dir diesen "Pfad" wie eine verschachtlung vor. Diese "Pfad Angabe" bedeutet, dass wenn nach der Klasse .galerie ein bild (img) kommt, diese Werte angewendet werden.




```
.galerie img {
	margin-right: 20px;
	margin-bottom: 20px;
	border-radius: 6px;
	border: 3px solid #ccc;	
	transition: all 500ms;
}
```


1. Ein rechter-Abstand wird festgelegt.  				
2. Unten wird ein Abstand festgelegt.
Nr. 1 & 2 sorgen für einen Abstand zwischen den Bildern.
Ekcken der Bilder werden abgerundet. Es kann auch:

```
border-radius: 6px 0px 0px 6px;
```
...geschrieben werden. Man geht immer von der oberen linken Ecke aus.

Ein Rand wird bestimmt. (mit farbe)
Ein weicher Übergang von dem :hover wird bestimmt (Dauer 500 milliisekunden).




```
.galerie img:hover {
	opacity: 0.79;
	transition: all 500ms;
	width: 280px;
}
```
Hier der hover zustand, wenn man mit der maus über das bild geht.
Die Transparenz wird festgelegt. (werte zwischen 0 und 1 sind möglich)
Der Übergang wird festgelegt.
Die Breite wird festgelegt, damit sich das bild beim hover vergrößert.




```
.galerie img:first-child {
	float: left;
}
```
Float left bewirkt ein umfließen um das erste Bild (deswegen sind die Bilder nebeneinander). Google einfach mal ":first-child css" und "Eltern und Kind Elemente HTML".




```
.galerie img:last-child {
	clear: both;
}
```
Es heißt: Wer floatet muss auch clearen! Diese Anweisung bewirkt, dass das float left nach dem letzten Kind-Element "beendet" wird.

So das war's. Sorry für Rechtschreibfehler, habe es eilig, muss gleich weg.

-----------------------------------------------------------

PS und EDIT///
@BenRo und Speeedymauss 
Kein Wunder, dass das nicht klappt, schaut euch mal das an:
<!doctype html>


----------



## Speeedymauss (17. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



BenRo schrieb:


> Ich würde es so ähnlich lösen:
> 
> ```
> <!doctype html>
> ...


 
Ich habe mich jetzt mal an meine Website gesetzt und wollte mal eure Lösungsvorschläge austesten, aber so richtig funktionieren die auch nicht, zumindest das zitierte oben.

Außerdem habe ich ein anderes Problem festgestellt: Meine Website wird nur von Opera richtig dargestellt. Firefox und IE bekommen das scheinbar mit den Prozentangaben nicht richtig hin, da ist alles so riiiiesig -.-

Hier mal als Bild was ich meine, mit der veränderung im Code mit dem Bildern ausm Zitat:
FF:



			Dieser Inhalt steht nur eingeloggten Mitgliedern zur Verfügung.
        



Opera:



			Dieser Inhalt steht nur eingeloggten Mitgliedern zur Verfügung.
        



Eine einfachere Lösung des Problems wäre es vlt wenn ich die Beschriftung komplett ins Bild bearbeite und dann das bild als link benutze, dann noch ne transition beim hovern drauf machen und fertig...dann müsst ich bei nem neuen Projekt auch das html nicht anpassen


----------



## hann96 (17. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Kannst du bitte nochmal den Link zur Seite posten? Damit man sich das Problem nochmal selber im Browser angucken kann? Ich finde den Link hier nicht...


----------



## hann96 (17. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



> Eine einfachere Lösung des Problems wäre es vlt wenn ich die Beschriftung komplett ins Bild bearbeite und dann das bild als link benutze, dann noch ne transition beim hovern drauf machen und fertig...dann müsst ich bei nem neuen Projekt auch das html nicht anpassen



Nein, wäre es nicht! Das ist dann keine Barriere freie Website und Suchmaschinenfreundlich ist das auch nicht, denn Google und co. wissen ja nicht, was im Bild steht.


Gruß

hannover96xdneu


----------



## Speeedymauss (17. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

stimmt, ich muss mich wohl doch mit dem problem beschäftigen aber hast ja vollkommen recht


----------



## hann96 (17. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



Speeedymauss schrieb:


> stimmt, ich muss mich wohl doch mit dem problem beschäftigen aber hast ja vollkommen recht


 
Zu dein Problem mit den Prozent angaben, kannst du bitte den kompletten Code (HTML & CSS) dazu hier "posten"?


----------



## Speeedymauss (17. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Ich könnt auch eben die Website packen und komplett hochladen wenn du möchtest.

Code:

```
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Speeedy's Mods Homepage</title>
        <link rel="stylesheet" type="text/css" href="home.css" />
        <link rel="stylesheet" type="text/css" href="layout.css" />
    </head>

    <body>
        <nav>
            <ul>
                <a href="index.html" title="Homepage"><li class="selected">Homepage</li></a>
                <a href="tagebuecher.html" title="Tagebücher"><li>Tagebücher</li></a>
                <a href="quickie.html" title="Quickie"><li>Quickie</li></a>
                <a href="galerie.html" title="Galerie"><li>Galerie</li></a>
                <a href="tutorials.html" title="Quickie"><li>Tutorials</li></a>
                <a href="tools.html" title="Tools"><li>Tools</li></a>
            </ul>
        </nav>
        <div class="tabellencontainer">
            <div class="tabellenzeile kopfzeile">
                <div class="tabellenzelle logo">
                <p></p>
                <img src="pictures/logo.png" alt="Logo" />
                </div><!--Ende Zelle-->
                <div class="tabellenzelle titel">
                    <h1>Speeedy's <br /> Mods</h1>
                    <h2>Homepage</h2>
                </div><!--Ende Zelle-->
                <div class="tabellenzelle casemod">
                <p></p>
                <img src="pictures/computer.png" alt="Fertiger Casemod" />
                </div><!--Ende Zelle-->
            </div><!--Ende Tabellenreihe-->
        </div><!--Ende Tabellencontainer-->
        <div class="tabellencontainer">
            <div class="tabellenzeile casemodstitel">
                <div class="tabellenzelle">
                    <h3>Casemods</h3>
                </div><!--Ende Zelle-->
            </div><!--Ende Tabellenreihe-->
        </div><!--Ende Tabellencontainer-->
                </div><!--Ende Tabellencontainer-->
        <div class="tabellencontainer">
            <div class="tabellenzeile casemodsbilder">
                <div class="tabellenzelle casemod1">
                    <figure class="bildmitbschriftung">
                        <img src="pictures/720int28fertigthumbnail.jpg" alt="" />
                        <figcaption class="bildbeschriftung">
                            <h3>Projekt 1</h3>
                            <h4>Kurzbeschreibung</h4>
                        </figcaption>
                    </figure>
                </div><!--Ende Zelle-->
                <div class="tabellenzelle casemod2">
                    <div class="bildmitbeschriftung">
                        <span class="bildbeschriftung">
                            <h3>Projekt 2</h3>
                            <h4>Kurzbeschreibung</h4>
                        </span>
                        <img src="pictures/happybirthdayfertigthumbnail.jpg" alt="" />
                    </div>
                </div><!--Ende Zelle-->
                <div class="tabellenzelle casemod3">
                    <div class="bildmitbeschriftung">
                        <span class="bildbeschriftung">
                            <h3>Projekt 3</h3>
                            <h4>Kurzbeschreibung</h4>
                        </span>
                        <img src="pictures/sockelathumbnail.jpg" alt="" />
                    </div>
                </div><!--Ende Zelle-->
            </div><!--Ende Tabellenreihe-->
        </div><!--Ende Tabellencontainer-->
        <div class="tabellencontainer">
            <div class="tabellenzeile casemodstitel">
                <div class="tabellenzelle">
                    <h3>Casecons</h3>
                </div><!--Ende Zelle-->
            </div><!--Ende Tabellenreihe-->
        </div><!--Ende Tabellencontainer-->
                </div><!--Ende Tabellencontainer-->
        <div class="tabellencontainer">
            <div class="tabellenzeile casemodsbilder">
                <div class="tabellenzelle casemod1">
                    <div class="bildmitbschriftung">
                        <img src="pictures/720int28fertigthumbnail.jpg" alt="" />
                        <span class="bildbeschriftung">
                            <h3>Projekt 1</h3>
                            <h4>Kurzbeschreibung</h4>
                        </span>
                    </div>
                </div><!--Ende Zelle-->
                <div class="tabellenzelle casemod2">
                    <div class="bildmitbeschriftung">
                        <span class="bildbeschriftung">
                            <h3>Projekt 2</h3>
                            <h4>Kurzbeschreibung</h4>
                        </span>
                        <img src="pictures/happybirthdayfertigthumbnail.jpg" alt="" />
                    </div>
                </div><!--Ende Zelle-->
                <div class="tabellenzelle casemod3">
                    <div class="bildmitbeschriftung">
                        <span class="bildbeschriftung">
                            <h3>Projekt 3</h3>
                            <h4>Kurzbeschreibung</h4>
                        </span>
                        <img src="pictures/sockelathumbnail.jpg" alt="" />
                    </div>
                </div><!--Ende Zelle-->
            </div><!--Ende Tabellenreihe-->
        </div><!--Ende Tabellencontainer-->
        
    </body>
</html>
```

CSS Layout:

```
@charset "utf-8";
/* CSS Document */

body {
    background-color:#DDD;
    margin: 0px;
    padding: 0px;
    font-family:"Comic Sans MS", cursive;
}
nav{
    padding:10px;
    margin-bottom:0px;
    background-image:url(pictures/navhintergrund.jpg);
    background-size:100% 100%;

}
nav ul{
    list-style-type:none;
    padding: 0px;
    margin:0px;

}
nav ul li{
    display:inline;
    margin:0px;
    padding:10px 20px 10px 20px;
    font-weight:bold;
}

.tabellencontainer{
    display:table;
    margin:0px;
    padding:0px;
    width:100%;
}

.tabellenzeile{
    display:table-row;
}

.tabellenzelle{
    display:table-cell;
    vertical-align:top;
}

.kopfzeile{
    background-color:#FFF;
}

.logo{
    width:20%;
}
.logo img {
    max-width: 100%;
    height: auto;
} 

.casemod{
    width:40%;
}

.casemod img {
    max-width: 100%;
    height: auto;
} 

.titel{
    width:30%;
}


.kopfzeile h1{
    font-size:600%;
    margin-top:5px;
    width:100%;
}

.kopfzeile h2{
    font-size:400%;
    width:100%;
}

nav a:link, nav ul a:visited{
    text-decoration:none;
    border-bottom:none;
    font-weight:bold;
    color:back;
    border-color:black;
}
```

CSS home:

```
@charset "utf-8";
/* CSS Document */

.casemodstitel{
    background-color:#666;
    width:100%;
}
.casemod1{
    width:33%;
}
.casemod1 img {
    max-width: 100%;
    height: auto;
} 
.casemod2{
    width:33%;
}
.casemod2 img {
    max-width: 100%;
    height: auto;
} 
.casemod3{
    width:33%;
}
.casemod3 img {
    max-width: 100%;
    height: auto;
} 
figure.bildmitbeschriftung {
    position:relative;
}

figcaption.bildbeschriftung{
    background-color: hsla(0, 0%, 100%, 0.5);
    position: absolute;
    bottom: 20px;
    left: 10px;
    text-align: center;
}
```


----------



## hann96 (17. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Danke, passt schon, ich mache das mit meinem localhost


----------



## hann96 (17. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Lade doch mal bitte hoch, wegen den Bildern!


----------



## Speeedymauss (17. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Ok, hier der Download:



			Dieser Inhalt steht nur eingeloggten Mitgliedern zur Verfügung.


----------



## BenRo (17. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Die CSS-Klassen im CSS müssen denen, die im HTML-Code angegeben sind entsprechen. Oder kurz: Du hast den Schreibfehler "bildmitbschriftung" drin (das e fehlt).

Edit: Wenn du Firebug zum CSS-Debuggen verwendest siehst du sowas ganz flott ^^

Nocheinedit: Kannst du mal ein Bild machen, wie es am Schluss aussehen soll? Das würde es für Außenstehende einfacher machen.


----------



## hann96 (17. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



BenRo schrieb:


> Nocheinedit: Kannst du mal ein Bild machen, wie es am Schluss aussehen soll? Das würde es für Außenstehende einfacher machen.



Jop, das wäre gut.


Hier schon einmal meine paar Fehler-Analysen:

1. Ich habe bereits gesagt, dass das <!doctype html> falsch ist! So muss es sein: <!DOCTYPE html>
2. Grenzwertig, eigetnlich darf in einer Liste nicht das <a> Element, vor einem <li> TAG stehen.
3. Weg von Position Absolute. Du meintest doch, dass du eine Flexible Website haben willst!?!?!? 
    Dann bist du bei dem position Attribut falsch! Immer margin / padding verwenden. 
    Denn wie der Name schon sagt, wird mit position absolute das Element, >absolut< positioniert, dies nimmt es aus dem Dokumentenfluss raus. 
    Es orientiert sich nicht an den unteren oder oberen Elementen im HTML-Dokument.
4. Schreibfehler (Tipp: Immer klein schreiben, also z. B. nicht: meineSeite, sondern meine-seite). Aber eigentlich sollte dir das DW aber doch anzeigen, oder?
5. Mehr werden folgen 


EDIT///
6. Bitte komme von Tabellen weg, auch wenn sie nur in CSS definiert sind. Man macht sowas eigentlich mit div Containern und float, bzw. mit flexbox machen.


----------



## Speeedymauss (17. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



BenRo schrieb:


> Die CSS-Klassen im CSS müssen denen, die im  HTML-Code angegeben sind entsprechen. Oder kurz: Du hast den  Schreibfehler "bildmitbschriftung" drin (das e fehlt).
> 
> Edit: Wenn du Firebug zum CSS-Debuggen verwendest siehst du sowas ganz flott ^^
> 
> Nocheinedit:  Kannst du mal ein Bild machen, wie es am Schluss aussehen soll? Das  würde es für Außenstehende einfacher machen.



den fehler hab ich immer überlesen, danke 

Ich werd versuchen morgen früh schnell nen grobes bild der seite zu erstellen, ich werd hier hochladen sobald ichs habe




hannover96xdneu schrieb:


> Jop, das wäre gut.
> 
> 
> Hier schon einmal meine paar Fehler-Analysen:
> ...


 
in meinem html buch schreiben die das "doctype" aber auch immer klein...

2) hab ich aus meinem buch, so wird das erklärt, dass man nicht nur auf den text der navigation drücken kann sondern auf das ganze feld...
3) wie gesagt, ich arbeite dran 
4) momentan wird nicht angezeigt, vlt muss ich das noch iwo aktivieren
5) sehr gerne

Und DANKE, dass ihr mir da so helft!


----------



## hann96 (17. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Kein Problem mit dem helfen, dann wird meine Beitrags anzahl höher  xD

Und bitte 


```
/* unvisited link */
a:link {
        text-decoration:none;
	border-bottom:none;
	font-weight:bold;
	color:back;
	border-color:black;
}

/* visited link */
a:visited {
        text-decoration:none;
	border-bottom:none;
	font-weight:bold;
	color:back;
	border-color:black;
}

/* mouse over link */
a:hover {
        text-decoration:none;
	border-bottom:none;
	font-weight:bold;
	color:back;
	border-color:black;
}

/* selected link */
a:active {
        text-decoration:none;
	border-bottom:none;
	font-weight:bold;
	color:back;
	border-color:black;
}
```

...statt nur :link und :visited zu schreiben. Besonders die Reihenfolge ist wichtig, sonst überschreibt das ein das andere!


----------



## BenRo (17. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



hannover96xdneu schrieb:


> 1. Ich habe bereits gesagt, dass das <!doctype html> falsch ist! So muss es sein: <!DOCTYPE html>



Es ist nicht falsch, es klein zu schreiben, denn in HTML5 darf das Doctype-Element klein geschrieben werden. Aber die Kompatibilität ist größer (XHTML-Kompatibilität), wenn es groß geschrieben wird. In der Praxis wird es keinen großen Unterschied machen. Besser ist es also, es groß zu schreiben, aber falsch ist es auch nicht, es klein zu schreiben.



> 3. Weg von Position Absolute. Du meintest doch, dass du eine Flexible Website haben willst!?!?!?


Wenn es um die Bildunterschriften geht: Das war meine Empfehlung. Sehe keinen Nachteil darin, diese absolut zu positionieren.



> Denn wie der Name schon sagt, wird mit position absolute das Element, >absolut< positioniert, dies nimmt es aus dem Dokumentenfluss raus. Es orientiert sich nicht an den unteren oder oberen Elementen im HTML-Dokument.


... aber es orientiert sich am übergeordneten Element.



> 6. Bitte komme von Tabellen weg, auch wenn sie nur in CSS definiert sind. Man macht sowas eigentlich mit div Containern und float, bzw. mit flexbox machen.


Ja, kann ich nur zustimmen. Wobei flexbox momentan leider noch nicht zu empfehlen ist, da es Internet Explorer erst ab Version 11 unterstützt und Webseiten ja meist auch in Browsern laufen sollten, die ein bis zwei Versionen älter sind als die aktuellste.


----------



## hann96 (17. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



BenRo schrieb:


> Es ist nicht falsch, es klein zu schreiben, denn in HTML5 darf das Doctype-Element klein geschrieben werden. Aber die Kompatibilität ist größer, wenn es groß geschrieben wird, da so auch HTML5-unfähige Clients es verstehen. In der Praxis wird es keinen großen Unterschied machen. Besser ist es also, es groß zu schreiben, aber falsch ist es auch nicht, es klein zu schreiben.



Naja, wenn es aber W3schools.com immer so schreibt, dann dachte ich, dass es so richtig ist. 



BenRo schrieb:


> Wenn es um die Bildunterschriften geht: Das war meine Empfehlung. Sehe keinen Nachteil darin, diese absolut zu positionieren.



M. M. n. gibt es einen Nachteil, die Website ist nicht mehr 100% responsive. Und da heutzutage mehr als 50% der www Nutzer von einem mobilen gerät aus surfen, ist das nicht ganz unwichtig.




BenRo schrieb:


> ... aber es orientiert sich am übergeordneten Element.



Ok, sorry habe ich vergessen...



BenRo schrieb:


> Ja, kann ich nur zustimmen. Wobei flexbox momentan leider noch nicht zu empfehlen ist, da es Internet Explorer erst ab Version 11 unterstützt und Webseiten ja meist auch in Browsern laufen sollten, die ein bis zwei Versionen älter sind als die aktuellste.



Ja, aber flexbox ist tausendmal einfacher...Aber Microsoft braucht ja mal wieder ne extra Wurst


----------



## Speeedymauss (19. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

So, ich habe momentan etwas weniger Zeit (morgan fängt Schule wieder an  ) aber ich versuche so weit es geht weiter zu machen.
Es wurde sich ja gewünscht, dass ich mich mal an nen grafikprogramm setze, naja mein grafikprogramm war nur papier und stift weil ich mehr zeit nicht hatte, aber da sollte hoffentlich mein gedanke auch klar werden.

Zur Homepage:



			Dieser Inhalt steht nur eingeloggten Mitgliedern zur Verfügung.
        



Die Titel halt so im Bild und dann noch nen schönen hover effekt wenn man über einem projekt ist

Tagebücher:



			Dieser Inhalt steht nur eingeloggten Mitgliedern zur Verfügung.
        


Startseite wo man alle Tagebücher mit nem Thumbnail und Titel sieht, was als Link dient, bei neuen und akutellen Projekten soll zusätzlich nen banner im bild sein

die Nav 2 kommt da nur hin, wenn noch eine unternavigation benötigt wird.
Tagebuchprojekt Startseite:



			Dieser Inhalt steht nur eingeloggten Mitgliedern zur Verfügung.
        


Tagebucheintrag:



			Dieser Inhalt steht nur eingeloggten Mitgliedern zur Verfügung.
        



Dann Tools:



			Dieser Inhalt steht nur eingeloggten Mitgliedern zur Verfügung.
        



Tutorial übersicht:



			Dieser Inhalt steht nur eingeloggten Mitgliedern zur Verfügung.
        



Und tut seite:



			Dieser Inhalt steht nur eingeloggten Mitgliedern zur Verfügung.
        



Also Farben dachte ich vlt:
Nen Blau so in die richtung #3333cc
Vlt mit nem lili richtung x8A2BD9
nen grauton und dann noch ne Lontrastfarbe
als hintergrund dachte ich vlt nen farbverlauf von einer farbe von oben zu einer anderen

Ich hoffe das hilft euch schonmal etwas meine planung zu verstehen


----------



## hann96 (19. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



Speeedymauss schrieb:


> So, ich habe momentan etwas weniger Zeit (morgan fängt Schule wieder an  )


Ich habe noch 3 Wochen  xD 



Speeedymauss schrieb:


> aber ich versuche so weit es geht weiter zu machen.
> Es wurde sich ja gewünscht, dass ich mich mal an nen grafikprogramm setze, naja mein grafikprogramm war nur papier und stift weil ich mehr zeit nicht hatte, aber da sollte hoffentlich mein gedanke auch klar werden.



Na wenn du meinst 

----------------------

Ich kann dir sagen, wie du es machen kannst, aber den html / css code musst du schon selber schreiben...

----------------------

Zu deiner Startseite (index.html/php):
Die Navigation hast du ja schon. Den Farbverlauf würde ich aber weglassen und eine Einheitliche Farbe nehmen. 
Schau dir mal das an.

----------------------

Dann zu deinem Bild mit der Maus da:
Gib der Maus "float:left", dann rutscht deine Überschrift und der PC neben das Bild. 
Du musst aber wieder clearen, damit die nav2 nicht auch noch daneben rutscht 

----------------------

Bildergalerie:
Arbeite wieder mit "float:left".
Für deine Bildunterschrift mit einem hover Effekt ist das hilfreich.

Tipp:
CSS-Tricks ist immer ein gutes Nachschlagewerk. 

----------------------

Der Text weiter unten mit "Hallo":
Definiere ein div (schau dir mal das mit der Entwickler Konsole an, dann kriegst du raus, wie das gemacht wurde), gib dem div "float:left" und dann kannst du den Text,
in einem anderen div, einfügen.

----------------------

Footer:

Schau dir mal das an.

----------------------

Mit dem was ich dir nun gesagt habe kannst du auch die anderen Seiten problemlos gestalten. Wie bereits gesagt, 
CSS-Tricks ist gut zum nachschlagen (du musst nur Englisch verstehen )


Gruß

hannover96xdneu


----------



## ofhouse (19. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Stift und Papier sind doch besser als nichts 
Mit nem Grafikprogramm kannst du dich halt mehr um die Details kümmern und ein bisschen mit Farben spielen, finde ich persönlich angenehmer, als ständig im CSS die Farbcodes anzupassen.

Was mir auffällt, ist, dass du Nav1 und Nav2 getrennt hast.
Wenn Nav 2 ein Untermenü von Nav 1 sein soll, sollten die unbedingt zusammen, entweder direkt untereinander oder als Dropdown.
Man sollte sich immer auf ein Hauptmenü festlegen, wenn du noch das Titelbild zwischen die Menüs kommt, weiß keiner so richtig, was nun Hauptmenü und Submenü ist.

Von den Farben würde ich dir eher zu nicht ganz so aufdringlichen raten, sonst wirkt die Seite schnell etwas grell.


----------



## Speeedymauss (26. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

hi,
kurze Frage (ich arbeite mal wieder an der Website):
Geht es, dass sich die Schriftgröße einer Überschrift der Fenstergröße anpasst?
Ich möchte, dass mein "Speeedys Mods" und der Seitenname sich Dynamisch zur Fenstergröße ändern, wie mache ich das?


----------



## hann96 (26. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Hi,  

Stichwort: vw

Siehe hier:
http://www.mediaevent.de/css/font-size.html


----------



## Speeedymauss (26. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

So cih habe jetzt nochmal etwas an der Seite gemacht, haptsächlich Quellcode verändert.

Wegen dem Design bin ich mir noch nicht so einig wie ich das am besten aufbauen soll. Ich hätte gerne was modernes aber ich selber finde gerade keine vernünftige Lösung, hätte einer ne Idee wie man da vlt die Bilder mit den Projekten gut aufbauen kann?

Würd mich über JEDE Idee freuen die ihr mir hier schreibt!

So Bild von meinem Stand (Farben sind momentan hauptsächlich damit ich die ganzen Abstände besser erkenne kann, genauso wie die Kästen in der Navigation)



			Dieser Inhalt steht nur eingeloggten Mitgliedern zur Verfügung.
        



Quellcode:

```
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Speeedy's Mods Homepage</title>
        <link rel="stylesheet" type="text/css" href="home.css" />
        <link rel="stylesheet" type="text/css" href="layout.css" />
    </head>

    <body>
        <nav>
            <ul>
                <li><a href="index.html" title="Homepage">Homepage</a></li>
                <li><a href="tagebuecher.html" title="Tagebücher">Tagebücher</a></li>
                <li><a href="quickie.html" title="Quickie">Quickie</a></li>
                <li><a href="galerie.html" title="Galerie">Galerie</a></li>
                <li><a href="tutorials.html" title="Quickie">Tutorials</a></li>
                <li><a href="tools.html" title="Tools">Tools</a></li>
            </ul>
        </nav>
        <header class="kopfzeile">
            <img src="pictures/logo.png" alt="Logo" class="logo" />
            <img src="pictures/computer.png" alt="Fertiger Casemod" class="headerbild" />
            <h1>Speeedy's <br /> Mods</h1>
        </header>
        <div class="trennleiste">
            <h3>Casemods</h3>
        </div>
        
        <div class="projektvorstellung">
        <img src="pictures/720int28fertigthumbnail.jpg" alt="" class="bildlinks projektbilder" />
        <img src="pictures/happybirthdayfertigthumbnail.jpg" alt="" class="bildmitte projektbilder" />
        <img src="pictures/sockelathumbnail.jpg" alt="" class="bildrechts projektbilder" />
        </div>
        
        <div class="trennleiste">
            <h3>Casecons</h3>
        </div>
        
        <div class="projektvorstellung">
        <img src="pictures/720int28fertigthumbnail.jpg" alt="" class="bildlinks projektbilder" />
        <img src="pictures/happybirthdayfertigthumbnail.jpg" alt="" class="bildmitte projektbilder" />
        <img src="pictures/sockelathumbnail.jpg" alt="" class="bildrechts projektbilder" />
        </div>
        
        <div class="trennleiste">
            <h3>Homepage</h3>
        </div>
        
        <article class="haupttext">
            <p>
Hallo und willkommen <br />
auf der offiziellen Website von Speeedy's Mods!<br />
<br />
<br />
WICHTIG: Die Seite ist noch im Beta-Status, d.h. es wird noch an der Seite gearbeitet. Wie die Website momentan ist (Texte,Bilder,Design) kann (und wird) sich teilweise noch stark verändern, Ich möchte es aber schonmal ermöglichen, dass man schon jetzt auf die Website zugreifen kann.<br />
<br />
Auf dieser Seite geht es um Casemods und Casecons aller Art.<br />
Die hier aufgeführten Projekte sind i.d.R. alle von mir selbst durchgeführt und in handarbeit entstanden.<br />
<br />
Links geht es zu meinem Projekt, an dem ich gerade arbeite oder welches ich vor kurzem abgeschlossen habe.<br />
<br />
Rechts sind aktuelle Casemods und Casecons aufgezählt, mit den entsprechenden Links zu den genauen Seiten der Mods. Andere Mods sind in der Navigation unter "Projekte" und "Umrüstungen" zu finden.<br />
<br />
Ich unterscheide noch in zwei Arten von Mods:<br />
"Umrüstungen": wo ich ein Gehäuse und Hardware nehme wie es ist, was ich dann nur auf etwas neues umrüste, also z.B. der Umbau auf eine Wasserkühlung. Also Sachen, wo ich nicht viel mit dem Gehäuse und der Hardware an sich mache.<br />
<br />
und<br />
<br />
"Projekte": Dies sind Arbeiten, die aufwändiger sind, wo ich auch das Gehäuse und die Hardware verändere und anpasse.
            </p>
        </article>
        
    </body>
</html>
```


EDIT:

Außerdem habe ich immer noch keinen Plan wie ich die Bildbeschriftung da jetzt reinbauen soll...


----------



## hann96 (26. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Wegen dem Design, zen garden.

Text über Bild:
css-tricks (wie schon oben erwähnt).

Ideen:
Füge neben den Bildern Text ein und verlinke z. B. mit "[...]" auf den kompletten Beitrag. Das kann den Besucher anregen mehr darüber zu erfahren und so kommt  er auf weitere unterseiten. (Wenn du ein bisschen werbung zur finanzierung schaltest, kann das mehr Geld einbringen). Wobei man sich über Werbung erst später Gedanken machen sollte...

Gruß

hannover96xdneu


----------



## Speeedymauss (26. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

ich werds mir morgen in ruhe angucken,
ich habe jetzt aber nochmal viel rumgebastelt:



			Dieser Inhalt steht nur eingeloggten Mitgliedern zur Verfügung.
        



Download komplettes Projekt:




			Dieser Inhalt steht nur eingeloggten Mitgliedern zur Verfügung.
        



Probleme/etc  momentan:

- Bild im Header ist unten außerhalb des Headers, weiß gerade nicht wie ich den Header so groß bekomme, dass dieser sich ans bild anpasst
- andere Schriftart
- pseudoklassen von links gehen immer noch nicht
- fehler die ihr findet

Würde mich freuen wenn mal wer drüber guckt!!!


----------



## hann96 (26. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



Speeedymauss schrieb:


> ich werds mir morgen in ruhe angucken,
> ich habe jetzt aber nochmal viel rumgebastelt:
> 
> 
> ...


1. Verstehe nicht so richtig, was du meinst.
2. 
	
	



```
font-family: arial, verdana, andalus
```
 Wenn die schriftart arial nicht auf dem pc des besuchers vorhanden ist, wird verdana genommen.
3. ....ein momment
4. Gucke morgen nochmal drüber


----------



## Speeedymauss (26. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

guck mal nach den farben, der header bereich ist heller als der body und das bild geht wegen float halt unten über den header hinaus, die nav habe ich je gecleart, damit das bild da nicht auch noch drüber geht, aber das bild soll ja komplett im header drin sein, wenn ich versuche mit height die höhe des headers ändern will und das in % angeben möchte passiert nichts wenn ich verschiedene werte eingebe


----------



## hann96 (26. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Ok, bin gerade zu müde um da mitzudenken  (morgen bin ich ausgeschlafen )

Kannst du aber bitte die website nochmal hochladen? Oder hier einfach die CSS/HTML-Datei hier im Forum reinstellen? Ich habe hier schei* Internet (bzw. mobiles) und kann deswegen selbst die kleine 4.2 mb große Datei nicht downloaden, bzw. nur sehr langsam...

l. g. & gute Nacht 

hannover96xdneu


----------



## Speeedymauss (26. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

oki

wenn ich dran denke schreib ich hier morgen früh den code rein


----------



## DOcean (27. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

statt blalba -> || Blindtext-Generator | Lorem ipsum für Webdesigner || 

nich wirklich wichtig mußte ich nur gerade dran denken


----------



## Speeedymauss (27. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

ok vlt änder ichs ja 

erstmal der aktuelle Code, ich werde aber jetzt selber noch nen bischen was machen:

```
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Speeedy's Mods Homepage</title>
        <link rel="stylesheet" type="text/css" href="home.css" />
        <link rel="stylesheet" type="text/css" href="layout.css" />
    </head>

    <body>
        
        <header class="kopfzeile">
                <!--<img src="pictures/logo.png" alt="Logo" class="logo" />
                <img src="pictures/computer.png" alt="Fertiger Casemod" class="headerbild" />-->
                <img src="pictures/headerbild.png" alt="Blick auf zwei Grafikkarten" class="headerbild" />
                <h1>Speeedy's <br /> Mods</h1>
            
        </header>
        
        <nav>
            <ul>
                <li><a href="index.html" title="Homepage">Homepage</a></li>
                <li><a href="tagebuecher.html" title="Tagebücher">Tagebücher</a></li>
                <li><a href="quickie.html" title="Quickie">Quickie</a></li>
                <li><a href="galerie.html" title="Galerie">Galerie</a></li>
                <li><a href="tutorials.html" title="Quickie">Tutorials</a></li>
                <li><a href="tools.html" title="Tools">Tools</a></li>
            </ul>
        </nav>
        
        <div class="main">
        
            <article>
                <img src="pictures/720int28fertigthumbnail.jpg" alt="" class="projektbildcasemods" />
                <h3> Casemods</h3>
                <p>
                    Bei Casemods wird immer ein Case verändert blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla 
                </p>
                
                <h3> Aktuelles Projekt</h3>
                <h4> 720ger in T28</h4>
                <p>
                    Projektblala blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla 
                </p>
            </article>
            <article class="casecons">
            <img src="pictures/happybirthdayfertigthumbnail.jpg" alt="" class="projektbildcasecons" />
            <h3> Casecons</h3>
                <p>
                    Bei Casecons wird immer ein Case verändert blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla 
                </p>
                
                <h3> Aktuelles Projekt</h3>
                <h4> Wohnzimmer PC</h4>
                <p>
                    Projektblala blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla 
                </p>
            </article>
        
            <article class="haupttext">
                <p>
Hallo und willkommen <br />
auf der offiziellen Website von Speeedy's Mods!<br />
<br />
<br />
WICHTIG: Die Seite ist noch im Beta-Status, d.h. es wird noch an der Seite gearbeitet. Wie die Website momentan ist (Texte,Bilder,Design) kann (und wird) sich teilweise noch stark verändern, Ich möchte es aber schonmal ermöglichen, dass man schon jetzt auf die Website zugreifen kann.<br />
<br />
Auf dieser Seite geht es um Casemods und Casecons aller Art.<br />
Die hier aufgeführten Projekte sind i.d.R. alle von mir selbst durchgeführt und in handarbeit entstanden.<br />
<br />
Links geht es zu meinem Projekt, an dem ich gerade arbeite oder welches ich vor kurzem abgeschlossen habe.<br />
<br />
Rechts sind aktuelle Casemods und Casecons aufgezählt, mit den entsprechenden Links zu den genauen Seiten der Mods. Andere Mods sind in der Navigation unter "Projekte" und "Umrüstungen" zu finden.<br />
<br />
Ich unterscheide noch in zwei Arten von Mods:<br />
"Umrüstungen": wo ich ein Gehäuse und Hardware nehme wie es ist, was ich dann nur auf etwas neues umrüste, also z.B. der Umbau auf eine Wasserkühlung. Also Sachen, wo ich nicht viel mit dem Gehäuse und der Hardware an sich mache.<br />
<br />
und<br />
<br />
"Projekte": Dies sind Arbeiten, die aufwändiger sind, wo ich auch das Gehäuse und die Hardware verändere und anpasse.
                </p>
            </article>
        </div>
    </body>
</html>
```


```
@charset "utf-8";
/* CSS Document */

img.projektbildcasemods{
    width:40%;
    border-radius:10px;
    float:left;
    margin-right:2%;
}

img.projektbildcaseconsac{
    width:40%;
    border-radius:10px;
    float:right;
    margin-left:2%;
}

img:hover {
    opacity: 0.79;
    transition: all 500ms;
}



article.haupttext{
    margin-left:20%;
    margin-right:20%;
}

article{
    clear:both;s
    padding:1px;
    margin-top:1%;
    margin-bottom:1%;
}

article.casecons{
    text-align:right;
}
```


```
@charset "utf-8";
/* CSS Document */

body {
    margin: 0px;
    padding: 0px;
    font-family:"Comic Sans MS", cursive;
    background-color:#111;
    color:#FFF;
}
nav{
    padding:10px;
    margin-bottom:0px;
    background-color:#3333cc;
    clear:both;

}
nav ul{
    list-style-type:none;
    padding: 0px;
    margin:0px;
    text-align:center;

}
nav ul li{
    display:inline;
    margin:0px;
    padding:9px 20px 9px 20px;
    font-weight:bold;
}
/**
.tabellencontainer{
    display:table;
    margin:0px;
    padding:0px;
    width:100%;
}

.tabellenzeile{
    display:table-row;
}

.tabellenzelle{
    display:table-cell;
    vertical-align:top;
}**/



div.main{
    padding:10%;
    padding-top:3%;
}

.headerbild{
    width:65%;
    float:right;
    border-radius:10px;
}

header.kopfzeile{
    margin:0px;
    padding:50px;
    padding-left:5%;
    background-color:#222;
    height:50%;
    
}

.kopfzeile h1{
    font-size:5vw;
    margin-top:5px;
    width:100%;
    text-shadow:7px 7px 3px black;
}

/* unvisited link */
a:link {
    text-decoration:none;
    border-bottom:none;
    font-weight:bold;
    color:back;
    border-color:black;
}

/* visited link */
a:visited {
    text-decoration:none;
    border-bottom:none;
    font-weight:bold;
    color:back;
    border-color:black;
}

/* mouse over link */
a:hover {
    text-decoration:none;
    border-bottom:none;
    font-weight:bold;
    color:back;
    border-color:black;
}

/* selected link */
a:active {
    text-decoration:none;
    border-bottom:none;
    font-weight:bold;
    color:back;
    border-color:black;
}
```


----------



## Speeedymauss (27. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Sry wegen Doppelpost!

Aber es gibt neue Scrrenshots:



			Dieser Inhalt steht nur eingeloggten Mitgliedern zur Verfügung.
        





			Dieser Inhalt steht nur eingeloggten Mitgliedern zur Verfügung.
        





			Dieser Inhalt steht nur eingeloggten Mitgliedern zur Verfügung.
        





			Dieser Inhalt steht nur eingeloggten Mitgliedern zur Verfügung.
        





			Dieser Inhalt steht nur eingeloggten Mitgliedern zur Verfügung.
        



Habe momentan ne Webfont drauf die ich bei google gefunden habe, die find ich schonmal besser als die Schriftart davor, nur wird diese bei ff nicht angezeigt, bei opera schon (mehr habe ich noch nicht getestet)

Ich finde das grobe Design so eigentlich nicht schlecht, jetzt kommen halt noch die kleinigkeiten. Ich würds auch mit hellen farben machen aber ka welche man da am besten nimmt, damit man auch diesen effekt hat. (Vorschläge von euch?)

Desweiteren habe ich immer noch kp wie das mit dem Bild im Head geht...

Ich denke mal wenn ich eure grobe zustimmung zu dem design und aufbau habe fange ich mal mit ner unterseite an

LG


----------



## ofhouse (27. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Zuerst mal würde ich sagen, hol dir nen kostenlosen Account bei bplaced (Oder mach ein extra Verzeichnis auf deinem Webspace auf) und lad dort den aktuellen Stand mit Filezilla hoch.
Das spart dir das packen eines Zips bei jeder Änderung und wir können schneller das Ergebnis sehen.

Vom Design geht es auf jeden Fall in die richtige Richtung, was du auf jeden Fall machen solltest:
- Die Schriftfarbe der Links (Zeile 78 & 88) hast du "back" statt "black" geschrieben, deswegen geht auch der Kontrast im Menü flöten. Statt a:link kannst du übrigens auch einfach a schreiben.

Was ich noch machen würde:
- Gib dem Text auf deiner Webseite im Desktop-Modus eine feste Breite (Irgendwas um die 1000px rum, was etwa so breit wie eine Din-A4 Seite ist, wenn du sie vor deinen Bildschirm hältst).
So hast du zum einen besseren Überblick darüber, wie der Text auf jedem Bildschirm aussieht, denn wenn Jemand einen Bildschirm mit einer Auflösung 4000x1080 hat, hast du womöglich nur noch 2 Zeilen Text, die sich über den ganzen Bildschirm ziehen.
Zum anderen stört es den natürlichen Lesefluss, wenn man etwas ließt, was breiter als eine Din-A4 (Hochformat) ist, weil du nicht so schnell in die nächste Zeile springen kannst.
Erreichen kannst du das, indem du dem main-div folgende CSS-Regel hinzufügst:

```
margin: 0 auto;
width: 1000px;
```
Wirkt sich natürlich negativ auf das Repositive aus, deswegen solltest du das mit einer Viewport-Regel umgeben, dann hast du auf dem Handy keine Probleme damit.


----------



## Speeedymauss (27. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



ofhouse schrieb:


> Zuerst mal würde ich sagen, hol dir nen kostenlosen Account bei bplaced (Oder mach ein extra Verzeichnis auf deinem Webspace auf) und lad dort den aktuellen Stand mit Filezilla hoch.
> Das spart dir das packen eines Zips bei jeder Änderung und wir können schneller das Ergebnis sehen.
> 
> Vom Design geht es auf jeden Fall in die richtige Richtung, was du auf jeden Fall machen solltest:
> ...



Da warst du ne halbe Stunde schneller als ich 

Was ich sagen kann:
Die Mutter meiner Freundin hat mir freundlicher weise ihren eingestaubten Webspace mit domain für meine Testzwecke überlassen. Wenn meine Seite fertig ist bau ich ihr dann auch eine.
Die Seite ist nun unter andrea-taube.de abrufbar und meistens auf dem aktuellsten stand. 

Danke für dein Lob, schön das es gefällt, mir persönlich gefällts auch immer besser was ich da zusammenschreibe 

Den Fehler in black hab ich auch scchon gefunden undd verbessert. Auch das Problem mit dem Bild im Header.

Die Breite könnt ich fixieren aber ich meine da gibt auch ne regel mit max-width aber ka ob die dafür anwendbar ist, gucke ich morgen

wenn es irgendwann wirklich gegen ende geht, werd ich vlt dann sowieso stylesheets für mobile geräte entwerfen...ma gucken


----------



## DOcean (28. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

verkleiner das Header Bild mal und nimm kein PNG

4.525px × 1.901px (Skaliert zu 822px × 345px)


----------



## Speeedymauss (28. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

verkleinern ja, png muss es aber bleiben weils teilweise transparent ist


----------



## DarkMo (28. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

kann jpg keine transparenz? oO


----------



## Speeedymauss (28. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

nope nur png und gifs können das


----------



## hann96 (28. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Nun mal meine Vorschläge und Tipps 

Zu deiner mobilen Seite:
Wie schon gesagt, gib deiner Website eine bestimmte Breite, normalerweise nimmt man 768px, 960px, 1080px.
Ich würde 960px bevorzugen.

Dann kannst du in der CSS-Datei media query's "anlegen".
Aussehen kann das z. B. so:


```
@media (max-width: 960px) {
      body { width: 100%; }
}
```

Wenn der viewport weniger als 960px beträgt, wird dann dem body eine Breite von 100% zugewiesen. 

Gruß

hannover96xdneu


EDIT///
Kleiner Tipp noch, wenn du auf deiner Seite "Wichtig:" schreibst, dann musst du das auch als wichtig kennzeichnen, sonst übersieht man das leicht!

Bereite eine Grafik (z. B. so was http://blog.flatlift.de/wp-content/uploads/2014/01/attentionachtung.jpg) mit (z. B.) GIMP vor und setze in der CSS-Datei dann diese Anweisung:


```
.wichtig:before {
    content: url('derDateipfadZumBild.png');
}
```

In der HTML-Datei sollte das dann so aussehen:

```
<span class="wichtig">Wichtig</span>.....
```


----------



## hann96 (28. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Sorry für den Doppelpost 

Ich habe ein paar Inhaltliche Verbesserungs-Vorschläge:

1. Lass so etwas, wie:


> Jetzt wo du dir *(hoffentlich)* schon die ganzen Projekte angeguckt hast


Das wirkt (m. M. n.) nicht sonderlich Seriös.

2. 





> Aber erstmal möchte ich dich auf meiner Seite willkommen heißen!


So etwas ist selbstverständlich und sollte deswegen nicht erwähnt werden.

3. 





> Ich möchte diese Seite gerne nutzen um anderen Casemoddern (also vielleicht *DIR*) zu helfen


Großschreiben wird als schreien empfunden, benutze den HTML-TAG strong.

4. 





> Prinzipiell wird diese Seite wohl *nie fertig werden*, da ich immer neues hinzufüge aber noch fehlt es teilweise noch an alles Ecken und Kanten...


M. M. n. wirkt das so, als ob du auch nicht das Ziel hättest mit deiner Homepage fertig zu werden. Ich würde es weg lassen,. 

5. 





> Noch besser wäre es, wenn du mir eine E-Mail mit dem gefundenen Fehler schreibst. Diese schickst du dann bitte an [E-Mail wird hier hoffentlich von mir eingefügt].


Dann füge sie doch einmal ein  Im Impressum steht sie doch schon...

6. 





> Naja ich weiß, das Impressum ist eigentlich das, für die meisten Besucher, langweiligste an einer Website.


 Naja, für Rechtsanwälte nicht...

7. 





> Disclaimer rechtliche Hinweise...


Die Datenschutzerklärung muss, bzw. sollte, im Impressum auf eine externe Seite verlinkt werden.


----------



## ofhouse (28. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



Speeedymauss schrieb:


> verkleinern ja, png muss es aber bleiben weils teilweise transparent ist


 
Die Transparenz hat aber keine Relevanz auf deiner Seite, weil der Hintergrund einfarbig ist.
Also leg in Gimp oder was du für Bildbearbeitung hast einfach eine neue Ebene hinter das Bild mit der gleichen Farbe, wie der Hintergrund von deiner Seite ist und speicher alles als jpg.

Das Problem ist dabei einfach die Dateigröße. Dein Header-png ist fast 11mb groß, das ist einfach zu viel.
Eine normale Webseite sollte als absolutes Maximum etwa 3mb insgesamt haben, deswegen sollte man versuchen, Bilder möglichst platzsparend zu speichern.


----------



## hann96 (28. August 2014)

Und beschäftige dich auch mal mit CSS-Sprites. CSS-Spites sind Grafiken, die in einer größeren Grafik mehrere benötigte kleine Grafiken enthalten. Nun ist nur noch eine einzige Anfrage an den Server erforderlich. 

Bereite also z. B. mit GIMP Grafiken vor und setze sie alle in ein Bild ein. Nun blendest du mit CSS nur einen Teil der Grafik auf deiner Website ein.

Das würde z. B. so gehen: 

```
background: transparent url(img/sprite.png) no-repeat 0px -100px;
```

Google einfach mal dannach 

--------------------

EDIT///
Hier mal ein Bsp.:


----------



## Speeedymauss (28. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



hannover96xdneu schrieb:


> Nun mal meine Vorschläge und Tipps
> 
> Zu deiner mobilen Seite:
> Wie schon gesagt, gib deiner Website eine bestimmte Breite, normalerweise nimmt man 768px, 960px, 1080px.
> ...



Wie funktioniert dieser @media dinger?
Ich les mir dazu nachher mal was durch aber vlt haste ja schon ne kurze erklärung für mich 

An dem Wichtung und so arbeite ich sowieso noch, das ist nicht final, aber gute idee mit der grafik 




hannover96xdneu schrieb:


> Sorry für den Doppelpost
> 
> Ich habe ein paar Inhaltliche Verbesserungs-Vorschläge:
> 
> ...



Ich wollte eigentlich meine Seite recht locker aufbauen, daher diese ausdrucksweise. Ich weiß noch nicht ob die seite so mega seriös rüber kommen soll...

zu 7. sine Datenschutzerklärung habe ich noch gar nicht, da muss ich erstmal gucken was da rein muss....



ofhouse schrieb:


> Die Transparenz hat aber keine Relevanz auf deiner Seite, weil der Hintergrund einfarbig ist.
> Also leg in Gimp oder was du für Bildbearbeitung hast einfach eine neue Ebene hinter das Bild mit der gleichen Farbe, wie der Hintergrund von deiner Seite ist und speicher alles als jpg.
> 
> Das Problem ist dabei einfach die Dateigröße. Dein Header-png ist fast 11mb groß, das ist einfach zu viel.
> Eine normale Webseite sollte als absolutes Maximum etwa 3mb insgesamt haben, deswegen sollte man versuchen, Bilder möglichst platzsparend zu speichern.



Hast ja recht, da die farbgebung noch nicht 100% feststeht, möchte ich mir noch die freiheit halten alles verändern zu können. Das Bild momentan ist sowieso nur das "versuchsbild" und wird noch bearbeitet, dass ich das so nicht verwenden kann ist mir schon klar...



hannover96xdneu schrieb:


> Und beschäftige dich auch mal mit CSS-Sprites. CSS-Spites sind Grafiken, die in einer größeren Grafik mehrere benötigte kleine Grafiken enthalten. Nun ist nur noch eine einzige Anfrage an den Server erforderlich.
> 
> Bereite also z. B. mit GIMP Grafiken vor und setze sie alle in ein Bild ein. Nun blendest du mit CSS nur einen Teil der Grafik auf deiner Website ein.
> 
> ...



Wenn ich die Zeit finde werd ichs mir angucken


----------



## Festplatte (31. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



ofhouse schrieb:


> Die Transparenz hat aber keine Relevanz auf deiner Seite, weil der Hintergrund einfarbig ist.
> Also leg in Gimp oder was du für Bildbearbeitung hast einfach eine neue Ebene hinter das Bild mit der gleichen Farbe, wie der Hintergrund von deiner Seite ist und speicher alles als jpg.
> 
> Das Problem ist dabei einfach die Dateigröße. Dein Header-png ist fast 11mb groß, das ist einfach zu viel.
> Eine normale Webseite sollte als absolutes Maximum etwa 3mb insgesamt haben, deswegen sollte man versuchen, Bilder möglichst platzsparend zu speichern.



Es spricht aber auch nichts dagegen, Bilder und Design-Elemente als PNG zu speichern. Dafür ist es ja schließlich auch mit entwickelt worden. Einmal TinyPNG rüber und schwupps, ist das Teil gleich um ein vielfaches kleiner.


----------



## Rho (31. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Natürlich spricht etwas dagegen PNG für alles zu verwenden. Bei Bildern bzw. Fotos wird mit JPEG einfach eine deutlich bessere Kompressionsrate erreicht. Das Foto in seinem Header als PNG zu speichern verursacht ein bei weitem größere Datei und das ohne irgendeinen Vorteil zu bieten. 11 MB für eine Header-Grafik ist einfach absurd viel.

*Update:*
Abgesehen davon ist die Größe des Bildes völlig überdimensioniert und auch die Auflösung mit 350 DPI viel zu hoch fürs Web.


----------



## Festplatte (31. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



Rho schrieb:


> 11 MB für eine Header-Grafik ist einfach absurd viel.
> 
> *Update:*
> Abgesehen davon ist die Größe des Bildes völlig überdimensioniert und auch die Auflösung mit 350 DPI viel zu hoch fürs Web.



In dem Teil muss ich dir zustimmen. Wieso überhaupt 350 DPI?


----------



## Rho (31. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Soll das heißen, beim Rest stimmst du nicht zu?


----------



## DOcean (31. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

zu Bildformaten:
http://webstandard.kulando.de/post/...-png-finde-das-ideale-dateiformat-fuer-bilder


----------



## Speeedymauss (31. August 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Ich habe ja schon geschrieben, dass das Bild nur zum austesten ist! Das wird noch ausgetauscht, da braucht ihr jetzt keine Angst haben, ich kann halt nur nicht immer alles auf einmal machen

ich kann momentan nur leider nicht so viel machen, da ich krank im bett liege und mich auf nix konzentrieren kann


----------



## Speeedymauss (10. September 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Sry für Doppelpost aber es gibt nen Update!

Ich habe mal wieder etwas an der Seite gebastelt.

- Das Header Bild ist jetzt zwar noch png aber "nur" noch 3MB groß, ich weiß noch zu groß, wenn die Farben final sind wirds auch noch zum jpeg und dann passts auch 
- Ich habe die Seiten "Tagebücher" und "Quickie" angelegt
         - da wird aber komischerweise nicht das komplette CSS übernommen wenn ichs auf dem Webspace hochlade und öffne (erkennt man u.a. daran das die Nav mit den Projekten orange sein sollte)
- Ich habe eine BSP Startseite von einem Tagebuch schonmal angefangen
- vlt noch was was ich vergessen habe, müsst ihr mal gucken

Seite: http://andrea-taube.de

Feedback und Fehlersuche von euch sind wie immer sehr erwünscht!


----------



## hann96 (10. September 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Kein wunder, dass die Nav nicht orange angezeigt wird. Es wird nirgendswo angegeben (ich finde jedenfalls nichts), dass die Nav orange sein soll?!
Evtl. hast du nicht alle Dateien hochgeladen!?


----------



## Speeedymauss (10. September 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

ja komisch...lokal gehts komischerweise...

ich hab die css dateien extra 2x hochgeladen weil mir der fehler aufgefallen ist...ich müsst sons morgen nochmal alles neu hochladen und überprüfen...


----------



## hann96 (10. September 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Ein Verbesserungsvorschlag:

Wenn du schnon recht fit bist in CSS / HTML dann gucke dir mal Bootstrap an:
→ Bootstrap (Englisch) 
→ Bootstrap (deutsch)

Damit kannst du ganz einfach Navigationen / Tabellen / ... erstellen. Ich baue gerade eine Website, eigentlich komplett aus Bootstrap. Der CSS Code ist 182 Zeilen (minus abstände zwischen CSS Deklarationen) lang.

Guck dir mal auf der Seite an:
→ Glyphicons
→ Navigationen
→ Seiten-Nummerierung

Natürlich gibt es noch viel mehr.


----------



## Speeedymauss (11. September 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Ich kapier nur Bootstrap nicht so richtig was das ist und die das funktioniert...ist das ne anwendung oder was ist das?

ich habe übrigends meine CSS Dateien jetzt nochmal alle neu Hochgeladen und jetzt klappt es auch mit dem Layout , warum auch immer


----------



## ofhouse (11. September 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Bootstrap ist ein Framework.

Du kannst dir das wie eine Bibliothek vorstellen, die verschiedene Komponenten bietet.
Das ist ein häufiger Anwendungsfall im Softwarebereich, statt jedes bisschen selbst zu programmieren, greift man auf auf eine vorgefertigte Lösung (Bibliotheken) zurück, die aber meist mehr bieten, als man braucht.

Der Vorteil ist dabei das dein Code gestreamlined wird, also bestimmten Standards folgt, die von den Machern der Bibliothek vorgegeben werden.
So hat z.B. der HTML-Code für eine Navigation dann immer den gleichen Aufbau.

Bootstrap beschränkt sich aber nicht nur auf HTML, sondern bietet auch CSS (bzw. intern setzt es auf LESS) und gibt dadurch das Design für bestimmte Dinge wie Buttons, Formulare etc. erstmal vor.
Ist so ähnlich wie bei den Betriebssystemen, wo Buttons und Formulare ja auch immer ein bisschen anders aussehen, obwohl der Unterbau der gleiche ist.
Wichtig ist hierbei, dass Bootstrap mit einem variablen Grid-System (Also ein System, was deine Webseite in vertikale Abschnitte unterteilt) arbeitet, was ziemlich einfach ein responsive Design ermöglicht.

Bootstrap an sich ist ziemlich beliebt bei Programmieren, weil man ohne große Ahnung von Design Webseiten eine gute und übersichtliche Struktur verleihen kann.
Im Design-Bereich spielt es allerdings nur eine Nebenrolle, weil Bootstrap-Designs durch ihre gleiche Struktur schnell beliebig wirken können und bei stärkeren Anpassungen der Aufwand so groß ist, dass eine Custom-Lösung einfacher ist.

Ausprobieren würde ich es auf jeden Fall mal, allerdings würd ich das dann mit nem reinen Editor wie Brackets machen.
Ich persönlich finde die JS-Plugins sehr brauchbar, den HTML & CSS Teil setze ich nicht aktiv ein, allerdings kann man sich da ein paar gute Tricks abschauen für bestimmte Effekte.


----------



## Speeedymauss (14. September 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

So, ich habe mal wieder etwas weiter gemacht:
Ich habe mal zwei Tagebuchtage angelegt, damit man da mal sieht wie es aussehen soll (ich bin da noch nicht ganz von überzeugt was ich da gebaut habe) und ich habe mal die Tutorial Seite angelegt und schonmal die grobe Strucktur vorbereitet.

Würd mich erstmal interessieren was ihr dazu sagt, bevor ich noch mehr davon mache

Website ist wieder aufm Webserver hochgeladen


----------



## BenRo (14. September 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Das Headerbild wurde bestimmt schon angesprochen, ist ziemlich riesig (Dateigröße). Ich hab mit meiner DSL 50.000-Leitung kein Problem, aber wer langsames Internet hat wird sich drüber ärgern.
Wenn man über das Headerbild hovert wird ja per CSS die opacity geändert. Verstehe nicht, wozu (bzw. macht auf mich den Eindruck, hui ich kann jetzt klicken und Dinge passieren, dies ist aber nicht der Fall), bei den anderen Bildern dagegen macht es ja Sinn, da sie zu deinen einzelnen Projekten linken. Edit: Dein Logo sollte am Besten auf die Startseite linken.

Design, Schriftarten, Farben usw. gefallen mir sehr gut. Auch die beiden Menüebenen mit blau und orange finde ich sehr schön. Ist natürlich wie immer Geschmackssache.
Deine Fotos sind toll. Finde auch die abgerundeten Ecken gut.

Sowas: HIER => finde ich nicht so gut.
1. Gibt es wunderschöne Pfeile, die man nutzen könnte: →
2. Sollte man nie, nie, nie das Wort "HIER" verlinken:
Don't say "click here"; not everyone will be clicking - Quality Web Tips
Why Your Links Should Never Say "Click Here" | Smashing Magazine

Das "mehr verraten" hast du ja orange und unterstrichen gemacht. Orange ist kein Problem, aber die Unterstreichung würde ich weglassen. Die meisten Leute assoziieren im Internet mit "Unterstreichung" einen Link, auch wenn diese auf deiner Seite ja blau und nicht-unterstrichen sind. Siehe auch hier:
10 Usability Crimes You Really Shouldn't Commit

Ich persönlich mag in deutschen Texten auch deutsche Anführungszeichen: „also so“ und nicht  "also so"

Das viele Links noch nicht gehen (die angesprochenen HIER => auf der Startseite z. B.) wirst du selber wissen. Es gibt noch ein paar Rechtschreibfehler (z. B. heißt es Coming soon und nicht Comming soon)


----------



## Speeedymauss (14. September 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



BenRo schrieb:


> Das Headerbild wurde bestimmt schon angesprochen, ist ziemlich riesig (Dateigröße). Ich hab mit meiner DSL 50.000-Leitung kein Problem, aber wer langsames Internet hat wird sich drüber ärgern.
> Wenn man über das Headerbild hovert wird ja per CSS die opacity geändert. Verstehe nicht, wozu (bzw. macht auf mich den Eindruck, hui ich kann jetzt klicken und Dinge passieren, dies ist aber nicht der Fall), bei den anderen Bildern dagegen macht es ja Sinn, da sie zu deinen einzelnen Projekten linken. Edit: Dein Logo sollte am Besten auf die Startseite linken.
> 
> Design, Schriftarten, Farben usw. gefallen mir sehr gut. Auch die beiden Menüebenen mit blau und orange finde ich sehr schön. Ist natürlich wie immer Geschmackssache.
> ...


 
Danke fürs Feedback!

Ja Header wird noch überarbeitet, der hover effekt ist nicht beabsichtigt, das liegt wohl an ner fehlerhaften css regel, das wird noch behoben!

Die Pfeile werden noch ausgetaucht, genauso wie so manch anderer text oder buttons, da sind halt noch einige dabei, einfach nur dass ich sehe wie es dann später aussieht wenn die richtigen sachen da sind.

Die Links mit den Tipps werd ich mir auf jeden fall nachher mal angucken!

Gut an so kleinigkeiten kann ich immer noch was machen wie z.b. bei den Anführungszeichen, da werd ich dann noch was ändern 

Ja rechtschreibung klar, bevor die Seite "richtig" online geht wird nochmal alles ganz genau überprüft, von daher ist das alles noch im Rahmen.
Das die meisten Links noch nicht gehen ist klar, da die meisten Seiten noch nicht angelegt sind oder ich noch nicht überall die neuen pfade angegeben habe, das mach ich später dann auch parallel zur Rechtschreibkorrektur, da überprüfe ich auch alle Links


----------



## DarkMo (14. September 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

wegen dan anführungszeichen: ich hasse dieses ,,'' gelumbe (wie auch immer man das überhaupt mit ner tastatur schreibt xD). also auch hier eindeutig geschmackssache ^^


----------



## BenRo (14. September 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

99 unten und 66 oben sind halt die korrekten deutschen Anführungszeichen. Den Doppelstrich oben nehmen wir doch nur, weil man auf Schreibmaschinen keine zwei Tasten für die Anführungszeichen verbaut hat.
Anführungszeichen


----------



## hann96 (14. September 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



> Ja Header wird noch überarbeitet, der hover effekt ist nicht beabsichtigt, das liegt wohl an ner fehlerhaften css regel, das wird noch behoben!



Der hover wird durch diese CSS-Regel verursacht:


```
img:hover {
opacity: 0.79;
transition: all 500ms;
}
```


----------



## DarkMo (14. September 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

ben: in der schreibschrift (stift + papier) mach ich das auch, aber da siehts auch ordentlich aus ^^ alle versuche das "maschinell" nachzuahmen enden (mMn) aber eben in einem optischen desaster *duck* die "" wirken einfach geordnet und stellen eben auch einen einheitlichen stil dar. bei der "oben unten" variante ist meist der untere einleitende teil schräg und der obere abschließende eher gerade/senkrecht - das wirkt einfach albern xD


----------



## BenRo (14. September 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Wenn die unten schräg sind, müssen die oben auch schräg sein. Dann siehst auch wieder hübsch aus. Wenn dem nicht so ist, ist die Schriftart defekt, oder es gibt einen anderen Fehler.

Hier mal ein paar Beispiele diverser Anführungszeichen unterschiedlicher Schönheit (geht nur um die Zeichen, der Inhalt der Seite ist für mein Beispiel irrelevant):
Das vermeintliche Anführungszeichenproblem


----------



## DarkMo (15. September 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

was du alles kennst ^^ so sieht das jedenfalls auch schön aus, da haste recht ^^ fragt sich nur: wie bekomm ich das ohne entities hin? >< also als seiten ersteller mag das ggf noch gehen, aber in normalen dahingeschriebenen texten... ich bin ja scho zu faul für groß/kleinschreibung  auch wenn ichs eigentlich kann. hab mir heut auf arbeit handschriftlich was notiert - und da das auch schon so gemacht oO mistige gewohnheit ><


----------



## BenRo (15. September 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Um an beliebigen Stellen UTF-8 Zeichen einzugeben:
Unicode input - Wikipedia, the free encyclopedia

Falls das aus irgendwelchen Gründen nicht klappt kann man die Zeichen zur Not ja auch aus einer Zeichentabelle oder einem Textverarbeitungsprogramm kopieren.

Um in einem Textverarbeitungsprogramm (Office) Anführungszeichen einzugeben:
Sollte automatisch die richtigen nehmen, sonst hat es einen Fehler.

Wenn man keinen Bock drauf hat und sich sagt "Kann der Server nicht einfach meine bereits mit falschen Anführungszeichen getippten Texte korrigieren?"
php - replace english quotes to german quotes - Stack Overflow

Wenn man Entities benutzen muss oder möchte:
„ bzw. ”

Edit: Und wir werden mal wieder kolossal Off Topic. Ein Glück, dass noch niemand angefangen hat, über die Unterschiede zwischen Minus, Bindestrich, Halbgeviertstrich und Geviertstrich zu diskutieren...


----------



## Ahab (15. September 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Das Blau der Links ist vielleicht etwas dunkel, ein etwas hellerer Ton würde die Lesbarkeit stark verbessern! Das gleiche gilt für die hovers in der Nav-Bar. Dunkelgrau auf Dunkelblau liest sich nicht so toll.


----------



## DOcean (15. September 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

gerade durch Zufall gesehen...


----------



## hann96 (15. September 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Für die Mobile Ansicht gibt es auch noch Verbesserungsbedarf 

Wenn der Viewport zu klein wird, dann wird der article Container mit der Klasse "haupttextartikel" sozusagen eingequetscht.
Grund ist diese CSS-Regel:

```
article.haupttextartikel {
   margin-left: 10%;
   margin-right: 10%;
}
```

Ich habe schon einmal Media Query's erwähnt.
Wenn man noch einen Abstand, nach Links und Rechts, haben will, aber ab einem Viewport ab z. B. 720px ihn entfernen will, dann schreibt man:

```
@media (max-width: 720px) {

   article.haupttextartikel { margin-left: 0px;margin-right: 0px; }
      
}
```

Kleiner Tipp noch am Rande, du benutzt sehr oft den HTML TAG:

```
<article></article>
```
Den sollte man (meines Wissens nach) nur einmal verwenden. Packe einfach diesen Tag an den Anfang hin, wo der eigentliche Inhalt der Website erst anfängt. 

Der Zweck dieses TAG's ist den Inhalt, von dem Rest der Website, z. B. der Navigation, zu trennen.


----------



## BenRo (15. September 2014)

Was du zu article sagst ist völlig falsch. Ich nehme an du verwechselst den Tag mit <main>?


----------



## hann96 (16. September 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Ok, sorry habe ich verwechselt...


----------



## Speeedymauss (16. September 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



Ahab schrieb:


> Das Blau der Links ist vielleicht etwas dunkel, ein  etwas hellerer Ton würde die Lesbarkeit stark verbessern! Das gleiche  gilt für die hovers in der Nav-Bar. Dunkelgrau auf Dunkelblau liest sich  nicht so toll.


 
ok ich werd mal gucken was sich da machen lässt




DOcean schrieb:


> gerade durch Zufall gesehen...


 
ja  das liegt halt daran, dass ich mometan erstmal auf 1080p optimiere, die  kleineren auflösungen gehe ich aber auch noch durch...erstmal wollt ich  den groben aufbau schaffen...




hannover96xdneu schrieb:


> Für die Mobile Ansicht gibt es auch noch Verbesserungsbedarf
> 
> Wenn der Viewport zu klein wird, dann wird der article Container mit der Klasse "haupttextartikel" sozusagen eingequetscht.
> Grund ist diese CSS-Regel:
> ...


 
Jop, das ist richtig, ich werds wohl auch so umsetzen wie dus vorgeschlagen hast.

mit dem <article> liegst du aber falsch, aber das hast du ja selber schon gemerkt 




Danke aber an alle fürs drüber gucken!!! Find ich super dass ihr mich da so unterstützt


----------



## DeSquirrel (27. September 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Was mich abschreckt an der Seite ist das ich einfach von so viel Text erschlagen werde das ich so schnell wie möglich ALT+F4 drücken möchte.

Zudem find ich den Banner total überladen mit Schrift. Und das Bild find ich jetzt auch nicht optimal ausgewählt. 
Was mich desweiteren stört sind die ganzen Farben. Versuchs ein wenig einheitlicher. Wichtiges kannste ja dick markieren oder in einer gesonderten Farbe!


----------



## Speeedymauss (27. September 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Wie soll ich mich da groß kurz halten. Sollte wer auf die Seite kommen, wer keine Ahnung davon hat der wird dann keinen Plan haben worums geht...

Banner = Header? Sind da 3 Worte zu viel?
Das Bild ist nach wie vor Plazuhalter, habe ich hier aber glaube ich auch schon tausend mal erzählt...

Ich verwende vier farben: 3 Grautöne und nen Blau (vereinzelt vlt noch mal nen orange...) - soll ich auf schwarz-weiß gehen oder wie? ich finde es schon schwierig mit den 4 Farben zu arbeiten...


----------



## rtf (27. September 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



DeSquirrel schrieb:


> Was mich abschreckt an der Seite ist das ich einfach von so viel Text erschlagen werde das ich so schnell wie möglich ALT+F4 drücken möchte.



Ich schätze da bist du einer von wenigen. Der Text ist gut gewählt und auch sehr leserlich gestaltet und nicht in eins runtergerattert. Der Textabstand ist ordentlich ausgewählt.



DeSquirrel schrieb:


> Zudem find ich den Banner total überladen mit Schrift. Und das Bild find ich jetzt auch nicht optimal ausgewählt.



Das einzige suboptimale am Banner(=Header) ist, das er soviel Platz verschwendet. der könnte ruhig ein bisschen kleiner sein. Der nimmt bei mir (Full-HD) die halbe Seite ein, das sollte du vielleicht einmal ändern speedy 
Andere haben im Header noch zusätzlich eine Sufu drin, hier ist es nur eine Überchrift, damit man weiß wo man sich überhaupt befindet und ein Bild das einem schon leicht mitteilt, worum es sich bei der Seite handelt. 



DeSquirrel schrieb:


> Was mich desweiteren stört sind die ganzen Farben. Versuchs ein wenig einheitlicher. Wichtiges kannste ja dick markieren oder in einer gesonderten Farbe!


Das und soviel anderes ist Gott sei Dank alles Geschmacksache, Speedy hat aber Gestaltungstechnisch viel richtig gemacht.

Noch ein kleiner Tipp: setz auf deiner Seite nicht zu große Bilder mit einer Auflösung > Full-HD. selbst das ist eigentlich schon zu groß und Leute mit schlechten Leitungen werden es dir danken, ich z.B.


----------



## Speeedymauss (27. September 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

für mich gehts am montag erstmal eine woche nach prag, dann hab ich zwei wochen frei, da kann ich dann auch wieder gut was weiter machen


----------



## Speeedymauss (5. Oktober 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

So ich bin wieder daheim und sitze vor meiner Seite.

Da ist ja noch viel zu tun.

Jetzt wo ich aber auch schon recht weit bin und weil ich auch nochmal andere Sachen in Betracht ziehen möchte, wollt ich mir mal nebenbei nen CMS angucken. Ich denke mal Wordpress wird da das beste sein oder?
Da gibts ja schon mega viele Plugins etc., kann mir wer so kurze eckdaten und so mal dazu geben? Im Internet gibts zwar alles aber ich würd mich über kurze gebündelte infos freuen


----------



## hann96 (5. Oktober 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



Speeedymauss schrieb:


> Ich denke mal Wordpress wird da das beste sein oder?


Ich bin in dem Gebiet zwar kein Experte, aber das kommt auf das Anwendungsgebiet an, wenn du ein sehr komplexes Projekt umsetzen willst, dann greift man meistens zu Joomla, bei kleineren Projekten greift man meistens zu WordPress.

Hier mal ein Link:
Open Source CMS-Vergleich / CMS Systeme / Lösungen - visual4 Stuttgart


----------



## Speeedymauss (5. Oktober 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

ich werds mir mal in ruhe angucken.

Mal was anderes:

Ich möchte meine Bilder im Tagebuch so anordnen:



			Dieser Inhalt steht nur eingeloggten Mitgliedern zur Verfügung.
        



Das ganze natürlich etwas gerader.
Die Bilder sollen erstmal kleiner auf der Website sein und dann per hover-effekt größer werden wenn die maus halt drauf ist.
Wie setzte ichd as am besten um? ich habe schon einiges probiert. Grundidee war, dass ich jedes zweite bild mit float auf die rechte seite schiebe, da ja um jedes bild + beschreibung nen div ist. ich bin aber momentan dran gescheitert. Hat da wer ne schnelle lösung parat liegen?


----------



## hann96 (5. Oktober 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



Speeedymauss schrieb:


> Hat da wer ne schnelle lösung parat liegen?


Schnell? Ja, Bootstrap. Ich schätze mal, dass die Galerie responsive sein soll!? Dann ist Bootstrap ideal dafür.

1. Wenn es_ sehr schnell_ gehen soll, dann kopiere den code von dieser Seite und passe ihn an.

2. Wenn du Lust und Zeit hast, dann gucke dir das Grid System genauer an:
CSS · Bootstrap


EDIT:
Um den Code anzupassen (siehe Punkt 1.) musst du dich natürlich trotzdem ein bisschen einlesen


----------



## BenRo (6. Oktober 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Ich würds so machen (also beispielhaft, musst du natürlich auf deinen Code anpassen):


```
<section class="bildergalerie">
   <article><img src="bild1.png" alt="Mein Bild Nummer Eins"><p>Hier steht was</p></article>
   <article><img src="bild2.png" alt="Mein Bild Nummer Zwei"><p>Hier steht was</p></article>
   <article><img src="bild3.png" alt="Mein Bild Nummer Drei"><p>Hier steht was</p></article>
   <article><img src="bild4.png" alt="Mein Bild Nummer Vier"><p>Hier steht was</p></article>
</section>

CSS:
.bildergalerie article {
   /* Float für alle Bilder, nicht nur für jedes zweite */
   float: left;
}

.bildergalerie article:nth-child(2n) {
   /* Damit die Elemente nicht so aneinander kleben, gibts einen Abstand von ein paar Pixeln zwischen ihnen */
   margin-left:20px;
}

.bildergalerie {
 /* Hier die Breite per width: festlegen - dies sorgt für den Umbruch */
}

.bildergalerie article p {
   /* Falls Zentrierung der Bildunterschrift gewünscht */
   text-align: center;
}

.bildergalerie article img:hover {
/* Hier dann die Größe umsetzen */
}
```


----------



## Speeedymauss (6. Oktober 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Danke für eure Lösungsvorschläge!

Ich habs jetzt erstmal mit ner CSS Tabelle probiert...

Ich lade gerade mal die aktuelle Version auf den Webserver hoch!

Änderungen (die die ich aus dem Kopf weiß):
- Headerbild getauscht (noch nicht auf allen Seiten übernommen, aber z.B. auf der Homepage schon)
- kleinere Änderungen der Schriftart (z.B. auf der Home eine Unterstreichung weggemacht)
- Email auf Home eingefügt
- Layout der Tagebuchseiten
- Projektinterne Nav auf Tagebuchseiten in zwei Zeilen verschoben für kl. Bildschirme
- "Kommentar" im Impressum gelöscht
- "Coming Soon" richtig geschrieben 
- Tool Seite grob angelegt
- ka bestimmt noch mehr!

Feedback pls 

EDIT: Ich habe gerade ne ganz angenehme Lösung für die Galerie gefunden.
Aktuell ist die Seite noch ohne angepasstest CSS und nur mit den Beispielbildern, aber man kann schon mal sehen, wie die Galerie später wirkt, wenn man auf ein Bild klickt. Könnt ja auch mal sagen, was ihr von dieser Lösung haltet


----------



## rtf (6. Oktober 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

kannst du den Link bitte in dein ersten Beitrag mit aufnehmen, bin jetzt schon 5 minuten am Suchen und find den Link einfach nicht wieder
Signatur würde auch reichen.


----------



## Speeedymauss (6. Oktober 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Startbeitrag ist Editiert!

Nochmal hier: Speeedy's Mods Homepage


----------



## rtf (6. Oktober 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Danke!

hmm.... hab mir die Seite jetzt nicht direkt angeschaut, aber was mir sofort ins Auge sticht, ist die schwer zu lesende verlinkung bei dem hellen Grau. Beim hover ist es gut leserlich, aber vorher musste ich ziemlich nah an meinem Monitor ran. Selbe Problem auf deine Startseite beim Menu(grau auf blau), hier ist es beim Hover ziemlich schwer zu lesen. Das beansprucht die Augen doch ziemlich und der Leser soll sich ja gut fühlen. 

Das muss natürlich nicht bei allen sein, ich spreche hier nur von meinen eigenen Einstellungen, Kontrast, Monitorentfernung, etc.....

Du hast in deinem Code auch ein verirrtes geschlossenen </p> Tag

Wenn du deine Seite responsive haben willst, solltest du auch hier auf die Textgröße achten. Irgendwann macht es einfach keinen Sinn mehr die Schrift immer automatsich verkleinern zu lassen.

Sonst ist die Seite schon ansehnlich


----------



## BenRo (7. Oktober 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Die Galerie mit lightbox umzusetzen ist ne gute Idee, sieht gut aus. 

Ich hab mir mal deine CSS-Klassennamen angeschaut, die sind leider nicht immer gut gewählt. Beispielsweise hast du Klassen namens "hellgrau", oder "wenigabstandnachoben". Sobald du dein Design mal änderst und z. B. das Farbschema wechselst musst du entweder damit leben, dass hellgrau plötzlich z. B. orange ist, oder du musst die Klassennamen umbenennen.

Sinnvoller wäre es, Klassen nach Funktion zu vergeben, also z. B. "galerie", "casecon", "tools", "tutorial" (ist ja teilweise bei dir bereits der Fall). Dann kannst du im CSS sagen: Für alle Überschriften von tools und tutorial gilt X:

```
.tools h1, .tutorial h1 {
   /* X */
}
```
Auch wenn du beispielsweise jedes zweite Projekt auf der Seite mit anderer Hintergrundfarbe haben möchtest, ist das hier nicht gut:

```
<article class="dunkel">...</article>
<article class="hell">...</article>
<article class="dunkel">...</article>
```
Besser ist meiner Meinung nach:

```
<section class="projekte">
   <article>...</article>
   <article>...</article>
   <article>...</article>
</section>

CSS:
.projekte article:nth-of-type(2n) {
   background-color: ...
}
```
Das :nth-of-type(2n) bedeutet "wende diese CSS-Regel auf jedes zweite Element an", in dem Beispiel auf jedes zweite article-Element in einem Element der Klasse .projekte

Dadurch trennst du das Design stärker vom Inhalt und kannst es, wenn es dir nicht mehr gefällt, leichter auswechseln. Der HTML-Code wird sogar etwas kürzer.

Mir ist noch aufgefallen, dass die rechten und linken Abstände im Bereich Tools und Galerie fehlen, die du sonst auf den anderen Seiten hast.


----------



## Speeedymauss (7. Oktober 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



rtf schrieb:


> hmm.... hab mir die Seite jetzt nicht direkt angeschaut, aber was mir sofort ins Auge sticht, ist die schwer zu lesende verlinkung bei dem hellen Grau. Beim hover ist es gut leserlich, aber vorher musste ich ziemlich nah an meinem Monitor ran. Selbe Problem auf deine Startseite beim Menu(grau auf blau), hier ist es beim Hover ziemlich schwer zu lesen. Das beansprucht die Augen doch ziemlich und der Leser soll sich ja gut fühlen.
> 
> Das muss natürlich nicht bei allen sein, ich spreche hier nur von meinen eigenen Einstellungen, Kontrast, Monitorentfernung, etc.....



Wo sind denn noch graue Links? Normalerweise müssten die, bis auf die NAvigation, orange werden beim hovern...



rtf schrieb:


> Du hast in deinem Code auch ein verirrtes geschlossenen </p> Tag


auf welcher seite und weißt du noch ungefär wo? dann kann ich mir das suchen ersparen



rtf schrieb:


> Wenn du deine Seite responsive haben willst, solltest du auch hier auf die Textgröße achten. Irgendwann macht es einfach keinen Sinn mehr die Schrift immer automatsich verkleinern zu lassen.
> 
> Sonst ist die Seite schon ansehnlich


 
Das war die geschichte mit den @media regeln oder? - da guck ich später noch genauer rein...

Dankö






BenRo schrieb:


> Auch wenn du beispielsweise jedes zweite  Projekt auf der Seite mit anderer Hintergrundfarbe haben möchtest, ist  das hier nicht gut:
> 
> ```
> <article class="dunkel">...</section>
> ...


Da hast du recht, nen <article> sollte man auch mir </article> schließen und nicht mit </section> 


BenRo schrieb:


> Besser ist meiner Meinung nach:
> 
> ```
> <section class="projekte">
> ...



Ich werd mal gucken, dass ich das noch ändere


----------



## BenRo (7. Oktober 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Ja, beim schließenden Tag hab ich mich vertippt. Ist nun korrigiert - und ja nur ein Beispiel.


----------



## Speeedymauss (7. Oktober 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Ich hab nochmal nen anderes Problem:

Manche Bilder sind bei mir auf der Seite um 90° gedreht. Auch wenn ich die im Windoof Explorer richtig rum drehe, sodass die Bilder richtig sind wennn man sie öffnet, werden sie auf der Seite immer noch verdreht angezeigt, woran liegt das?


----------



## rtf (7. Oktober 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

ne ich meinte z.B. deine Email-verlinkung auf der ersten Seite. Blauer Text mit hellen grauem Hintergrund, wenn nicht gehovert wird. 
Andere war deine Menuleiste, wenn man hovert dort ist blau auf grau. Beides für mich schwer zu lesen.

Ja damit meine ich die media-queries. 

Firefox zeigt dir den an wenn du dir den Quelltext einmal anschaust. Dort wird er rot gekennzeichnet. (Startseite Zeile 129)

Zu deinem neuen Problem mit den gedrehten Bilder. 
Ich schätze mal das die Bilder noch gecached sind und der Browser sich dort bediehnt. Löschen diesen bitte einmal und versuch es noch einmal.

Andere Frage: Was meinst du mit ich dreh die im Explorer?


----------



## Speeedymauss (7. Oktober 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Aso ok stimmt, das könnte unter Umständen wirklich schlecht lesbar sein -> werd ich noch bearbeiten (wenn ich dran denke)

OK danke!

Es liegt bei den Bildern scheinbar nicht am Chache, ich habe das Tagebuch gerade mal komplett auf den Webserver geladen und mit FF geöffnet (bearbeitet habe ich mit opera), manche bilder sind immer noch hochkant...

Drehen: Rechtsklick auf Bild und dann "Nach Links" oder "Nach Rechts" drehen...

EDIT: Das </p> Element gehört aber zu dem <p> aus zeile 110, da ist auch kein anderes schließendes zwischen, oder ich bin blind


----------



## hann96 (29. Oktober 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Darf man mal fragen, was der Stand der Dinge ist?  
Arbeitest du noch an der Website?


----------



## Speeedymauss (29. Oktober 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

ich arbeite noch dran, ich hatte aber bis gestern klausurphase, da hatte ich besseres zu tun ^^

ich werd mich jetzt wieder intensiver dran setzen


----------



## Speeedymauss (14. Dezember 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Man glaubt es kaum doch jetzt schaffe cih es endlich mich wieder dran zu setzten 

jetzt wo bald die Weihnachtsferien in Reichweite sind hat man dann doch wieder etwas Zeit *jäy*

Ich hab mir die Seite jetzt mal wieder angeguckt, und ich bin nich mehr ganz s davon begeistert, was ich da i der vergangenheit gemacht habe:

Das dunke Layout gefällt mir nicht mehr so gut, ich hätte da lieber was helles. Momentan hab ich nen hellen Blauton mit weiß, de sagt mit abe auch noch nicht 100%ig zu...ich hätt gern nen helles blau oder vlt nen orange für den hintergrung..kennt da wer hex codes für angenehme töne?

Ich hab die aktuelle Version mal auf den Webspace hochgeladen, da könnt ihr dann nochmal drüber gucken.

Ich werd jetzt erstmal guckn wie ich das mit den Bildern mache, dann kümmer ich mich um de Tagebuch Einträge die noch fehlen


MfG


----------



## hann96 (14. Dezember 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Ahhh, ich dachte schon dieser Thread könnte eingemottet werden. 

Ich weiß zwar nicht mehr ganz exakt, wie die alte Website aussah, aber das Blau sieht nicht schlecht aus , aber eben auch nicht perfekt. 

 @Farben 
HTML Farbencodes
Dort kannst du eine schöne Farbe aussuchen und den Code kopieren.

Ein paar m. M. n. coole Farben + mögliche  Ansätze von Kombinationen:
#d2a524 (dürfte ein Orange sein, bin mir nicht sicher, da ich mobil schreibe)
#FFF (weiß)
-----
#111 (ganz dunkel)
#019533 (grün)


----------



## DOcean (15. Dezember 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

cool das du noch weiter machst 

vlt wenn du das dunkle blau als Hintergrund hast, die Schrift in weiß?


----------



## hann96 (15. Dezember 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Ich habe mal ein bisschen  was geändert, wie es m. M. n. gut aussieht.
(Siehe Anhang)


----------



## Speeedymauss (15. Dezember 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



hannover96xdneu schrieb:


> Ahhh, ich dachte schon dieser Thread könnte eingemottet werden.
> 
> Ich weiß zwar nicht mehr ganz exakt, wie die alte Website aussah, aber das Blau sieht nicht schlecht aus , aber eben auch nicht perfekt.
> 
> ...



Ja es ist noch nicht das richtige...bei den Farben arbeite ich mit   Kuler, das macht ja quasi das selbe...ich find nur einfach nicht die  richtige...





DOcean schrieb:


> cool das du noch weiter machst
> 
> vlt wenn du das dunkle blau als Hintergrund hast, die Schrift in weiß?



ich wollte aber evt erstmal nicht mehr so ins dunkle gehen, es sei denn, ich finde da noch was schönes...





hannover96xdneu schrieb:


> Ich habe mal ein bisschen  was geändert, wie es m. M. n. gut aussieht.
> (Siehe Anhang)



hm...das macht auch was her, eig auch nicht schlecht...hm...wieder so viele möglichkeiten 

---


Ich freue mich auch echt, dass ihr hier noch mitlest! Ich dachte schon ich bin jetzt hier alleine wo so lange nichts mehr kam 


EDIT:

Ich verzweifle momentan auch etwas an Lightbox...mal geht es und mal nicht...

Hier mein Quellcode (ist so auch aufm Webspace, nur dass da noch das <img> und <a> von lightbox eine gemeinsame klasse haben)



Spoiler





```
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Sockel A: Alte Schätze kommen zurück</title>
        <link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
        
        <link rel="stylesheet" type="text/css" href="../../layout.css" />
        <link rel="stylesheet" type="text/css" href="../tagebuchtag.css" />
        
        <script src=":../../js/jquery-1.11.0.min.js"></script>
        <script src="../../js/lightbox.min.js"></script>
        <link href="../../css/lightbox.css" rel="stylesheet" />
        <!--
        <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>
        -->
        
    </head>

    <body>
        
        <header class="kopfzeile">
                <!--<img src="pictures/logo.png" alt="Logo" class="logo" />
                <img src="pictures/computer.png" alt="Fertiger Casemod" class="headerbild" />-->
                <img src="../../pictures/headerbild.jpg" alt="Blick auf zwei Grafikkarten" class="headerbild" />
                <h1>Speeedy's <br /> Mods</h1>
                <h2>Sockel A - Tag 1</h2>
            
        </header>
        
        <nav>
            <ul>
                <li><a href="../../index.html" title="Homepage">Homepage</a></li>
                <li><a href="../../tagebuecher.html" title="Tagebücher">Tagebücher</a></li>
                <li><a href="../../quickie.html" title="Quickie">Quickie</a></li>
                <li><a href="../../galerie.html" title="Galerie">Galerie</a></li>
                <li><a href="../../tutorials.html" title="Tutorials">Tutorials</a></li>
                <li><a href="../../tools.html" title="Tools">Tools</a></li>
            </ul>
        </nav>
        <nav class="allgemeineprojektnavigation">
            <ul>
                <li><a href="startseite.html" title="Sockel A: Alte Schätze">Sockel A: Alte Schätze</a></li>
                <li><a href="" title="Projekt B">Projekt B</a></li>
                <li><a href="" title="Projekt C">Projekt C</a></li>
                <li><a href="" title="Projekt D">Projekt D</a></li>
                <li><a href="" title="Projekt E">Projekt E</a></li>
                <li><a href="" title="Projekt F">Projekt F</a></li>
            </ul>
        </nav>
        <nav class="projektinternenavigation">
            <ul>
                <li><a href="startseite.html" title="Startseite">Startseite</a></li>
                <li><a href="tag1.html" title="Tag 1">Tag 1</a></li>
                <li><a href="tag2.html" title="Tag 2">Tag 2</a></li>
                <li><a href="tag3.html" title="Tag 3">Tag 3</a></li>
                <li><a href="tag4.html" title="Tag 4">Tag 4</a></li>
                <li><a href="tag5.html" title="Tag 5">Tag 5</a></li>
                <li><a href="tag6.html" title="Tag 6">Tag 6</a></li>
                <li><a href="finalebilder.html" title="Finale Bilder">Finale Bilder</a></li>
            </ul>
        </nav>
        
        
        <div class="inhalt">
            <div>
                <section class="haupttext">
                    <h3>Projekt: Sockel A: Alte Schätze kommen zurück</h3>
                    <h4>Tag 1</h4>
                    <div class="image-row tabellencontainer">
                    <div class="image-set tabellenzeile">
                        <div class="tabellenzelle">
                            <a href="pictures/update1bild1.jpg" data-lightbox="sockelatag1" data-title="Mainboardverpackung"><img src="pictures/update1bild1.JPG" alt="Mainboardverpackung" /></a>
                            <p>Zunächst gibts erstmal nur die neue Hardware zu betrachten inklusive Probelauf:<br />
                               Hier ist das Mainboard bzw die Verpackung</p>
                        </div>
                        <div class="tabellenzelle">
                            <a href="pictures/update1bild2.JPG" data-lightbox="sockelatag1" data-title="CPU Verpackung"><img src="pictures/update1bild2.JPG" alt="CPU Verpackung" /></a>
                            <p> Hier ist die noch ungeöffnete CPU Verpackung <br /> Einmal von vorne...</p>
                        </div>
                    </div><!--Ende Zeile-->
                    <div class="tabellenzeile">
                        <div class="tabellenzelle">
                            <a class="bildertag1" href="pictures/update1bild3.jpg" data-lightbox="sockelatag1" data-title="CPU Verpackug"><img class="bildertag1" src="pictures/update1bild3.JPG" alt="CPU Verpackung" /></a>
                            <p>...und einmal von Hinten</p>
                        </div>
                        <div class="tabellenzelle">
                            <a class="bildertag1" href="pictures/update1bild4.jpg" data-lightbox="sockelatag1" data-title="CPU"><img class="bildertag1" src="pictures/update1bild4.JPG" alt="CPU" /></a>
                            <p>Natürlich gibts die CPU dann auch ohne Papier</p>
                        </div>
                    </div><!--Ende Zeile-->
                    <div class="tabellenzeile">
                        <div class="tabellenzelle">
                            <a class="bildertag1" href="pictures/update1bild5.jpg" data-lightbox="sockelatag1" data-title="Mainboard"><img class="bildertag1" src="pictures/update1bild5.JPG" alt="Mainboard" /></a>
                            <p>und auch das Mainboard mal ohne Verpackung...</p>
                        </div>
                        <div class="tabellenzelle">
                            <a class="bildertag1" href="pictures/update1bild6.jpg" data-lightbox="sockelatag1" data-title="Mainboard mit CPU und RAM"><img class="bildertag1" src="pictures/update1bild6.JPG" alt="Mainboard mit CPU und RAM" /></a>
                            <p>...mit eingebauter CPU und Ram und...</p>
                        </div>
                    </div><!--Ende Zeile-->
                    <div class="tabellenzeile">
                        <div class="tabellenzelle">
                            <a class="bildertag1" href="pictures/update1bild7.jpg" data-lightbox="sockelatag1" data-title="Aufgebautes Testsystem"><img class="bildertag1" src="pictures/update1bild7.JPG" alt="Aufgebautes Testsystem" /></a>
                            <p>...als laufendes Testsystem</p>
                        </div>
                    </div><!--Ende Zeile-->
                        </div><!--Emde Tabelle-->
                    </section>
            </div>
            <div class="hintergrund">
                <div class="projektinternelinks">
                    <ul>
                        <li><a href="!335372!tagebuecher/335372-projekt-happy-birthday-technik-fuers-wohnzimmer-zusatz-bilder-bei-dunkelheit.html" title="PCGHX Eintrag" target="_blank" >PCGHX Eintrag =></a></li>
                        <li><a href="startseite.html" title="Startseite">Hier gehts los =></a></li>
                        <li><a href="finalebilder.html" title="Finale Bilder">Finale Bilder =></a></li>
                        
                    </ul>
                    <ul>
                        <li><a href="tag2.html" title="Nächster Tag">Nächster Tag =></a></li>
                    </ul>
                </div>
            </div>
        </div><!-- Ende Div Inhalt-->
        <div class="fusszeilenbereich">
            <footer id="fusszeile">
            <p>
            Copyright © 2014 Felix Burs. All rights reserved.
            </p>
            <p>
            <a href="../../impressum.html" title="Hier gehts zum Impressum">Impressum</a>
            </p>
            </footer>
        </div> <!-- Ende Div fusszeile-->
    </body>
</html>
```





EDIT EDIT:
Ich habe mal das Schwarz-weiß Design mit auf der Website aufgenommen (zumindest für die Startseite), ihr könnt da jetzt hin und her klicken


----------



## hann96 (15. Dezember 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Ich habe gerade leider keine Zeit mir den Code anzugucken, der HTML-Validator hat aber einen Fehler gefunden: 


> Error Line 135, Column 8: No p element in scope but a p end tag seen.
> </p>


Das bezieht sich auf die index.html


----------



## Speeedymauss (16. Dezember 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

der Tag gehört aber zu dem aus Zeile 116, dem fehlt nämlich sonst ein schließendes


----------



## Speeedymauss (17. Dezember 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

*Update:*

So ich hab mal wieder nen bischen was gemacht:

Zum einen hab ich mein HTML und mein CSS etwas sortiert und mal in eine, meiner Meinung nach, sinnvolle Ordnung gebracht.
Aber ich habe bisher nur die index angepasst. Bei den anderen Seiten fehlt deswegen noch die ganzen neuen CSS links und sind daher ohne css...sobald das aber fertig ist, werd ich alle anderen anpassen 

Dann habe ich mich mal an meine Navigation gewagt 
was ich gemacht habe, könnt ihr auf dem Reiter Tagebücher erkennen.

Es ist noch nicht so ausgereift, da bin ich etwas auf eure Unterstützung angewiesen!

Geht es eigentlich, dass man die Navigation iwie Zentral umstellen kann, falls eine neue Seite dazu kommt? und das man nicht alle html dateien ändern mussP

Ansonsten ist nichts passiert, habe nur an der index.html und an den stylesheets gearbeitet.

Freu mich auf eure Rückmeldungen!


----------



## hann96 (17. Dezember 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



Speeedymauss schrieb:


> Geht es eigentlich, dass man die Navigation iwie Zentral umstellen kann, falls eine neue Seite dazu kommt? und das man nicht alle html dateien ändern muss!



Ja das geht.

Ich habe  vor X Seiten die PHP include Funktion erwähnt, bin gerade nur zu faul die rauszusuchen. 

Für PHP muss aber erstmal eine Voraussetzungen  gegeben sein:
Ein Webserver. Mann kann den auf Windows z. B. mit Apache simulieren. XAMPP wäre ein Programm, was unter anderem Apache mitbringt.
Tipp: schaue dir zuerst ein möglichst neues Tutorial zu XAMPP an, es kann viele Probleme geben, wenn man nicht weiß was man da macht. Spreche aus Erfahrung .

Dann, wenn alles konfiguriert ist (ich empfehle dich mit Vhosts mit XAMPP zu beschäftigen, lohnt sich ), erstellst du in deinem Htdocs Ordner eine Datei namens test.php.
Dort schreibst du die HTML Grundstruktur rein und einen Ausgabe Befehl mit PHP:


```
<!DOCTYPE html>
<html>
<head>
	<title>Test PHP</title>
</head>
<body>

<!-- (Kommentar) PHP Code -->
<?php
echo "Gibt der Webserver dies im Browser aus, dann hast du alles richtig gemacht :daumen:";
?>

</body>
</html>
```

Wenn alles geklappt hat, dann kannst du mal die include Funktion testen. Erstelle eine neue html Datei im gleichem Verzeichnis und nenne sie z. B. include.html. Wichtig ist, dass du dort irgendetwas reinschreibst, z. B. das Lorem ipsum.
Nun ersetzt du den Echo-Befehl durch die include Anweisung in deiner test.php:


```
<?php
include "include.html";
?>
```

Ist das getan, dann sollte er dir theoretisch in der test.php den Lorem ipsum Text ausgeben!?


EDIT:
Die Grundlagen von PHP sollte man natürlich auch erstmal erlernen:
PHP: PHP-Handbuch - Manual - Deutsch
 bzw.
PHP: PHP Manual - Manual - Englisch


----------



## Speeedymauss (17. Dezember 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

ouha wieder was neues lernen...naja hab ja bald ferien...


----------



## Rho (18. Dezember 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



hannover96xdneu schrieb:


> Ja das geht.
> 
> Ich habe  vor X Seiten die PHP include Funktion erwähnt



Geht auch ohne PHP.



hannover96xdneu schrieb:


> Ein Webserver. Mann kann den auf Windows z. B. mit Apache simulieren.


Da wird nichts _simuliert_. Was da läuft, _ist_ ein HTTP-Server.


----------



## Speeedymauss (18. Dezember 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



Rho schrieb:


> Geht auch ohne PHP.



Wie gehts denn ohne?


----------



## hann96 (18. Dezember 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



Speeedymauss schrieb:


> Da wird nichts simuliert. Was da läuft, ist ein HTTP-Server.


Sry, habe mich falsch ausgedrückt.




Speeedymauss schrieb:


> Wie gehts denn ohne?


Mir ist bekannt:
1. Frames. Benutzt man aber nicht mehr.
2. Iframes, ist aber ebenfalls keine elegante Methode.
3. In Google Chrome gibt es eine neue Methode, die es ermöglicht mit HTML über den <link> (glaube es ging so) TAG eine externe Datei einzubinden. Habe aber vergessen wie die Methode heißt. Dies ist aber m. M. n. nicht zu empfehlen, da es so weit ich weiß nur in Chrome funktioniert, bzw. dort muss man es auch erstmal in den Einstellungen aktivieren.
4.  Mit Ajax den Inhalt einer externen Datei laden. Stichwort: .load()

Sicherlich gibt es noch mehr Varianten, die mir aber nicht bekannt sind.

Gruß


----------



## Rho (18. Dezember 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



Speeedymauss schrieb:


> Wie gehts denn ohne?


Möglichkeiten gibt es viele. Falls du unabhängig vom verwendeten Websever sein willst, wäre JavaScript eine Option.



hannover96xdneu schrieb:


> Sicherlich gibt es noch mehr Varianten, die mir aber nicht bekannt sind.


Neben PHP gibg es noch diverse andere (schönere) Sprachen mit denen man das gleiche server-seitig umsetzen könnte.
Ein anderer Ansatz wäre, das ganze, wie du schon erwähnt hast, client-seitig per JavaScript umzusetzen. 
Eine dritte Option wäre, die Seiten lokal auf dem eigenen PC zu generieren und dann die statischen HTML-Seiten auf den Server zu laden.


----------



## Speeedymauss (29. Dezember 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Kennt sich hier wer gut mit einem CMS aus?


----------



## hann96 (29. Dezember 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



Speeedymauss schrieb:


> Kennt sich hier wer gut mit einem CMS aus?


Mit welchem denn? Oder sogar selbst Programmiert?


----------



## Speeedymauss (29. Dezember 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Generell irgendeins...
ich gucke mir gerade Joomla an...


----------



## TroaX (30. Dezember 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



Speeedymauss schrieb:


> Generell irgendeins...
> ich gucke mir gerade Joomla an...


Gerade was Templating angeht finde ich CSP (ClanSphere Projekt) sehr gut. Es hat vor allem viele Module drin, die man nutzen kann. Artikel, News, Forum, Kommentare. Downloaddatenbank etc etc. Ist zwar eigentlich für Clans und Gamingportale gedacht. Aber es lässt sich auch an andere Anforderungen durch die Tamplates leicht anpassen.

Ein weiterer Vorteil gerade für Anfänger ist, das dieses CMS überwiegend prozedural geschrieben und die Struktur logisch aufgebaut ist. Wenn du also PHP zumindest ein bisschen kannst, dann kannst du schon im CMS selbst sehr viel anpassen, ändern oder hinzufügen, ohne erst in den Klassen und Objekten zu versinken. Das ganze wird auch noch weitergepflegt. :: ClanSphere :: Free OpenSource Clan CMS :: - News - Aktuell

Und wenn du das Template anpassen willst, nimmst du einfach deine Startseite und ersetzt die Inhalte durch Smarty-Platzhalter von CSP und passt die Links an. Alle diese Infos findest du im Wiki von CSP.

Wenn du aber eher auf ein CMS verzichten möchtest, dann lässt sich das ganze auch relativ leicht über PHP realisieren. PHP-Dateien werden ohne PHP-Code behandelt wie HTML-Dateien. An der Stelle, wo du deinen Inhalt hinhaben möchtest schreibst du nur folgenden Code:

```
<?php
  if(isset($_GET['p'])) {
    if(file_exists('page/'.$_GET['p'].'.html')) {
      $pagefile = 'page/'.$_GET['p'].'.html';  
    } else {
      $pagefile = 'page/home.html';
    }
  } else {
    $pagefile = 'page/home.html';
  }
  include $pagefile;
?>
```

Danach erstellst du einen Ordner mit dem Namen "page" und da pachst du alle Inhalte der Seite als HTML hinnein. Aber bitte ohne das HTML Grundgerüst. Sondern nur die Inhalte! Zugreifen auf die Seiten kannst du per URL so: http://www._domain.de_/*index.php?p=gewünschte_unterseite* - So musste dann deine Links auch gestalten.

Fast vergessen: Du musst natürlich dann deine *index.html* in *index.php* umbenennen 
Im Ordner Page in die Datei home.html kommt dann natürlich der Inhalt deiner Startseite.


----------



## keinnick (30. Dezember 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



Speeedymauss schrieb:


> Generell irgendeins...
> ich gucke mir gerade Joomla an...



Pro-Tipp: Installiere schnellstmöglich jedes Sicherheitsupdate das Dir in die Finger kommt. Ansonsten ist Dir Dein (jedes bekannte) CMS schneller gehackt als Dir lieb ist.


----------



## hann96 (30. Dezember 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



TroaX schrieb:


> Wenn du aber eher auf ein CMS verzichten möchtest, dann lässt sich das ganze auch relativ leicht über PHP realisieren. PHP-Dateien werden ohne PHP-Code behandelt wie HTML-Dateien. An der Stelle, wo du deinen Inhalt hinhaben möchtest schreibst du nur folgenden Code:
> 
> ```
> <?php
> ...



Einen Nachteil hat diese Methode aber (leider):
Sie ist nicht Suchmaschinen freundlich. (Stichwort: SEO).


----------



## TroaX (30. Dezember 2014)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



hannover96xdneu schrieb:


> Einen Nachteil hat diese Methode aber (leider):
> Sie ist nicht Suchmaschinen freundlich. (Stichwort: SEO).


Richtig. Dafür müsste man etwas mehr machen und es wäre komplexer. Aber wenn er nur eine Website anzeigen möchte (keine Interaktion der Leser/Nutzer), ist es die einfachste Variante. Es bietet vor allem keine Angriffsfläche. Besser wäre es natürlich mit Mod_Rewrite, das Unterseiten die Metainformationen einzeln mit neuen Werten befüllen, das es die richtigen Fehlerseiten bei falscher URL gibt, eine Sitemap existiert und das die Indexierung auf die richtigen Ordner angepasst werden uvm. Aber das kann er ja nach und nach machen, wenn er sich weiter in die Thematik PHP und SEO eingearbeitet hat (wenn er es dann will).

Ein gutes CMS kümmert sich natürlich um solche Sachen. Da muss er dann aber sehen, in wie weit er sich in die Materie einarbeiten will.


----------



## Speeedymauss (2. März 2015)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Da mir momentan die Zeit fehlt wieder richtig am Code zu arbeiten, habe ich gerade mal nen Programm zur gestaltung ausprobiert (Website X5).
Habe jetzt mal 2h dran rum gebastelt und das ist bisher das Ergebnis:
Speeedys Mods

Würd mich über Rückmeldungen freuen


----------



## DOcean (3. März 2015)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

für irgendwas wird da flash verwendet, wenns geht drauf verzichten


----------



## Ap0ll0XT (3. März 2015)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



Speeedymauss schrieb:


> Da mir momentan die Zeit fehlt wieder richtig am Code zu arbeiten, habe ich gerade mal nen Programm zur gestaltung ausprobiert (Website X5).
> Habe jetzt mal 2h dran rum gebastelt und das ist bisher das Ergebnis:
> Speeedys Mods
> 
> Würd mich über Rückmeldungen freuen


Wow ich bin beeindruckt, wie sauber der Code mit X5 mittlerweile geworden ist. Mittlerweile ist das schon etwas besser als der Magix Web Designer. War mal anders herum 

Zur Seite:
Ich würde eine moderne Schrift nehmen. Diese Schrift passt da nicht hinein. Den Text der Navigationsbuttons würde ich etwas größer und in Fettschrift machen. Die Navigation unten am Seiten Fuß passt da leider auch nicht so richtig rein. Die würde ich etwas umgestalten. Am besten in heller Schrift in den schwarzen Balken unten 

Aber ansonsten sieht es vom Aufbau und der Farbgebung her super aus.


----------



## Speeedymauss (3. März 2015)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

ja hab ich mir auch gedacht als ich mir den Code angeguckt habe.

Ja ich habe ne ganz interessante Schriftart, ich muss aber noch mal gucken wie ich ne Webfont in das Program einbinde...ansonsten muss ich die manuell hinzufügen.

Das mit der Navigation oben werd ich berücksichtigen, die die am Seitenende ist kommt  vlt noch ganz weg, ich habe die da nur erstmal einfach gelassen...

Ich gucke mal ob ich mich heute abend nochmal dran setze und dann hier bescheid geben sobald sich was geändert hat


----------



## ofhouse (5. März 2015)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



Ap0ll0XT schrieb:


> Wow ich bin beeindruckt, wie sauber der Code mit X5 mittlerweile geworden ist.


Wenn ich das sehe, bin ich immer wieder froh, dass ich meinen Code selbst schreibe, allein in der Zeit, die man da für's Fehler-Finden braucht, kann man die Seite von Hand 3 Mal neu schreiben 

Zum Design würde ich zu den angesprochenen Punkten noch Folgendes hinzufügen:

Innenabstand (Padding) bei den einzelnen Text-Boxen würde ich hinzufügen, der Text sieht sonst so in die Box "gezwängt" aus.
Versuch mal überall die gleichen vertikalen Abstände hinzubekommen (Überschrift <-> Text, Text <-> Ende der Box), das gibt dem Betrachter eine gewisse Konsistenz.
Ein Absatz ist nicht einfach eine neue Zeile, versuch nach einem Absatz mal ein bisschen mehr vertikalen Abstand zum nächsten Absatz zu lassen, das macht den Textfluss angenehmer.


----------



## Speeedymauss (28. April 2016)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Hi,
ich grabe das Thema hier mal aus den Tiefen des Forums aus, ist doch schon länger her als erwartet, dass ich an der Seite was gemacht habe...

Inzwischen ist das Projekt "Website" mal wieder etwas aktueller. Da ich momentan etwas Ablenkung brauche hab ich mich da mal wieder vor gesetzt und diesmal möchte ich das ganze auch zuende bringen 
In der Zwischenzeit hat sich aber das, was ich online bringen möchte etwas geändert und auch mein Geschmack was das Design angeht.

wer will kann sich da ja mal durchklicken. Hab schon einiges angelegt, manches in Ansätzen und Teile fehlen auch noch komplett.

Wie schon damals bin ich offen für Feedback und Anregungen 
VG


----------



## lowskill (29. April 2016)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Falls es ******* aussehen und kaum Inhalt haben soll, ist es gut geworden.


----------



## fotoman (29. April 2016)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Auf welche Browserauflösung isst die Seite denn ausgelegt? Ich finde spontan keine Fensterbreite (auf meinem 27"-Monitor surfe ich nicht im Vollbild), auf dem schon nur die Startseite oder die "Speedy's mods" vernünftig angezeigt/skaliert wird.

Die vermutlich als "Hauptmenü" gedachte Bildergallerie unterhalb des ständig sichtbaren (und damit quadratmeter Browserplatz verschwendenden) eigenen Bild ist zwar irgendwie "responsive", das war es aber auch schon. Je nach Browserbreits steht der Text mal rechts neben einem Bild, mal halb oder ganz darunter (und zwar niemals gleichmäßig bei allen Bildern).

Bei den Mods geht es dann unter "Projekt-Übersicht" so weiter. Bei "falscher" Browserbreite gibt es keine klare Abtrennung zwischen den Bildunterschriften, womit ich eher "Happy Birthday - Technik fürs Sockel A:" lese.

Bei DIY Media ist die Schrift innerhalb der Bild total ausgefranst.

Und wehe, der Browser ist zu schmal (ca. 1140 Pixel, Handyuser erwartest Du vermitlich keine, Läute mit schlechten Laptopdisplays wohl auch nicht), dann springt Dein Name unter Dein Bild und es werden unglaubliche 700 Pixel in der Höhe für Bild+Name verschwendet (beim 1366x768 Pixel Display also fast die gesamte Höhe).

Das ganze ist vom Layout her für mich eher im Stil der 90er und nur für jemand mit FullHD Display inkl. Maus mit gutem Scrollrad zu nutzen. Dass der Fließtext dann ohne strukturierte Abschnitte daher kommt, macht ihn auch mit richtigem Inhalt nicht besser lesbar.


----------



## Speeedymauss (30. April 2016)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



lowskill schrieb:


> Falls es ******* aussehen und kaum Inhalt haben soll, ist es gut geworden.



konstruktive Kritik üben wir nochmal ok? Die Aussage hilft null...

Eine Seite die in der Anfangsphase steht kann ja wohl kaum direkt perfekt und komplett mit Inhalt gefüllt sein, schon mal drüber nachgedacht, dass es eine Phase zwischen "Fertig" und "Anfang" gibt?




fotoman schrieb:


> Auf welche Browserauflösung isst die Seite denn ausgelegt? Ich finde spontan keine Fensterbreite (auf meinem 27"-Monitor surfe ich nicht im Vollbild), auf dem schon nur die Startseite oder die "Speedy's mods" vernünftig angezeigt/skaliert wird.
> 
> Die vermutlich als "Hauptmenü" gedachte Bildergallerie unterhalb des ständig sichtbaren (und damit quadratmeter Browserplatz verschwendenden) eigenen Bild ist zwar irgendwie "responsive", das war es aber auch schon. Je nach Browserbreits steht der Text mal rechts neben einem Bild, mal halb oder ganz darunter (und zwar niemals gleichmäßig bei allen Bildern).
> 
> ...



Die ganze Seite ist aktuell komplett dynamisch, ich versuche es auch weitestgehend so zu halten. Ich selber gucke aktuell auf 4k und FHD und auf meinem Handy mobil.

Der Head-Bereich inkl Navigationsleiste ist momentan improvisiert um überhaupt durch die Seite zu kommen, dass der noch nicht funktioniert ist mir durchaus bewusst...

Die Abtrennung zu den Bildunterschriften kann es nicht geben, weil es keine Bildunterschriften sind. Ich bin mir da noch nicht so einig wie ich das mit dem Text handhaben soll.

Die Ausgefranste Schrift liegt an der Schriftart, das ist normal, evt werden die Bilder da auch noch ausgetauscht...

Wie gesagt, ich bin noch laaaange nicht fertig, das ist ein erster Entwurf. Deswegen hätt ich ja auch gern Feedback zum verbessern...


----------



## lowskill (30. April 2016)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Sorry, aber die Seite ist einfach von vorne bis hinten Mist.

Aber wenn du es "konstruktiv" willst, hier, bitte:

Baue auf einem CSS-Framework auf anstatt das Rad komplett neu zu erfinden. Das gibt dir schon mal etwas Orientierung und reichlich Unterstützung bei der Arbeit. Noch dazu kannst du von dem vorhanden Code vielleicht etwas lernen.


----------



## fotoman (30. April 2016)

*AW: [Website entsteht] Website wÃ¼nscht sich Feedback und Hilfe*



Speeedymauss schrieb:


> Die Abtrennung zu den Bildunterschriften  kann es nicht geben, weil es keine Bildunterschriften sind. Ich bin mir  da noch nicht so einig wie ich das mit dem Text handhaben  soll.


Der Text wirkte halt als Unterschrift. Und da wirkt sowas  wie
Using Modern CSS to Build a Responsive Image Grid
(das  letzte Beispiel mit flexbox und justify-content property) halt viel  angenehmer, weil man den Text immer an einer festen stelle hat und er  vor allem vom Nachbartext abgetrennt ist.



Speeedymauss schrieb:


> Die Ausgefranste Schrift liegt an der  Schriftart, das ist normal, evt werden die Bilder da auch noch  ausgetauscht...


Ohne das "evt" mag das ja noch (aus Deiner Sicht)  verständlich sein, ohne für mich nicht, falls die Seite vernünftig  aussehen soll. Die Schrift in den Bildern wirkte auf mich eher falsch  skaliert wie "so gewollt".



lowskill schrieb:


> Noch dazu kannst du von dem vorhanden Code vielleicht etwas lernen.


Ich lerne gerade aus fertigen Frameworks so gut wie nichts zu den Grundlagen. Die sind, wenn sie etwas taugen, zwangsweise so aufgebläht, dass man als Anfänger im Bereich HTML5/CSS schon genug damit zu tun hat, so ein Framework korrekt anzuwenden.


----------



## lowskill (30. April 2016)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Man kann sich aus einem guten Framework bzw. aus gutem Code allgemein vieles abschauen. Vielleicht nicht unbedingt als blutiger Anfänger, aber spätestens wenn man etwas fortgeschritten in der Thematik ist. Spätestens wenn man anfängt selbst Anpassungen vorzunehmen. Das Ergebniss ist in jedem Fall besser als der aktuelle Stand.

Das ist ja auch nicht seine erste Seite. Leider kann ich keine Entwicklung seit letztem Jahr feststellen. Deshalb wäre so ein Framrwork vielleicht mal ein brauchbarer Ansatz um etwas halbwegs Vorzeigbares auf die Beine zu stellen.


----------



## Speeedymauss (1. Mai 2016)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

in der Zeit die zwischen den Seiten liegt habe ich auch keinerlei HTML/CSS mehr gemacht, ich steig gerade wieder ein weil ich etwas mehr zeit habe...

ich werd mir sowas aber mal angucken


----------



## Speeedymauss (14. September 2016)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Update: DIYMedia.de Homepage


----------



## fotoman (15. September 2016)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Auch auf die Gefahr hin, dass doch als Antwort wieder "die Seite ist halt noch im Aufbau" kommt, hier mal ein paar Gedanken dazu:

laut aktueller C't wird wohl die Startseite schon bei Googles Indizierung durchfallen und damit von kaum jemand gefunden werden. Die Ladezeiten sind viel zu lang. Nicht nur für "altmodische" 96-120 DPI Anzeigen. 6*600kb für ein paar Menübildchen, bei dem allenfalls ein 600 DPI Device etwas von der FullHD Auflösung hat.

Dass (vermutlich) nicht nur mich solche riesigen Header stören, mit denen die Seite auf Monitoren und WQHD schlicht unzumutbar wird (ich will als Besucher den Content und/oder weiterführende Links sehen und nicht einen Header) hatte ich ja schonmal. Gleiches gilt für die animierrten Titelbilder auf den Unrterseiten (die Animationen sind ein Grund, warum ich Adblocker nutze, sowas lenkt mich ohne Grund vom Seiteninhalt ab).

Dass dieses animierte Bid geschlagene 6,2 MB groß it, macht es selbst mit Flatrate nicht besser. Bei Desktopbesuchern ist es mit der mit der genutzte Anzeigegröße (750x422 Pixel) viel zu groß. Das Bild wird um Faktor 6,5 verkleinert dargestellt, wäre also rechnerisch geeignet für 624 DPI-Monitore, sowas erreicht noch nicht einmal der JDI LCD prototype ansatzweise (der kommt auf 509 DPI, 4K-Monitore in Laptops schaffen ca. 280 DPI. Und für mobile Nutzung in Europa sind das unmögliche Datenmengen (>10 MB an Bildern, bis man eine Unterseite ansehen kann). Mit VDSL 200 und einem anderen Provider für eure Seite mag das anders aussehen, ich habe nur 32 MBt Download und kann auf beiden Seiten dem Download Sekundenlang zusehen.

Da fällt es dann auch nicht mehr weiter auf, dass die "related projects" (warum Englisch, wenn der Rest alles deutsch ist) telweise leer sind. 

Ist die Seite das Projekt EINES Users "...wird von mir nicht übernommen" oder doch einer ganzen Truppe "Finde uns auf ...". Gemäß "Über" (wieder mit leeren Bild-Templates, dann blende die grauen Platzhalter halt aus) seit ihr zu zweit.

"Kontakt Subheading"...interessante Überschrift

Warum sollte jemand für den Kontakt neben dem vollständigen Namen auch noch die Telefonnummer angeben (die ihr selber verweigert, da gibt es noch nicht einmal eine vollständige Anbieterkennung mit Adresse, mag aber auch rechtlich nicht nötig sein)? Wollt ihr wirklich zurück rufen oder doch nur Daten sammlen?

Und was sollen bei den Kontakten die Social Media Icons, wenn sie nicht verlinkt sind?

Insg. scheint mir das eine Video, das ich mir mal angesehen habe, "durchdachter" zu sein wie der Aufbau der Webseite. Dort würde ich in Sachen Inhalt weniger riesige, animierte Bilder erwarten wie die Beschreibung der Projekte, brauchbare Baupläne/Skizzen (die muss man sich derzeit nach den Videos selber zeichnen), Teilelisten, aber z.B. auch Angaben zu nutzbaren Lasten.

Was ist eine DSLR/M, kleine Camcorder, was (bei Remotehead) ein mittlerer Camcorder? Meine DSLR wiegt schon ohne Objektiv fast das doppelte einer Sony FDR-AX100E und kommt mit passendem Objektiv schnell an das Gewicht einer Sony FDR-AX1 heran. Eine D3300+35/1.8 DX wiegt natürlich weniger.


----------



## Speeedymauss (16. September 2016)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*



fotoman schrieb:


> Auch auf die Gefahr hin, dass doch als Antwort wieder "die Seite ist halt noch im Aufbau" kommt, hier mal ein paar Gedanken dazu:
> 
> laut aktueller C't wird wohl die Startseite schon bei Googles Indizierung durchfallen und damit von kaum jemand gefunden werden. Die Ladezeiten sind viel zu lang. Nicht nur für "altmodische" 96-120 DPI Anzeigen. 6*600kb für ein paar Menübildchen, bei dem allenfalls ein 600 DPI Device etwas von der FullHD Auflösung hat.


Zu dem was in der C't steht kann ich nichts sagen, da ich hier selber keine habe. Ich habe mich auch noch gar nicht mit der Indizierung beschäftigt (noch soll die Seite ja auch nicht gefunden werden können). Das Mit den Ladezeiten ist mit selber noch nicht so krass aufgefallen, aber gut ich hänge auch an 120Mbit...die Bilder werden dann noch durch kleinere ausgetauscht.



fotoman schrieb:


> Dass (vermutlich) nicht nur mich solche riesigen Header stören, mit denen die Seite auf Monitoren und WQHD schlicht unzumutbar wird (ich will als Besucher den Content und/oder weiterführende Links sehen und nicht einen Header) hatte ich ja schonmal. Gleiches gilt für die animierrten Titelbilder auf den Unrterseiten (die Animationen sind ein Grund, warum ich Adblocker nutze, sowas lenkt mich ohne Grund vom Seiteninhalt ab).


Die Headerbilder sind momentan schlichtweg zufällig ausgewählte Platzhalter. Wahrscheinlich wirst du beim durchgucken festgestellt haben dass noch diverse Bilder fehlen...einfach weil ich mich noch mal mit meinem Kumpel treffen muss um noch viele zu machen..u.a. auch Bilder für den Header. Ich selber verwende hier nen 4K Monitor und weiß wie grottig die Bilder bei der Auflösung aussehen. Ich brauchte halt nur mal was damit ich besser einschätzen kann wie das später aussieht...,



fotoman schrieb:


> Dass dieses animierte Bid geschlagene 6,2 MB groß it, macht es selbst mit Flatrate nicht besser. Bei Desktopbesuchern ist es mit der mit der genutzte Anzeigegröße (750x422 Pixel) viel zu groß. Das Bild wird um Faktor 6,5 verkleinert dargestellt, wäre also rechnerisch geeignet für 624 DPI-Monitore, sowas erreicht noch nicht einmal der JDI LCD prototype ansatzweise (der kommt auf 509 DPI, 4K-Monitore in Laptops schaffen ca. 280 DPI. Und für mobile Nutzung in Europa sind das unmögliche Datenmengen (>10 MB an Bildern, bis man eine Unterseite ansehen kann). Mit VDSL 200 und einem anderen Provider für eure Seite mag das anders aussehen, ich habe nur 32 MBt Download und kann auf beiden Seiten dem Download Sekundenlang zusehen.


wie bereits oben gesagt, ich werd die Bilder noch mal alle verkleinern. Wie kommst du eigt so schnell auf die ganzen Zahlen? Gibt es da ein Tool für, was die Bilder analysiert? Oder ist das alles selbst ausgerechnet?
Was wäre denn so die maximal Größe für ein Bild?



fotoman schrieb:


> Da fällt es dann auch nicht mehr weiter auf, dass die "related projects" (warum Englisch, wenn der Rest alles deutsch ist) telweise leer sind.


Da merkt man,  dass ich einen englischen Rohling verwende, habe die Sektion noch nicht überall übersetzt bzw. überhaupt bearbeitet weil ich die Projekte die da hin kommen noch nicht online hatte...



fotoman schrieb:


> Ist die Seite das Projekt EINES Users "...wird von mir nicht übernommen" oder doch einer ganzen Truppe "Finde uns auf ...". Gemäß "Über" (wieder mit leeren Bild-Templates, dann blende die grauen Platzhalter halt aus) seit ihr zu zweit.


Die Passage ist ein Copy&Paste Fehler, ja wir sind zwei...



fotoman schrieb:


> "Kontakt Subheading"...interessante Überschrift
> 
> Warum sollte jemand für den Kontakt neben dem vollständigen Namen auch noch die Telefonnummer angeben (die ihr selber verweigert, da gibt es noch nicht einmal eine vollständige Anbieterkennung mit Adresse, mag aber auch rechtlich nicht nötig sein)? Wollt ihr wirklich zurück rufen oder doch nur Daten sammlen?
> 
> Und was sollen bei den Kontakten die Social Media Icons, wenn sie nicht verlinkt sind?


Die Kontakt Seite habe ich (fast) noch gar nicht angefasst..daher sieht sie so aus wie sie aussieht...impressum ist auch nicht drauf obwohl es rechtlich pflicht ist...ich weiß...



fotoman schrieb:


> Insg. scheint mir das eine Video, das ich mir mal angesehen habe, "durchdachter" zu sein wie der Aufbau der Webseite. Dort würde ich in Sachen Inhalt weniger riesige, animierte Bilder erwarten wie die Beschreibung der Projekte, brauchbare Baupläne/Skizzen (die muss man sich derzeit nach den Videos selber zeichnen), Teilelisten, aber z.B. auch Angaben zu nutzbaren Lasten.


Ja die Videos sollten auch besser sein als die aktuelle Seite...wir sind beides Amateurfilmer und Hobbybastler aber keine Webdesigner. Sowas wie Baupläne kommt z.B. noch, muss ich noch scannen und anpassen. Habe leider keine CAD Dateien da...



fotoman schrieb:


> Was ist eine DSLR/M, kleine Camcorder, was (bei Remotehead) ein mittlerer Camcorder? Meine DSLR wiegt schon ohne Objektiv fast das doppelte einer Sony FDR-AX100E und kommt mit passendem Objektiv schnell an das Gewicht einer Sony FDR-AX1 heran. Eine D3300+35/1.8 DX wiegt natürlich weniger.


Bewusst schwammig formuliert...zumindest vorrübergehend...ich kann weder sämtliche Kamerakombinationen ausprobieren noch professionelle Belastungstests machen. Ich bin mir da noch nicht sicher, wie ich diese Angabe sinnvoll machen soll. Weglassen will ich die aber halt auch nicht, da diese nicht ganz uninteressant ist...


Aber damit kann ich dann doch schon mal was anfangen. Mir war ja bewusst, dass es noch genug gibt was man besser machen kann


----------



## Speeedymauss (16. September 2016)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Update: 
Habe die Bildgrößen angepasst. Die meisten Bilder liegen jetzt bei um die 50kb. Ein paar wenige Ausreißer sind mit 100kb dabei...

Außerdem hab ich überall die vorgeschlagenen Projekte ergänzt


----------



## fotoman (18. September 2016)

*AW: [Website entsteht] Website wÃ¼nscht sich Feedback und Hilfe*



Speeedymauss schrieb:


> Zu dem was in der C't steht kann ich nichts sagen, da ich hier selber keine habe. Ich habe mich auch noch gar nicht mit der Indizierung beschäftigt (noch soll die Seite ja auch nicht gefunden werden können). Das Mit den Ladezeiten ist mit selber noch nicht so krass aufgefallen, aber gut ich hänge auch an 120Mbit...die Bilder werden dann noch durch kleinere ausgetauscht.


Das nennt sich SEO (Search Engine Optimisation), bei der Google u.U. ab einer gewissen Ladezeit die Bewertung herab stuft. Mit meinen 32 MBit/s Down müsste auch die alte Seite nach 3 Sekunden vollständig geladen sein, inkl. aller Bilder. Das war sie aber bei weitem nicht. Der Server liefert halt nicht so schnell wie die Leitung kann. Das fällt natürlich nur mit vorher geleertem Cache auf. Also sollte man (wie jetzt geschehen) an den Stellen optimieren, die nicht stören.



Speeedymauss schrieb:


> Die Headerbilder sind .... 4K Monitor und weiß wie grottig die Bilder bei der Auflösung aussehen.


Es geht nicht darum, wie gut/schlecht sie aussehen, sondern wieviel Bildhöhe sie auf dem Anzeigegerät belegen. Wenn ein Headerbild mit ca. 620 Pixel in der Höhe (100% Skalierung) dargestellt wird, kannst Du Dir ja selber ausrechnen, wieviel Pixel (=Platz, daran ändert auch ein 4k-Monitor nur etwas, wenn Du Adleraugen hast und mit 200 PPI surfst) für die Darstellung des Seiteninhaltes übrig bleibt. Und da der Europäer dann noch meist von oben nach unten liest, sucht man erst einmal den Beginn der Informationen.

Auf den Unterseiten mag das durchaus anders sein und das passende Headerbild kann schon einen guten Eindruck über das Bauprojekt geben.

Für viele Nutzer (mich eingeschlossen) ist z.B. die Platzverschwendung durch Werbebanner im Kopf der Seite einer der Gründe, Werbeblocker zu nutzen. Das auch auf einem WQHD-Monitor mit 1440 Pixeln in der Höhe.



Speeedymauss schrieb:


> Wie kommst du eigt so schnell auf die ganzen Zahlen? Gibt es da ein Tool für, was die Bilder analysiert?


Vieles gibt einem Firefox unter "Seiteninformationen anzeigen" an, die obigen 620 Pixel stammen aus einem Screenshot (ich hatte keine Lust, die CSS-Datei zu analysieren, das Bild ist ja bedeutend höher) und die Monitorauflösungen stammen dann von:
DPI Calculator / PPI Calculator



Speeedymauss schrieb:


> Was wäre denn so die maximal Größe für ein Bild?


Naja, im Idealfall (bei einer dynamischen Seite) lädt man das Bild, welches zur Auflösung des Anzeigegerätes passt und das dann skaliert auf 100% (ca. 96 DPI) die gewünschte Ausgabegröße erreicht.

Der Rest ist Geschmackssache. Bei einen Bauplan als PDF oder auch als PNG hätte ich nichts gegen 600 DPI, wenn die Auflösung auch etwas bringt. Genauso finde ich Baubilder in hoher Auflösug sehr praktisch, wobei man die nicht direkt auf der Seite zeigen muss sondern erst nach dem Klick auf eine kleinere Version nachlädt/anzeigt.

Bei Bannern muss m.M.n. noch sehr viel Platz für die Nutzinformation übrig bleiben. Ob Du aber nun von Usern ausgehst, die mind. mit FulHD surfen, oder auch solchen, die mit älteren/kleineren Laptops (1366x768 Pixel) oder 8"-Tablets vorbei kommen, musst Du selber entscheiden.

 Oder Du baust die Seite responsive auf (wie früher von anderen Usern hier schon geschrieben), womit sich der inhalt an die verfügbare Browserfläsche anpasst (z.B. Banner ausblenden, wenn die Bildhöhe zu gering ist). Sowas (mittels MediaQueries im CSS-File) nutze ich bei meiner Seite notgedrungen, da sich die Besucher nicht an meine Vorstellung eines Seitenbesuchers halten wollen und mind. 20% der User mit Smartphones oder kleinen Tablets (effektive Bildhöhe kleiner 768 Pixel) meine Seite besuchen.



Speeedymauss schrieb:


> Die Kontakt Seite habe ich (fast) noch gar nicht angefasst..daher sieht sie so aus wie sie aussieht...impressum ist auch nicht drauf obwohl es rechtlich pflicht ist...ich weiß...


Ob das Pflicht ist, weiss ich nicht. Es sieht mir eher nach einer rein privaten Seite aus, ohne Werbung, Webshop oder sonst etwas, das ich in Richtung Gewerblich einstufen würde.



Speeedymauss schrieb:


> Bewusst schwammig formuliert...zumindest vorrübergehend...ich kann weder sämtliche Kamerakombinationen ausprobieren noch professionelle Belastungstests machen. Ich bin mir da noch nicht sicher, wie ich diese Angabe sinnvoll machen soll.


Sinnvoll wäre für mich z.B. die Angabe von selber getesteten/genutzen Gewichten/Größen. Wenn ich das Video vom Slider-Prototyp sehen, dann würde ich dem auch meinen alten DV-Camcorder mit gut 700g nicht anvertrauen. Ob das aber mit dem dort angedeuteten Umbau der Fall sein wird?

Was z.B. ein Stellmotor bei euch schon real (und geschmeidig für die Kamerafahrt ohne Ruckler) bewegt hat, lässt sich ja leicht nachwiegen. Daraus sollte sich grob ableiten lassen, ob er mit dem Gewicht eher sein Maximum erreicht hat oder ob noch bedeutend mehr denkbar ist.


----------



## Speeedymauss (19. September 2016)

*AW: [Website entsteht] Website wÃ¼nscht sich Feedback und Hilfe*



fotoman schrieb:


> Das nennt sich SEO (Search Engine Optimisation), bei der Google u.U. ab einer gewissen Ladezeit die Bewertung herab stuft. Mit meinen 32 MBit/s Down müsste auch die alte Seite nach 3 Sekunden vollständig geladen sein, inkl. aller Bilder. Das war sie aber bei weitem nicht. Der Server liefert halt nicht so schnell wie die Leitung kann. Das fällt natürlich nur mit vorher geleertem Cache auf. Also sollte man (wie jetzt geschehen) an den Stellen optimieren, die nicht stören.


Ah, von SEO hab ich mal was gehört...aber halt wirklich nur mal im "vorbeigehen". Dass dieser Faktor da so mit einfließt wusste ich nicht. Ich denke mal ich werd mich dann zu einem späteren Zeitpunkt auch mal mehr mit SEO beschäftigen. Ich meine irgendwo habe ich sogar noch ganz gute Software dafür als Nebenprodukt bekommen...guck ich wenns dann soweit ist



fotoman schrieb:


> Es geht nicht darum, wie gut/schlecht sie aussehen, sondern wieviel Bildhöhe sie auf dem Anzeigegerät belegen. Wenn ein Headerbild mit ca. 620 Pixel in der Höhe (100% Skalierung) dargestellt wird, kannst Du Dir ja selber ausrechnen, wieviel Pixel (=Platz, daran ändert auch ein 4k-Monitor nur etwas, wenn Du Adleraugen hast und mit 200 PPI surfst) für die Darstellung des Seiteninhaltes übrig bleibt. Und da der Europäer dann noch meist von oben nach unten liest, sucht man erst einmal den Beginn der Informationen.
> 
> Auf den Unterseiten mag das durchaus anders sein und das passende Headerbild kann schon einen guten Eindruck über das Bauprojekt geben.
> 
> Für viele Nutzer (mich eingeschlossen) ist z.B. die Platzverschwendung durch Werbebanner im Kopf der Seite einer der Gründe, Werbeblocker zu nutzen. Das auch auf einem WQHD-Monitor mit 1440 Pixeln in der Höhe.



Ich habe jetzt mal kurz den Part mit dem Header aus der Startseite auskommentiert. Sieht jetzt natürlich ganz anders aus. Vielleicht fällt mir da noch was kleineres dezenteres ein...oder ich lass es so wenns mir gefällt 



fotoman schrieb:


> Vieles gibt einem Firefox unter "Seiteninformationen anzeigen" an, die obigen 620 Pixel stammen aus einem Screenshot (ich hatte keine Lust, die CSS-Datei zu analysieren, das Bild ist ja bedeutend höher) und die Monitorauflösungen stammen dann von:
> DPI Calculator / PPI Calculator


Okay, da müsste ich dann echt mal Firefox installieren  ich selber nutze quasi nur Opera



fotoman schrieb:


> Naja, im Idealfall (bei einer dynamischen Seite) lädt man das Bild, welches zur Auflösung des Anzeigegerätes passt und das dann skaliert auf 100% (ca. 96 DPI) die gewünschte Ausgabegröße erreicht.
> 
> Der Rest ist Geschmackssache. Bei einen Bauplan als PDF oder auch als PNG hätte ich nichts gegen 600 DPI, wenn die Auflösung auch etwas bringt. Genauso finde ich Baubilder in hoher Auflösug sehr praktisch, wobei man die nicht direkt auf der Seite zeigen muss sondern erst nach dem Klick auf eine kleinere Version nachlädt/anzeigt.
> 
> ...



Ich wollte eigentlich auf die Dateigröße hinaus aber das ist auch ok 
Die Seite ist ja responsive aufgebaut...normalerweise skaliert das ganze auch mit und ich hab für schmale Auflösungen und mobil andere Layouts (einfach mal aufm Handy öffnen  )...ich persönlich finde das Layout so gar nicht mal so schlecht, aber ich kann es nur schwer einschätzen wie das auf andere wirkt...



fotoman schrieb:


> Ob das Pflicht ist, weiss ich nicht. Es sieht mir eher nach einer rein privaten Seite aus, ohne Werbung, Webshop oder sonst etwas, das ich in Richtung Gewerblich einstufen würde.


ja ich habe gerade noch mal nachgelesen. Für meine Seite ist kein Impressum Pflicht, schadet aber nicht...



fotoman schrieb:


> Sinnvoll wäre für mich z.B. die Angabe von selber getesteten/genutzen Gewichten/Größen. Wenn ich das Video vom Slider-Prototyp sehen, dann würde ich dem auch meinen alten DV-Camcorder mit gut 700g nicht anvertrauen. Ob das aber mit dem dort angedeuteten Umbau der Fall sein wird?
> 
> Was z.B. ein Stellmotor bei euch schon real (und geschmeidig für die Kamerafahrt ohne Ruckler) bewegt hat, lässt sich ja leicht nachwiegen. Daraus sollte sich grob ableiten lassen, ob er mit dem Gewicht eher sein Maximum erreicht hat oder ob noch bedeutend mehr denkbar ist.


Hab ich mir so auf jeden Fall mal notiert. Ich gucke mal wie ich das am besten umsetze


----------



## RossiCX (20. September 2016)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Bootstrap macht's möglich  Das ist doch schonmal ein guter Ausgangspunkt.


----------



## Grabbi3 (21. September 2016)

*AW: [Website entsteht] Website wünscht sich Feedback und Hilfe*

Also mir ist aufgefallen, dass in dem Project: Kamerakran 1.0 Bauanleitung oben die Breadcrump Navigation falsch verlinkt ist.
Der Home Link zeigt auf die Index.html während überall sonst auf die Index.php gezeigt wird. Also nur eine Kleinigkeit aber trotzdem unschön da man einen 404er bekommt 

Zweitens würde ich mir überlegen die Obere Nav leiste etwas zu Personalisieren. 
Diese Standard Bootstrap Navigation sieht man mittlerweile auf jeder 2. Seite aber wenn es dir gefällt ist das natürlich auch kein Problem.

Und der letzte Punkt der mir etwas Störend aufgefallen ist das die Bilder teilweise noch etwas langsam Laden, das könnte aber auch an dem gummel Internet hier auf der Arbeit liegen,
werde das Zuhause nochmal Testen


----------

