[Wiesl]

Hallo Leute,

ich versuche gerade eine Vereinshomepage zu erstellen.

Ich habe vor ca. 1 Woche komplett bei null angefangen, sowohl was meine Kenntnisse in HTML/CSS oder Design angeht, als auch mit dem Projekt selber.

Ich hoffe hier auf ein wenig Hilfe und vielleicht nicht allzu harsche Kritik, da ich wie gesagt "from scratch" begonnen habe !
Auch habe ich komplett auf irgendwelche Templates oder ähnliches verzichtet, sondern nur mit Notepad++ gearbeitet, um zu lernen.

Zuerst möchte ich auch mein Grundgerüst vorstellen und euch 2 Unterseiten zur Hand geben, an dem ihr das Grundgerüst und Grunddesign erkennen könnt.

ein paar Fragen hätte ich dann gleich:
1. Wie kann ich v.a. den wall of Text in den Griff kriegen auf der News Seite, bzw. wie soll man das organisieren (ca. 3 News pro Monat in dieser Länge).
2. Bitte um allgemeine Hilfe, wie ihr den Start so findet
3. Aufteilung so ok? v.a. die Navleiste links

Ich würde gerne zu allererst ein paar Screenshots zum Design hochladen, da ich es ungerne schon auf unseren vorhandenen Webspace laden möchte.

Oder soll ich alles mal zum Testen auf einen kostenlosen Webspace laden? Wenn ja, wen empfehlt ihr hier?

Danke im Vorraus
Wiesl

P.S.: Ich weiß. dass ihr v.a. zur Funktionalität und den Fehler nichts sagen könnt, da ihr nur einen Screenshot habt, also bitte ich um Hilfestellung wie ich das hier am besten löse

[MrMurphy]

Hallo,

ohne den Quelltext läßt sich nur wenig über die Homepage aussagen.

Außerdem muss man wissen, welche Anforderungen die Homepage erfüllen soll. Also zum Beispiel ob du aktuelles HTML / CSS verwenden willst? Auf welchen Ausgabegeräten sie vernünftig angezeigt werden soll? Was ist mit Smartphones und Tablets? Wie soll es mit der Zugänglichkeit / Barrierefreiheit stehen? Responsive Design? u.s.w. u.s.w.

Und was hast du den Vereinsmitgliedern versprochen? Wissen die, das du Anfänger bist? Oder hast du denen eine halbwegs aktuelle Homepage versprochen?

Von der Optik her und verknüpft mit meinen bisherigen Erfahrungen wird das eine Homepage, die dem Stand von vor 15 Jahren entspricht. Also ein starres Layout für große Normalbildschirme ohne Rücksicht auf Personen mit Sehproblemen (damit sind nicht nur Blinde oder so gut wie Blinde gemeint).

Wenn du das erreichen willst und den Vereinsmitglieder nichts besseres versprochen hast und kein Geld dafür nimmst ist alles im grünen Bereich.

Gruss

MrMurphy

[Wiesl]

Hallo und danke erstmals!

Also primär sehe ich das als Lernprojekt von meiner Seite aus, und versprochen wurde gar nichts ,)
Desweiteren nehme ich natürlich kein Geld und es wird auch kein kommerzielles Ziel verfolgt.

Zu deinen weiteren Fragen:
aktuelles HTML/CSS --> hier gibt es keine Vorgaben, soll halt funktionell sein
Ausgabegeräte/responsives Design: primär Monitor evtl. mit kl. Augenmerk auf Tablets/Smartphones
starres Design: naja, im Moment skaliert es von max. 1200px width auf min 900px width muss mal sehen was da noch geht.
Sehprobleme: Darauf habe ich tatsächlich noch nicht einen Gedanken verschwendet.

Fazit: Ich schaue jetzt mal, dass ich meine Testseite auf einen Free-Hoster bekomme (irgendwelche Tipps), damit ihr den Quellcode sehen könnt.


Danke schonmal im Vorraus
Wiesl

[explanator]

Ich nehme bplaced.net als Freehoster.

[Wiesl]

Ok hier jetzt mal die ganze Seite:

mein Projekt

Schaut bitte einmal drüber und gebt mir Hinweise, ob ich in die halbwegs richtige Richtung unterwegs bin, oder ob ich das ganze einfach einstampfen sollte und mir ein anderes Betätigungsfeld suchen sollte
Bitte beachtet: Seiten mit nur einem Foto habe ich noch nicht bearbeitet und generell ist alles noch w.i.p.

Und ein paar Fragen hätte ich:
1. Warum sind die Seiten mit viel Text (Impressum z.B.) Nuancen breiter als die anderen?
2. Wie kann ich die wall of Text bei den News in den Griff bekommen?
evtl. jede News eine extra Unterseite oder oben eine Auswahl mit Datum??
3. Footer nur auf der ersten oder allen Seiten?
4. FB-Like Box nur auf der ersten oder allen Seiten?

Generell nehmt kein Blatt vor dem Mund, ich bedanke mich für alle konstruktive Kritik

Wiesl

[cloned]

Nur einmal eine ganz kurze Anmerkung, ausführlicher kommt dann die nächsten Tage, wenn mal mehr Zeit ist: Ein marquee Tag? Das ist aber nicht dein ernst oder?

[K.Roland]

Zwei Hintergrundgrafiken sind zu groß mach sie Kleiner, eine dazu passende Farbe füllt den Rest aus.

Header braucht kein Max oder min-width hat schon body. Dafür aber background-position.

Das Section Element braucht kein:

}
section {
    margin-bottom: -20000px;
    padding-bottom: 20010px;
    overflow: hidden;
}

kannst du entfernen.

---------------------
Füge das mal hinzu:

}
#container {
    background-color: #008c00;
}
header {
    background-position: right;
} 
section {
    background-position: left top;
    background-repeat: no-repeat;
    margin-right: 314px;
}

Hat bei dir nur ein margin-right von: 179 Pixel.

Versuch das Mal nach zu vollziehen, warum ich auf 314 Pixel komme.
Ergibt sich hieraus

}
aside {
    background-color: #D8D8D8;
    border: 2px solid #000000;
    float: right;
    margin-bottom: -20000px;
    padding: 5px 5px 20010px;
    width: 300px;
}

Testen kannst du das auch indem man bei Section margin-right Wert erhöht, erkennbar durch border-top.

[Invalid] Markup Validation of http://magicreload.bplaced.net/ - W3C Markup Validator

____________
Roland

[Wiesl]

Hallo erstmal danke für deine Antworten, nur leider sieht dann wenn ich das mache, was du mir vorschlägst so aus (siehe Anhang)
Und ein paar Fragen hätte ich noch:

Zitat von K.Roland

Zwei Hintergrundgrafiken sind zu groß mach sie Kleiner, eine dazu passende Farbe füllt den Rest aus.

Wie?Was? Sry das verstehe ich nicht, ich habe 2 Hintergrundgrafiken mit Farbverläufen erstellt einen für [html] und eine für den content. Was meinst du mit zu groß?

Zitat von K.Roland

Header braucht kein Max oder min-width hat schon body. Dafür aber background-position.

Min-und max habe ich jetzt entfernt, ja war doppelt.
aber warum background-position:right?

Zitat von K.Roland

Das Section Element braucht kein:

}
section {
    margin-bottom: -20000px;
    padding-bottom: 20010px;
    overflow: hidden;
}

kannst du entfernen.

Dann habe ich aber keinen gleich hohen coloumns mehr, oder?

Zitat von K.Roland

Füge das mal hinzu:

}
#container {
    background-color: #008c00;
}
header {
    background-position: right;
} 
section {
    background-position: left top;
    background-repeat: no-repeat;
    margin-right: 314px;
}

Hat bei dir nur ein margin-right von: 179 Pixel.

Versuch das Mal nach zu vollziehen, warum ich auf 314 Pixel komme.

300px aside div+ 5 px + 5 px + Margin + 2px + 2px border = 314px, oder?

Wenn dir ein wenig weiterführende erklärungen nichts ausmachen würden, würde ich mich sehr freuen!

Danke
Wiesl

EDIT 1: background-position : right im Header habe ich nun verstanden, so bleibt der Grafikteil sichtbar.
Margin-right wurde nun auch geändert.
Edit2: Achso, du meintest nur die Index-Seite:
Ok, aber was haben kleinere Grafiken für Vorteile? (meinst du wegen der Ladezeit?), also einen "kürzeren Farbverlauf" erstellen und unten dann mit einer "absoluten" Farbe auffülllen, oder wie? denn in der sitestylesheet.css zerschießt mir die Entfernung der margin-padding und overflow-angabe das Ganze

[K.Roland]

Zitat von Wiesl

Ok, aber was haben kleinere Grafiken für Vorteile?

Du brauchst nur das bisschen Hintergrundgrafik einsetzen, darum geht es in erster linie.
Das gleiche gilt auch für Header.

eck.jpg

Zitat von Wiesl

...denn in der sitestylesheet.css zerschießt mir die Entfernung der margin-padding und overflow-angabe das Ganze

Kann ich noch nicht nachvollziehen.
Mach einfach das was ich dir Sagte.

___________
Roland

[Wiesl]

Zitat von K.Roland

Das Section Element braucht kein:

}
section {
    margin-bottom: -20000px;
    padding-bottom: 20010px;
    overflow: hidden;
}

kannst du entfernen.

Zitat von K.Roland

Kann ich noch nicht nachvollziehen.
Mach einfach das was ich dir Sagte.

Habe ich gemacht, und dann sieht das ganze so aus
(bei allen Unterseiten mit Tables das Gleiche, der Content rutscht nach unten, die Ränder sind nicht mehr durchgehend, die Grafik rechts oben ist verrutscht und alles um ca. 20px nach unten verschoben).
hier der link: Training