16 svar · 1 020 visningar · startad av Okkido
Tja,
Jag har suttit och tänkt på en sak men kan inte komma pa bäst lösning.
Problemet:
Jag har en sida. Där ska det visas öppettider.
Det ser ut pa följande sätt.
Rubrik
Mån-fre 12.00-12.00
Lör 12.00-12.00
Sön 12.00-12.00
Jag hade velat att tiden hade legat rakt undervarandat, som om alla delar hade varit i varsin cell, eller som t.ex. i word en tabbning.
Hur hade ni löst det?
antingen text-align:justify;
eller två divar som ligger bredvid varandra
<div class="dagar">
mån-fre
lör
sön
</div>
<div class="tider">
12:00-12:01
12:00-12:01
12:00-12:01
</div>
och sen sätta vidd och float i css
caya skrev:
antingen text-align:justify;
eller två divar som ligger bredvid varandra<div class="dagar"> mån-fre lör sön </div> <div class="tider"> 12:00-12:01 12:00-12:01 12:00-12:01 </div>och sen sätta vidd och float i css
...ja det blir ju verkligen jatte anvandarvanligt for besokare utan css-stod...
Det känns som en tabell vore mest passande.
'text-align:justify' som caya föreslog borde väl funka. :)
<h2>Rubrik</h2>
<ul>
<li>Mån-fre 12:00-12:00</li>
<li>Lör 12:00-12:00</li>
<li>Sön 12:00-12:00</li>
</ul>
ul { width:10em; list-style:none; text-align:justify; }
Kanske en definition list ? :) http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_list_definition
Before using a definition list, you should be aware that it may not be the best option in every case.
The <dt> within definition lists cannot contain block level elements – particularly the <hn> element. If content within a <dt> cannot be flagged as a heading, it cannot be given “heading” importance within the document hierarchy. Also, Google and other search engines will not index definition list content in the same way that they do for heading-based content.
Although definition lists can be styled to look like tabular data, they cannot contain screen reader accessibility features such as “labels” and “headers” to tie information together. For this reason, they should not be used to replace complex tabular data.
okkido - varför inte ge lite tips på hur man skulle kunna göra annars då, istället för att bara klanka ner på en idé. nu är ju detta forum dessutom ett forum som vänder sig till personer som vill lära sig mer om xhtml och css...
En av de få gånger som jag tycker att en tabell borde vara det absolut bästa.
Om man tänker sig att tiderna ska läsas upp för en blind så fungerar det inte riktigt så bra med två divar.
För er som vill ha förslag, så är det här en variant på en uppläsarvänlig tabell Godkänd i xhtml1.1 och AAA förutom att de förordar en relativ vidd på tabellen i stället för fast.
<table width="200" summary="denna tabell visar affärens öppettider."><caption>
Öppettider</caption><thead><tr>
\<th scope="col"\>mån-fre\</th\>
\<th scope="col"\>lör\</th\>
\<th scope="col"\>sön\</th\>
\</tr\>\</thead\>
<tbody>
<tr>
\<td scope="row"\>tiden\</td\>
\<td scope="row"\>tiden\</td\>
\<td scope="row"\>tiden\</td\>
\</tr\>\</tbody\>\</table\>
caya skrev:
okkido - varför inte ge lite tips på hur man skulle kunna göra annars då, istället för att bara klanka ner på en idé. nu är ju detta forum dessutom ett forum som vänder sig till personer som vill lära sig mer om xhtml och css...
Om jag hade haft tips pa hur jag skulle gora det hade jag val inte fragat fran forsta borjan?
Men okej, sattet jag hade tankt mig nar jag skapade traden var nagon form av lista. Sa nu kan vi spinna vidare pa den ideen.
Jag anser mig ha hittat basta sattet och det blev en dl.
Med bestamd width pa dt:en och allting floatades left sa fick jag exakt det resultat jag ville ha.
tanten skrev:
En av de få gånger som jag tycker att en tabell borde vara det absolut bästa.
Håller med. Det känns som om snacket om "man ska inte använda tabeller för layouten, man ska använda CSS" har gått lite väl långt. Tabeller finns ju till för att visa information i tabellformat. :)
jo .. tanten & emission.. :e hehe.. det stämmer nog att man " glömmer bort " tabeller i onödan. Det här borde validera iaf.. :birp
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv">
<head>
<title>Okkido´s Öppettider</title>
<style type="text/css">
.col-last { background-color:#EBD88D; }
th { background-color:#ADC1D6; }
</style>
</head>
<body>
<table width="300" border="1" summary="Våra öppettider">
<caption>Öppettider</caption>
<colgroup>
<col width="100" class="col-first"></col>
<col width="100" class="col-middle"></col>
<col width="100" class="col-last"></col>
</colgroup>
<thead>
<tr>
<th scope="col">Mån-fre</th>
<th scope="col">Lördag</th>
<th scope="col">Söndag</th>
</tr>
</thead>
<tfoot>
<tr>
<td scope="row" colspan="3">Reservation för ändringar</td>
</tr>
</tfoot>
<tbody>
<tr>
<td scope="row">12.00-12.00</td>
<td scope="row">12.00-12.00</td>
<td scope="row">12.00-12.00</td>
</tr>
</tbody>
</table>
</body>
</html>
Tack tanten som fick mig att damma av mina " korrekt-tabell " kunskaper igen
Okkido skrev:
Men okej, sattet jag hade tankt mig nar jag skapade traden var nagon form av lista.
Det här är nyckeln. Frågan är vad det är, inte hur det ska se ut, när man avgör vilken märkkod man vill använda. Är det en lista så är det en lista. :)
Fuel, du borde inte ha scope="" på dina TD (om de inte är tänkta som tabellrubriker vill säga). ;)
Roger that zcorpan... har du nån bra länk till nån sida med avancerade xhtml tabeller ?
Hmm..
Här är en matnyttig länk till som diskuterar olika tillgänglighetsmärkningsprinciper för tabeller - http://www.usability.com.au/resources/tables.cfm - (skriven så sent som i somras faktiskt)...
Problemet är bara att den är lite "jobbig" för oss som tänker på tillgänglighet på så sätt att den testar olika metoder praktiskt (Artikeln bygger på jämförelser mellan ljudinspelningar från olika skärmläsare) och därefter kommer fram till att den mest komplexa metoden att märka upp tabeller (dvs användning av <th id="..."> + <td headers="...") tydligen i allmänhet funkar bättre än <th scope="..."> som används i exemplen i den här tråden...
At this stage, it appears that id and headers are the most effective way to make complex data tables accessible. Although id and headers are slightly more difficult to code than scope, the apparent poor screen reader support for scope means that this is probably not an effective accessibility option.
Eftersom jag själv också använde <th scope> utan att blinka tills jag läste den artikeln, tänkte jag att fler skulle kunna vara intresserade :birp