MacMinds - great minds think different

Martiniman · 23-01-2012 09:33

Code:

<!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.

ateliereb · 23-01-2012 10:43

Code:

<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>

Deskman · 23-01-2012 10:50

Je kunt ook een line-height meegeven. Dat is de reden waarom de regels bij het floaten tegen elkaar opbotsen.

Code:

dl
{
    width:500px;
    height:300px;
    line-height:20px;
}

EagerBob · 23-01-2012 11:22

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.

Code:

dt {
     padding-left: 10px;
    background: url("http://dl.dropbox.com/u/604341/check.png") no-repeat;
}

Martiniman · 23-01-2012 16:28

Blijft vreemd. Ik merk dat

Code:

● 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)

EagerBob · 23-01-2012 21:32

die grote stip is een "password dot"
als je

Code:

•

gebruikt gaat het wel gewoon goed.

EagerBob · 23-01-2012 21:33

EagerBob schreef:
die grote stip is een "password dot"
als je
Code:
•
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)

MacMinds - great minds think different

Navigatie

Zoeken

Inloggegevens

#1 23-01-2012 09:33

Hobbeltje in DL lijst, waar zit dat in?

Code:

#2 23-01-2012 10:43

Re: Hobbeltje in DL lijst, waar zit dat in?

Code:

#3 23-01-2012 10:50

Re: Hobbeltje in DL lijst, waar zit dat in?

Code:

#4 23-01-2012 11:22

Re: Hobbeltje in DL lijst, waar zit dat in?

Code:

#5 23-01-2012 16:28

Re: Hobbeltje in DL lijst, waar zit dat in?

Code:

#6 23-01-2012 21:32

Re: Hobbeltje in DL lijst, waar zit dat in?

Code:

#7 23-01-2012 21:33

Re: Hobbeltje in DL lijst, waar zit dat in?

EagerBob schreef:

Code:

Forum voettekst