<li> weergeven als <table>

[Rekcor]

Misschien is het vloeken in de kerk, maar ik wil toch-wel-redelijk-tabulaire data weergeven als tabel, maar gebruikmakend van gewone lists. Ik heb hiervoor twee redenen: 1) mijn CMS ondersteund het invoeren van tabellen matig 2) ik wil de data soms ook wel als list weer kunnen geven.

Nu kom ik al een heel eind met de volgende code:

HTML:

<p>Dit is een oude paragraaf</p>
<ul class="fchMethod">
 <li>Location
  <ul>
   <li>These can be found on the big tables near the windows</li>
  </ul>
 </li>
 <li>Note
  <ul>
   <li>These are expensive!</li>
  </ul>
 </li>
 <li>Waste
  <ul>
   <li>You can just throw them away</li>
  </ul>
 </li>
</ul>
<p>Dit is een nieuwe paragraaf</p>
<style>
body
{
  width: 100%;
}
ul.fchMethod
{
  width: 100%;
  padding: 0px;
}

ul.fchMethod li
{
  float: left;
  width: 20%; 
  list-style-type: none;
  padding: 5px;
  margin: 0px;
  background-color: #eeeeee;
  font-weight: bold;
  clear: left;
}

ul.fchMethod li ul li
{
  font-weight: normal;
  padding: 0px;
  float: right;
  width: 80%;
  list-style-type: none;
  margin: 0px;
  margin-top: -1.5em;
  background-color: #dedede;
  clear: right;
}
</style>

Het probleem is tweeledig:
- de lijst is niet 100% breed;
- de paragraaf na de lijst komt er niet (in FF) onder te staan;

Het lukt me maar niet om dit op te lossen, ook niet met behulp van Grote Broer Google. Iemand een idee?

[ Voor 2% gewijzigd door Rekcor op 16-07-2008 13:21 . Reden: link verwijderd ]

[frickY]

Geef je ul een display: block zodat deze uitvult in de breedte.
En geef de geneste ul een clear:both om je paragraaf probleem te verhelpen?

[Erkens]

frickY schreef op woensdag 16 juli 2008 @ 12:42:
Geef je ul een display: block zodat deze uitvult in de breedte.
En geef de geneste ul een clear:both om je paragraaf probleem te verhelpen?

ehm, het grootste probleem is volgens mij dat de boel "float"
die paragraaf kan je fixen door juist _die_ een clear:both te geven.

Verder vraag ik me af waarom je hier niet gewoon een table voor gebruikt, daar is dat ding voor bedoeld

[frickY]

Erkens schreef op woensdag 16 juli 2008 @ 12:43:
Verder vraag ik me af waarom je hier niet gewoon een table voor gebruikt, daar is dat ding voor bedoeld

Omdat

1) mijn CMS ondersteund het invoeren van tabellen matig 2) ik wil de data soms ook wel als list weer kunnen geven.

De clear: both op de paragraaf zou inderdaad netter zijn, maar heeft hetzelfde effect. Ik weet alleen niet of hij een clear: both op al zijn paragrafen wilt. De sub-ul clearen heeft zelfs geen effect. Zal dus inderdaad op de p moeten.


Is het overigens de bedoeling dat de headers horizontaal of verticaal weergegeven worden?
Voor horizontaal kom ik uit op het volgende;

HTML:

<ul>
    <li>
        A1
        <ul>
            <li>A2</li>
            <li>A3</li>
            <li>A4</li>
        </ul>
    </li>
    <li>
        B1
        <ul>
            <li>B2</li>
            <li>B3</li>
            <li>B4</li>
        </ul>
    </li>
    <li>
        C1
        <ul>
            <li>C2</li>
            <li>C3</li>
            <li>C4</li>
        </ul>
    </li>
</ul>

<style type="text/css">
ul {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
}

    ul li {
        display: block;
        float: left;
        margin: 0;
        padding: 0;
        width: 200px;
        font-weight: bold;
        text-align: center;
    }

        ul li ul {
            clear: both;
        }

            ul li ul li {
                float: none;
                font-weight: normal;
                text-align: left;
            }
</style>

[ Voor 6% gewijzigd door frickY op 16-07-2008 12:53 ]

[curry684]

Rekcor schreef op woensdag 16 juli 2008 @ 12:38:
Misschien is het vloeken in de kerk, maar ik wil toch-wel-redelijk-tabulaire data weergeven als tabel, maar gebruikmakend van gewone lists.

Waarom zou dat vloeken in de kerk zijn? Het table-element is er afaik juist voor semantisch tabulaire data. Zeggen dat je daarvoor geen table mag gebruiken is net zoiets als zeggen dat je geen <em> mag zetten om benadrukte tekst.

Ik heb hiervoor twee redenen: 1) mijn CMS ondersteund het invoeren van tabellen matig

Waarom bemoeit de invoer van je CMS zich in godesnaam met de output?

2) ik wil de data soms ook wel als list weer kunnen geven.

Dan zet je er een andere template op.

[BtM909]

Laat eens even met bijv. paint zien wat je wilt bereiken, oftewel hoe je tweede kolom moet gaan overflowen en waar de "tweede" en "derde" regel moeten gaan beginnen.

Heel kort door de bocht:

Cascading Stylesheet:

ul.fchMethod
{
  padding: 0px;
}

ul.fchMethod li
{
  border: 1px solid red;
  list-style-type: none;
  padding: 5px;
  margin: 0px;
  background-color: #eeeeee;
  font-weight: bold;
}

ul.fchMethod li ul li
{
  font-weight: normal;
  padding: 0px;
  list-style-type: none;
  margin-left: 150px;
  margin-top: -1.5em;
  background-color: #dedede;
}

Zet om elk element even borders, zodat je sneller kan zien wat je beinvloed en waarom en hoe

[Rekcor]

Wat ik wil is:

code:

Bladieblaeen

+-------------+-------------------------------------+
| Location    | These can be found (...)            |
+-------------+-------------------------------------+
| Note        | These are expensive!                |
+-------------+-------------------------------------+

Bladieblatwee

(Paint is zo jaren '90 )

Waarom bemoeit de invoer van je CMS zich in godesnaam met de output?

Eh... is dit niet altijd het geval? Kijk in theorie zou dit misschien niet mogen, maar de praktijk is die van FCKeditors, onwillige CMS-en, etc. We moeten dus roeien met de riemen die we hebben.

[Rekcor]

Het probleem is dat de 100% van de ul niet meegenomen wordt, aangezien de li's aan het drijven zijn buiten de ul...

[Rekcor]

- de paragraaf na de lijst komt er niet (in FF) onder te staan;

Cascading Stylesheet:

ul.fchMethod
{
  width: 100%;
  padding: 0px;
  overflow: auto;
}

(http://www.quirksmode.org/css/clearing.html)

[Rekcor]

Gelukt!

De winnende code:

HTML:

<p>Dit is een oude paragraaf</p>
<ul class="fchMethod">
 <li>Location
  <ul>
   <li>These can be found on the big tables near the windows</li>
  </ul>
 </li>
 <li>Note
  <ul>
   <li>These are expensive!</li>
  </ul>
 </li>
 <li>Waste
  <ul>
   <li>You can just throw them away</li>
  </ul>
 </li>
</ul>
<p>Dit is een nieuwe paragraaf</p>

Cascading Stylesheet:

ul.fchMethod
{
  width: 100%;
  padding: 0px;  
  overflow: hidden  
}

ul.fchMethod li
{
  float: left;
  width: 100%; 
  list-style-type: none;
  padding: 5px;
  margin: 0px;  
  background-color: #eeeeee;
  font-weight: bold;
  clear: left;
  overflow: hidden;
}

ul.fchMethod li ul li
{
  font-weight: normal;
  padding: 0px;
  float: right;
  width: 80%;
  list-style-type: none;
  margin: 0px;
  margin-top: -1.5em;
  background-color: #dedede;
  clear: right;
}

De clou zat hem in het instellen van de breedte van de 'moeder-<li>' op 100% ipv 80%. De body tag op 100% zetten gaf vreemde scrollbalkjes in FF.

[Rekcor]

Eh... had ik jullie al bedankt voor de raad en advies? Bij deze:

[curry684]

Rekcor schreef op woensdag 16 juli 2008 @ 13:01:
Eh... is dit niet altijd het geval? Kijk in theorie zou dit misschien niet mogen, maar de praktijk is die van FCKeditors, onwillige CMS-en, etc. We moeten dus roeien met de riemen die we hebben.

Het CMS hoort met content om te gaan, of die nu rich (FCK/MCE) is of niet. Dat hoort je presentation layer geen bout te boeien, die rendert gewoon de content die het CMS hem aanlevert in z'n eigen templates

[frickY]

Rekcor schreef op woensdag 16 juli 2008 @ 13:01:
Wat ik wil is:

code:

Bladieblaeen

+-------------+-------------------------------------+
| Location    | These can be found (...)            |
+-------------+-------------------------------------+
| Note        | These are expensive!                |
+-------------+-------------------------------------+

Bladieblatwee

Dat zijn toch geen tabulaire geegvens? Je bent eerder opzoek naar een definition list

[Rekcor]

curry684 schreef op woensdag 16 juli 2008 @ 13:44:
[...]

Het CMS hoort met content om te gaan, of die nu rich (FCK/MCE) is of niet. Dat hoort je presentation layer geen bout te boeien, die rendert gewoon de content die het CMS hem aanlevert in z'n eigen templates

Dit zal waar zijn in theorie. In de praktijk echter, bemoeit een CMS zich in de meeste gevallen wel met de layout (bijv. omdat de CMS geen tabellen kan produceren). En dan is het roeien met de riemen die je hebt...