mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Di 07.04.2020 03:12 Benutzername: Passwort: Auto-Login

Thema: tabelle > css > problem :-( vom 24.07.2007


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> tabelle > css > problem :-(
Autor Nachricht
ma1973
Threadersteller

Dabei seit: 17.02.2006
Ort: borken
Alter: 46
Geschlecht: Männlich
Verfasst Di 24.07.2007 15:11
Titel

tabelle > css > problem :-(

Antworten mit Zitat Zum Seitenanfang

hallo da draußen,

ich bin tot *Schnief* , weil ich es nicht hinbekomme!!

Ich habe eine simple Tabelle gebaut,
diese besitzt 4 Button, alle in einer seperaten
Zelle.

Jetzt möchte ich mit CSS roll-over erzeugen,
das klappt allerdings nur bedingt.

- IE und MOZ machen das unterschiedlich

Ich möchte das der Hintergrund der betreffenden
Zelle, wenn man über "thema 1" geht,
vollständig eine andere Farbe bekommt.

Und das der Text "thema 1" an der selben Stelle
klebt. ( Bei Moz wandert der Text nach links )

Hier mein Code:

Code:


<style type="text/css">

.header
{
font-size: 12px;
font-family: verdana,arial,geneva,sans-serif;
font-weight: bold;
color: #000000;
border: #F27533 1px solid;
line-height: 190%;
background-color: #FFFFFF;
padding-left: 8px;
}

A.nav,A.nav
{
color: #000000;
text-decoration: none;
font-family: verdana,arial,geneva,sans-serif;
font-size: 12px;
margin-left: 10px;
}

A.nav:visited
{
color: #000000;
text-decoration: none;
font-family: verdana,arial,geneva,sans-serif;
font-size: 12px;
margin-left: 10px;
}

A.nav:active,A.nav:Hover
{
color: #FFFFFF;
font-family: verdana,arial,geneva,sans-serif;
font-size: 12px;
text-decoration: none;
background-color: #F27532;
margin-left: 10px;
display: table-cell;
}


.tablepos
{
margin-left: 15px;
}


<table class="tablepos" width="157" border="1" cellpadding="0" cellspacing="0">
 <colgroup>
  <col width="26" />
  <col width="131" />
 </colgroup>
 <tr>
   <td colspan="2" class="header">Service ...!</td>
 </tr>
 <tr>
  <td rowspan="4" bgcolor="#F89B6A" valign="top"><img src="pic/1pix.gif" width="1" height="100" border="0"/></td>
   <td><a href="#" class="nav">Thema 1</a></td>
 </tr>
 <tr>
  <td><a href="#" class="nav">Thema 2</a></td>
 </tr>
 <tr>
  <td><a href="#" class="nav">Thema 3</a></td>
 </tr>
 <tr>
  <td><a href="#" class="nav">Thema 4</a></td>
 </tr></table>




hilfe ....
  View user's profile Private Nachricht senden
nicoG

Dabei seit: 25.01.2006
Ort: Freiburg
Alter: -
Geschlecht: Männlich
Verfasst Di 24.07.2007 16:04
Titel

Re: tabelle > css > problem :-(

Antworten mit Zitat Zum Seitenanfang

ma1973 hat geschrieben:

ich bin tot *Schnief* , weil ich es nicht hinbekomme!!

Na, mit der Einstellung sicherlich...
Zitat:

Ich habe eine simple Tabelle gebaut,
diese besitzt 4 Button, alle in einer seperaten
Zelle.

Lesestoff dazu

ma1973 hat geschrieben:

- IE und MOZ machen das unterschiedlich


Thema display:table-cell
Reihenfolge von Pseudoklassen

CSS, das C steht für Cascading. Kaskade = Vererbung. Brauchst also font-size und Konsorten nicht 10mal definieren *zwinker*
Der Link (a-Tag) ist ein Inlineelement, sprich ein margin-left wirkt nicht!

CSS ist keine einfache Sache, man lernt es nicht über Nacht Lächel
  View user's profile Private Nachricht senden
Anzeige
Anzeige
b8oi

Dabei seit: 23.11.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Do 26.07.2007 13:47
Titel

Re: tabelle > css > problem :-(

Antworten mit Zitat Zum Seitenanfang

ERSETZE

ma1973 hat geschrieben:


Code:

A.nav:active,A.nav:Hover
{
color: #FFFFFF;
font-family: verdana,arial,geneva,sans-serif;
font-size: 12px;
text-decoration: none;
background-color: #F27532;
margin-left: 10px;
display: table-cell;
}




MIT

Code:

td:hover,A.nav:active,A.nav:Hover
{
color: #FFFFFF;
font-family: verdana,arial,geneva,sans-serif;
font-size: 12px;
background-color: #F27532;
margin-left: 10px;
text-decoration:none;
}


und schließe den geöffneten Style-Tag am Ende auch wieder!

Code:

</style>


Nun wird der Tabellenhintergrund im FF und Opera mit einer anderen Farbe hinterlegt, wenn die Maus drüberfährt.
Im FF "springt" der Link auch nicht mehr. Grund für das Springen war
Code:
display: table-cell;


IE versteht in alle Generation kein Flächiges Hovern. Opera zerreißt dir deine Tabelle noch *zwinker*

mfg


Zuletzt bearbeitet von b8oi am Do 26.07.2007 13:47, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
nicoG

Dabei seit: 25.01.2006
Ort: Freiburg
Alter: -
Geschlecht: Männlich
Verfasst Do 26.07.2007 13:56
Titel

Re: tabelle > css > problem :-(

Antworten mit Zitat Zum Seitenanfang

b8oi hat geschrieben:

IE versteht in alle Generation kein Flächiges Hovern. Opera zerreißt dir deine Tabelle noch *zwinker*

Warum soll er es dann deiner Meinung nach machen?
Gib dem Link ein display:block; und schon passt sich das. Das versteht jeder Browser
  View user's profile Private Nachricht senden
b8oi

Dabei seit: 23.11.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Do 26.07.2007 14:10
Titel

Antworten mit Zitat Zum Seitenanfang

display:block; löst das Problem aber auch nicht, da nicht der ganze Tabellenhintergrund im IE mit Farbe befüllt wird, sondern nur der Raum der das <p> Tag bzw. <a> Tag einnimmt.

Verwenden weil es ein Lösungsansatz ist.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
nicoG

Dabei seit: 25.01.2006
Ort: Freiburg
Alter: -
Geschlecht: Männlich
Verfasst Do 26.07.2007 14:26
Titel

Antworten mit Zitat Zum Seitenanfang

b8oi hat geschrieben:
display:block; löst das Problem aber auch nicht

Klar tut es das!
http://nicogutmann.de/table.htm
b8oi hat geschrieben:

Verwenden weil es ein Lösungsansatz ist.

Aber einer der nirgends hin führt *zwinker*
Man kann den Ansatz gleich wieder begraben, WEIL er eben nicht vom IE interpretiert wird. Warum also anbieten?
  View user's profile Private Nachricht senden
b8oi

Dabei seit: 23.11.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Do 26.07.2007 14:36
Titel

Antworten mit Zitat Zum Seitenanfang

Doch, es führt dazu, dass der Text im FF nicht mehr nach links springt.
Und ihm eine Möglichkeit aufgezeugt wird, wie man es in anderen Browsern lösen könnte.
Außerdem soll der Fragensteller doch am besten für sich slebst entscheiden....
So hat er Möglichkeiten zum herumexperimentieren.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
nicoG

Dabei seit: 25.01.2006
Ort: Freiburg
Alter: -
Geschlecht: Männlich
Verfasst Do 26.07.2007 14:48
Titel

Antworten mit Zitat Zum Seitenanfang

b8oi hat geschrieben:
Doch, es führt dazu, dass der Text im FF nicht mehr nach links springt.

Das hatte mit td:hover aber nichts am Hut *zwinker*
b8oi hat geschrieben:

Und ihm eine Möglichkeit aufgezeugt wird, wie man es in anderen Browsern lösen könnte.

Warum für jeden ne Extrawurst, wwenn es doch so einfach mit display geht...

Naja, du scheinst von deiner Überzeugung schwer loszureisen sein, also lass ich es mal...
Aber den Thread "Der IE will meine Zelle nicht hovern" übernimmst dann du *Thumbs up!*
  View user's profile Private Nachricht senden
 
Ähnliche Themen [CSS] Paddings in Tabelle
Hintergrundgrafik einer Tabelle mit css
Ist das ohne Tabelle nur mit CSS möglich?
[CSS] Tabelle sieht in FF & IE unterschiedlich aus
Tabelle mir runden Ecken in CSS?
CSS Eigenschaft für Rahmen auch innerhalb der Tabelle
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.