[xhtml/css] styling van een dl

[chris]

Hoi,

ik zit weer met een probleem: ik heb een dl, met de volgende code.

HTML:

<dl>
  <dt>gammel</dt>
  <dd>old</dd>
  <dt>illojal</dt>
  <dd>disloyal</dd>
  <dt>neste</dt>
  <dd>next</dd>
  <dt>snill</dt>
  <dd>kind</dd>
  <dt>stygg</dt>
  <dd>ugly</dd>
  <dt>tølrst</dt>
  <dd>thirsty</dd>
  <dt>vennlige</dt>
  <dd>kind (def)</dd>
</dl>

Het is een lijst met noorse woorden en de engelse vertaling daarvan.

Vervolgens heb ik er een stukje css bij:

Cascading Stylesheet:

#lexicon dl {
  width: 300px;
}

#lexicon dt {
  font-weight: normal;
  width: 149px;
}

#lexicon dt, #lexicon dd {
  float: left;
  width: 150px;
}

Die dl bevindt zich in een element met id="lexicon".

Vervolgens wil ik dus eigenlijk dat de lijst in tabelvorm getoond word, net zoals er gebeurt op http://www.maxdesign.com....tion/dl-table-display.htm

Ik wil niet dezelfde styles enzo, maar wel hetzelfde effect: een "kolom" met daarin de dt's, en daarnaast een kolom met de dd's. Echter, firefox fuckt het aardig up:

hij doet de eerste <dt> en <dd> goed, maar daarna gaat ff opeens de volgende <dt> niet meer meteen links zetten, maar alignt 'ie 'm aan de rechterkant:

http://www.my-website.nl/studie/it/#vragen

Echt heel vaag, weet iemand hoe dit op te lossen is? Of zou het een bug zijn in firefox?

Trouwens, de code waar dit over gaat staat in m'n pagina op regel 800.

[ Voor 34% gewijzigd door chris op 19-03-2004 15:14 ]

[Bosmonster]

Is het geen idee om de code van die site te nemen en die vervolgens aan te passen naar jouw wensen ipv het wiel opnieuw uit te vinden Je hebt een werkend voorbeeld staan!

[chris]

Bosmonster schreef op 19 maart 2004 @ 15:13:
Is het geen idee om de code van die site te nemen en die vervolgens aan te passen naar jouw wensen ipv het wiel opnieuw uit te vinden Je hebt een werkend voorbeeld staan!

Ehm, het idee achter die code heb ik overgenomen. Die code zijn maar een paar regeltjes die zorgen voor het tabel-zijn, en de rest is styling van fonts enzo.

Maar om het toch te checken had ik de code ook nog een keer letterlijk gekopiëerd (natuurlijk wel ff de selectors veranderd), maar dan krijg ik exact dezelfde fouten. Echt ontzettend wazig.

[ Voor 4% gewijzigd door chris op 19-03-2004 15:16 ]

[Bosmonster]

code:

#lexicon dl {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    width: 41.1em;
    margin: 2em 0;
    padding: 0;
}

#lexicon dt {
    width: 15em;
    float: left;
    margin: 0;
    padding: .5em;
}

/* commented backslash hack for mac-ie5 \*/
#lexicon dt { clear: both; }
/* end hack */

#lexicon dd {
    float: left;
    width: 24em;
    margin: 0;
    padding: .5em;
}

Ik heb met deze iets aangepaste style nergens last van.

[ Voor 105% gewijzigd door Bosmonster op 19-03-2004 15:21 ]

[chris]

Hm, het was dus een overervingsfoutje, die zijn er altijd moeilijk uit te slopen .

Maar nu zit ik wel met een volgend probleem (zelfs met die aangepaste style), op http://www.my-website.nl/studie/it/#vragen staan nu list item 2, 3 enz. nog steeds naast het eerste element, ze moeten er eigenlijk onderstaan. Dit zou toch eigenlijk niets met die hele dl te maken moeten hebben? Eigenlijk moet die <li> waar het geheel in staat toch altijd 100% breed zijn?

[Verwijderd]

<dl class="table-display">
bla bla bla
jou info
bla bla bla
</dl>

Your welkom

code:

<dl class="table-display">
<dt>Green and Golden Bell Frog</dt>
<dd>Nisl ut aliquip ex ea commodo consequat</dd>
<dt>Bull Frog</dt>
<dd>Lorem ipsum dolor sit amet elit...</dd>
<dt>Spotted frog</dt>
<dd>Facilisis at vero eros et accumsan</dd>
</dl>

zo staat het op je voorbeeld

[Bosmonster]

chris schreef op 19 maart 2004 @ 15:24:
Hm, het was dus een overervingsfoutje, die zijn er altijd moeilijk uit te slopen .

Maar nu zit ik wel met een volgend probleem (zelfs met die aangepaste style), op http://www.my-website.nl/studie/it/#vragen staan nu list item 2, 3 enz. nog steeds naast het eerste element, ze moeten er eigenlijk onderstaan. Dit zou toch eigenlijk niets met die hele dl te maken moeten hebben? Eigenlijk moet die

waar het geheel in staat toch altijd 100% breed zijn?

Nu snap ik niet meer wat je wilt, want wat je nu noemt is juist standaard definition-list opmaak.. dan heb je die hele CSS toch niet nodig?

title

description

description

description

title

description

description

description

title

description

description

description

[ Voor 18% gewijzigd door Bosmonster op 19-03-2004 15:28 ]

[chris]

Bosmonster schreef op 19 maart 2004 @ 15:27:
[...]


Nu snap ik niet meer wat je wilt, want wat je nu noemt is juist standaard definition-list opmaak.. dan heb je die hele CSS toch niet nodig?

Wat ik wil is het volgende:

Ik ben tevreden met die definition list. Echter:

die defintion list staan IN een <ol> (met id vragen). Van deze ol wil ik graag alle nummers onder elkaar, en niet zoals nu de nummers 2 t/m 8 naast de definition list , net zoals Opera het doet.

offtopic:
IE fuckt het trouwens wel helemaal up, belachelijk gewoon.

[ Voor 11% gewijzigd door chris op 19-03-2004 15:32 ]

[Bosmonster]

1. listitem
   

   
   

   title

   
   

   description

   
   

   description

   
   

   description

   
   

   title

   
   

   description

   
   

   description

   
   

   description

   
   

   
   


2. listitem
   

   
   

   title

   
   

   description

   
   

   description

   
   

   description

   
   

   title

   
   

   description

   
   

   description

   
   

   description

   
   

   
   

Even uitgaande van standaard functionaliteit zoals hier te zien.. wat wil je dan anders?

[chris]

Dit doet firebird:


en dit doet opera (en zo wil ik het ook):

[Bosmonster]

ah ok een afbeelding zegt meer dan 1000 woorden, zo blijkt maar weer.

Lijkt me inderdaad op een afbrekingsprobleem door de floats. Daar zat al een hack in voor IE5 mac, waarschijnlijk heb je die ook nodig voor Firebird:

#lexicon dt { clear: both; }

Of die floats eruitslopen.. want die veroorzaken dus het probleem.

[ Voor 12% gewijzigd door Bosmonster op 19-03-2004 15:46 ]

[chris]

Bosmonster schreef op 19 maart 2004 @ 15:44:
ah ok een afbeelding zegt meer dan 1000 woorden, zo blijkt maar weer.

Lijkt me inderdaad op een afbrekingsprobleem door de floats. Daar zat al een hack in voor IE5 mac, waarschijnlijk heb je die ook nodig voor Firebird:

#lexicon dt { clear: both; }

Of die floats eruitslopen.. want die veroorzaken dus het probleem.

Ja, dat het door die floats komt ben ik ook achter. Dat #lexicon dt op clear:both zetten werkt niet, immers: er moet ook nog een dd naast. Logischerwijs zou je denken dat je #lexicon dl op clear: both zou moeten zetten, maar dat blijkt ook niet te werken. En wat ik ook al heb geprobeerd: het laatste <dd> element uit die <dl> op clear: right; te zetten, maar zelfs dat werkt niet. Het is dus nogal tricky allemaal.

En de floats er uit slopen zou ook kunnen, maar dan ben ik dus die tabel kwijt. En ik heb het liefst zo net mogelijke xhtml, maar het zou niet zo moeten zijn dat css mij beperkingen aan m'n layout gaat opleggen. Desnoods ga ik een table gebruiken!

Maar toch: wat ik wil, zou volgens mij moeten kunnen....

[ Voor 17% gewijzigd door chris op 19-03-2004 15:49 ]

[Bosmonster]

wat bij mij wel werkt is:

<br style="clear:both" />

Aan het einde van iedere li te zetten. Dus na het einde van de dl.

Om te forceren dat er weer een nieuwe line wordt gepakt dus..

[ Voor 51% gewijzigd door Bosmonster op 19-03-2004 15:54 ]

[chris]

Bosmonster schreef op 19 maart 2004 @ 15:51:
wat bij mij wel werkt is:

<br style="clear:both" />

Aan het einde van iedere li te zetten. Dus na het einde van de dl.

Om te forceren dat er weer een nieuwe line wordt gepakt dus..

Inderdaad, ik heb het nu in de <h3> die daar op volgt gedaan, dat is semantisch zelfs nog iets correcter

Ontzettend bedankt voor je hulp