webForumDet fria alternativet
Logga in / Bli medlem

[XHTML] table inom span eller a

HTML & CSS

17 svar · 1 151 visningar · startad av Gein

Geins avatarGeinMedlem sedan sep. 20005 700 inlägg
Frågan#1

Validerar för XHTML1.0 Strict och använder följande CSS-kod:

div.rrExpand a{
	position:relative;
	color: #000000;
}
div.rrExpand a:hover{
	position:relative;
}

div.rrExpand a table
{
   display: none;
   position: absolute; top: -100px; left: 300px; width: 300px;
}
div.rrExpand a:hover table
{
   display: block;
   padding: 3px; margin: 10px; z-index: 100;
   font: 11px Arial, verdana, sans-serif; 
   text-align: center;
   background-color: #DCDCDC;
   color: #333333;
   border-top: 1px solid #1F1F1F;
   border-left: 1px solid #1F1F1F;
   border-right: 2px solid #121212;
   border-bottom: 2px solid #121212;
}

div a:hover {border: none; text-decoration:none;}

Ovanstående för att få fram en popup med ren css-kod. Nu är det så att den popupen jag tar fram nu innehåller en table. Detta kan se ut såhär t.ex:

<td class="tleft"><div class="rrExpand"><a href="#">Verifikationstext<table><tr><td>Ver.</td><tr><td>6</td>
</tr></table></a></div></td>

För enkelhetens skull har jag kortat ner den inre tabellen som egentligen är mer omfattande än så.
Problemet är nu att jag inte får ha en table innanför a-taggen. Har provat att lägga table inom en div som ligger inom a men det fick jag inte heller göra. Span får jag ha inom a men vidare får jag inte ha en table innanför span. En aning rörigt va?

Hur kan jag lösa det så att jag får fram min popup innehållande en tabell?

CheguelinMedlem sedan juli 2003303 inlägg
#2

Det kan inte vara så att valideraren klagar på ditt mig veterligen felaktiga användande av <div><a></div></a>?

Geins avatarGeinMedlem sedan sep. 20005 700 inlägg
#3

Cheguelin skrev:

Det kan inte vara så att valideraren klagar på ditt mig veterligen felaktiga användande av <div><a></div></a>?

Tack för noteringen men den var kvar där efter att jag försökte trixa mej runt felet. Den är inte där längre men table får fortfarande inte vara inom a. Har redigerat ovanstående inlägg.

dectgaps avatardectgapMedlem sedan sep. 20021 655 inlägg
#4

En länk (ett a-element) får innehålla en hel massa olika sorters HTML-element (betydligt fler än vad jag trodde, när jag kollade upp det), men table är inte ett av dem.
Du kan alltså inte lägga tabellen i en länk, utan får lösa det hela på något annat sätt (t ex genom JavaScript).

När jag kollade efter vilka element som får finnas i en länk visade det sig att det är hela 32 olika HTML-element som får finnas där, nämligen följande:

br | span | bdo | map | object | img | tt | i | b |
big | small | em | strong | dfn | code | q | samp |
kbd | var | cite | abbr | acronym | sub | sup | input |
select | textarea | label | button | ins | del | script

Att få lägga script- och formulärs-element i en länk var något helt nytt för mig, och även om det kan låta konstigt validerar följande dokument som XHTML 1.0 Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
<title>xxx</title>
</head>

<body>

<form action="">

<p>
	<a href="#">
		<script type="text/javascript"></script>
		<input />
		<object />
	</a>
</p>

</form>

</body>

</html>

Testa själv:
http://validator.w3.org/check?verbose=1&uri=http%3A//member.webforum.nu/dectgap/aelement.html

Geins avatarGeinMedlem sedan sep. 20005 700 inlägg
#5

Fast jag ville ha en table ;)
Går det inte att göra en tabelliknande struktur utan table på något sätt?

red/ Eller hur gör jag samma sak med javascript istället? (Kan inte mycke JS :r)

LeonLMedlem sedan dec. 20025 871 inlägg
#6

Om du vill att allt som finns i div:en med class "rrExpand" ska bli en länk kan du göra så här.

<td class="tleft">
  <div class="rrExpand" onclick="document.location='[LÄNK]';">
    Verifikationstext
    <table>
      <tr>
        <td>Ver.</td>
      </tr>
      <tr>
        <td>6</td>
      </tr>
    </table>
  </div>
</td>

Tittar du noga på din kod så kan du även se att du hade glömt en avslutande <tr>-tagg. ;)

Vill du att det ska synas att det ska gå att klicka lägger du bara till

style="cursor: pointer;"

för att muspekaren ska bli en hand.

Geins avatarGeinMedlem sedan sep. 20005 700 inlägg
#7

Att en </tr> har försvunnit beror nog bara på att jag inte kollade så mycket på tabellen när jag strippade ner den.
Men nu har du nog missförstått mej en aning. Jag vill inte ha en hel div länkbar. Jag vill ha en liten popupruta som ska synas när man för muspekaren över en viss text. Min första kod är för att göra detta enbart med CSS. Men nu visar det sig att jag måste göra det med JS istället, för att validera korrekt. Antagligen får jag väl växla en div synbar eller icke med hjälp av ett javascript som är kopplat till texten i fråga.

dectgaps avatardectgapMedlem sedan sep. 20021 655 inlägg
#8

Varför inte bara

<table title="En liten hjälptext">
Geins avatarGeinMedlem sedan sep. 20005 700 inlägg
#9

dectgap skrev:

Varför inte bara

<table title="En liten hjälptext">

?
För att förtydliga. Så här är det nu. För muspekaren över texterna till vänster så ser ni. Problemet är att det som poppar upp är tabeller som inte får vara där dom är. Kolla mot valideringen får ni se.

red/ Plockade ner länken.

dectgaps avatardectgapMedlem sedan sep. 20021 655 inlägg
#10

Sorry, jag läste "Jag vill ha en liten popupruta som ska synas när man för muspekaren över en viss text." utanför sitt sammanhang.

Hade IE fixat :hover för andra element än a hade det gått bra, men nu är det inget möjlighet.
Genom JavaScript (onmouseover) går det bra att utelämna länken och därmed få koden att validera.

Geins avatarGeinMedlem sedan sep. 20005 700 inlägg
#11

Jo, men nu blir det genast mycket jobbigare då jag måste, dynamiskt, ge alla olika popuplager som genereras ett varsitt ID för att kunna nå dom med getElementById. Och isåfall måste jag först kolla hur många lager som behövs genereras (med en sql-fråga) för att sedan skapa dessa lager och ge dom unika namn. Hmm...

Geins avatarGeinMedlem sedan sep. 20005 700 inlägg
#12

Nu har jag löst det. Vet inte om det är en fullösning men den validerar iaf!
Tabellen satte jag inom <object> ... </object> och saken var löst.
Tittade lite på var man får sätta taggar och såg att den enda utvägen (tillbaka till flow) var genom object-taggen.

red/ Jaha, då fungerade inte hover-effecten längre.

Geins avatarGeinMedlem sedan sep. 20005 700 inlägg
#13

Okej, med hjälp av <map id=".."><table>...</table></map> så har jag nu fått det att både validera och se bra ut ... i Opera. Trötta IE hänger såklart inte med i svängarna.
Sidan ser ni här. Koden är en aning rörig, ja, men det är för att den körs ut av php. Har inte orkat med det estetiska ännu. Förslag på hur man ska få det snyggt i IE, där texten inte ens syns och blocket inte är absolut-positionerat? Jämför gärna mellan Opera / IE för att se skillnaderna.

red/ Plockade ner länken.

dectgaps avatardectgapMedlem sedan sep. 20021 655 inlägg
#14

Själv skulle jag hellre svälja min stolthet och lägga <table> direkt under <a>, istället för att lägga in helt ologiska html-element (<map><div>) bara för att få koden att validera, men det är kanske snarare en smaksak.

Om du ändrar

div.rrExpand a map

och

div.rrExpand a:hover map

till

div.rrExpand a table

resp.

div.rrExpand a:hover table

verkar det fungera i IE.

Geins avatarGeinMedlem sedan sep. 20005 700 inlägg
#15

Tack, det stämmer bra, men då slutar den fungera helt i Opera?:OO

dectgaps avatardectgapMedlem sedan sep. 20021 655 inlägg
#16

Du skulle kanske kunna använda dig av IE-conditional comments för att välja CSS beroende på läsare, för att enkelt servera IE en egen version.

<style type="text/css">
.rrtblbottom { 
	border-bottom: 1px solid #ABABAB;
}
.tleft {
	text-align: left;
}
div.rrExpand a{
	position:relative;
	color: #000000;
}
div.rrExpand a:hover{
	position:relative;
}

div a:hover {border: none; text-decoration:none;} 
</style>

<![if !IE]>
<style type="text/css">
div.rrExpand a map
{
   display: none;
   position: absolute; top: -100px; left: 300px; width: 300px;
}
div.rrExpand a:hover map
{
   display: block;
   padding: 3px; margin: 10px; z-index: 80;
   font: 11px Arial, verdana, sans-serif; 
   text-align: center;
   background-color: #DCDCDC;
   color: #333333;
   border-top: 1px solid #1F1F1F;
   border-left: 1px solid #1F1F1F;
   border-right: 2px solid #121212;
   border-bottom: 2px solid #121212;
}

</style>
<![endif]>

<!--[if IE]>
<style type="text/css">
div.rrExpand a table
{
   display: none;
   position: absolute; top: -100px; left: 300px; width: 300px;
}
div.rrExpand a:hover table
{
   display: block;
   padding: 3px; margin: 10px; z-index: 80;
   font: 11px Arial, verdana, sans-serif; 
   text-align: center;
   background-color: #DCDCDC;
   color: #333333;
   border-top: 1px solid #1F1F1F;
   border-left: 1px solid #1F1F1F;
   border-right: 2px solid #121212;
   border-bottom: 2px solid #121212;
}

</style>
<![endif]-->

Dock är jag osäker på om det validerar, och då är vi ju tillbaka på ruta 1...

Geins avatarGeinMedlem sedan sep. 20005 700 inlägg
#17

Tack! Det är det jag är lite inne på. Får nog erbjuda IE en specifik kod och resten den "vanliga".
Får känslan av att IE inte klarar av fler än 3 taggar i en CSS-deklaration. Tänker då på 'div.rrExpand a map table'

Geins avatarGeinMedlem sedan sep. 20005 700 inlägg
#18

Jag gör nog som du säger, sväljer stoltheten, och struntar i validering av just det dokumentet.

268 ms totalt · 4 externa anrop · v20260731065814-full.1dc6f849
121 ms — deklarationer (db)
0 ms — hämta statistik (cache)
135 ms — hämta tråd, inlägg och bilagor (db)
130 ms — ändringar (db)