<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="en" /> <style type="text/css"> dl { width:500px; height:200px; } dl dt { float:left; margin-right:10px; width:200px; } dl dd { float:left; font-weight:bold; width:200px; } </style> </head> <body> <dl> <dt>● Made by:</dt><dd>Bandai in Japan</dd> <dt>● Release year:</dt><dd>1983</dd> <dt>● Serial number:</dt><dd>5171904</dd> <dt>● Size:</dt><dd>Large</dd> </dl> </body> </html>
Als je deze HTML bekijkt, zit er een rare sprong na de eerste regel. Het moet er uit zien als een lijstje met data in 2 kolommen, allebei 200px breed. Hoe komt dit en hoe krijg ik deze weg? Het gekke is, dit is een onderdeel van een veel grotere site, en in het geheel is het enkel nog Opera die dit met sprong laat zien, maar wanneer ik de code los in de verschillende browsers laad, is de gekke sprong er overal. Ik wil heb er dus toch wel uit hebben.
Offline
<style type="text/css"> dl { width:500px; height:200px; } dl dt { margin-right:10px; width:200px; display: inline-block; border: 1px solid red; } dl dd { font-weight:bold; width:200px; display: inline-block; border: 1px solid red; } </style>
Offline
Je kunt ook een line-height meegeven. Dat is de reden waarom de regels bij het floaten tegen elkaar opbotsen.
dl { width:500px; height:300px; line-height:20px; }
Offline
en in plaats van een bullet voor elke description-term te typen kan je ook je eigen bullet of willekeurig ander icoontje meegeven in je stylesheet.
dt { padding-left: 10px; background: url("http://dl.dropbox.com/u/604341/check.png") no-repeat; }
Offline
Blijft vreemd. Ik merk dat
● aka &# 9679 ;
de boosdoener is voor Opera. Met een gewoon sterretje oid doet ie het gewoon. Waarom weet ik niet. Ik denk dat ik maar voor het plaatje zoals EagerBob beschrijft ga.
Laatst bewerkt door Martiniman (23-01-2012 16:28)
Offline
EagerBob schreef:
die grote stip is een "password dot"
als jeCode:
•gebruikt gaat het wel gewoon goed.
[edit]
mmh, die HTML wordt niet goed weergegeven.
ik bedoel dus: & # 8 2 2 6 ;
Laatst bewerkt door EagerBob (23-01-2012 21:34)
Offline