Problem mit CSS

yanbo · 5. Oktober 2008

Tach ihrs.
Ich hab ein kleines Problem mit meinem CSS oder besser gesagt der Darstellung.

Ich wollte mir für das Menü meiner HP jetzt Buttons machen. Also habe ich in meine CSS Datei folgendes hinein geschrieben:

CSS

/*  Hauptklasse fuer den tag <a>...</a> (Verweise) */
a {
font-family:SUSE Sans,arial,helvetica,sans serif;
text-decoration: uppercase;
color:green;
}


/*  Pseudoformat fuer den tag <a>...</a> (Verweise) 
Bitte die Reihenfolge beachten! -> :link, :visited, :hover, :active. */


a:link {
color:#2A8588;
text-decoration: underline;
}


a:visited {
color:#575757;
text-decoration: underline;
}


a:hover {
color:orange;
text-decoration: overline;
}


a:active {
color:darkcyan;
text-decoration: uppercase;
}


a.cssmenu:link {
 width: 80px;
 color: black;
 background-color: #9f9f9f;
 text-align: center;
 text-decoration: none;
 font-size: 12px;
 border-top: 1px solid silver;
 border-left: 1px solid silver;
 border-bottom: 1px solid black;
 border-right: 1px solid black;
 padding-top: 2px;
 padding-bottom: 2px;
 padding-left: 4px;
 padding-right: 4px;
 margin-right: 2px;
}


a.cssmenu:visited {
 width: 80px;
 color: black;
 background-color: #9f9f9f;
 text-align: center;
 text-decoration: none;
 font-size: 12px;
 border-top: 1px solid white;
 border-left: 1px solid white;
 border-bottom: 1px solid black;
 border-right: 1px solid black;
 padding-top: 2px;
 padding-bottom: 2px;
 padding-left: 4px;
 padding-right: 4px;
 margin-right: 2px;
}


a.cssmenu:hover {
 width: 80px;
 color: black;
 background-color: #ffffff;
 text-align: center;
 text-decoration: none;
 font-size: 12px;
 border-top: 1px solid white;
 border-left: 1px solid white;
 border-bottom: 1px solid black;
 border-right: 1px solid black;
 padding-top: 2px;
 padding-bottom: 2px;
 padding-left: 4px;
 padding-right: 4px;
}

Alles anzeigen

mit dem letzten Teil des Codes wollte cih die Buttons erzeugen, wenn ich jetzt aber in das a Tag class="cssmenu" schreibe, dann bleibt der einfach so und es erscheint kein Button.
Es wäre nett, wenn ihr mir helfen könntet, da ich gerne ein Menü mit Buttons hätte.

mfg yanbo

PS: ich habe auch schon versucht die Klassifizierungen für das normale a tag wegzunehmen, doch das hat auch nichts gebracht!

Fred · 5. Oktober 2008

du kannst nicht a.cssmenu:hover schreiben. Mach das besser so : .cssmenu a:hover und versuchs dann nochmal. Wenns dann immer noch nicht klappt, binde den Hyperlink noch in eine div Tag ein .

HTML

<div class="cssmenu"><a href="#" class="cssmenu">blabla</a></div>

wenn du es aber trotzdem als <a tag haben möchtest, mach als CSS folgendes :

CSS

a#cssmenu:hover

yanbo · 5. Oktober 2008

Es will einafch nicht funktionieren. Ich kann machen was ich will, aber es kommt einfach kein Button zustande. Es wird auch kein Button im div tag erstellt, ich habe echt keine Ahnung warum. ?( Ich brauch echt Hilfe

Ich poste jetzt einfach mal meine gesamte CSS-Datei:

Spoiler anzeigen

CSS

<!--


/*  Formatierung body und Bildlaufleiste */
body {
font-family:SUSE Sans,sans-serif,Arial,Helvetica;
color: black;
font-size:16px;
background-color: #CFFF88;


scrollbar-face-color: #CFFF88;
scrollbar-shadow-color: blue;
scrollbar-highlight-color: yellow;
scrollbar-light-color: orange;
scrollbar-darkshadow-color: gray;
scrollbar-track-color: silver;
scrollbar-arrow-color: white;
}


/*  Hauptklasse p */
p {
font-family:SUSE Sans,Arial,helvetica;
color:#000000;
margin-left: 42px; 
margin-right: 42px;
}


/*  Hauptklasse i */
i {
font-family:SUSE Sans,Arial,Helvetica;
font-size:12px;
color: #000000;
}


/*  Hauptklasse td (Tabellenzellen) */
table {
font-family:SUSE Sans,Arial,Helvetica;
font-size:16px;
color:black;
text-align: center; 
margin-left: auto; 
margin-right: auto;
}


td {
color: black; 
padding: 1em
}


h1 {
font-family:SUSE Sans,Arial,Helvetica;
font-size:24px;
color:orange;
}


h3 {
font-family:SUSE Sans,Arial,Helvetica;
font-size:18px;
color:orange;
}


/*  Hauptklasse fuer den tag <a>...</a> (Verweise) */
a {
font-family:SUSE Sans,arial,helvetica,sans serif;
text-decoration: uppercase;
color:green;
}


/*  Pseudoformat fuer den tag <a>...</a> (Verweise) 
Bitte die Reihenfolge beachten! -> :link, :visited, :hover, :active. */


a:link {
color:#2A8588;
text-decoration: underline;
}


a:visited {
color:#575757;
text-decoration: underline;
}


a:hover {
color:orange;
text-decoration: overline;
}


a:active {
color:darkcyan;
text-decoration: uppercase;
}


.cssmenu {
 width: 80px;
 color: black;
 background-color: #9f9f9f;
 text-align: center;
 text-decoration: none;
 font-size: 12px;
 border-top: 1px solid silver;
 border-left: 1px solid silver;
 border-bottom: 1px solid black;
 border-right: 1px solid black;
 padding-top: 2px;
 padding-bottom: 2px;
 padding-left: 4px;
 padding-right: 4px;
 margin-right: 2px;
}


.cssmenu {
 width: 80px;
 color: black;
 background-color: #9f9f9f;
 text-align: center;
 text-decoration: none;
 font-size: 12px;
 border-top: 1px solid white;
 border-left: 1px solid white;
 border-bottom: 1px solid black;
 border-right: 1px solid black;
 padding-top: 2px;
 padding-bottom: 2px;
 padding-left: 4px;
 padding-right: 4px;
 margin-right: 2px;
}


.cssmenu {
 width: 80px;
 color: black;
 background-color: #ffffff;
 text-align: center;
 text-decoration: none;
 font-size: 12px;
 border-top: 1px solid white;
 border-left: 1px solid white;
 border-bottom: 1px solid black;
 border-right: 1px solid black;
 padding-top: 2px;
 padding-bottom: 2px;
 padding-left: 4px;
 padding-right: 4px;
}


/* Format fuer ungeordnete Listen tag: <ul>...</ul> */


ul {
font-family:SUSE Sans,arial,helvetica,sans-serif;
font-size:16px;
/*color: #000000;*/
}


li {
font-family:SUSE Sans,arial,helvetica,sans-serif;
font-size:16px;
/*color: #000000;*/
}


/*Format fuer den tag <pre>...</pre>  */


pre {
font-family: SUSE Sans Mono,Monospace;
font-size:14px;
color: #000000;
}


/*Format fuer den tag <i>...</i>*/


i {
font-family: SUSE Sans;
font-size:10px;
color: #000000;
}


/* Formate fuer "freie" Klassen */


.box_1 {
         padding: 1em 1em;
         margin-left: 42px;
         margin-right:42px;
         border: 1px dashed;
         background: white;
         font-size: 16px;
       color: black;
}       


.box_rot {
         padding: 1em 1em;
         margin-left: 42px;
         margin-right:42px;
         border: 1px dashed;
         background: red;
         font-size: 16px;
       color: black;
}


.box_gruen {
         padding: 1em 1em;
         margin-left: 42px;
         margin-right:42px;
         border: 1px dashed;
         background: green;
         font-size: 16px;
       color: yellow;
} 


.box_gelb {
         padding: 1em 1em;
         margin-left: 42px;
         margin-right:42px;
         border: 1px dashed;
         background: yellow;
         font-size: 16px;
       color: black;
}


.box_blau {
         padding: 1em 1em;
         margin-left: 42px;
         margin-right:42px;
         border: 1px dashed;
         background: lightblue;
         font-size: 16px;
       color: black;
}


.box_black {
			padding: 1em 1em;
			margin-left: 42px;
			margin-right: 42px;
			border: 1px dashed white;
			background: black;
			font-size: 16px;
			color: white;
}

-->

Alles anzeigen

Achja noch was: Die Boxen funktionieren einwandfrei, nur die Buttons funzen nicht! HILFE!

Chris! · 5. Oktober 2008

Welchen Browser benutzt du? In Firefox 3 funktioniert es bei mir. Habs grade eben getestet.

**TimWolla** · 5. Oktober 2008

Firefox 2 Suse hat er

Chris! · 5. Oktober 2008

Hm... dann weis ich auch nich. Was für nen HTML Code hast du denn zum testen benutzt?

HTML

<a href="#" class="cssmenu">Test</a>

so gings zumindest bei mir...

yanbo · 5. Oktober 2008

Zitat von Chris!
Hm... dann weis ich auch nich. Was für nen HTML Code hast du denn zum testen benutzt?
HTML
<a href="#" class="cssmenu">Test</a>
so gings zumindest bei mir...

so hab ich das ja auch gemacht, aber es funktioniert einfach nicht

AChja also ich weiß jetzt mit Sicherheit, dass es am CSS-Code liegt, aber was daran verhindert, dass die Button nicht dargestellt werden, weiß ich nicht.

Chris! · 5. Oktober 2008

woher weisst du das mit sicherheit?
ich konnte am css code noch nix entdecken... und bei mir funktioniert es auch...
nebenbei wär es gut den css code einheitlich einzurücken...

Edit: Mal so ne ganz dumme Frage: Wiso definierst du 3 mal .cssmenu ???

Will nich wieder ne Verwarnung kriegen, daher: Hier ist ein Edit, schau nach oben...

yanbo · 5. Oktober 2008

Zitat von Chris!

woher weisst du das mit sicherheit?
ich konnte am css code noch nix entdecken... und bei mir funktioniert es auch...
nebenbei wär es gut den css code einheitlich einzurücken...

ich weiß das mit sicherheit, da ich mir eben ein dokument gemacht habe, indem ich nur das css und ein einziges a tag benutz habe und sonst nichts(body und html natürlich schon).

edit: Chris!: ich hatte das eig noch für cssmenu link, visited und hover gemacht, aber das hatte auch nicht gefunzt! es muss irgendwas im css code sein, dass die buttons nicht möglich macht

Chris! · 5. Oktober 2008

Versuch mal aus .cssmenu wieder a.cssmenu:hover etc. zu machen...
Ich teste nebenbei auch mal was...

EDIT:

Also ich hab um alles andere auszuschließen mal alle a definitionen im css gelöscht.
dann hab ich aus den 3 .cssmenu 4 gemacht, mit den "namen" a.cssmenu, a.cssmenu:visited, a.cssmenu:active und a.cssmenu:hover.
Dann hats funktioniert.... Versuch mal ob das bei dir auch so geht.. musst natürlich den passenden blöcken die namen zuweisen...

yanbo · 5. Oktober 2008

Ich habe nun festgestellt, dass, egal wie ich es mache, keine Buttons kommen. Nichtmal dann, wenn ich nur die a.cssmenu im css benutze. Also lass ich es jetzt einfach bleiben, leider >_>

Chris! · 5. Oktober 2008

Das ist aber komisch, weil es bei mir geht.....

Fred · 5. Oktober 2008

wieso hast du eig in deinem css-code 3mal .cssmenu stehen ?

edit /// sry .. hab nicht immer lust alles zu lesen :S

Chris! · 5. Oktober 2008

Zitat von Chris!

Mal so ne ganz dumme Frage: Wiso definierst du 3 mal .cssmenu ???

Zitat von yanbo

ich hatte das eig noch für cssmenu link, visited und hover gemacht, aber das hatte auch nicht gefunzt! es muss irgendwas im css code sein, dass die buttons nicht möglich macht

ICeCold: lesen

Benutzer online in diesem Thema