CSS Mouseover Tabellen Zellen Rahmen
Christoph
- css
hi.
erstmal nen schönen sonntag wünsch ich euch. so nun zu meinen problem also ich habe unter :
http://www.1submit.de/100Space.net/german/index.php3
eine seite mit mouseover erstellt, meine die links ganz links.
wenn ich über diese fahre wird der hintergrund hellblau.
möchte jetzt aber das nicht nur der hintergrund hellblau wird sondern auch ein rahmen in weiß erscheint rinkgs rum um die makierung.
habe es schon mit einfügen in mouseover probiert bekomme aber immer eine fehlermeldung.
noch schöner wäre ein moseover hintergrund weiß mit dunkel blauer schrift (die dann dunkel wird) unnd dunkel blauen rahmen der bei mouseover erscheint.... aber wie das geht weiß ich erst recht nicht.
weiß jemand einen rat? ganz ungeübt bin ich ja auch nicht, aber daran verzweifel ich gerade.
danke. danke. danke. ;-)
mfg,
christoph
Guggugs,
leider hast du auf deiner Seite die rechte Maustaste ganz unsinnigerweise deaktiviert. Nun hätte ich zwar durchaus trotzdem die Möglichkeit, mir deinen Quelltext anzugucken und dir dann die notwendigen Ergänzungen hier zu posten, aber dazu habe ich schlicht keine Lust.
Gruß, Uschi
ich denke er das du so oder so nicht geholfen hättest und nur deinen frust hier raus lassen willst. wenn doch kann ich den gerne deaktivieren.
sorry, jetzt ist es raus, wußte ja nciht das es so ein hindernis ist.
Hallo Christoph,
sorry, jetzt ist es raus, wußte ja nciht das es so ein hindernis ist.
Es ist kein großes Hindernis, aber mit so einer Sperre drückst Du aus, dass Du Deinen Quellcode nicht zeigen willst. Dann kannst Du auch nicht erwarten, dass wir Dir helfen, wenn Du uns nicht entgegenkommst.
Schauen wir uns Deinen Quelltext mal an:
<tr>
<td onclick="mClk(this);"
onmouseover="mOvr(this,'#9EA8EA');"
onmouseout="mOut(this, 'transparent');">
> <a href="#"
onmouseover="window.status='www.100Space.net - 100 MB gratis Webspace für JEDERMANN.'; return true">
<span style="color : #FFFFFF; "> FAQ</span></a></td>
</tr>
Ich verstehe nicht, warum Du das ganze so kompliziert machst...
Nimm doch einfach lauter normale Links, die Du CSS-Formatierst, Beispiele unter http://css.fractatulum.net/sample/menu1format.htm sowie http://aktuell.de.selfhtml.org/artikel/css/mouseover/index.htm.
möchte jetzt aber das nicht nur der hintergrund hellblau wird sondern auch ein rahmen in weiß erscheint rinkgs rum um die makierung.
...
<a class="link1" href="#">FAQ</a>
<a class="link1" href="#">Passwortreminder</a>
...
a.link1 { display: block; }
a.link1:link, a.link1:visited {
color: #fff;
background: transparent;
border-bottom: 1px solid #00f;
}
a.link1:hover {
background: #9ea8ea;
border: 1px solid #fff;
}
oder auch:
noch schöner wäre ein moseover hintergrund weiß mit dunkel blauer schrift (die dann dunkel wird) unnd dunkel blauen rahmen der bei mouseover erscheint.... aber wie das geht weiß ich erst recht nicht.
a.link1:hover {
background: #fff;
color: #009;
border: 1px solid #009;
}
Viele Grüße,
Christian
rahmen ist da yipeah. mmmh aber die alte makierung ist noch drin, siehe startseiten link. schon mal vielen vielen dank. bin schon über 4 stunden an der sch***e dran gesesen.
Hallo Christoph,
mmmh aber die alte makierung ist noch drin, siehe startseiten link.
Du musst natürlich den ganzen onmouse*-Kram, den Du in <td> reingemacht hast, entfernen, den brauchst Du ja jetzt nicht mehr.
Viele Grüße,
Christian
juppp erledigt und es geht, danke vielmals. gibt es vielleicht noch einen befehl also asntatt solid das der rahmen nach ihnen geht also die zeile nicht mehr platz wegnimmt, sonst verschiebt sich alles etwas.
Hallo Christoph,
juppp erledigt und es geht, danke vielmals. gibt es vielleicht noch einen befehl also asntatt solid das der rahmen nach ihnen geht also die zeile nicht mehr platz wegnimmt, sonst verschiebt sich alles etwas.
Jain. Der Rahmen ist immer außen.
Du kannst aber folgendes machen:
a.link1:link, a.link1:visited {
....
margin: 1px;
}
a.link1:hover {
...
margin: 0;
}
Damit hast Du, wenn die Maus nicht darüber ist, einen Randabstand, der genausogroß ist, wie der Rahmen später. Wenn die Maus drüber ist, hast Du den Randabstand nicht mehr, dafür aber den Rahmen.
Du könntest auch für :link und :visited einen unsichtbaren Rahmen nehmen (border: 1px solid transparent), das kann der Internet Explorer aber nicht.
Viele Grüße,
Christian
habs reingepackt, jetzt gehts. noch eine kleine letzte belästigung *g*.bei mouseover über startseite sollte der text vielleicht dunkelblau werden, dann kann ich den hintergrund nämlich etwas heller machen. :-)
Hallo Christoph,
bei mouseover über startseite sollte der text vielleicht dunkelblau werden, dann kann ich den hintergrund nämlich etwas heller machen. :-)
Nimm color: farbe; (z.B: #00c oder so etwas) in die :hover-Deklaration mit rein.
Viele Grüße,
Christian
tausend dank, man bist du gut ;-))). jetzt frag ich mich aber wenn ich über startseite fahr er die komplette zeile makiert (wie es richtig ist) und bei infos nur den text
Hallo Christoph,
jetzt frag ich mich aber wenn ich über startseite fahr er die komplette zeile makiert (wie es richtig ist) und bei infos nur den text
Bei mir markiert er bei Infos auch die ganze Zeile. (Die Eigenschaft, die das bewirkt, ist display: block;, die erhebt den Link in den Stand eines Blockelements)
Viele Grüße,
Christian
hab mich etwas dumm ausgedrückt, wenn ich in die startseite zeile fahre makiert er alles auch wenn ich nicht das wort anfahre. bei den anderen muß ich aber das wort anfahren.
Hallo Christoph,
du brauchst eigentlich diese ganzen JS-Funktionen überhaupt nicht, sondern lediglich drei css-Klassen, eine für deine Links und zwei für deine übergeordneten Tabellenzellen:
Nehmen wir mal an, die für die Links heißen
navLeft
also:
a.navLeft:link, a.navLeft:visited, a.navleft:active {
background-color: deineHintergrundFarbe;
color: deine Textfarbe
text-decoration: none // dann werden die Links nicht unterstrichen
}
Die Pseudoklasse hover kriegt die Farben fürs drübermausen
a.navleft:hover {
background-color: bla;
color: bla;
text-decoration: none;
}
zwei Klassen für deine Tabellenzellen:
inaktiv
td.nlContainer {
background-color: deinDunkelblau oder transarent;
border: 1px solid deinDunkelblau;
}
td.nlContainerOver {
background-color: deinHellblau;
border: 1px solid #ffffff;
}
Und nun ein Codeschnipsel:
<td class="nlContainer"><a href="datei.htm" class="navLeft" onmouseover="this.parentNode.className='nlContainerOver'" onmouseout="this.parentNode.className='nlContainer'">datei</a></td>
Erläuterung:
this ist das aktuelle a-Element.
parentNode ist der Papaknoten des a-Elements.
der hat eine Eigenschaft className, und der weist du den passenden Namen zu.
Wie das mit den Knoten geht und was die so über sich wissen, findest du unter http://selfhtml.teamone.de/javascript/objekte/node.htm.
Eines noch: Ich würde an deiner Stelle die Statusleiste der User in Ruhe lassen. Diejenigen, die dort hingucken, wollen wissen, zu welcher URL es geht und reagieren betrübt, wenn Sie die nicht finden. Und die anderen gucken schlicht nicht hin.
Gruß, Uschi
Guggugs,
ich habe gar keinen Frust, den ich abzulassen hätte. Es ist Sonntag morgen, ich bin beim dritten Kaffee, also wach, was will ich mehr ;-)
Allerdings finde ich es wirklich unangehm, wenn die rechte Maustaste deaktiviert ist, zumal sie ja in den meisten Fällen wohl benutzt wird, um Seiten in einem neuen Fenster zu öffnen. Diese Möglichkeit hast du deinen Usern aber geraubt. War das deine Absicht? Deinen Quellcode können Sie nämlich trotzdem sehen, auch wenn es ein wenig umständlicher wird. Nota bene, wenn wir dir helfen sollen, brauchen wir ja wohl deine Quälcode-Ansicht.
Gruß, Uschi
das mit den quellcode sehen ist mir klar. die absicht war eigentlich das sie die links nicht kopieren können und diese vorher anschauen, will ein bischen werbung reinmischen. hab es nun deaktiviert und werde mir das mal durch den kopf gehen lassen.
hi,
ich denke er das du so oder so nicht geholfen hättest und nur deinen frust hier raus lassen willst. wenn doch kann ich den gerne deaktivieren.
gruss,
wahsaga
Hallo Christoph,
http://www.1submit.de/100Space.net/german/index.php3
Ich hätte Dir ja gerne geholfen, aber Du hast mich ja nicht gelassen:
<img src="http://www.christian-seiler.de/temp/quellcodeschutz1.png" border="0" alt="">
Viele Grüße,
Christian