Benötige Hilfe Css Menu verschiedene Hintergrundgrafiken

[flybasti]

Hallo alle zusammen ich habe ein kleines Problem mit meiner Menüleiste.Und zwar mochte ich 4 Buttons die aber alle eine andere Grafik haben.Diese habe ich jetzt versucht mit css zu realisieren.Leider werden aber nur die ersten 2 Buttons angezeigt warum???

Ich habe in meiner css Datei

A.menulink {
display: block;
width: 100px;
height: 70px;
text-align: center;
text-decoration: none;
font-family: Comic Sans MS;
font-size: 14px;
color: #000000;
background-color: #EEEEEE;
border-style:  ;
border-width: 2px;
border-color: # ;
background-image:url(Bilder/11.jpg);
}

A.menulink:hover {
border-style: ;
border-width: 2px;
border-color: # ;
color: #0000FF;
background-color: #FFFF99;
background-image:url(Bilder/1.jpg);
 }
B.menulink {
display: block;
width: 100px;
height: 70px;
text-align: center;
text-decoration: none;
font-family: Comic Sans MS;
font-size: 14px;
color: #000000;
background-color: #EEEEEE;
border-style:  ;
border-width: 2px;
border-color: # ;
background-image:url(Bilder/22.jpg);
}
B.menulink:hover {
border-style: ;
border-width: 2px;
border-color: # ;
color: #0000FF;
background-color: #FFFF99;
background-image:url(Bilder/2.jpg);
}
C.menulink {
display: block;
width: 100px;
height: 70px;
text-align: center;
text-decoration: none;
font-family: Comic Sans MS;
font-size: 14px;
color: #000000;
background-color: #EEEEEE;
border-style:  ;
border-width: 2px;
border-color: # ;
background-image:url(Bilder/33.jpg)

}
C.menulink:hover {
border-style: ;
border-width: 2px;
border-color: # ;
color: #0000FF;
background-color: #FFFF99;
background-image:url(Bilder/3.jpg);
}
D.menulink {
display: block;
width: 100px;
height: 70px;
text-align: center;
text-decoration: none;
font-family: Comic Sans MS;
font-size: 14px;
color: #000000;
background-color: #EEEEEE;
border-style:  ;
border-width: 2px;
border-color: # ;
background-image:url(Bilder/44.jpg);
}
D.menulink:hover {
border-style: ;
border-width: 2px;
border-color: # ;
color: #0000FF;
background-color: #FFFF99;
background-image:url(Bilder/4.jpg);
}

Dann habe ich in meinen Dokument alles eingefügt siehe hier

<table border="0" width="110" align="center">
    <tr>
    <td><a href="#" class="menulink">&nbsp;Menülink 1</a></td>
  </tr>
    <tr>
    <td><b href="#" class="menulink">&nbsp;Menülink 2</b></td>
  </tr>
  <tr>
    <td><c href="#" class="menulink">&nbsp;Menülink 3</c></td>
  </tr>
  <tr>
    <td><d href="#" class="menulink">&nbsp;Menülink 4</d></td>
  </tr>
</table>

[Der Martin]

Hallo,

A.menulink {

hier selektierst du alle im Dokument vorkommenden A-Elemente (also Links) mit der Klasse "menulink".

B.menulink {

Und hier selektierst du alle B-Elemente (Bold Text), die ebenfalls die Klasse "menulink" haben. Hast du denn ein b-Element im Dokument? Ja, hast du:

<td><b href="#" class="menulink">&nbsp;Menülink 2</b></td>

Aber wie kommst du auf die Idee, dieses mit einem href-Attribut auszustatten?
Danach wird's allerdings richtig wild.

C.menulink {

Jetzt selektierst du C-Elemente. Die gibt's aber in HTML nicht. Wie die Browser auf solche Fehler reagieren, ist unterschiedlich; Firefox wendet CSS-Regeln AFAIK auch auf undefinierte Elemente an, IE ignoriert sie und damit auch die daran "aufgehängten" CSS-Regeln.

<td><a href="#" class="menulink">&nbsp;Menülink 1</a></td>
    <td><b href="#" class="menulink">&nbsp;Menülink 2</b></td>
    <td><c href="#" class="menulink">&nbsp;Menülink 3</c></td>
    <td><d href="#" class="menulink">&nbsp;Menülink 4</d></td>

Nee, wirklich nicht. Du kannst nicht einfach nach Belieben Elemente erfinden. Das wollen doch alles a-Elemente sein, oder nicht?

So long,
 Martin

[flybasti]

Okay das habe ich mir schon gedacht, das es kein c oder d gibt.Ich dachte ich könnte denen sozusagen einfach eine id geben.Und dann aufrufen, href ist natürlich später für den link.Aber wie geht das dann jeden Button eine eigende Grafik zu geben???

[Steel]

Hi!

Okay das habe ich mir schon gedacht, das es kein c oder d gibt.Ich dachte ich könnte denen sozusagen einfach eine id geben.Und dann aufrufen, href ist natürlich später für den link.Aber wie geht das dann jeden Button eine eigende Grafik zu geben???

Indem Du ihnen ein richtiges http://de.selfhtml.org/html/attribute/allgemeine.htm@title=ID-Attribut gibst.

[flybasti]

Also wenn ich richtig verstanden habe lösche ich erstmal alles außer a.menulink

Erstelle dann vier ids die jeweils die Grafik enthalten und rufe dann wieder im Dokument diese Ids einzelnt auf????

Entschuldigt ich fange jetzt erst wirklich an eine seite komplett selber aufzubauen vorher habe ich immer nur templates so lange verändert bis es für mich in ordnung war.

[Steel]

Also wenn ich richtig verstanden habe lösche ich erstmal alles außer a.menulink

Erstelle dann vier ids die jeweils die Grafik enthalten und rufe dann wieder im Dokument diese Ids einzelnt auf????

Entschuldigt ich fange jetzt erst wirklich an eine seite komplett selber aufzubauen vorher habe ich immer nur templates so lange verändert bis es für mich in ordnung war.

Dann wird es jetzt mal Zeit, sich mit HTML und CSS zu beschaeftigen. Cheatah hat dazu ja schon was gesagt.

Du willst Links. Also <a href="zieladresse">Linkname</a>
Du moechtest genau diesen Link identifizieren und ansprechen koennen. Entscheidest Dich fuer eine ID. <a id="diesereinelink" href="zieladresse">Linkname</a>
Das ganze willst Du mit CSS ansteuern. #diesereinelink {border:1px solid red;}

Detailierte Informationen findest Du ueberall. Nicht zuletzt SELFHTML ist dafuer bekannt ein gutes Nachschlagewerk zu sein. Zum Einstieg immer noch hervorragend geeignet, auch wenn viele Beispiele mittlerweile veraltet und nicht zu empfehlen sind. Wies dem neueren Wiki mittlerweile geht, kann ich grad gar nicht sagen.

[flybasti]

Ja erstmal danke für eure Hilfe.Ich habe es jetzt folgener maßen gelöst.
Tabelle gelöscht
a.menuliste usw auch alles gelöscht

Dann habe ich in der css 4ids erstellt Button 1-4 und die dann positioniert usw. eine Grafik zugewiesen, hover effekt eingebaut.

Im Dokument habe ich dann nur noch die ids aufgerufen, soweit klappt das jetzt auch ich muss jetzt nur noch die links einfügen.

Ich weiß ich sollte normaler weise bei null anfangen, nur ich persönlich lerne besser wenn ich mir eine Seite vorstelle und diese dann versuche zu realisieren.Ich werde aber mal versuchen mich in das Thema html einzuarbeiten.Weil wie ihr schon sagt ist es eine grundvorraussetzung fürs Seiten erstellen.

[Cheatah]

Hi,

Okay das habe ich mir schon gedacht, das es kein c oder d gibt.Ich dachte ich könnte denen sozusagen einfach eine id geben.

ja, kannst Du. Aber eben keinen aus dem Himmel gegriffenen Typ.

Aber wie geht das dann jeden Button eine eigende Grafik zu geben???

Ich glaube, Du möchtest Dich zunächst mehr mit HTML beschäftigen. Ein wichtiges Stichwort, nach dem Du recherchieren solltest, lautet "semantisches Markup". Das, was Du bisher an Wissen zu haben glaubst, solltest Du zuvor vergessen: Wenn Du Tabellen zur Strukturierung einer Liste von Links verwendest, hast Du offensichtlich Fehlinformationen verinnerlicht.

Cheatah

[Beat]

Hallo alle zusammen ich habe ein kleines Problem mit meiner Menüleiste.Und zwar mochte ich 4 Buttons die aber alle eine andere Grafik haben.Diese habe ich jetzt versucht mit css zu realisieren.Leider werden aber nur die ersten 2 Buttons angezeigt warum???

Weil von den Elemente a bis d nur <a> und <b> gültige HTML-Elemente sind

Dann habe ich in meinen Dokument alles eingefügt siehe hier

<table border="0" width="110" align="center">
    <tr>
    <td><a href="#" class="menulink">&nbsp;Menülink 1</a></td>
  </tr>
    <tr>
    <td><b href="#" class="menulink">&nbsp;Menülink 2</b></td>
  </tr>
  <tr>
    <td><c href="#" class="menulink">&nbsp;Menülink 3</c></td>
  </tr>
  <tr>
    <td><d href="#" class="menulink">&nbsp;Menülink 4</d></td>
  </tr>
</table>

Das sind keine tabellarische Daten. Verwende eine Liste.

mfg Beat

[flybasti]

Kannst Du mir das genauer erklären bin noch ein Neuling.

[Beat]

Kannst Du mir das genauer erklären bin noch ein Neuling.

Nein. Du musst es mir erklären.
Erkläre mir, was der semantische Sinn ist des <c> Elements und des <d> Elements sind. Wahrscheinlich kann dies der Browser nicht wissen und weiss somit auch nicht, diese Elemente mit einem Default-CSS auszustatten.
<a> und <b> haben in HTML 4.01 eine definierte Semantik.

Du kennst den begriff tabellarische Daten.
Wo keine tabellarische Daten vorliegen, gibt es höchst selten einen Grund für ein <table> Element.

mfg Beat