nicht angemeldet
Schaltflächen mit div
Hallo,
Bislang hatte ich immer Schaltflächen, die per Tabelle und JavaScript funktionierten. Nun will ich aber ganz nach dem Featureartikelvorbild lieber div und CSS einsetzen.
Hier mein CSS-Bereich:
.menugroup { display:block; background:#800000; color:#ffffff; font-family:"Arial","Helvetica",sans-serif; font-size:13px; text-align:center; width:90px; margin:1px; height:16px; }
a.menuitem { display:block; background-image:url(hintergrund.gif); background-repeat:no-repeat; height:15px; padding-left:9px; text-align:left; width:120px; font-family:"Arial","Helvetica",sans-serif; font-size:12px; text-decoration:none; margin:1px; }
a.menuitem:link { color:#ffffff; background-color:#c00000; }
a.menuitem:visited { color:#ffffff; background-color:#c00000; }
a.menuitem:hover { color:#ffffff; background-color:#ff4000; }
a.menuitem:active { color:#ffffff; background-color:#c00000; }
Und hier ein html-Ausschnitt:
<div>
<span class="menugroup">Überschrift</span>
<a class="menuitem" href="datei1.html">Link 1</a>
<a class="menuitem" href="datei2.html">Link 2</a>
</div>
Eigentlich bin ich schon ganz zufrieden. Ich habe aber noch zwei Problemkinder:
1. Mein Opera 5 zeigt das Hintergrundbild im Linkfeld nicht an. Bei den Tabellenschaltflächen ging es seinerzeit noch.
2. Der Netscape 4.72 interpretiert das CSS wie erwartet nicht. Leider kann man aber auch die Links nicht anklicken. Das hatte ich nicht erwartet. Wie kann man es trotzdem hinbekommen, dass es für NN-Nutzer zwar blöd aussieht, aber wenigstens klickbar bleibt? Geht das überhaupt? Vielleicht kriegt man es ja sogar hin, dass es auch auf dem NN gut aussieht.
Was würdet ihr am Quellkode noch optimieren oder verändern? Besonders bei den Pseudoelementen sieht es sehr nach doppelt gemoppelt aus, ich kenne mich aber dort nicht so gut aus und traue mich nicht etwas zu löschen.
Vielen Dank
Andreas
-
hi,
- Der Netscape 4.72 interpretiert das CSS wie erwartet nicht. Leider kann man aber auch die Links nicht anklicken.
dann halte ihm die betreffenden css-formatierungen am besten ganz vor, indem du sie per @import einbindest, siehe http://selfhtml.teamone.de/css/formate/einbinden.htm#link_media.
gruss,
wahsaga-
Warum verbockt der das überhaupt? Wenn er das nicht kennt, sollte er es doch einfach ignorieren und nicht den Link aus Trotz unbrauchbar mache.
-
.menugroup { display:block; background:#800000; color:#ffffff; font-family:"Arial","Helvetica",sans-serif; font-size:13px; text-align:center; width:90px; margin:1px; height:16px; }
a.menuitem { display:block; background-image:url(hintergrund.gif); background-repeat:no-repeat; height:15px; padding-left:9px; text-align:left; width:120px; font-family:"Arial","Helvetica",sans-serif; font-size:12px; text-decoration:none; margin:1px; }
a.menuitem:link { color:#ffffff; background-color:#c00000; }
a.menuitem:visited { color:#ffffff; background-color:#c00000; }
a.menuitem:hover { color:#ffffff; background-color:#ff4000; }
a.menuitem:active { color:#ffffff; background-color:#c00000; }Und hier ein html-Ausschnitt:
<div>
<span class="menugroup">Überschrift</span>
<a class="menuitem" href="datei1.html">Link 1</a>
<a class="menuitem" href="datei2.html">Link 2</a>
</div>Naja, eine Überschrift sollte ein Hx sein und die Klassen musst du auch nicht unbedingt zuweisen.
Mach's eher so:
<div id="menu">
<h1>Überschrift</h1>
<a href="datei1.html">Link 1</a>
<a href="datei2.html">Link 2</a>
</div>CSS:
#menu h1{
background:#800000;
color:#ffffff;
font-family:"Arial","Helvetica",sans-serif;
font-size:13px;
text-align:center;
width:90px;
margin:1px;
height:16px;
}#menu a:link{
display:block;
background-image:url(hintergrund.gif);
background-repeat:no-repeat;
height:15px;
padding-left:9px;
text-align:left;
width:120px;
font-family:"Arial","Helvetica",sans-serif;
font-size:12px; text-decoration:none; margin:1px;
}#menu a:link { color:#ffffff; background-color:#c00000; }
#menu a:visited { color:#ffffff; background-color:#c00000; }
#menu a:hover { color:#ffffff; background-color:#ff4000; }
#menu a:active { color:#ffffff; background-color:#c00000; }Struppi.
-
Habe ich micht wohl etwas missverständlich im Beispiel ausgedrückt: "Überschrift" ist eine Menügruppenüberschrift. In meinem Menü gibt es mehrere nicht anklickbare Punkte zu denen jeweils ein paar anklickbare Menüpunkte gehören. Zu Reisebericht gehört zum Beispiel polen.html, rom.html und island.html
Es sind also keine Überschriften wie im Text. Dort benutze ich dann auch h1, h2 etc.
Andreas
-
Habe ich micht wohl etwas missverständlich im Beispiel ausgedrückt: "Überschrift" ist eine Menügruppenüberschrift. In meinem Menü gibt es mehrere nicht anklickbare Punkte zu denen jeweils ein paar anklickbare Menüpunkte gehören. Zu Reisebericht gehört zum Beispiel polen.html, rom.html und island.html
Es sind also keine Überschriften wie im Text. Dort benutze ich dann auch h1, h2 etc.
Ja und? es sind aber trotzdem Überschriften, also was spricht dagegen sie auch so auszuzeichnen?
Struppi.
-
... die Überschriftenhierarchie im Text.
In jedem Text soll es laut W3C nur eine h1-Überschrift geben. Ihr sind dann die Textabsätze und Unterabsätze untergeordnet. Das Menü bleibt da meiner Meinung nach außen vor. Ich will ja nicht, dass mein Text dann letztlich so nummeriert ist:
3.
3.1
3.2
3.3... weil Im Menü schon 1 und 2 vergeben sind. Diese automatische Nummerierung ist ja mit CSS inzwischen möglich.
Andreas
-
... die Überschriftenhierarchie im Text.
In jedem Text soll es laut W3C nur eine h1-Überschrift geben. Ihr sind dann die Textabsätze und Unterabsätze untergeordnet. Das Menü bleibt da meiner Meinung nach außen vor. Ich will ja nicht, dass mein Text dann letztlich so nummeriert ist:
In jedem Abschnit, nicht in jedem text.
3.1
3.2
3.3... weil Im Menü schon 1 und 2 vergeben sind. Diese automatische Nummerierung ist ja mit CSS inzwischen möglich.
Du hast verschiedene Bereiche und in diesen Bereichen gibt es verschiedene Arten von Überschriften, die bei h1 anfangen. daher:
#menu hx {....}
für die Überschriften in den Menüs und
hx{...}
für die im Text. Das span Tag ist auf jeden Fall nicht für eine Überschrift vorgesehen.
Struppi.
-
Es ist ja in dem Sinn keine Überschrift, sondern eine Gruppierung.
-
Es ist ja in dem Sinn keine Überschrift, sondern eine Gruppierung.
Es gibt für eine "Gruppierung" kein Tag, außerdem sagtest du bereits: ..."Überschrift" ist eine Menügruppenüberschrift.
Es ist definitiv eine Überschrift, du machst es dir und manchen Browsern einfach schwerer so wie du es jetzt auszeichnest.
Struppi.
-
-
-
-
-
-
-
Hat jemand weitere Ideen/Bedenken zu meinem Vorhaben?
-
Hallo,
Hat jemand weitere Ideen/Bedenken zu meinem Vorhaben?
Zum Thema richtige Auszeichnung: Bei einem Menü würde ich an Deiner Stelle eine Liste verwenden, also:
<ul>
<li><a href="eins.html">erster Punkt</a></li>
<li><a href="zwei.html">zweiter Punkt</a></li>
...
</ul>nette Grüsse,
stefan--
qwert
-