Linearer Modus

Retro92 · 08.08.2015 21:39

Hallo zusammen,

ich tüftel mit einem Löffelchen Wissen mal wieder ein wieder an HTML herum und wirklich weit bin ich nicht... aber naja.
Ich habe folgendes Problem: Ich habe eine Navigationsleiste

Code:

<p id="Navi">

        <a href="http://de.wikipedia.org/wiki/Wikipedia:Hauptseitea">|Hauptseite|</a>

        <a href="http://de.wikipedia.org/wiki/Wikipedia:Hauptseitea">|Neuigkeiten|</a>

        <a href="http://de.wikipedia.org/wiki/Wikipedia:Hauptseitea">|Belege|</a>

        <a href="http://de.wikipedia.org/wiki/Wikipedia:Hauptseitea">|Computer|</a>

        <a href="http://de.wikipedia.org/wiki/Wikipedia:Hauptseitea">|Rennrad|</a>

        <a href="http://de.wikipedia.org/wiki/Wikipedia:Hauptseitea">|Links|</a>

        <a href="http://de.wikipedia.org/wiki/Wikipedia:Hauptseitea">|Impressum|</a>

        <a href="http://de.wikipedia.org/wiki/Wikipedia:Hauptseitea">|Kontakt|</a>

</p>

erstellt. Das Ganze habe ich mit einer ID versehen und möchte nun mit

Code:

#Navi {

    color: #DC143C;

    text-align: center;

    font-family: monospace;

    font-weight: bold;

    text-decoration: none;

}

in meiner CSS (übrigens korrekt im <head> verbunden) beeinflussen. Leider klappt das nicht, zwar ist mit font-family etc. alles in Ordnung, leider sind die Links (wikipedia als ein bsp) nachwievor unterstrichen und haben auch nicht meine Wunschfarbe.

Könnte mir da jemand helfen? Ich danke im Voraus

Ich hoffe, dass ihr versteht, was ich meine.

Dirk · 08.08.2015 21:43

Code:

#Navi a

#Navi a:link

#Navi a:visited {}

#Navi a:hover, a:active {

text-decoration:underline;

}

CHRiSNEW · 08.08.2015 21:48

Code:

#Navi a {

text-decoration: none;

color: #abc;

}

Retro92 · 08.08.2015 21:58

Danke euch beiden

Das hat soweit funktioniert. Was kann ich machen, damit der Link beim Anklicken eine andere Farbe bekommt? Geht das nicht auch? (Vlt. sogar per Text-Decoration) Denn ohne text-decoration: none habe ich ja blau, mit rot beim Anklicken.

08.08.2015 22:14

Bitte verwende für sowas nicht <p>. Es gibt dafür das <nav>-Tag! Ich würde das ganze auch noch in eine <ul> packen innerhalb des <nav>.

Code:

<nav>

        <a href="http://de.wikipedia.org/wiki/Wikipedia:Hauptseitea">|Hauptseite|</a>

        <a href="http://de.wikipedia.org/wiki/Wikipedia:Hauptseitea">|Neuigkeiten|</a>

        <a href="http://de.wikipedia.org/wiki/Wikipedia:Hauptseitea">|Belege|</a>

        <a href="http://de.wikipedia.org/wiki/Wikipedia:Hauptseitea">|Computer|</a>

        <a href="http://de.wikipedia.org/wiki/Wikipedia:Hauptseitea">|Rennrad|</a>

        <a href="http://de.wikipedia.org/wiki/Wikipedia:Hauptseitea">|Links|</a>

        <a href="http://de.wikipedia.org/wiki/Wikipedia:Hauptseitea">|Impressum|</a>

        <a href="http://de.wikipedia.org/wiki/Wikipedia:Hauptseitea">|Kontakt|</a>

</nav>

Die Wunschformate musst du den Links dann noch geben. Der Selektor wäre dann also nav a. Für so Sachen wie hovern oder anklicken gibt es Pseudoklassen wie :hover und :active. Beispiel-CSS:

Code:

nav a

{

    text-decoration: none;

}

nav a:hover

{

    color: #00ff00;

}

nav a:active

{

    color: #ff0000;

}

Retro92 · 08.08.2015 22:34

Danke dir

Wusste noch gar nicht, dass man aus

Code:

#Navi a

noch ein

Code:

#navi a: hover

machen kann, also, dass noch etwas drangehängt wird. Nur rein aus Interesse, ginge das auch in "meiner" Form, als

Code:

#navi {

color: abc;

hover:

.

.

.

CHRiSNEW · 08.08.2015 22:42

(08.08.2015 22:34)Retro92 schrieb: Wusste noch gar nicht, dass man aus

Code:

#Navi a
noch ein

Code:

#navi a: hover
machen kann, also, dass noch etwas drangehängt wird.
[/code]

https://developer.mozilla.org/en-US/docs...do-classes

Ansonsten noch auf mrshadowtux seinem Ratschlag mit den NAVs und UL hören.

Retro92 · 08.08.2015 22:47

@chrisnew: Das werde ich auch machen. Danke für den Link!

Retro92 · 09.08.2015 14:13

So, ich habe mich noch ein wenig durchs Netz gelesen und versucht, eure Tipps zu berücksichtigen. So sieht nun meine Indexseite aus:

Code:

﻿<!DOCTYPE html>

<html lang="de">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <link rel="stylesheet" href="stylesheet.css" type="text/css">

    <title>Index</title>

</head>

<body>

    <p id="Ueschrift">

        Test

    </p>

    <nav>

      <a href="Index.html">|Hauptseite|</a>

      <a href="http://de.wikipedia.org/wiki/Wikipedia:Hauptseite">|Neuigkeiten|</a>

      <a href="http://de.wikipedia.org/wiki/Wikipedia:Hauptseite">|Belege|</a>

      <a href="http://de.wikipedia.org/wiki/Wikipedia:Hauptseite">|Computer|</a>

      <a href="http://de.wikipedia.org/wiki/Wikipedia:Hauptseite">|Rennrad|</a>

      <a href="http://de.wikipedia.org/wiki/Wikipedia:Hauptseite">|Links|</a>

      <a href="http://de.wikipedia.org/wiki/Wikipedia:Hauptseite">|Impressum|</a>

      <a href="http://de.wikipedia.org/wiki/Wikipedia:Hauptseite">|Kontakt|</a>

    </nav>

    <hr>

    <br>

    <p>Herzlich willkommen!</p>

    <p>Willkommen auf dieser Website. Test. Was jeweils zu erwarten ist, möchte ich kurz darlegen:

      <ul>

        <li>Test.</li>

        <li>Test.</li>

        <li>TEst.</li>

      </ul>

    </p>

    <p>Für diese drei Bereiche gibt es einzelne Kategorien, sowie eine kleine "News"-Abteilung ganz zu Beginn.</p>

    <p>Noch ein kleiner Hinweis am Rande: Test.</p>

    <br>

    <p class="Ende">Nun wünsche ich viel Spaß beim Lesen!</p>

    <br>

    <hr>

    <p class="Ende">Letzte Änderung: 09/08/2015</p>

    <p id="Rechte">Copyright 2015 Test.de</p>

</body>

</html>

Passt der Header so? Hatte vorher einen HTML 4.01 Header, der aber laut W3C Validator nicht passte.

Das ist das CSS dazu:

Code:

body {

    background-image: url("light-tile.gif");

    line-height: 150%;

    margin-left: 200px;

    margin-right: 200px;

    margin-top: 100px;

    margin-bottom: 100px;

    text-align: justify;

    font-size: 1em;

    font-family: serif;

}

#Ueschrift {

    text-align: center;

    font-size: 2.50em;

    font-family: fantasy;

    font-weight: bold;

}

nav {

    text-align: center;

}

nav a {

    font-family: monospace;

    font-weight: bold;

    text-decoration: none;

    color: #DC143C;

 }

nav a:hover {

    color: #008000;

 }

.Ende {

    text-align: center;

}

#Rechte {

  text-align: center;

  font-size: 0.75em;

}

Freue mich über Kritik & Anregungen, bin ich permanent am Ausprobieren & Lernen.

09.08.2015 14:31

Bitte <p> nur für Absätze verwenden. HTML5 bietet schöne Semantik-Tags. <br> bitte nicht für Abstände verwenden, dazu lieber in CSS Margins setzen. Da du ja auch einen Newsbereich ansprichst, bietet sich hier für die einzelnen Beiträge <article> an. Für die einzelnen Bereiche der Seite nimm am besten <section>. Das meta charset geht inzwischen kürzer.

Neues HTML: http://pastebin.com/Pj8nBqwm

Das CSS kann generell nahezu so bleiben. Ein Hinweis: Wenn du nur auf etwas bestimmtes verweisen willst, nutze > im Selektor. So würde "header" alle Header aufgreifen, während "body > header" nur den Header vom body und nicht von späterem nutzen kann.

Neues CSS: http://pastebin.com/Sc5m3RCY

Sehr lesenswert: http://html5doctor.com/element-index/ (Einfach mal bei ein paar Sachen auf "Our Prognosis" klicken für Beispiele)
Beispiel für <article>: http://html5doctor.com/the-article-element/