kostenloser Webspace werbefrei: lima-city

Problem mit Pseudo-Tabelle

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   meron

   meron hat kostenlosen Webspace.

   11:21, 23.9.2012

   Hallo zusammen
   
   Ich habe ein Problem für welches ich etwas ausholen muss:
   Für mich privat erstelle ich derzeit eine kleine Fall-/Geschäftebewirtschaftung. Dazu nutze ich PHP in Zusammenarbeit mit mySql, die ganze Anzeige wird via HTML und Javascript aufgebaut.
   
   Bis anhin wurden die Geschäfte in eine <table>-Struktur angezeigt, also so richtig mit tr's und td's. Jedoch nur die Geschäfte, die Links und Menüs sind mit div-Elementen angeordnet. Die Tabellenstruktur hatte allerdings den Nachteil, dass ich einen Link, um ein Detail zu eröffnen, jeweils pro Zelle hätte hinterlegen müssen und so bekam jeweils einfach die Id die Verlinkung. Je länger je mehr störte mich jedoch der Klick auf die Id, ich wollte irgendwo auf die Zeile klicken um das Detail zu öffnen.
   Also habe ich mich schlau gemacht und herausgefunden, dass man mit display: table-cell etc. ein <span>-Element positionieren kann wie eine Tabellenzelle, der Link wird dabei via display: table-row zur Tabellenzeile formatiert. Funktioniert alles wunderbar: jetzt kann ich klicken wo ich will, die Sache hat allerdings einen Nachteil, und so kommen wir nun zu meinem Problem:
   Auf dieser Zeile habe ich teilweise auch Formularelemente, z.B. eine Checkbox mit der Geschäfte angewählt werden können, klickt man nun diese Checkbox an öffnet sich ebenfalls das Detailfenster und das will ich nicht :-)
   
   Ich habe es schon mit z-index probiert oder onclick="return false;", doch das funktioniete nicht. Dann versuchte ich, auch noch folgende Stuktur: (keine Originalkopie sondern kurz neu geschrieben)
   

   <div style="display: table"><span style="display: table-row"><a href="LINK"><span style="display: table-cell">Inhalt</span><span style="display: table-cell">Inhalt 2</span></a><span style="display: table-cell">Formularelement</span></div>

   
   
   Dabei wurde mir aber immer das Formularelement auf die nächste Zeile genommen, und anklicken konnte man es trotzdem nicht (sobald man geklickt hatte verschwand das "Häcklein" wieder).
   
   Ich habe schon versucht zu googlen, wusste allerdings nicht wie ich dieses Problem beschreiben könnte, kann mir jemand helfen?
   
   Besten Dank & Grüsse

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. notinthetext

   

   notinthetext hat kostenlosen Webspace.

   12:48, 23.9.2012

   Für mich sieht es so aus, als fehle da ein schließender span-tag. Also müsste es heißén:

   <div style="display: table">
   	<span style="display: table-row">
   		<a href="LINK">
   			<span style="display: table-cell">Inhalt</span>
   			<span style="display: table-cell">Inhalt 2</span>
   		</a>
   		<span style="display: table-cell">Formularelement</span>
   	</span>
   </div>

   anstelle von

   <div style="display: table">
   	<span style="display: table-row">
   		<a href="LINK">
   			<span style="display: table-cell">Inhalt</span>
   			<span style="display: table-cell">Inhalt 2</span>
   		</a>
   		<span style="display: table-cell">Formularelement</span>
   </div>

   Ich weiß zwar nicht, ob das nun das Problem behebt, oder ob das nur ein Übertragungs-Fehler war.
   
   Ansonsten kannst du mit die Anker auch als block-elemente ( über

   display: block

   ) "füllend" machen, wobei der Internet-Explorer da vielleicht rumzickt.
4. Autor dieses Themas

   meron

   meron hat kostenlosen Webspace.

   14:39, 23.9.2012

   Hoi
   
   Danke für deine Antwort.
   
   Das war aber wirklich ein Übertragungsfehler, hier die (am Schluss) generierte HTML-Tabelle:
   

   <div class="start">
   <span class="tabellenzeile">
     <span class="tabellenzelle">Nr.</span>
     <span class="tabellenzelle">Person</span>
     <span class="tabellenzelle">Datum</span>
     <span class="tabellenzelle">Kontakt</span>
     <span class="tabellenzelle">Eingang</span>
     <span class="tabellenzelle">Datum 2</span>
     <span class="tabellenzelle">Datum 3</span>
   </span>
   <span class="tabellenzeile">
   <a href="dossier.php?id=2" class="zeilenfarbe_1 liste" onclick="bearbeiten(this.href); return false;">
     <span class="tabellenzelle">2010-03</span>
     <span class="tabellenzelle">Theodor Muster-Kaufmann (1001)</span>
     <span class="tabellenzelle">23.03.2010</span>
     <span class="tabellenzelle">Klara Muster-Hausser</span>
     <span class="tabellenzelle">01.01.2012</span>
     <span class="tabellenzelle"></span>
     <span class="tabellenzelle">deaktiviert/18.07.2012</span>
   </a>
     <span class="tabellenzelle" onclick="return false;"><input type="checkbox" value="2" name="id" /></span>
   </span>
   
   <span class="tabellenzeile">
   <span class="tabellenzelle">Anzahl: 15</span>
   </span>
   </div>

   
   
   Habe nun aucheinmal versucht bei dem Link oder der Checkbox display: block, hat jedoch nichts gebracht. Interessant ist ja dass sich die Checkbox auch bei dieser Variante nicht anwählen lässt ..., das ganze funktioniert übrigens weder in FF noch in Opera, in FF habe ich aber einen Validator (das Ding ist ein Addon und heisst schlicht und einfach HTML-Validator) eingeschaltet, welcher keine (Relevanten) Warnungen oder Fehler ausgibt. Wenns dann in IE zickt ist das auch egal, hauptsache FF und Opera funktionieren :-)
   
   Besten Dank für weitere Tipps :-)
   
   EDIT: Dank Dragonfly soeben herausgefunden, warum die Checkboxen nicht angewählt werden konnten, wegen dem return false im <span> davor.
   
   Beitrag zuletzt geändert: 23.9.2012 15:47:58 von meron

5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?