| Autor |
Nachricht |
ma1973
Threadersteller
Dabei seit: 17.02.2006
Ort: borken
Alter: 51
Geschlecht: 
|
Verfasst Di 24.07.2007 15:11
Titel tabelle > css > problem :-( |
  |
|
hallo da draußen,
ich bin tot  , 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 ....
|
|
| |
  |
 |
nicoG
Dabei seit: 25.01.2006
Ort: Freiburg
Alter: -
Geschlecht:
|
Verfasst Di 24.07.2007 16:04
Titel Re: tabelle > css > problem :-( |
|
|
| ma1973 hat geschrieben: |
ich bin tot , 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 
Der Link (a-Tag) ist ein Inlineelement, sprich ein margin-left wirkt nicht!
CSS ist keine einfache Sache, man lernt es nicht über Nacht 
|
|
| |
|
|
|
Anzeige
|
|
|
b8oi
Dabei seit: 23.11.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 26.07.2007 13:47
Titel Re: tabelle > css > problem :-( |
|
|
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!
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
mfg
Zuletzt bearbeitet von b8oi am Do 26.07.2007 13:47, insgesamt 1-mal bearbeitet
|
|
| |
 |
|
nicoG
Dabei seit: 25.01.2006
Ort: Freiburg
Alter: -
Geschlecht:
|
Verfasst Do 26.07.2007 13:56
Titel Re: tabelle > css > problem :-( |
|
|
| b8oi hat geschrieben: |
IE versteht in alle Generation kein Flächiges Hovern. Opera zerreißt dir deine Tabelle noch
|
Warum soll er es dann deiner Meinung nach machen?
Gib dem Link ein display:block; und schon passt sich das. Das versteht jeder Browser
|
|
| |
|
|
b8oi
Dabei seit: 23.11.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 26.07.2007 14:10
Titel
|
|
|
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.
|
|
| |
|
|
nicoG
Dabei seit: 25.01.2006
Ort: Freiburg
Alter: -
Geschlecht:
|
Verfasst Do 26.07.2007 14:26
Titel
|
|
|
| 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
Man kann den Ansatz gleich wieder begraben, WEIL er eben nicht vom IE interpretiert wird. Warum also anbieten?
|
|
| |
|
|
b8oi
Dabei seit: 23.11.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 26.07.2007 14:36
Titel
|
|
|
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.
|
|
| |
|
|
nicoG
Dabei seit: 25.01.2006
Ort: Freiburg
Alter: -
Geschlecht:
|
Verfasst Do 26.07.2007 14:48
Titel
|
|
|
| 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
| 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 
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Problem mit Tabelle in IE
Tabelle 100% - HTML/PHP Problem!
Tabelle Problem / ie und firefox
Problem mit Zeilenhöhe in Tabelle
Problem mit Tabelle im Firefox
Problem mit der Zentreirung einer Tabelle
|
|
Willkommen auf dem Portal für Mediengestalter
