[GELÖST] HTML definition von "a" macht Probleme?

Übersicht Sonstiges Smalltalk

Neue Antwort erstellen

 

CO2

ehemals "SirMO"

Betreff: [GELÖST] HTML definition von "a" macht Probleme?

 BeitragSo, Jul 08, 2012 21:13
Antworten mit Zitat
Benutzer-Profile anzeigen
Hallo,
ich übe momentan ein wenig HTML und CSS. Also habe ich versucht eine simple Seite zu schreiben mit ein paar "Special-Effects" Very Happy. Erstmal der Code:
style.css Code: [AUSKLAPPEN]
a:hover {
   font-family: "Comic Sans MS", cursive;
   font-size: 14px;
   background-color: #FF0;
   color: #0C0;
   font-weight: bold;
}
a:visited {
   font-family: "Comic Sans MS", cursive;
   font-size: 14px;
   color: #FF0;
   background-color: #0C0;
   font-weight: bold;
}
a {
   font-family: "Comic Sans MS", cursive;
   font-size: 14px;
   color: #FF0;
   background-color: #0C0;
   font-weight: bold;
}

body {
   font-family: "Comic Sans MS", cursive;
   font-size: 16px;
   padding: 10px;
   height: 600px;
   margin-right: auto;
   margin-left: auto;
}
.box {
   font-family: "Comic Sans MS", cursive;
   font-size: 14px;
   background-color: #0C0;
   padding: 10px;
   width: 600px;
   margin-right: auto;
   margin-left: auto;
   border-style: outset;
   border-width: 5px;
   border-color: #333;
   color: #FF0;
   margin-top: 5px;
   margin-bottom: 5px;
}

table {
   width: 450px;
   margin-right: auto;
   margin-left: auto;
}
td {
   font-family: "Comic Sans MS", cursive;
   font-size: 14px;
}
.r {
   font-family: "Comic Sans MS", cursive;
   font-size: 14px;
   text-align: right;
}
.l {
   font-family: "Comic Sans MS", cursive;
   font-size: 14px;
   text-align: left;
}
.c {
   font-family: "Comic Sans MS", cursive;
   font-size: 14px;
   text-align: center;
   margin-right: auto;
   margin-left: auto;
}
h1 {
   font-family: "Comic Sans MS", cursive;
   font-size: 18px;
   font-weight: bold;
   color: #FF0;
}


test.htm Code: [AUSKLAPPEN]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test, Test, 1, 2, 3</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body bgcolor="#009900">
<div class="box">
<h1 id="01">01.) Inhalt</h1>
<table>
<tr><td class="c"><a href="#01">01.) Inhalt</a></td></tr>
<tr><td class="c"><a href="#02">02.) Lizenz</a></td></tr>
</table>
</div>
<div class="box">
<h1 id="02">02.) Lizenz</h1>
Wichtiges Gefasel, Bla Bla Bla, und so...
<br /><br /><div class="c">|<a href="#01">Zurück</a>|<a href="#01">Inhalt</a>|<a href="#03">Vor</a>|</div>
</div>
</body>
</html>


Das Problem:
Die Links sollen immer wenn der Benutzer mit der Maus über einen link fährt die hintergrund- und schriftfarbe vertauschen. Das funktioniert allerdings nur ein einziges mal.
Außerdem scheinen sie nicht zu funktionieren, da Firefox beim klicken auf einen link nicht zum entsprechenden anker scrollt.
Woran liegt das?
mfG, CO²

Sprachen: BlitzMax, C, C++, C#, Java
Hardware: Windows 7 Ultimate 64-Bit, AMX FX-6350 (6x3,9 GHz), 32 GB RAM, Nvidia GeForce GTX 750 Ti
  • Zuletzt bearbeitet von CO2 am So, Jul 08, 2012 22:15, insgesamt einmal bearbeitet

BtbN

 BeitragSo, Jul 08, 2012 21:18
Antworten mit Zitat
Benutzer-Profile anzeigen
Du hast nirgendwo in dem Code einen anker definiert, zu dem gesprungen werden könnte.

Farbfinsternis

 BeitragSo, Jul 08, 2012 21:40
Antworten mit Zitat
Benutzer-Profile anzeigen
Die Reihenfolge! "a" erbt von "a:hover" in Deiner CSS. Immer "a" zuerst definieren und dann die Pseudo-Klassen!
Farbfinsternis.tv
 

CO2

ehemals "SirMO"

BeitragSo, Jul 08, 2012 21:42
Antworten mit Zitat
Benutzer-Profile anzeigen
@ BtbN:
Auf wikipedia stand, dass seit html 4 fast jedes Tag ein Anker sein kann (sobald man das attribut "id=" dranhängt, da war auch ein beispiel mit h1.
Hier der Wikipedia-Ausschnitt.

@ Farbfinsternis:
Habe es nun wie folgt geändert:
style.css Code: [AUSKLAPPEN]
a {
   font-family: "Comic Sans MS", cursive;
   font-size: 14px;
   color: #FF0;
   background-color: #0C0;
   font-weight: bold;
}
a:hover {
   font-family: "Comic Sans MS", cursive;
   font-size: 14px;
   background-color: #FF0;
   color: #0C0;
   font-weight: bold;
}
a:visited {
   font-family: "Comic Sans MS", cursive;
   font-size: 14px;
   color: #FF0;
   background-color: #0C0;
   font-weight: bold;
}
img {
   margin: 5px;
   border: 3px solid #666;
}


body {
   font-family: "Comic Sans MS", cursive;
   font-size: 16px;
   padding: 10px;
   height: 600px;
   margin-right: auto;
   margin-left: auto;
}
h6 {
   font-family: "Comic Sans MS", cursive;
   font-size: 24px;
   font-weight: bold;
   color: #FF0;
   line-height: 25px;
   text-align: center;
   padding: 10px;
}

.box {
   font-family: "Comic Sans MS", cursive;
   font-size: 14px;
   background-color: #0C0;
   padding: 10px;
   width: 600px;
   margin-right: auto;
   margin-left: auto;
   color: #FF0;
   margin-top: 5px;
   margin-bottom: 5px;
   border: 5px outset #666;
}

h2 {
   font-family: "Comic Sans MS", cursive;
   font-size: 16px;
   font-weight: bold;
   color: #FF0;
   margin-left: 15px;
}


table {
   width: 450px;
   margin-right: auto;
   margin-left: auto;
}
td {
   font-family: "Comic Sans MS", cursive;
   font-size: 14px;
}
.r {
   font-family: "Comic Sans MS", cursive;
   font-size: 14px;
   text-align: right;
}
.l {
   font-family: "Comic Sans MS", cursive;
   font-size: 14px;
   text-align: left;
}
.c {
   font-family: "Comic Sans MS", cursive;
   font-size: 14px;
   text-align: center;
   margin-right: auto;
   margin-left: auto;
}
h1 {
   font-family: "Comic Sans MS", cursive;
   font-size: 18px;
   font-weight: bold;
   color: #FF0;
}

Trotzdem bleibt das Problem leider bestehen.
mfG, CO²

Sprachen: BlitzMax, C, C++, C#, Java
Hardware: Windows 7 Ultimate 64-Bit, AMX FX-6350 (6x3,9 GHz), 32 GB RAM, Nvidia GeForce GTX 750 Ti

Farbfinsternis

 BeitragSo, Jul 08, 2012 21:51
Antworten mit Zitat
Benutzer-Profile anzeigen
Ich habe jetzt nicht erkundet was Du da in Deinem wirren HTML tust, was mir aber aufgefallen ist: Du hast nicht realisiert dass Pseudo Klassen erben. Wenn Du in "a" etwas deklarierst, dann gilt das auch für die Pseudo-Klassen ":hover" und ":visited". In diesen Blöcken musst Du nur die Veränderungen deklarieren.

Ganz davon abgesehen dass ich es für einen Scherz halte "Comic Sans" als Font zu verwenden.
Farbfinsternis.tv
 

CO2

ehemals "SirMO"

BeitragSo, Jul 08, 2012 21:57
Antworten mit Zitat
Benutzer-Profile anzeigen
Habe nochmal drübergeschaut, hier die änderung:
style.css Code: [AUSKLAPPEN]
a {
   font-family: "Comic Sans MS", cursive;
   font-size: 14px;
   color: #FF0;
   background-color: #0C0;
   font-weight: bold;
}
a:visited {
   color: #FF0;
   background-color: #0C0;
   font-weight: bold;
}
a:active {
   background-color: #FF0;
   color: #0C0;
   font-weight: bold;
}
a:hover {
   background-color: #FF0;
   color: #0C0;
   font-weight: bold;
}
img {
   margin: 5px;
   border: 3px solid #666;
}
body {
   font-family: "Comic Sans MS", cursive;
   font-size: 16px;
   padding: 10px;
   height: 600px;
   margin-right: auto;
   margin-left: auto;
}
h6 {
   font-family: "Comic Sans MS", cursive;
   font-size: 24px;
   font-weight: bold;
   color: #FF0;
   line-height: 25px;
   text-align: center;
   padding: 10px;
}
.box {
   font-family: "Comic Sans MS", cursive;
   font-size: 14px;
   background-color: #0C0;
   padding: 10px;
   width: 600px;
   margin-right: auto;
   margin-left: auto;
   color: #FF0;
   margin-top: 5px;
   margin-bottom: 5px;
   border: 5px outset #666;
}
h2 {
   font-family: "Comic Sans MS", cursive;
   font-size: 16px;
   font-weight: bold;
   color: #FF0;
   margin-left: 15px;
}
table {
   width: 450px;
   margin-right: auto;
   margin-left: auto;
}
td {
   font-family: "Comic Sans MS", cursive;
   font-size: 14px;
}
.r {
   font-family: "Comic Sans MS", cursive;
   font-size: 14px;
   text-align: right;
}
.l {
   font-family: "Comic Sans MS", cursive;
   font-size: 14px;
   text-align: left;
}
.c {
   font-family: "Comic Sans MS", cursive;
   font-size: 14px;
   text-align: center;
   margin-right: auto;
   margin-left: auto;
}
h1 {
   font-family: "Comic Sans MS", cursive;
   font-size: 18px;
   font-weight: bold;
   color: #FF0;
}


Zitat:
Ganz davon abgesehen dass ich es für einen Scherz halte "Comic Sans" als Font zu verwenden.
- Warum?
mfG, CO²

Sprachen: BlitzMax, C, C++, C#, Java
Hardware: Windows 7 Ultimate 64-Bit, AMX FX-6350 (6x3,9 GHz), 32 GB RAM, Nvidia GeForce GTX 750 Ti
 

Lion

 BeitragSo, Jul 08, 2012 22:17
Antworten mit Zitat
Benutzer-Profile anzeigen
Abgesehen davon, dass ich fast Augenkrebs bekommen hätte, gingen bei mir sowohl die Anker als auch das Wechseln der Farben beim mouseover problemlos.
Intel Core 2 Quad 4x2.66 ghz - 4gb ddr2 - nvidia GeForce GTX660 2gb
Intel Atom 1x1.83 ghz - 2gb ddr2 - intel GMA 3150 256mb
AMD A10-5750M 4x2.5 ghz - 8 gb ddr4 - AMD R9 M290x

Neue Antwort erstellen


Übersicht Sonstiges Smalltalk

Nach Oben

Gehe zu:

Powered by phpBB © 2001 - 2006, phpBB Group