nicht angemeldet
CSS Unter-Definitionen werden nicht umgesetzt - Bug?
Morgn Leute.
Ich hab ein mittelschweres Problem mit einer CSS Sache.
Ich habe mir ein Menü erstellt, in dem Links mit der Entsprechenden ID als block (display:block) dargestellt werden. Dazu noch einige Hover Effekte, u.a. einer der eine Infobox zu jedem Link anzeigen soll. Tut er auch, klappt eigentlich alles. Nur: Schrift etc. sollen in der Infobox anders sein als die Links. Hab natürlich speziell für die Infobox ( Daten stehen in einem span ) eine CSS Definition gemacht. Klappt aber nicht - hedenfall text-decoration und Schriftgröße nicht.
Wie kann ich den Text der Infoboxen gestalten wie ich will, aber ohne bei meinem Menü JS etc. zu benutzen?
Hier der Quelltext vom Menü inkl. CSS Definitionen:
------------------------------------------------------
<html>
<head>
<title>Test</title>
<style type="text/css">
div#menulink a
{
border-right:#000000 3px solid;
border-left:#000000 3px solid;
padding-right:10px;
display:block;
padding-left:10px;
border-left-width:3px;
background:#8080C0;
border-bottom-width:3px;
padding-bottom:5px;
margin: 2px 2px2px;
color:#FFFFFF;
padding-top:3px;
text-align:center;
text-decoration:none;
top:100px;
width:150px;
font-weight:bold;
}
div#menulink a:hover
{
border-right:#000000 3px dotted;
padding-right:10px;
display:block;
padding-left:10px;
border-left-width:3px;
background:#CCCCFF;
border-bottom-width:3px;
padding-bottom:5px;
margin:2px 2px 2px;
color:#FF0000;
padding-top:3px;
text-align:center;
text-decoration:underline overline;
top:100px;
width:150px;
font-weight:bold;
}
div#menulink a .infotext
{
display:none;
}
div#menulink a:hover .infotext
{
position:absolute;
top:140px;
left:130px;
display:block;
width:150px;
font-size:small;
font-weight:normal;
fontsize:6pt;
background:#EEEEEE;
border:1px dashed #FF0000;
color:#FF00FF;
padding:5px;
text-decoration:none;
}
</style>
</head>
<body>
<div id="menulink">
<a href="#">Home<span class="infotext">Startseite dieser Seite</span></a>
<a href="#">Barriefreiheit<span class="infotext" font-size="8">Informationenüber Barrierefreiheit dieser Seite</span></a>
<a href="#">Links<span class="infotext">Links zum Thema Barrierefreiheit</span></a>
<a href="#">Impressum<span class="infotext">Impressum dieser Seite</span></a>
</div>
</body>
</html>
--------------------------------------------
-
hi,
Nur: Schrift etc. sollen in der Infobox anders sein als die Links. Hab natürlich speziell für die Infobox ( Daten stehen in einem span ) eine CSS Definition gemacht. Klappt aber nicht - hedenfall text-decoration und Schriftgröße nicht.
das das für text-decoration nicht funktionieren kann, sollte eigentlich logisch sein.
nimm an du stehst in einem zimmer, dass hat einen fussboden.
in diesem zimmer steht jetzt ein pappkarton ohne fussboden. wenn du dich in den reinstellst, fällst du aber nicht in unendliche tiefen, sondern stehst immer noch auf dem fussboden des zimmers - weil sich der karton ja in diesem zimmer befindet.gruß,
wahsaga--
"Look, that's why there's rules, understand? So that you _think_ before you break 'em."-
Hallo wahsaga,
das das für text-decoration nicht funktionieren kann, sollte eigentlich logisch sein.
nun weiß ich nicht, ob du das "grundsätzlich" meinst oder nur bez. der vorhandenen Fehler? Im ersteren Fall müsste ich dann widersprechen. Denn der gewünschte Effekt geht - wenn der Quellcode stimmt (DOCTYPE XHTML 1.0 - u. a.)!
nimm an du stehst in einem zimmer, dass hat einen fussboden. in diesem zimmer steht jetzt ein pappkarton ohne fussboden ...
Die Geschichte gefällt mir. In meinem Fall kann ich mir in dem bodenlosen Karton noch einen Schlauch vorstellen, auf dem ich drauf stehe und insofern erst recht nicht in unendliche Tiefen falle, da dieser zusätzlichen "Halt" gibt. ;-)
Gruß, Bubario
-
Ok danke erstmal.
Die Geschichte mit dem Fussboden - ich glaub da muss ich vorher was trinken um den Bezug zu meinem Problem zu finden.
Mal abgesehen von dem fontsize Fehler, wenn der weg ist gehts auch nicht.Hätte denn jetzt jemand einen konkreten Lösungsvorschlag, wie ich zumindest die Schriftgrösse in der Info-Box ändern kann?
Wär klasse.Und das mitm text-decoration: Wenn ich 'none' angebe, und das eben für den Speziellen Fall, MUSS er das doch auch umsetzen.
Keiner eine Idee, wie ich das hinbekomm?
Danke schonmal,
Tille.-
Hallo Tille
Hätte denn jetzt jemand einen konkreten Lösungsvorschlag, wie ich zumindest die Schriftgrösse in der Info-Box ändern kann?
Mit einer _festen_ Schriftgröße!
Und das mit text-decoration: Wenn ich 'none' angebe, und das eben für den Speziellen Fall, MUSS er das doch auch umsetzen.
Muss? Vielleicht. Vielleicht aber auch nicht. Ein Browser kann (will?) nichts verneinen, was nicht da ist. Also musst du ihm zuerst sagen, dass du underline und overline haben willst und dann - und wirklich erst dann - akzeptiert er dein decoration: none!
Damit das in allen Browsern läuft, ist DOCTYPE ... XHTML 1.0 ...unabdingbar! Dann sind sie sogar so was von umgänglich, dass sie dir alle Schriften, alle Größen und alle Farben mit innigster Hingabe auf deinen Bildschirm malen ...
Gruß, Bubario
-
Aber ich hab doch festgelegt, dass alle <a>'s mit der ID #menulink die text-decoration:underline overline haben.
Nur für den Span hab ich ja dann festgelegt, dass dann wieder none ist.
Aber es wird ja trotzdem nicht akzeptiert.Mit dem DOCTYPE XHTML 1.0 - was hat es damit auf sich?
Konnte in SelfHTML selber keinen Bezug zu meinem Problem herstellen.Und wegen der festen Schriftgröße: Nuja, des ist ja das was ich nicht will. Ich meine die Schrift im Menü soll schon hervorgehoben sein, im Gegensatz zu der in der Infobox.
Aber trotzdem erstmal Danke!
MfG,
Tille-
Hallo Tille,
Nur für den Span hab ich ja dann festgelegt, dass dann wieder none ist.
Eben. Das ist ja dein Fehler! Auch diesem musst du zuerst "decoration: underline overline" zuweisen und dann wieder auf none setzen. Steht aber schon im letzten Posting.
Mit dem DOCTYPE XHTML 1.0 - was hat es damit auf sich?
Stichworte zur Suche: Doctype, xhtml
Konnte in SelfHTML selber keinen Bezug zu meinem Problem herstellen.
Direkt hat es keinen Bezug, indirekt _nur_ den, dass es _ohne_ nicht geht.
Und wegen der festen Schriftgröße: Nuja, des ist ja das was ich nicht will. Ich meine die Schrift im Menü soll schon hervorgehoben sein, im Gegensatz zu der in der Infobox.
Was spricht dagegen, dem Menue einen Apfel zu geben und der Infobox eine Kirsche?
Gruß, Bubario
-
hi,
Nur für den Span hab ich ja dann festgelegt, dass dann wieder none ist.
Eben. Das ist ja dein Fehler! Auch diesem musst du zuerst "decoration: underline overline" zuweisen und dann wieder auf none setzen.
Steht aber schon im letzten Posting.
und auch dort schon hätte ich es gerne als quatsch bezeichnet.
es sei denn, du überzeugst mich mit einem (validen) online-beispiel vom gegenteil.
gruß,
wahsaga--
"Look, that's why there's rules, understand? So that you _think_ before you break 'em."-
Hallo wahsaga!
und auch dort schon hätte ich es gerne als quatsch bezeichnet.
Richtig. Aber seltsamer Weise geht's doch unter WinXP mit IE 6, NN 7.1, Opera 7.54 und FF 1.0. Nur der Konqueror will nicht.
es sei denn, du überzeugst mich mit einem (validen) online-beispiel vom gegenteil.
Valide ist die Datei. Doppelt getestet. Nur kann ich hier keinen Link angeben. Der Domaineigner wäre wenig begeistert ...
Gruß, Bubario
------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<title>Test</title>
<style type="text/css"><!--div#menulink a {
color: #ffffff;
font-size: 16px;
font-family: "Times New Roman";
font-weight: bold;
text-decoration: none;
background: #8080c0;
text-align: center;
display: block;
margin: 2px;
padding: 3px 10px 5px;
width: 150px;
border-right: 3px solid #000000;
border-bottom: 3px none;
border-left: 3px solid #000000
}div#menulink a:hover {
color: #336;
font-weight: bold;
text-decoration: underline overline;
background: #ccccff;
text-align: center;
display: block;
margin: 2px;
padding: 3px 10px 5px;
width: 150px;
border-right: 3px dotted #000000;
border-bottom: 3px none;
border-left: 3px solid #000
}div#menulink a .infotext {
font-size: 11px;
font-family: Verdana;
text-decoration: underline overline;
display: none
}div#menulink a:hover .infotext {
color: #666;
font-weight: normal;
text-decoration: none;
background: #eeeeee;
display: block;
padding: 5px;
position: absolute;
top: 140px;
left: 130px;
width: 150px;
border: dashed 1px #8080c0
}--></style>
</head>
<body>
<div id="menulink">
<a href="#">Home<span class="infotext">Startseite dieser Seite</span></a>
<a href="#">Barriefreiheit<span class="infotext">Informationenüber Barrierefreiheit dieser Seite</span></a>
<a href="#">Links<span class="infotext">Links zum Thema Barrierefreiheit</span></a>
<a href="#">Impressum<span class="infotext">Impressum dieser Seite</span></a></div>
</body></html>
-
Ok danke euch allen,
jetzt klappts.
-
-
Hi,
Eben. Das ist ja dein Fehler! Auch diesem musst du zuerst "decoration: underline overline" zuweisen und dann wieder auf none setzen.
und auch dort schon hätte ich es gerne als quatsch bezeichnet.
es sei denn, du überzeugst mich mit einem (validen) online-beispiel vom gegenteil.
Das funkioniert tatsächlich - auch wenn's Blödsinn ist - im IE (wo sonst;-)
p#decoration a { text-decoration:none; border-bottom:0 none; color:blue; }
p#decoration a:hover { text-decoration:underline overline; border-bottom:1px dashed black; color:red; }
p#decoration a:hover span { text-decoration:underline overline; }
p#decoration a:hover span { text-decoration:none; border-bottom:0 none; color:green; }<p id="decoration"><a href="#">Link <span>Span</span></a></p>
Ergibt im IE bei hover: roten "Link" mit border-bottom, under- und overline, grünen "Span" nur mit border-bottom. Läßt man die dritte Definition weg, geht der overline über den Span.
freundliche Grüße
Ingo
-
-
-
hi,
Aber ich hab doch festgelegt, dass alle <a>'s mit der ID #menulink die text-decoration:underline overline haben.
Nur für den Span hab ich ja dann festgelegt, dass dann wieder none ist.
Aber es wird ja trotzdem nicht akzeptiert.deshalb ja mein karton-beispiel.
der span befindet sich _innerhalb_ deines links, und dieser link hat over- und underline.
ob der span selber jetzt text-decoration:none hat, ist also vollkommen wurscht - weil sein umgebendes element nun mal over- und underline hat.
ob der karton (span) nun einen boden hat (underline) oder nicht (none), ändert doch absolut nichts daran, dass der fussboden (underline des links) auf dem er steht _immer_ da sein wird.
gruß,
wahsaga--
"Look, that's why there's rules, understand? So that you _think_ before you break 'em."
-
-
-
-
-
-
Hi,
div#menulink a:hover .infotext
font-size:small;
font-weight:normal;
fontsize:6pt;fontsize gibt es nicht.
Außerdem steht das doch schon 2 Zeilen weiter oben ...<a href="#">Home<span class="infotext">Startseite dieser Seite</span></a>
<a href="#">Barriefreiheit<span class="infotext" font-size="8">Informationenüber Barrierefreiheit dieser Seite</span></a>
<a href="#">Links<span class="infotext">Links zum Thema Barrierefreiheit</span></a>
<a href="#">Impressum<span class="infotext">Impressum dieser Seite</span></a>Wenn Du wirklich nur so kurze Texte hast, warum verwendest Du nicht das title-Attribut?
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.