margin, padding en definition lists - bijna opgelost

ja wat een titel :wink:

Ik zit met het volgende ‘probleem’ . Ik zit hier al een dag mee te klooien dus kan er ook niet meer helder naar kijken.

Wat is de bedoeling:
Er wordt dynamisch een lijst gegenereerd met ‘te publiceren items’. Ik gebruik hiervoor een definition list omdat ik 3 delen moet specificeren, maar om het juist op het scherm te krijgen moet ik heel veel met marges en padding zitten klooien.

Nu ziet het er in FF, Safari en IE Mac redelijk uit, maar door al het gepruts met marges en padding verslikt IE 6 zich daarin.

Nu de vraag; is het ook mogelijk om dit op een simpelere manier te CSS-en? Ik zat eerst te denken om hiervoor gewoon een aparte DIV aan te maken, maar ik heb begrepen dat je DIV een uniek element is op je pagina. Dat is ie natuurlijk niet meer als die lijst dynamisch wordt gegenereerd.

Alle suggesties zijn welkom want ik zie door de bomen het bos niet meer!

edit:
Een oplossing waarmee ik ook meer controle zou hebben over het blauwe vlak rechts zou helemaal mooi zijn, want dat kan ik dat vergrootglas ook beter positioneren…

Met DIVs werken kan heel goed. Je geeft hem dan een ID mee die inderdaad elke keer hetzelfde is, maar dat wil je ook zodat je elke div met die ID kunt aansturen.

Kijk maar eens op http://www.villa.nl Die site is bijna helemaal met CSS, DIVs en SPANs gebouwd. Door mij, toevallig :wink:

een ID mag je maar 1 x keer gebruiken per pagina, je kan beter dan een class gebruiken voor die div.

ehh ja, vergeten te melden dat ik natuurlijk wel een oplossing zoek die door de [url=http://validator.w3.org] validator [/url] komt ;)

Je gebruikt de verkeerde HTML tag: het is geen DL-lijst, want je begint steeds op nieuw met een dl definitie.

Verder kan je je afvragen of dit geen tabulaire data is, dus of een <table> niet veel meer van toepassing is.

Ik zou zeker niet gaan klooien met losse div’s en span’s, want dan is je structuur helemaal weg,

Tip: bekijk je pagina zonder CSS opmaak, dus alleen de HTML. Zie je dan nog steeds een overzichtelijke structuur?

Je kan denken aan een combinatie van dt en dd, waarbij je binnen je dt steeds een <ul> lijst aanmaakt, binnen 1 dl tag gevat.

idd... tab. data 'mag' je natuurlijk in een tabel stoppen... Ik denk dat dat hier wel een optie is... Zoals ik al zei zag ik door de bomen het bos niet meer ;)

[quote:3b7bafcdba="Chriz"]Met DIVs werken kan heel goed. Je geeft hem dan een ID mee die inderdaad elke keer hetzelfde is, maar dat wil je ook zodat je elke div met die ID kunt aansturen.

Kijk maar eens op http://www.villa.nl Die site is bijna helemaal met CSS, DIVs en SPANs gebouwd. Door mij, toevallig ;)[/quote:3b7bafcdba]

Als het je bedoeling was om deze pagina te laten valideren heb je nog wel een stuk te gaan; je gebruikt o.a. id’s dubbel, wat uit den boze is, en sluit redelijk wat <br> tags ook niet af (vervang ze door <br /> ) Ik kan je ook aanraden om onderaan je pagina niet te zorgen voor een marge met een bergje <br>'s; dat is niet heel netjes…

Maar goed, dit topic ging niet om jouw site :? :smiley:

Heb het nu opgelost door de DL eruit te gooien en daarvoor in de plaats div classes te gebruiken. Het is misschien minder fraai om geneste div's te gebruiken, maar het werkt wel makkelijk en komt ook nog door de validator ;)

Vroeger losten we layout problemen op met geneste tabellen, nu lossen we ze op met geneste div's ... what's the difference?

Als je het semantisch goed had willen oplossen had je een combinatie van een table, ul en blcokquote kunnen gebruiken, of dl, ul en blockquote.

De truc is om eerst vanuit structuur te denken en daar je layout op toe te passen en niet vanuit layout te denken en daar een structuur bij te zoeken.

Webstandards gaat niet om het vervangen van de table tag door de div tag, maar om de brei aan tags terug te brengen en duidelijk leesbare, goed gestructureerde HTML te maken die je dan met CSS van layout voorziet.

Peter Paul Koch heeft een heel erg leuk artikel geschreven (in het nederlands): http://www.naarvoren.nl/artikel/structuur.html

:cry:

[quote:0859a4348b="tricksel"]je gebruikt o.a. id's dubbel, wat uit den boze is[/quote:0859a4348b]Why is that?

[quote:22dff566a0="Chriz"][quote:22dff566a0="tricksel"]je gebruikt o.a. id's dubbel, wat uit den boze is[/quote:22dff566a0]Why is that?[/quote:22dff566a0]

Zoals eerder gezegd door XXX; ID’s zijn voor eenmalig gebruik; classes voor meerdere malen. O.a. hierdoor valideert je pagina niet.

een ID mag je eenmalig gebruiken, een class meerdere malen.

Dat het niet valideert weet ik. Ik weet ook dat het eigenlijk niet mag. Maar waarom mag het niet? Dat het dan niet valideert vind ik geen reden. Dat m'n site dan op een bepaalde browser zou exploderen bijvoorbeeld, dat vind ik een reden.

[quote:2b7e0c9773="Chriz"]Dat het niet valideert weet ik. Ik weet ook dat het eigenlijk niet mag. Maar waarom mag het niet? Dat het dan niet valideert vind ik geen reden. Dat m'n site dan op een bepaalde browser zou exploderen bijvoorbeeld, dat vind ik een reden.[/quote:2b7e0c9773]

De belangrijkste reden is dat een id een identifier is. Op dit moment is het zo dat browsers je niet afstraffen voor het meermaal gebruik van een id, maar wie zegt dat voor de toekomst het niet anders geimplementeerd wordt?

Wat wel uitmaakt is als je met ECMAscript (javascript) aan de gang gaat. Een id wordt toegevoegd als tak aan de DOM (document object model) en kan je als naam aanspreken in je script. Ik refereer een paar posts terug aan een artikel van Peter Paul Koch; daarin wordt heel duidelijk geillustreerd wat de gevolgen zijn.

[quote:ea7c203a11="Chriz"]Dat het niet valideert weet ik. Ik weet ook dat het eigenlijk niet mag. Maar waarom mag het niet? Dat het dan niet valideert vind ik geen reden. Dat m'n site dan op een bepaalde browser zou exploderen bijvoorbeeld, dat vind ik een reden.[/quote:ea7c203a11]

Waar slaat dat nou weer op? Als je je niet aan de “regels” wenst te houden, kun je net zo goed je hele site opbouwen in tabellen. Waarom zou je dan de moeite nemen om alles netjes in div’jes en weet ik veel wat te zetten. Niet flauw gaan doen zeg, kom op!

@ tennapel : Bedankt voor je input! Geneste div's verdienen idd niet de schoonheidsprijs, maar ik weet niet hoe ik het anders moet oplossen. Ik neem je advies ter harte en ga de vormgeving iets aanpassen, zodat er een logischer structuur in de html komt. Wat betreft je suggestie om dl, ul en blockquote te gebruiken... dat kwartje valt hier nog niet helemaal... Is een opzetje zoals hieronder ongeveer wat je bedoelt?

[img:6b6ebf47bc]http://jjw.nl/test/structuur.gif[/img:6b6ebf47bc]

@Flipstra:

Ik denk inderdaad dat dit ongeveer is wat tennapel bedoelt…

Ik heb er nog eens over nagedacht en ik vind de volgorde raar. Als ik het puur semnatisch bekijk zou ik het denk ik het volgende doen:

[code:1:aca560b950]
<dl>
<dt>Kop</dt>
<dd>
<blockquote><p> Het fragment van de tekst </p></blockquote>
<hr>
<ul>
<li> item 1: </li>

</ul>
<hr>
<ul>
<li>bewerk</li>

</ul>
</dd>

<dt>Kop</dt>

</dl>[/code:1:aca560b950]

Die volgorde vond ik vrij logisch, maar met een DL niet mogelijk omdat je begint met een UL... vandaar dat nu de zooi is omgedraaid:

met dank aan tennapel! :smiley: