eXma » Diskutieren » Computer und Technik
Startseite - Veranstaltungen - Mitglieder - Suche
Vollständige Version anzeigen: CSS - Attributbedingtes Format festlegen
chelys
Ich sitze jetzt schone eine Weile hier dran, ohne zu einem zufriedenstellenden Ergebnis zu kommen. Folgende Situation:

In XHTML-Seiten kommen mehrere Fußnoten vor. Die erste Fußnote auf der Seite soll (damit sich das Ganze vom Text abhebt) eine horizontale Linie bekommen. Die erste Fußnote sieht stets wie folgt aus:

CODE
<p class="Footnote">
<span>
<a class="FootnoteSymbol" href="#bodyftn1" id="ftn1">(1)</a>
</span>
Leonhard Euler (1707 - 1783)
</p>


Die erste Fußnote bekommt also im <a>-Tag die id "ftn1". Das wäre der CSS-Quelltext dazu:

CODE
.Footnote a#ftn1 {
border-top: 1px;
border-top-color: #000000;
border-top-style:solid;
}

.Footnote {
border: none;
}


Das attributabhängige Format ".Footnote a#ftn1" macht jetzt allerdings die horizontale Linie nur über den Link, also den <a>-Tag, nicht über die ganze Zeile, die mit der Klassendefinition "Footnote" versehen ist.

Ich möchte das "Border"-Attribut für die ganze Zeile, also den ganzen <p>-Bereich mit der Klasse "Footnote", nicht nur für das <a>... kann ich das irgendwie festlegen?
mcnesium
ja, indem du dem p class="footnote" den border-top gibst wink.gif
lusch3
Mach doch einfach ein den kompletten <p> Bereich für die Fußnoten mit Border? Oder versteh ich gerade das Problem komplett falsch?
chelys
Jo, sorry ist nicht so zur Geltung gekommen: Es gibt mehrere Fußnoten, die nicht alle die Linie bekommen sollen. Nur das <p> soll "border" bekommen, welches innen verschachtelt den Link mit der id "ftn1" hat. sad.gif

edit:
So ist es im Moment (die Linie ist zu kurz:)
Zitat
bild kann nicht angezeigt werden


So sieht es aus, wenn alle .Footnote-Bereiche border bekommen:
Zitat
bild kann nicht angezeigt werden
mcnesium
na dann machste halt noch ein div um _alle_ fußnoten und gibst dem dann den border.
chelys
Das Problem ist, es soll beim Export von XHTML aus dem OpenOffice.org Writer funktionieren, ohne dass man den Quelltext bearbeitet. Die einzige Möglichkeit ist also CSS... pinch.gif sieht schlecht aus, oder? Speziell geht es ja um das hier:

CODE
.Footnote a#ftn1 {
border-top: 1px;
border-top-color: #000000;
border-top-style:solid;
}


Wie bekomme ich es hin, dass die Deklaration für .Footnote-Bereiche gilt, die einen Link mit der ID "ftn1" enthalten - und nicht für Links mit der ID "ftn1", die in .Footnote-Bereichen enthalten sind g.gif

edit: Danke für die schnellen Antworten! Sitzt ihr alle auf Arbeit am PC und surft auf Exma? biggrin.gif
sn3ek
Zitat(chelys @ 07 Apr 2010, 12:06)
Das Problem ist, es soll beim Export von XHTML aus dem OpenOffice.org Writer funktionieren, ohne dass man den Quelltext bearbeitet. Die einzige Möglichkeit ist also CSS...  pinch.gif  sieht schlecht aus, oder? Speziell geht es ja um das hier:

CODE
.Footnote a#ftn1 {
border-top: 1px;
border-top-color: #000000;
border-top-style:solid;
}


Wie bekomme ich es hin, dass die Deklaration für .Footnote-Bereiche gilt, die einen Link mit der ID "ftn1" enthalten - und nicht für Links mit der ID "ftn1", die in .Footnote-Bereichen enthalten sind g.gif

edit: Danke für die schnellen Antworten! Sitzt ihr alle auf Arbeit am PC und surft auf Exma? biggrin.gif
*


Ich bin student und sitze in meinem zimmer am Rechner wink.gif

zu deinem problem:


CODE

/*Footnote links*/
.Footnote a#ftn1 {
border:none;
text-decoration:none;
}

.Footnote a:hover #ftn1 {
text-decoration:underline;
}

/* footnote ohne links */
.Footnote {
border-top:1px solid #000;
}
mcnesium
aso ist das also. na denn kannst du mal probieren, ob du es so hinkriegst: erst mit
CODE
p.Footnote {border-top: 1px solid #000;}

den rand für alle zu setzen und dann mit
CODE
p.Footnote + p.Footnote {border:none;}

die folgenden p's wieder zu überschreiben.
lusch3
Zitat(mcnesium @ 07 Apr 2010, 12:42)
aso ist das also. na denn kannst du mal probieren, ob du es so hinkriegst: erst mit
CODE
p.Footnote {border-top: 1px solid #000;}

den rand für alle zu setzen und dann mit
CODE
p.Footnote + p.Footnote {border:none;}

die folgenden p's wieder zu überschreiben.
*

Da isses doch aber einfacher das genau umgekehrt zu machen wink.gif

Ansonsten wäre ich auch eher für 2 Klassen a la sne3k.
sn3ek
Zitat(lusch3 @ 07 Apr 2010, 12:58)
Da isses doch aber einfacher das genau umgekehrt zu machen wink.gif

Ansonsten wäre ich auch eher für 2 Klassen a la sne3k.
*


öhm das ist eine Klasse wink.gif
lusch3
Zitat(sn3ek @ 07 Apr 2010, 13:45)
öhm das ist eine Klasse wink.gif
*

Dingens halt biggrin.gif. In diesem Fall halte ich mich nicht mit Formalitäten auf wink.gif.
sn3ek
Zitat(lusch3 @ 07 Apr 2010, 14:40)
Dingens halt biggrin.gif. In diesem Fall halte ich mich nicht mit Formalitäten auf wink.gif.
*


Definitionen
chelys
juhu, danke ich probiere das dann gleich mal aus. Das "+" war mir bei CSS unbekannt smile.gif
stth
bild kann nicht angezeigt werden
chelys
rofl.gif