selfhtml.de - Alles für den Webmaster!

Anzeige: Goneo - Du machst das Web!

Anzeige: united-domains - Die ganze Welt der Domains

Kann bei einem Objekt font nicht formatieren.

Autor: solirocks
Datum: 03.03.2010 14:16:26

Ich habe eine Navigation mit ein wenig JS, PHP und CSS programmiert. Funktioniert beinahe so, wie ich es möchte. Aber den Text des aktiven Links kann ich nicht formatieren. Jegliche Formatierung die den Text betrifft wird einfach nicht übernommen.

Liegt es vielleicht am Javascript?

Mein Code für die Nav:

-----------------------------------------------------------
<script type="text/javascript">
<!--
function mark(id)
{
for(i=0; i <
document.getElementById("mainnav").getElementsByTagName("li").length; i++)
{
document.getElementById("mainnav").getElementsByTagName("li")[i].className="";
}
id.className="over";
}

function toggleswitch(id)
{
var d = document.getElementById(id);
for (var i = 1; i<=7; i++) {
if (document.getElementById('sub'+i)) {document.getElementById('sub'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>


<div class="logo">
<!--<img src="head.png">-->
</div>

<div class="navigation">

<div class="hlist">

<div id="mainnav">

<ul>

<li
<?php if ($thisPage=="page1") {echo " class="over"";} ?>
onmouseover="mark(this); toggleswitch('sub1')">
<a href="#">Page1</a>
</li>

<li
<?php if ($thisPage=="page2") {echo " class="over"";} ?>
onmouseover="mark(this); toggleswitch('sub2')">
<a href="#">Page2</a>
</li>

<li
<?php if ($thisPage=="page3") {echo " class="over"";} ?>
onmouseover="mark(this); toggleswitch('sub3')">
<a href="#">Page3</a>
</li>

<li
<?php if ($thisPage=="page4") {echo " class="over"";} ?>
onmouseover="mark(this); toggleswitch('sub4')">
<a href="#">Page4</a>
</li>

<li
<?php if ($thisPage=="page5") {echo " class="over"";} ?>
onmouseover="mark(this); toggleswitch('sub5')">
<a href="#">Page5</a>
</li>

<li
<?php if ($thisPage=="page6") {echo " class="over"";} ?>
onmouseover="mark(this); toggleswitch('sub6')">
<a href="#">Page6</a>
</li>

<li
<?php if ($thisPage=="page7") {echo " class="over"";} ?>
onmouseover="mark(this); toggleswitch('sub7')">
<a href="#">Page7</a>
</li>

</ul>

</div>

<div style="clear:left;"></div>



<div id="subnav">

<div id="sub1"
<?php if ($thisPage=="page1") {echo " style="display:block;"";}
else {echo " style="display:none;"";}?>>
<ul>
<li>Page1 Eintrag1</li>
<li>|</li>
<li>Page1 Eintrag2</li>
</ul>
</div>

<div id="sub2"
<?php if ($thisPage=="page2") {echo " style="display:block;"";}
else {echo " style="display:none;"";}?>>
<ul>
<li>Page2 Eintrag1</li>
<li>|</li>
<li>Page2 Eintrag2</li>
<li>|</li>
<li>Page2 Eintrag3</li>
</ul>
</div>

<div id="sub3"
<?php if ($thisPage=="page3") {echo " style="display:block;"";}
else {echo " style="display:none;"";}?>>
<ul>
<li>Page3 Eintrag1</li>
<li>|</li>
<li>Page3 Eintrag2</li>
<li>|</li>
<li>Page3 Eintrag3</li>
<li>|</li>
<li>Page3 Eintrag4</li>
</ul>
</div>

<div id="sub4"
<?php if ($thisPage=="page4") {echo " style="display:block;"";}
else {echo " style="display:none;"";}?>>
<ul>
<li>Page4 Eintrag1</li>
<li>|</li>
<li>Page4 Eintrag2</li>
</ul>
</div>

<div id="sub5"
<?php if ($thisPage=="page5") {echo " style="display:block;"";}
else {echo " style="display:none;"";}?>>
<ul>
<li>Page5 Eintrag1</li>
<li>|</li>
<li>Page5 Eintrag2</li>
<li>|</li>
<li>Page5 Eintrag3</li>
</ul>
</div>

<div id="sub6"
<?php if ($thisPage=="page6") {echo " style="display:block;"";}
else {echo " style="display:none;"";}?>>
<ul>
<li>Page6 Eintrag1</li>
<li>|</li>
<li>Page6 Eintrag2</li>
<li>|</li>
<li>Page6 Eintrag3</li>
<li>|</li>
<li>Page6 Eintrag4</li>
</ul>
</div>

<div id="sub7"
<?php if ($thisPage=="page7") {echo " style="display:block;"";}
else {echo " style="display:none;"";}?>>
<ul>
<li>Page7 Eintrag1</li>
<li>|</li>
<li>Page7 Eintrag2</li>
</ul>
</div>


  </div>
</div>
</div>

-----------------------------------------------------------


Und hier das dazugehörige CSS
-----------------------------------------------------------

/* Hier ist das style-template zur Navigation */

.navigation {
margin-left:-22px;
margin-top:-61px;
}

.over {
color:#104380;
background-color: #dad7d7;
}

#mainnav li{
font-size: 16px;
font-weight:bold;
padding-top:3px;
padding-left:8px;
padding-right:8px;
padding-bottom:5px;
}

#mainnav a:link, #mainnav  a:visited, #mainnav  a:focus, #mainnav  a:active {
color:white;
text-decoration:none;
}

#mainnav a:hover {
color:#104380;
text-decoration:none;
}

#subnav {
margin-top:-15px;
padding-bottom:1px;
}

#subnav li{
color: #104380;
font-size: 12px;
padding-left:3px;
padding-right:3px;
}

.hlist li {
float:left;
list-style:none;
display:inline;
}

/* Hier ist das style-template zur Navigation */

Anzeige: Goneo - Du machst das Web!

Anzeige: united-domains - Die ganze Welt der Domains

Re: Kann bei einem Objekt font nicht formatieren.

Autor: solirocks
Datum: 03.03.2010 14:18:49

Natürlich ein Hallo an alle!

Und danke schon einmal.

Anzeige: Goneo - Du machst das Web!

Anzeige: united-domains - Die ganze Welt der Domains

Re: Kann bei einem Objekt font nicht formatieren.

Autor: reporter
Datum: 03.03.2010 14:43:42

Hallo,

kannst du uns den HTML-Kode zur Verfügung stellen, den der Browser bekommt? Nicht alle Helfer sind in PHP bewandert.

Mit "Datei" -> "Speichern unter..." ist dies möglich.

Anzeige: Goneo - Du machst das Web!

Anzeige: united-domains - Die ganze Welt der Domains

Re: Kann bei einem Objekt font nicht formatieren.

Autor: solirocks
Datum: 03.03.2010 14:45:34

> Hallo,
>
> kannst du uns den HTML-Kode zur Verfügung
> stellen, den der Browser bekommt? Nicht alle
> Helfer sind in PHP bewandert.
>
> Mit "Datei" -> "Speichern unter..." ist dies
> möglich.

Werde ich machen. Allerdings habe ich das CSS ein wenig angepasst. In einer halbe Stunde werde ich dann meinen aktuellen Code posten.

Soli

Anzeige: Goneo - Du machst das Web!

Anzeige: united-domains - Die ganze Welt der Domains

Re: Kann bei einem Objekt font nicht formatieren.

Autor: solirocks
Datum: 03.03.2010 15:02:46

So...!

Html Code (man beachte, ich arbeite zusätzlich mit PHP)

------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd">
<html>  
  <head>        
    <title>Deutsche Helikopter
    </title>

      
    <link rel="stylesheet" type="text/css" href="style.css">    
    <!--[if IE]>
        <style type="text/css">@import url(ie.css);</style>
      <![endif]-->            
  </head>          
  <body class="theme" name="mainbody" id="body1">
  
<div class="main">
<div class="header">
        
        <script type="text/javascript">
<!--
function mark(id)
{
for(i=0; i <
document.getElementById("mainnav").getElementsByTagName("li").length; i++)
{
document.getElementById("mainnav").getElementsByTagName("li")[i].className="";
}
id.className="over";
}

function toggleswitch(id)
{
var d = document.getElementById(id);
for (var i = 1; i<=7; i++) {
if (document.getElementById('sub'+i)) {document.getElementById('sub'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>

<div class="logo">
<!--<img src="head.png">-->
</div>

<div class="navigation">

<div class="hlist">

<div id="mainnav">

<ul>

<li
class="over"onmouseover="mark(this); toggleswitch('sub1')">
<a href="#">Page1</a>
</li>

<li

onmouseover="mark(this); toggleswitch('sub2')">
<a href="#">Page2</a>
</li>

<li

onmouseover="mark(this); toggleswitch('sub3')">
<a href="#">Page3</a>
</li>

<li

onmouseover="mark(this); toggleswitch('sub4')">
<a href="#">Page4</a>
</li>

<li

onmouseover="mark(this); toggleswitch('sub5')">

<a href="#">Page5</a>
</li>

<li

onmouseover="mark(this); toggleswitch('sub6')">
<a href="#">Page6</a>
</li>

<li

onmouseover="mark(this); toggleswitch('sub7')">
<a href="#">Page7</a>
</li>

</ul>

</div>

<div style="clear:left;"></div>



<div id="subnav">

<div id="sub1"
style="display:block;">
<ul>
<li>Page1 Eintrag1</li>
<li>|</li>
<li>Page1 Eintrag2</li>
</ul>
</div>

<div id="sub2"
style="display:none;">
<ul>
<li>Page2 Eintrag1</li>
<li>|</li>
<li>Page2 Eintrag2</li>
<li>|</li>
<li>Page2 Eintrag3</li>
</ul>
</div>

<div id="sub3"
style="display:none;">

<ul>
<li>Page3 Eintrag1</li>
<li>|</li>
<li>Page3 Eintrag2</li>
<li>|</li>
<li>Page3 Eintrag3</li>
<li>|</li>
<li>Page3 Eintrag4</li>
</ul>
</div>

<div id="sub4"
style="display:none;">
<ul>
<li>Page4 Eintrag1</li>
<li>|</li>
<li>Page4 Eintrag2</li>
</ul>
</div>

<div id="sub5"
style="display:none;">
<ul>
<li>Page5 Eintrag1</li>
<li>|</li>

<li>Page5 Eintrag2</li>
<li>|</li>
<li>Page5 Eintrag3</li>
</ul>
</div>

<div id="sub6"
style="display:none;">
<ul>
<li>Page6 Eintrag1</li>
<li>|</li>
<li>Page6 Eintrag2</li>

<li>|</li>
<li>Page6 Eintrag3</li>
<li>|</li>
<li>Page6 Eintrag4</li>
</ul>
</div>

<div id="sub7"
style="display:none;">
<ul>
<li>Page7 Eintrag1</li>
<li>|</li>

<li>Page7 Eintrag2</li>
</ul>
</div>


  </div>
</div>
</div>


        <div style="clear:left;"> </div>
        
<img width="923" src="grafiken/bild.png">    
      
   </div>

        
      <div class="content">
           
      <div class="cleft">
        <h3>Willkommen</h3>   

<p>Unsere Aufgabe ist die detaillierte Planung Ihres Einsatzes unter Einbeziehung vieler preis-entscheidender Faktoren. Da wir auf sämtliche Helikopter in ganz Europa zugreifen, können wir Ihnen eine einmalige Transparenz bieten. Wir kalkulieren Ihnen in kürzester Zeit ein persönliches Angebot. Dabei können wir dank unseres internationalen Netzwerkes immer den Helikopter anbieten mit dem geringsten Anflug und den besten Eigenschaften für Ihren Einsatz. </p>

<h3>Auswahl des Helikopters</h3>
<p>Bei der Auswahl des richtigen Helikopters spielen viele preisbildende Faktoren eine Rolle. Bei einigen Helikoptern werden die Kamerahalterungen an der Seite und bei einigen an der Nase des Helikopters angebracht. Nur wenige Helikopter dürfen Nachts fliegen, noch weniger dürfen über Wasser fliegen.
Um die Sicherheitsmindestflughöhe unterschreiten zu dürfen muss man bei der Bezirksregierung eine Genehmigung einholen und der Helikopter muss bestimmten Vorgaben entsprechen.
Dies war nur ein kleiner Auszug aus Punkten, die bei einem Film- oder Fotoflug bedacht werden müssen.
Unsere Experten beraten Sie gerne in einem persönlichen Gespräch oder Telefonat. </p>   </div>
  
      <div class="cright">
  <div class="news">

        <h3>News News, wir haben News!</h3>   

<p>Unsere Aufgabe ist die detaillierte Planung Ihres Einsatzes unter Einbeziehung vieler preis-entscheidender Faktoren. Da wir auf sämtliche Helikopter in ganz Europa zugreifen, können wir Ihnen eine einmalige Transparenz bieten. <a href="#">(mehr)</a></p>

<h3>News News, wir haben News!</h3>   

<p>Unsere Aufgabe ist die detaillierte Planung Ihres Einsatzes unter Einbeziehung vieler preis-entscheidender Faktoren. Da wir auf sämtliche Helikopter in ganz Europa zugreifen, können wir Ihnen eine einmalige Transparenz bieten. <a href="#">(mehr)</a></p>      </div>
      </div>
      
      <div style="clear:left;"> </div>

  
      </div>       
  
      </div>
  
  </body>
</html>

-----------------------------------------------------------


Code Nav.php
-----------------------------------------------------------
<script type="text/javascript">
<!--
function mark(id)
{
for(i=0; i <
document.getElementById("mainnav").getElementsByTagName("li").length; i++)
{
document.getElementById("mainnav").getElementsByTagName("li")[i].className="";
}
id.className="over";
}

function toggleswitch(id)
{
var d = document.getElementById(id);
for (var i = 1; i<=7; i++) {
if (document.getElementById('sub'+i)) {document.getElementById('sub'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>


<div class="logo">
<!--<img src="head.png">-->
</div>

<div class="navigation">

<div class="hlist">

<div id="mainnav">

<ul>

<li
<?php if ($thisPage=="page1") {echo " class="over"";} ?>
onmouseover="mark(this); toggleswitch('sub1')">
<a href="#">Page1</a>
</li>

<li
<?php if ($thisPage=="page2") {echo " class="over"";} ?>
onmouseover="mark(this); toggleswitch('sub2')">
<a href="#">Page2</a>
</li>

<li
<?php if ($thisPage=="page3") {echo " class="over"";} ?>
onmouseover="mark(this); toggleswitch('sub3')">
<a href="#">Page3</a>
</li>

<li
<?php if ($thisPage=="page4") {echo " class="over"";} ?>
onmouseover="mark(this); toggleswitch('sub4')">
<a href="#">Page4</a>
</li>

<li
<?php if ($thisPage=="page5") {echo " class="over"";} ?>
onmouseover="mark(this); toggleswitch('sub5')">
<a href="#">Page5</a>
</li>

<li
<?php if ($thisPage=="page6") {echo " class="over"";} ?>
onmouseover="mark(this); toggleswitch('sub6')">
<a href="#">Page6</a>
</li>

<li
<?php if ($thisPage=="page7") {echo " class="over"";} ?>
onmouseover="mark(this); toggleswitch('sub7')">
<a href="#">Page7</a>
</li>

</ul>

</div>

<div style="clear:left;"></div>



<div id="subnav">

<div id="sub1"
<?php if ($thisPage=="page1") {echo " style="display:block;"";}
else {echo " style="display:none;"";}?>>
<ul>
<li>Page1 Eintrag1</li>
<li>|</li>
<li>Page1 Eintrag2</li>
</ul>
</div>

<div id="sub2"
<?php if ($thisPage=="page2") {echo " style="display:block;"";}
else {echo " style="display:none;"";}?>>
<ul>
<li>Page2 Eintrag1</li>
<li>|</li>
<li>Page2 Eintrag2</li>
<li>|</li>
<li>Page2 Eintrag3</li>
</ul>
</div>

<div id="sub3"
<?php if ($thisPage=="page3") {echo " style="display:block;"";}
else {echo " style="display:none;"";}?>>
<ul>
<li>Page3 Eintrag1</li>
<li>|</li>
<li>Page3 Eintrag2</li>
<li>|</li>
<li>Page3 Eintrag3</li>
<li>|</li>
<li>Page3 Eintrag4</li>
</ul>
</div>

<div id="sub4"
<?php if ($thisPage=="page4") {echo " style="display:block;"";}
else {echo " style="display:none;"";}?>>
<ul>
<li>Page4 Eintrag1</li>
<li>|</li>
<li>Page4 Eintrag2</li>
</ul>
</div>

<div id="sub5"
<?php if ($thisPage=="page5") {echo " style="display:block;"";}
else {echo " style="display:none;"";}?>>
<ul>
<li>Page5 Eintrag1</li>
<li>|</li>
<li>Page5 Eintrag2</li>
<li>|</li>
<li>Page5 Eintrag3</li>
</ul>
</div>

<div id="sub6"
<?php if ($thisPage=="page6") {echo " style="display:block;"";}
else {echo " style="display:none;"";}?>>
<ul>
<li>Page6 Eintrag1</li>
<li>|</li>
<li>Page6 Eintrag2</li>
<li>|</li>
<li>Page6 Eintrag3</li>
<li>|</li>
<li>Page6 Eintrag4</li>
</ul>
</div>

<div id="sub7"
<?php if ($thisPage=="page7") {echo " style="display:block;"";}
else {echo " style="display:none;"";}?>>
<ul>
<li>Page7 Eintrag1</li>
<li>|</li>
<li>Page7 Eintrag2</li>
</ul>
</div>


  </div>
</div>
</div>

------------------------------------------------------------


CSS-Code
------------------------------------------------------------
/* Hier ist das style-template zur Navigation */

.navigation {
margin-top:-59px;
}

.over a:link, .over  a:visited, .over  a:focus, .over  a:active {
background-color: #dad7d7;
border-top:solid grey 1px;
border-left:solid grey 1px;
border-right:solid grey 1px;
}

#mainnav a:link, #mainnav  a:visited, #mainnav  a:focus, #mainnav  a:active {
color:#104380;
padding-top:4px;
padding-left:11px;
padding-right:11px;
padding-bottom:7px;
color:white;
font-size: 16px;
font-weight:bold;
text-decoration:none;
}

#mainnav a:hover {
color:#104380;
background-color: #dad7d7;
text-decoration:none;
}

#subnav {
margin-top:-8px;
margin-bottom: 3px;
}

#subnav li{
font-size: 12px;
padding-left:2px;
padding-right: 2px;
padding-bottom:3px;
}

.hlist li {
float:left;
list-style:none;
display:inline;
}

/* Hier ist das style-template zur Navigation */
-----------------------------------------------------------


Ich hoffe Ihr könnt mir helfen!

Danke

Anzeige: Goneo - Du machst das Web!

Anzeige: united-domains - Die ganze Welt der Domains

Re: Kann bei einem Objekt font nicht formatieren.

Autor: gaby
Datum: 03.03.2010 17:03:55

> So...!
>
> Html Code (man beachte, ich arbeite zusätzlich
> mit PHP)

Das ist irrelevant bei Layoutfehlern.
PHP-Scripte laufen nur auf einem Server, aber nicht jeder der Helfer hat einen (lokalen) Server zur Verfügung, um deine Scripte auflösen zu lassen.
Ergo müßten sich andere User alles per Hand umschreiben, was einen vermeidbaren Mehraufwand bedeutet.


Bitte beachte deshalb

http://www.sve-fre.de/selfhtml/netiquette/index.php?a=text5_2#text5_2

Den Quellcode, den der Browser ausgibt, bekommst du auch mit

"Ansicht" --> "Quelltext anzeigen" in der Browsermenüleiste.


Grüße
gaby

Anzeige: Goneo - Du machst das Web!

Anzeige: united-domains - Die ganze Welt der Domains

Re: Kann bei einem Objekt font nicht formatieren.

Autor: solirocks
Datum: 04.03.2010 00:57:59

> > So...!
> >
> > Html Code (man beachte, ich arbeite zusätzlich
> > mit PHP)

> Das ist irrelevant bei Layoutfehlern.
> PHP-Scripte laufen nur auf einem Server,
> aber nicht jeder der Helfer hat einen
> (lokalen) Server zur Verfügung, um deine
> Scripte auflösen zu lassen.
> Ergo müßten sich andere User alles per
> Hand umschreiben, was einen vermeidbaren
> Mehraufwand bedeutet.


Ich programmiere erst seit einer Woche html, css, php und js. Aber ich denke schon, dass php mit ein Grund für einen Layoutfehler sein kann. Da bei mir die Klasse, die relevant für das Stylesheet ist, über einen IF-Ausdruck eines PHP-Codes ermittelt wird. Allerdings wird die Schriftfarbe beim alleinigen einsetzen der Klasse auch nicht übernommen.

Vielleicht liegt es am JS bzw. an der Kombination der beiden Programmiersprachen?

Danke übrigens für die Nettiquette. Soll ich meinen Code auf das wichtigste begrenzen?

Soli

Anzeige: Goneo - Du machst das Web!

Anzeige: united-domains - Die ganze Welt der Domains

Re: Kann bei einem Objekt font nicht formatieren.

Autor: gaby
Datum: 04.03.2010 01:17:33

> Ich programmiere erst seit einer Woche html, css,
> php und js. Aber ich denke schon, dass php mit
> ein Grund für einen Layoutfehler sein kann.

Mit dem php-Script gibts du dem php-Interpreter auf dem Server nur den Befehl, dein Script in html-Anweisungen umzuwandeln und an den Browser zurückzuliefern.
Um den Grund für Layout-Fehler zu erkennen, braucht man also diesen vom php-Interpreter zurückgelieferten HTML- und CSS-Code.

Deshalb im Browser:
"Ansicht" --> "Quellcode" --> in einen Editor kopieren --> auf deiner Festplatte speichern --> css mit internem Stylesheet einbinden --> komplette Datei hier posten..

Wenn ich dir sage, daß dein Problem nichts mit PHP zu tun hat, kannst du das schon glauben. ;-)

Für dich wäre es jedenfalls sehr viel weniger aufwendig, den Quellcode, den der Browser ausgibt, hier zu posten, als es für deine Helfer ist, sich deine Code-Fragmente zusammenzubasteln, und die php-Schnipsel von Hand aufzulösen.


> Danke übrigens für die Nettiquette. Soll ich
> meinen Code auf das wichtigste begrenzen?

Naja, das ist schon noch Ok so, aber bitte alles ab "und auch keine CSS- und HTML-Schnipsel" beachten.


Grüße
gaby

Anzeige: Goneo - Du machst das Web!

Anzeige: united-domains - Die ganze Welt der Domains

Spezifitätsproblem (was: Kann bei einem Objekt font nicht formatieren.)

Autor: gaby
Datum: 04.03.2010 09:41:35

> Hat sich erledigt. Woran es nun genau lag, das
> weiß ich nicht.


Lies bitte hierzu:

http://jendryschik.de/wsdev/einfuehrung/css/kaskade

(Kapitel "Reihenfolge")

| Die Spezifität eines Selektors besteht aus vier einzelnen Werten,
| die nacheinander notiert werden: A, B, C und D.
|
|
| 1. A wird für CSS-Regeln auf 1 gesetzt, die durch ein
| Attribut style im Quelltext definiert sind, ansonsten auf 0.
|
| 2. B ist die Anzahl der id-Attribute eines Selektors.
|
| 3. C ist die Anzahl aller anderen Attribute einschließlich
| Klassen und Pseudoklassen innerhalb des Selektors.
|
| 4. D ist die Anzahl der Elementnamen und Pseudoelemente,
| die der Selektor beinhaltet


Die Spezifität für #mainnav a:link berechnet sich also wie folgt:

kein Style-Attribut im HTML-Quellcode, --> A = 0,
ein ID-Attribut (hier "#mainnav") --> B = 1,
eine Pseudoklasse (hier ":link") --> C = 1,
ein Elementname (hier "a") --> D = 1

Die Spezifität für #mainnav a:link ist demnach 0,1,1,1




Die Spezifität für .over a:link berechnet sich wie folgt:

kein Style-Attribut im HTML-Quellcode, --> A = 0,
kein ID-Attribut --> B = 0,
eine Pseudoklasse (hier ":link") +
eine Klasse (hier ".over") --> C = 2,
ein Elementname (hier "a") --> D = 1

Die Spezifität für .over a:link ist demnach 0,0,2,1
und somit geringer, als die von #mainnav a:link (0,1,1,1). Ergo kann Letzteres nicht von ".over a:link" überschrieben werden.

Lösung:
Dem ".over a:link" noch den ID-Selektor "#mainnav" voranstellen, um die Spezifizät zu erhöhen.

Anzeige: Goneo - Du machst das Web!

Anzeige: united-domains - Die ganze Welt der Domains

Re: Kann bei einem Objekt font nicht formatieren.

Autor: solirocks
Datum: 04.03.2010 16:08:49

Hat sich erledigt. Woran es nun genau lag, das weiß ich nicht. Daher habe ich die Funktion mark entfernt, 2-3 neue Klassen angelegt und mit einigen weiteren PHP-Befehlen gearbeitet. Läuft. ;D

Anzeige: Goneo - Du machst das Web!

Anzeige: united-domains - Die ganze Welt der Domains

Re: Spezifitätsproblem

Autor: solirocks
Datum: 05.03.2010 18:25:01

Sehr interessanter Beitrag. Natürlich war dies der Fehler, habe es eben ausprobiert.

Meine Lösung war PHP-bezogen und sah so aus:

<a href="#"><?php if ($thisPage=='page2') {echo "<font color='#104380'>";} ?>
LINKTEXT
<?php if ($thisPage=='page1') {echo "</font>";} ?></a>

Aber jetzt, da ich weiß wie das Kaskade-System funktioniert, kann ich mir diesen überflüssigen Codeteil sparen.

Vielen Dank!



> > Hat sich erledigt. Woran es nun genau lag, das
> > weiß ich nicht.
>
>
> Lies bitte hierzu:
>
>
> http://jendryschik.de/wsdev/einfuehrung/css/kaskade
>
> (Kapitel "Reihenfolge"
>
> | Die Spezifität eines Selektors besteht aus vier einzelnen Werten,
> | die nacheinander notiert werden: A, B, C und D.
> |
> |
> | 1. A wird für CSS-Regeln auf 1 gesetzt, die durch ein
> | Attribut style im Quelltext definiert sind, ansonsten auf 0.
> |
> | 2. B ist die Anzahl der id-Attribute eines Selektors.
> |
> | 3. C ist die Anzahl aller anderen Attribute einschließlich
> | Klassen und Pseudoklassen innerhalb des Selektors.
> |
> | 4. D ist die Anzahl der Elementnamen und Pseudoelemente,
> | die der Selektor beinhaltet
>
>
> Die Spezifität für #mainnav a:link berechnet sich also wie folgt:
>
> kein Style-Attribut im HTML-Quellcode, --> A = 0,
> ein ID-Attribut (hier "#mainnav") --> B = 1,
> eine Pseudoklasse (hier ":link") --> C = 1,
> ein Elementname (hier "a") --> D = 1
>
> Die Spezifität für #mainnav a:link ist demnach 0,1,1,1
>
>
>
>
> Die Spezifität für .over a:link berechnet sich wie folgt:
>
> kein Style-Attribut im HTML-Quellcode, --> A = 0,
> kein ID-Attribut --> B = 0,
> eine Pseudoklasse (hier ":link") +
> eine Klasse (hier ".over" --> C = 2,
> ein Elementname (hier "a") --> D = 1
>
> Die Spezifität für .over a:link ist demnach 0,0,2,1
> und somit geringer, als die von #mainnav a:link
> (0,1,1,1), ergo kann Letzteres nicht von ".over
> a:link" überschrieben werden.
>
> Lösung:
> Dem ".over a:link" noch den ID-Selektor "#mainnav" voranstellen.