Antwort an „HTML_go“ verfassen

SELF-Forum

Unverständnis von CSS-Eigenschaften; Hintergrund der aktiven Navigationsauswahl ändern

HTML_go (Versionen)

problematische Seite

Hallo miteinander und nachträglich (bisschen spät, nicht?) frohe Weihnacht! Und noch rechtzeitig genug: Ein gutes, Neues Jahr 2024!

Ich vermute mal, es ist über die Festtage privat bei allen viel los gewesen und deswegen habe ich auf meine Fragen zu Gunnars Vorschlägen noch keine Antwort erhalten?

Bin mir einfach noch unsicher und möchte meine Änderungen an den anderen Seiten erst umsetzen, wenn ich mir sicher sein kann, dass Gunnars Vorschläge in der index.html und standard.css korrekt von mir umgesetzt wurden.

Bin also für Feedback sehr dankbar!

Und dann möchte ich noch die weiteren Punkte abarbeiten, die auch schon erwähnt wurden:

  • Grafik in svg umwandeln
  • Benutzerfreundlichkeit für Screenreader o.ä.
  • eventuelle Fehler im Code ausmerzen oder besser gestalten

Das sind Anregungen, die ich von verschiedenen Teilnehmern hier erhalten habe, aber auf die ich dann mit dem konkreten Link (nach Beantwortung dieser Fragen hier) noch einmal aufgreifen möchte.

Und hier noch einmal die aktuelle index.html:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>
      Startseite | Sozialwerk KONTAKT e.V. | 78050 Villingen-Schwenningen
    </title>
    <meta
      name="description"
      content="Startseite | KONTAKT e.V. | Wer oder was ist KONTAKT e.V.?"
    />
    <meta
      name="keywords"
      content="KONTAKT Villingen-Schwenningen e.V., soziale Arbeit, Sozialwerk für Prävention und Integration, Kids Live, Lights On, Arbeit mit Jugendlichen, Arbeit mit Kindern, Integration, Migration, Suchtprävention"
    />
    <meta name="author" content="Holger" />
    <meta name="robots" content="index, follow" />
    <meta name="revisit-after" content="1 day" />
    <meta name="msapplication-square70x70logo" content="img/smalltile.png" />
    <meta name="msapplication-square150x150logo" content="img/mediumtile.png" />
    <meta name="msapplication-wide310x150logo" content="img/widetile.png" />
    <meta name="msapplication-square310x310logo" content="img/largetile.png" />
    <link href="./standard.css" type="text/css" rel="stylesheet" />
    <link rel="shortcut icon" href="./android-icon.png" sizes="196x196" />
    <link
      rel="apple-touch-icon"
      sizes="57x57"
      href="./apple-touch-icon-57.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="60x60"
      href="./apple-touch-icon-60.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="72x72"
      href="./apple-touch-icon-72.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="76x76"
      href="./apple-touch-icon-76.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="114x114"
      href="./apple-touch-icon-114.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="144x144"
      href="./apple-touch-icon-144.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="152x152"
      href="./apple-touch-icon-152.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="./apple-touch-icon-180.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="120x120"
      href="./apple-touch-icon-120x120-precomposed.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="152x152"
      href="./apple-touch-icon-152x152-precomposed.png"
    />
    <link rel="shortcut icon" href="favicon.ico" />
  </head>

  <body>
    <a id="skip-link" href="#main">zum Hauptinhalt</a>
    <header>
      <a href="./index.html">
        <img
          src="https://kontakt-vs.de/kontakt.png"
          alt="Startseite Sozialwerk KONTAKT e.V. | 78050 Villingen-Schwenningen"
        />
      </a>
    </header>
    <nav>
      <ul>
        <li aria-current="page"><a href="#main">Startseite</a></li>
        <li><a href="./vorstellung.html">Über uns</a></li>
        <li><a href="./kinder.html">Arbeit mit Kindern</a></li>
        <li><a href="./jugend.html">Arbeit mit Jugendlichen</a></li>
        <li><a href="./kontaktaufnahme.html">Kontakt</a></li>
        <li><a href="./impressum.html">Impressum</a></li>
      </ul>
    </nav>
    <main id="main">
      <h1>
        Herzlich willkommen auf der Startseite <br />des Sozialwerks
        <b>KONTAKT e.V.</b>, Villingen-Schwenningen!
      </h1>
      <p>
        Ziel des Vereins ist die soziale Arbeit für und mit Kindern,
        Jugendlichen und deren Familien (Deutsche, Deutschstämmige und
        Zugewanderte gleichermaßen), insbesondere durch die soziale Integration
        und die Förderung des gleichberechtigen Zusammenlebens dieser
        Personengruppen unter gegenseitiger Akzeptanz und Anerkennung der
        jeweils anderen Kulturen.
      </p>
      <p>
        Unsere Vision ist es, Menschen mit Migrationshintergrund bei der
        Integration in die Gesellschaft zu unterstützen. Darüber hinaus ist der
        Verein im Bereich der Bereitstellung präventiver Angebote für junge
        Menschen tätig.
      </p>
      <p>
        Seit 2010 ist KONTAKT e.V. anerkannter Träger der freien Jugendhilfe
        gemäß $75 SGB VIII.
      </p>
    </main>
  </body>
</html>

und dazugehörige standard.css:

body {
  max-width: 60em;
  margin: auto;
}
header,
nav,
main {
  margin: 0.25em 0.5em;
}
header a {
  display: block;
}
header img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  /*zentriert die Blöcke mit den Nav-Links nun auch bei horizontaler Betrachtung; zusammen mit @media screen ...*/
  justify-content: center;
}
nav li {
  background: linear-gradient(
    to bottom,
    hsl(280deg 2% 38%),
    hsl(280deg 2% 10%) 40% 60%,
    hsl(280deg 2% 38%)
  );
  flex-grow: 1;
}
nav a {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: center; /* für schmale Ansicht */
  justify-content: center; /* für breite Ansicht */
  height: 3em;
  color: #f2f2f2;
  padding: 0px 16px;
  box-sizing: border-box;
  text-decoration: none;
  font-size: 1.1em;
  user-select: none;
}

nav a:where(:hover, :focus) {
  background-color: #18a096;
  color: black;
}

nav a:focus {
  position: relative;
  z-index: 1;
}

nav [aria-current] a {
  background: linear-gradient(
    to bottom,
    hsl(280deg 2% 38%),
    hsl(60deg 95% 20%) 40% 60%,
    hsl(280deg 2% 38%)
  );
  color: white;
}

h1 {
  background-color: hsl(280 2% 28%);
  color: white;
  text-align: center;
  margin: 1em 0 0.5em 0; /* Hier Abstand zwischen Nav und Inhalt einstellen */
  padding: 0.75em 1em;
  font-size: 1.4em;
}

p {
  padding-left: 30px;
  padding-right: 30px;
  font-size: 1.2em;
}

main ul {
  padding-left: 60px;
  padding-right: 30px;
  font-size: 1.2em;
}

/*bewirkt bei Verschmaelerung des Bildschirms ein vertikales Stapeln der Nav-Leiste (topnav)*/
@media screen and (max-width: 760px) {
  header,
  nav,
  main {
    margin: 0 0 0.25em 0;
  }
  nav ul {
    flex-direction: column;
  }

  #skip-link {
    position: absolute;
    left: 0;
    top: 0;
    background: black;
    color: white;
    padding: 0.25em;
    transform: translateY(-100%);
    transition: 0.2s transform;
  }

  #skip-link:focus {
    transform: translateY(0);
  }
}

Ich wünsche einen schönen Jahresübergang (hoffentlich!) im Kreise der Familie oder Eurer Freunde!

Holger

freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar

Ihre Identität in einem Cookie zu speichern erlaubt es Ihnen, Ihre Beiträge zu editieren. Außerdem müssen Sie dann bei neuen Beiträgen nicht mehr die Felder Name, E-Mail und Homepage ausfüllen.

abbrechen