Neue Antwort schreiben 
 
Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
HTML/CSS Problemchen
Retro92 Offline
Windows Profi

Beiträge: 3.668
Registriert seit: Feb 2013
Beitrag #1
HTML/CSS Problemchen
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.
(Dieser Beitrag wurde zuletzt bearbeitet: 08.08.2015 21:39 von Retro92.)
08.08.2015 21:39
Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
Dirk Offline
Software Archäologe

Beiträge: 14.721
Registriert seit: Jul 2008
Beitrag #2
RE: HTML/CSS Problemchen
Code:
#Navi a
#Navi a:link
#Navi a:visited {}
#Navi a:hover, a:active {
text-decoration:underline;
}

(Dieser Beitrag wurde zuletzt bearbeitet: 08.08.2015 21:44 von Dirk.)
08.08.2015 21:43
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
CHRiSNEW Offline
Internetblasensammler

Beiträge: 2.864
Registriert seit: Jul 2008
Beitrag #3
RE: HTML/CSS Problemchen
Code:
#Navi a {
text-decoration: none;
color: #abc;
}

08.08.2015 21:48
Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
Retro92 Offline
Windows Profi

Beiträge: 3.668
Registriert seit: Feb 2013
Beitrag #4
RE: HTML/CSS Problemchen
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 21:58
Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
mrshadowtux
Unregistered

 
Beitrag #5
RE: HTML/CSS Problemchen
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;
}
08.08.2015 22:14
Diese Nachricht in einer Antwort zitieren
Retro92 Offline
Windows Profi

Beiträge: 3.668
Registriert seit: Feb 2013
Beitrag #6
RE: HTML/CSS Problemchen
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:
.
.
.
(Dieser Beitrag wurde zuletzt bearbeitet: 08.08.2015 22:34 von Retro92.)
08.08.2015 22:34
Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
CHRiSNEW Offline
Internetblasensammler

Beiträge: 2.864
Registriert seit: Jul 2008
Beitrag #7
RE: HTML/CSS Problemchen
(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.

08.08.2015 22:42
Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
Retro92 Offline
Windows Profi

Beiträge: 3.668
Registriert seit: Feb 2013
Beitrag #8
RE: HTML/CSS Problemchen
@chrisnew: Das werde ich auch machen. Danke für den Link!
08.08.2015 22:47
Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
Retro92 Offline
Windows Profi

Beiträge: 3.668
Registriert seit: Feb 2013
Beitrag #9
RE: HTML/CSS Problemchen
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:13
Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
mrshadowtux
Unregistered

 
Beitrag #10
RE: HTML/CSS Problemchen
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/
09.08.2015 14:31
Diese Nachricht in einer Antwort zitieren
Neue Antwort schreiben 


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste