Seite unseres Sportvereins

  • Hallo zusammen ;)


    Nachdem ich das html-seminar durchgearbeitet, und hier im Forum einiges quergelesen habe, machte ich mich daran eine Seite für unseren Sportverein zu basteln. Vom ersten Lern-Step zur fertigen Seite vergingen 1 Monat - dementsprechend Laienhaft wird euch Cracks die Seite wohl auch vorkommen.


    Folgende Punkte hab ich mir schonmal vorgenommen:


    - bessere Bildpräsentation in der Galerie (:idea: Hilfe willkommen)
    - Newsseite besser strukturieren; nur 2-3 Textzeilen und den kompletten Artikel dann verlinken.


    Für konstruktive Kritik, Verbessungsvorschläge bin ich gerne offen !!


    http://www.sportverein-trittenheim.de


    hier noch die css:


    Allen Ratgebern sei schonmal im voraus gedankt!!


    Ach ja, eins noch - wie lange dauert es bis eine Seite in den Suchmaschinen aufgenommen ist?

  • Headergrafik und Contenthintergrundfarbe wirken nach meinem Geschmack zu dunkel/destruktiv und nicht freundlich einladend.


    Abstände nicht mit Zeilenumbrüchen, sondern mit margin-/padding erzeugen.

  • Danke sejuma...


    Naja, für das "dreckiges" weiß des Vereinsheims kann ich leider auch nichts, und ein Braschenplatz ist "trübrot" :oops:


    Mit den Hintergrundfarben versuch ich mal was anderes - was für eine Farbe würdest du denn vorschlagen?
    Die Vereinsfarben sind schwarz & rot; deswegen ist der footer auch in einem Rot-ton gehalten...


    Mit margin & padding tu ich mich noch schwer - [Eigenlob] ich bin schon stolz auf mich, das es überhaupt so ist wie es ist (ohne "Fertigbaukasten" à la joomla, beepworld etc.). [/Eigenlob] 8)

  • Hey,


    erstmal finde ich, für deine erste Seite hast du das schon sehr gut gemacht - meine erste Seite sah bei weitem schlimmer aus.


    Ein paar Tipps noch:


    1. lies dich ruhig nochmal in den margin-/padding-Bereich rein; wenn man das einmal verstanden hat ist es einfach und spart eine Menge Arbeit und Traffic (jedes br macht die Datei größer, größere Dateien bedeuten höheren Traffic und größere Ladezeiten).


    2. Versuch vielleicht mal eine andere Schrift, die jetzige ist finde ich nicht so hübsch. Am besten etwas serifenfreies, lässt sich besser lesen.


    3. Achte darauf, dass du jedem img ein alt und möglichst jedem Link einen title mitgibst, ist ganz schön fürs Aussehen und für die Barrierefreiheit.


    4. Formatier vielleicht deine Überschriften noch ein bisschen, das gleiche gilt für die Links, speziell in der Navi. Das blau passt nicht so, vielleicht ein rot?


    5. Denk dran: h1 ist die wichtigste Überschrift! So etwas wie Willkommen ist da vielleicht nicht so angebracht, eher der Name des Sportplatzes oder das Bild im header. Notfalls kannst du die Schrift auch mit "display: none;" ausblenden oder - für Screenreader besser - aus dem Bild schieben.


    6. Der Footer sit mehr pink als rot und passt da nicht so ganz rein. Nimm besser etwas dunkleres (für meinen Geschmack). Außerdem ist er recht weit unten, wofür rückst du ihn soweit dahin mit deinen brs?


    7. Ich persönlich für meinen Geschmack mag keine (externen) Counter, außerdem produzieren sie meist die meisten Fehler


    Aber ich denke du bist auf einem guten Weg :)


    LG
    Laura

  • Zitat von "sejuma"

    Headergrafik und Contenthintergrundfarbe wirken nach meinem Geschmack zu dunkel/destruktiv und nicht freundlich einladend.


    Ja, da hat sejuma recht. Das liegt schätzungsweise an der späten Tageszeit, an dem das Foto gemacht wurde oder am schlechten Wetter?


    Schau dir mal mein GIMP-Tutorial an, wie man die Farben aufpeppt:
    http://www.gimp-tutorials.de/g…aue-farben-optimieren.htm


    Auch aus dem Foto kann man noch einiges rausholen.
    Wobei eigentlich vor das Haus noch ein paar Sportler gehören ;)


    Zu deinem Domainnamen - ist klasse. Ich würde nur noch zusätzlich die Ohne Bindestrich auch holen.


    http://www.webmaster-crashkurs…nname-und-bindestrich.htm


    Das auf die schnelle fürs erste.

  • Wenn du kein besseres Foto hast, dann versuche das vorhandene mittels einem Grafikprogramm aufzuhellen und evtl. etwas mehr Kontrast zu geben.


    Farben sind grundsätzlich Geschmacksache.
    Wenn es viel Text zu lesen gibt, bevorzuge ich schlichtes weiß als Hintergrund oder eine sehr helle Pastellfarbe, ggf. auch ein sehr helles Grau.


    Als Schrift verwende mal Verdana, ist größtenteils Standard.


    Auf dein bisheriges Ergebnis kannst du in der Tat stolz sein. Auch meine erste Seite sah nicht so gut aus.
    Aber du wolltest ja wissen, was du besser machen kannst. Und da verwendet man eben wirklich keine Zeilenumbrüche als Abstandhalter.
    Konkret auf der Seite "Aktuelles" (Dorfpokal):
    Hier verwendest du

    Code
    </p><br />


    Den gleichen Effekt erzielst du ohne Zeilenumbruch, indem du für p einen margin definierst (habe den Wert jetzt nicht getestet, ggf. anpassen):

    Code
    p {margin: 20px 0 0 0;}
  • Hey, also ich finde die Seite recht gut, aber ich möchte was zu Sejumas Aussage sagen:


    Zitat von &quot;sejuma&quot;


    Den gleichen Effekt erzielst du ohne Zeilenumbruch, indem du für p einen margin definierst (habe den Wert jetzt nicht getestet, ggf. anpassen):

    Code
    p {margin: 20px 0 0 0;}


    Hier wäre folgendes zu empfehlen:




    Code
    p {margin: 0 0 0 1em;}
  • Erstmal muss ich auch sagen sehr schöne seite Das Headerbild wie bereits schon gesagt vllt. bissel aufhellen oder nochmlal mit besserem/hellerem Wetter machen sonst finde ich die seite schön =D



    Jetzt noch was was nicht ganz zum Thema passt :


    Zitat von &quot;axel&quot;


    ...
    Schau dir mal mein GIMP-Tutorial an, wie man die Farben aufpeppt:
    http://www.gimp-tutorials.de/g…aue-farben-optimieren.htm
    ....


    O_o Axel wieviele Seiten hasst dud en noch ?!?!
    =D



    MFG

  • Zitat von &quot;lauras&quot;


    6. Der Footer sit mehr pink als rot und passt da nicht so ganz rein. Nimm besser etwas dunkleres (für meinen Geschmack). Außerdem ist er recht weit unten, wofür rückst du ihn soweit dahin mit deinen brs?


    7. Ich persönlich für meinen Geschmack mag keine (externen) Counter, außerdem produzieren sie meist die meisten Fehler


    Gehört der footer etwa nicht dahin? Der entspricht doch der "Fußzeile" im Worddok. und die ist ja auch immer am Seitenende - oder nicht.


    Gibts denn auch "interne" also eigene counter? Und die noch interessantere Frage - machen Counter Sinn? Ich hab den nur reingemacht ,weil ich dachte das das so usus ist.


    Zitat von &quot;sejumas&quot;


    Den gleichen Effekt erzielst du ohne Zeilenumbruch, indem du für p einen margin definierst


    Zitat von &quot;Basiii&quot;
    Code
    p {margin: 20px 0 0 0;}


    In meiner css hab ich in der dritten Zeile doch

    Code
    p {
      margin-bottom: 5px;}

    stehen - kommt das nicht aufs gleiche raus?



    und nochmal die Frage: wie lange dauert es bis eine Seite in den Suchmaschinen aufgenommen ist?

  • Zitat von &quot;Dorfbewohner&quot;


    Gehört der footer etwa nicht dahin? Der entspricht doch der "Fußzeile" im Worddok. und die ist ja auch immer am Seitenende - oder nicht.


    Doch, stimmt schon. aber du hast zwischen Text und footer sehr viel Platz - eigentlich wäre es sinnvoller, wenn der footer (fast) direkt drunter wäre ;)

  • Zitat von &quot;lauras&quot;

    ... du hast zwischen Text und footer sehr viel Platz - eigentlich wäre es sinnvoller, wenn der footer (fast) direkt drunter wäre ;)


    in der css hab ich dem Steuerungs Div eine feste Größe gegeben:

    Code
    #steuerung {
      float:left;
      width:180px;
      height:600px;


    Wenn ich die Größe kleiner mache, und im Inhalts-Div mehr Zeilen als in der Steuerung sind, dann wird die Hintergrundfarbe des Inhalts auf die komplette Breite ausgeweitet (und das sieht dämlich aus)
    Wie kann ich das denn mit css verhindern? Ich glaube gelesen zu haben das das mit Tabellen geht, aber eigentlich wollte ich Tabellen vermeiden da die doch "veraltet" sind.

  • Zitat von &quot;Dorfbewohner&quot;

    Wenn ich die Größe kleiner mache, und im Inhalts-Div mehr Zeilen als in der Steuerung sind, dann wird die Hintergrundfarbe des Inhalts auf die komplette Breite ausgeweitet (und das sieht dämlich aus)
    Wie kann ich das denn mit css verhindern? Ich glaube gelesen zu haben das das mit Tabellen geht, aber eigentlich wollte ich Tabellen vermeiden da die doch "veraltet" sind.


    auf jeden Fall mit CSS - Anleitung für Nutzung gesammter Höhe unter:
    <!-- m --><a class="postlink" href="http://www.webmaster-crashkurs.de/css-layout-fuer-gesamte-hoehe.htm">http://www.webmaster-crashkurs.de/css-l ... -hoehe.htm</a><!-- m -->


    Noch besser ist, wenn du genug Inhalt hast ;)

  • Axel  NeoAramis


    mit euren Links löse ich doch "nur" das Fußzeilen-Positionierungs-Problem, nicht aber das der Inhalts-Div in den Steuerungs-Div überläuft - richtig?


    Dafür müßte ich dann noch zusätzlich diese Anweisungen im css einbinden:
    http://www.webmaster-crashkurs…echten-spalten-in-css.htm
    oder?


    So werde mich jetzt mal dransetzten und versuchen die bisherigen Vorschläge umsetzten.



    ...und noch eins muß hier mal gesagt sein: [shout]Vielen Dank für deine Top-Tipps und Seiten Axel P.[/shout]

  • WIe ich das verstanden habe, möchtest du einen Effekt erzielen, dass die Hintergrundfarbe der beiden Spalten bis zur Fusszeile reicht, unabhängig vom Inhalt. Ja dann muss du die Faux Column Technik anwenden (Falsche Spalten). So musst du keine feste Höhe angeben.

  • unter: http://sportverein-trittenheim.de/betaseite.htm


    hab ich mal eine überarbeitet Version der Startseite hochgeladen.


    - Counter weg
    - Serifenfreie Schrift
    - keine >br /< mehr (so gut wie)
    - die Fußzeile mit axel's & neoAramis's Links bearbeitet


    Nur das mit der "faux column" Technik will nicht so wie es soll.
    Könnt ihr mit mit css helfen, oder soll ich das besser mit Tabellen lösen?


    css:

  • Tabellen sind grundsätzlich NUR zum Darstellen tabellarischer Daten da.


    Faux Columns funktionieren so: Du nimmst ein Hintergrundbild (nur ganz wenig hoch, für weniger Dateigröße), dass die Breite der Spalten anzeigt.
    Ist schwierig zu beschreiben. Schau mal bei <!-- m --><a class="postlink" href="http://www.thestyleworks.de">http://www.thestyleworks.de</a><!-- m -->
    das Hintergrundbild an, vielleicht wird dir das Prinzip dann deutlich.


    Gruß
    Laura

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!