CSS - tables als button

Seite 1 von 1 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/css_tables_als_button_106306/page_1 - zur Vollversion wechseln!

hab folgendes problem:

ich möchte eine tabelle mit einem link mittels css zu einem button umfunktionieren.

also einfaches bsp:

tabelle mit einem link drin.
wenn user mit der maus auf die tabelle fährt, soll sich der hintergrund (und evtl. der rahmen) der zelle ändern.
Es soll auch nix herumspringen (zb. tabelle grösser werden oä.)
zusätzlich soll das ganze flexibel bleiben, dh. sobald ich die höhe der tabelle ändere soll das ganze auch noch fehlerfrei funktionieren.

und für alle browser sollts auch noch gehn

bin bei css noch ganz am anfang und komm auch mit div. tutorials nicht wirklich weiter hoff ihr könnt mir helfen.

edit: erwähnt soll auch noch sein, ich hab bereits schon herumgespielt aber alles was rausgekommen ist - schaut shize aus

Geht nicht "in allen Browsers" mit CSS. Das koennen vermutlich nur Gecko basierte, Opera und vielleicht Safari.

Normalerweise sieht das so aus:
CSS

Code:

.actAsButton {
  border: 2px solid black;
}
.actAsButton:hover {
  border: 2px solid orange;
}

Code:

<table class="actAsButton">
  <tbody>
    <tr>
      <td><a href="target.html">This is my link</a></td>
    </tr>
  </tbody>
</table>

Code:

<script type="text/javascript">
  function onmouseoverTable() {
    this.style.border = '2px solid orange';
  }
  function onmouseoutTable() {
    this.style.border = '2px solid black';
  }
  window.onload = function() {
    if (!document.getElementsByTagName) {
      return;
    }
    var tableButtons = document.getElementsByTagName('table');
    var i;
    for(i = 0; i < tableButtons.length; i++) {
      if (tableButtons[i].className == 'actAsButton') {
        tableButtons[i].onmouseover = onmouseoverTable;
        tableButtons[i].onmouseout = onmouseoutTable;
      }
    }
  }

ist es nicht moeglich den table komplett zu kuebeln und einfach den a wie einen button aussehen zu lassen? maybe noch ein div rundherum

die pseudo-classe :hover funzt beim IE doch.....

zumindest läufts bei mir ohne irgendwelche probleme

afair funkts nur bei a tags
obs 6.0 schon bei mehr tags versteht weiss ich jetzt spontan nicht

Zitat von funka

afair funkts nur bei a tags
obs 6.0 schon bei mehr tags versteht weiss ich jetzt spontan nicht

Code:

<ul id="navlist">
 <li><a href="#">Maus</a></li>
 <li><a href="#">Haus</a></li>
 <li><a href="#">Aus</a></li>
</ul>

Code:

#navlist
{
width: 200px;
margin-left: 0;
padding-left: 0;
list-style-type: none;
}

#navlist a
{
display: block;
padding: 3px;
width: 160px;
background-color: #036;
border-bottom: 1px solid #eee;
}

#navlist a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}

#navlist a:hover
{
background-color: #369;
color: #fff;
}

• List-O-Matic
• List-O-Matic II

CSS (ich weiß, es is ned optimal )

Code:

td { text-align:center; }
.orange { background-color:#FF9000; text-align:center; }

a.menu { width:100%; height:100%; display:block; }
a.menu:link { text-decoration:none; font-weight:bold; color:#000000; }
a.menu:visited { text-decoration:none; font-weight:bold; color:#000000; }
a.menu:hover { text-decoration:none; font-weight:bold; background-color:#FFB100; }
a.menu:active { text-decoration:none; font-weight:bold; background-color:#D45C00; }

Code:

<td class="orange">
<a class="menu" href="main.htm" target="content">H o m e</a>
</td>

edit:
pf, a blödsinn den ich da schreib!
del plz

thx für die replies!

@orpheus, mr.zet:
lösungen wie eure hätt ich eh schon gehabt, nur hier ist das problem (soweit ich das sehn kann) dass wenn ich die zelle vergrössere, das ganze nicht mehr schön aussieht, weil sich euer background-color nur auf die schrift bzw. den link selbst auswirkt und nicht auf die zelle.
hoff das stimmt was ich sag

@rektal: genau javascript wollt ich vermeiden, wenns geht.

Zitat von Mr. Zet

Zitat von JoeDesperado

wird der film wirklich um so vieles besser wenn man das buch gelesen hat?

Zitat von fleshmark

Zitat von Mr. Zet

Zitat von JoeDesperado

wird der film wirklich um so vieles besser wenn man das buch gelesen hat?

Code:

a {
  display: block;
  background-color: black;
  color: white;
  font-weight: bold;
}
a:hover {
  background-color: red;
  color: yellow;
}

Code:

<html>
  <body>
    <a href="">Foo</a>
    <a href="">Bar</a>
  </body>
</html>

hm, werd das ganze mit der höhe jetzt mit padding, padding-bottom lösen.
danke an alle helfenden

thx rektal für aufklärung

overclockers.at v4.thecommunity
© all rights reserved by overclockers.at 2000-2026