Tabelle als HOVER

[Derte]

Hi Leute,
Ich bin CSS Neuling und hab mich n weng eingelesen.
Jetzt meine Frage.
Ich kann ja via class oder id z.B einer Tabelle Eigenschaften zuweisen.
Wie kann ich jetzt zB. einem <td> eine gesamte Tabelle zuweisen?
(Hintergrund: Man fährt auf den Name und bekommt einen Steckbrief)
Kann ich einfach das so machen:

td.navi:hover
{
TABELLE
}

und dann so auslesen <td class="navi">?

 

[xXxPeterPanxXx]

Ohne es jetzt getestet zu haben würde ich sagen das du der Tabelle eine Höhe und Breite von 0 geben kannst und dann beim :hover eine normale Höhe angeben kannst.

 

[Derte]

Scheint nicht zu funktionieren:

<table width='0%' height='0%' id='details'>

#details td{
    border-bottom: 1px solid white;    /* Rahmen setzen */
    padding: 2px;                      /* Abstand zwischen Inhalt und Rahmen */
               /* Abstand zwischen Text und linkem Rand vergroessern -> sieht aus wie Abstand zwischen den Zellen, zerstoert aber nicht den Rahmen */
}

#details:hover{
    border-collapse: collapse;         
    height:100%;
    width:100%;
}

#details tr td:first-child{
    padding-left: 2px;                 
}

(Ich habe jetzt also 2 Tabellen, der oben genannte Code ist von der Hovertabelle, welche in einer einer Zeilenspalte der anderen Datei sitzt)

-> Hover scheint nicht zu funktionieren, er gibt mir die Sachen einfach aus.

 

[xXxPeterPanxXx]

Wieso vermischt du HTML mit CSS? Lass die HTML Attribute weg.

Entferne die Attribute und füge das zur CSS Datei hinzu:

#details{
    height:0;
    width:0;
}

Erfolg kann ich nicht garantieren, ist ungetestet.

 

[Derte]

Danke ;)
Hab das jetzt getestet:
Ergebnis:
-> Hover Funktion geht
-> Tabelle ist aber immer zu sehen, auch ohne Hover.

Also das mit width="0" und height="0" scheint nicht zu funktionieren...

Nochmal den Code:

#details{
    width:0;
}
#details td{
    border-bottom: 1px solid white;    /* Rahmen setzen */
    padding: 2px;                      /* Abstand zwischen Inhalt und Rahmen */
               /* Abstand zwischen Text und linkem Rand vergroessern -> sieht aus wie Abstand zwischen den Zellen, zerstoert aber nicht den Rahmen */
}

#details:hover{
    border-collapse: collapse;         /* Kein Raum zwischen den Zellen */
    height:100%;
    width:100%;
}

#details tr td:first-child{
    padding-left: 2px;                 /* Die erste Reihe soll keine 20px Abstand nach links haben */
}

 

[xXxPeterPanxXx]

Kann ich mal bitte einen Link haben?

Dann kann ich einen bisschen mit FireBug rum spielen. Ansonsten guck dir das mal an:

display: Anzeigeart: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

 

[Derte]

#details{
    width:0;
    display:none;
}
#details td{
    border-bottom: 1px solid white;    
    padding: 2px;                      
               
}

#details:hover{
    border-collapse: collapse;         
    height:100%;
    width:100%;
}

#details tr td:first-child{
    padding-left: 2px;                 
}

ich hab jetzt "display:none" hinzugefügt. Das sagt mir also, dass nichts angezeigt werden soll -> das Hover wird auch nicht angezeigt.
Ich hab es im hover mit "display:inline" versucht, geht aber auch nicht....

Ich setzt es jetzt nochmal zurück zur Ansicht ;)
Fifa Fights

 

[xXxPeterPanxXx]

Hört sich blöd an, aber reiß die Seite ab und fang neu an, denn du verwendest Tabellen fürs Layout, Attribute etc. Das ist nichts mehr zu retten.:cry:

Ich kann die Stelle so wohl auf der Seite als auch im Quellcode nicht finden. Ich habe den Quelltext durchsucht und nirgends die id details gefunden.

Gruß xXxPeterPanxXx

 

[Derte]

Wieso sollte ich den die Seite abreißen?
Ich versteh net ganz, weil ich verwende ja nur tabellen wo auch tabellen sein müssen.
Was meinste genau mit Layout, Attribute etc?

Und 400 Zeilen PHP und HTML Quelltext kann man doch net so einfach aufgeben^^

Berechne auch noch das ich mit PHPKIT arbeite -> 2 <style> Bereiche ;)

 

[xXxPeterPanxXx]

Wieso sollte ich den die Seite abreißen?
Ich versteh net ganz, weil ich verwende ja nur tabellen wo auch tabellen sein müssen.
Was meinste genau mit Layout, Attribute etc?

Und 400 Zeilen PHP und HTML Quelltext kann man doch net so einfach aufgeben^^

Die Seite ist komplett falsch Ausgezezeichnet. Der Sinn von HTML liegt darin dem Inhalt eine Bedeutung zu geben. So werden Überschriften als <h1>-<h6> ausgezeichnet, Textabsätze als <p>, Listen als <ul> bzw. als ol und so weiter.

Du verwendest hingegen nur Tabellen und gibst denn verschieden Elementen keine richtige Bedeutung. Das ist besonders für Sehbehinderte Menschen schlecht, die einen Vorlesebrowser verwenden, denn der Vorlesebrowser weiß nichts mit dem Code anzufangen. Zusätzlich hast du noch den Doctype vergessen, ohne ihn weiß der Browser nicht welche HTML Version/Variante du benutzt und es gibt evtl. Anzeigefehler. Wieso nutzt du noch HTML Attribute und Style Elemente wie <font>, dafür ist CSS.

Deine Seite hat ganz schön viele Fehler: http://www.html.de/off-topic-plauderecke/32276-funktioniert-kann-man-anwenden-oder-doch-nicht.html

In diesem Forum wird gerade über diese Thema diskutiert, bevor ich hier alles wiederhole kannst du lieber diesen Thread lesen:

http://www.html.de/off-topic-plauderecke/32276-funktioniert-kann-man-anwenden-oder-doch-nicht.html

xXxPeterPanxXx

 

[Derte]

Jo. Das habe ich verstanden....

Aber nur nochmal zum Verständnis:
- Die Überschrift ist eine Bild (Spricht da irgendwas dagegen?)
- Ja, der Rest ist eine Tabelle, klar, aber wie soll ich das anders lösen? Ich könnte mit <p> jedes Mal arbeiten, die <b>s könnte ich klar auch entfernen aber das ist ja sicher nicht das grundliegende Problem.
-> und alles andere ist ja vom Kit erstellt worden und nicht von mir.....

Wenn du mir ein Beispiel geben könntest, wie so eine Seite dieser Art aufgebaut sein soll, oder allgemein der Richtig Aufbau von solchen seiten mit Tabellen, könnte ich dass nachvollziehen.

Ich hab jetzt auch einiges im anderen Thread gelesen, verstehe auch den Hintergrund, aber nicht was ich genau ändern muss...

Ich wäre auch dankbar wenn du mal einen Schnipsel packen könntest und mir diesen Richtig formatieren....

Das ich mehr CSS verwenden muss ist auch klar, mal davon abgesehen dass ich mich erst mit html und css beschäftigen hätte sollen anstatt mit php.

 

[xXxPeterPanxXx]

- Die Überschrift ist eine Bild (Spricht da irgendwas dagegen?)

Du kannst Sie trotzdem als Überschrift auszeichnen:

<h1><img src="blabla/blabla.jpg" alt="Ich bin der Alternativtext" /></h1>

- Ja, der Rest ist eine Tabelle, klar, aber wie soll ich das anders lösen? Ich könnte mit <p> jedes Mal arbeiten, die <b>s könnte ich klar auch entfernen aber das ist ja sicher nicht das grundliegende Problem.

Jedesmal nicht, aber alles hat ein passendes Element. Du verwendest hingegen nur 4-5 Elemente und die sind falsch ausgezeichnet.

-> und alles andere ist ja vom Kit erstellt worden und nicht von mir.....

Das merkt man:???:

Wenn du mir ein Beispiel geben könntest, wie so eine Seite dieser Art aufgebaut sein soll, oder allgemein der Richtig Aufbau von solchen seiten mit Tabellen, könnte ich dass nachvollziehen.

Gar keine Tabellen, warum immer Tabellen? Dafür ist CSS. Ich hab mal eine Seite rausgesucht, die fast richtig ausgezeichnet ist, es sind nur ein paar Überschriften vertauscht, aber das kann man verzeihen: Webdesign mit Webstandards (Webdesign) | andreas-kalt.de

Ich hab jetzt auch einiges im anderen Thread gelesen, verstehe auch den Hintergrund, aber nicht was ich genau ändern muss...

Kurz gesagt richtige Tags für die Auszeichnung verwenden, Tabellen raus und nur CSS verwenden für das Design, keine Design Attribute.

Ich wäre auch dankbar wenn du mal einen Schnipsel packen könntest und mir diesen Richtig formatieren....

Einen Schnipsel kann man da nicht posten, es ist der ganze Aufbau deiner Seite der falsch ist. Guck dir die Website an, die ist weitestgehend in Ordnung, wenn du so deine Website auszeichnest ist das in Ordnung.

Vielleicht finden andere User noch eine bessere Website auf die schnelle.

Gruß xXxPeterPanxXx