[CSS] verticale afstand tussen regels verkleinen - Softwareontwikkeling

maandag 29 oktober 2007 21:35

Acties:

0 Henk 'm!

Anoniem: 201698

Topicstarter

Hey,
Ik heb een frustrerend probleem. Ik ben niet onbekend in webdesign, maar hier kom ik niet uit.
Ik heb een aantal regels tekst, en die wil ik dichter op elkaar plaatsen. Ik heb devolgende codes:

code:

<span class="small">
<B>Datum:</B> - <br>
<B>Commentaar:</B> -<br>
<B>Catagorie:</B> -<br>
</span>

in de css staat dit:

code:

.small {
    font-size:10px;
    line-height:1pt;
    
}

Het gaat dus om de line-height. Ik heb alles al geprobeerd, 10%, 0.8pt, -2px.. De regels blijken op een gegeven moment gewoon niet dichter bij elkaar te komen staan. Verder uitelkaar lukt wel.
Het is vast een simpel probleem, maar hoe los ik het op?

[ Voor 4% gewijzigd door Anoniem: 201698 op 29-10-2007 21:36 ]

maandag 29 oktober 2007 22:12

Acties:

0 Henk 'm!

MoietyMe

zij/haar

Maak er een UL van.

HTML:

<ul>
<li>blaat</li>
<li>blaat</li>
<li>blaat</li>
</ul>

Cascading Stylesheet:

1
2
3

ul li{
margin-top:-2px;
}

Al zou line height gewoon moeten werken.

maandag 29 oktober 2007 22:18

Acties:

0 Henk 'm!

Onbekend

...

Ik denk dat de font-size uit zichzelf al zoveel ruimte tussen 2 regels heeft.

Ik ben wel benieuwd of IE6, IE7, FF, Opera en Safari dan wel het zelfde resultaat tonen.

Speel ook Balls Connect en Repeat

maandag 29 oktober 2007 22:18

Acties:

0 Henk 'm!

Anoniem: 201698

Topicstarter

Ahja, dat werkt wel..
Toch vreemd dat line-height dan niet werkt.
Maar ach, goed is goed

Bedankt!

maandag 29 oktober 2007 22:28

Acties:

0 Henk 'm!

RM-rf

1 2 3 4 5 7 6 8 9

er zou een verschil moeten zijn tussen het renderen van line-height bij een 'display: block'-box en een inline box....

een display: block heeft een inhoud die 'los' staat van de line-height van de content die erin staat...
maar bij een inline-display box definieert de inhoudeigenlijk de grootte van dat block en dat betekent mogelijk dat de line-height niet kleiner kan worden dan de 'ex'-hoogte van de letters...

Ik zou proberen of heet in een DIV wel gaat of de SPAn en 'display: block' geven

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

dinsdag 30 oktober 2007 03:43

Acties:

0 Henk 'm!

_Thanatos_

Ja, en kaal

Ik zie het probleem niet. De line-height in procenten opgeven in voldoende. Dit voorbeeld illustreert perfect wat je vgs mij wilt.

_{trouwens, "Categorie"}

[ Voor 9% gewijzigd door _Thanatos_ op 30-10-2007 03:49 ]

日本！🎌

dinsdag 30 oktober 2007 07:09

Acties:

0 Henk 'm!

Anoniem: 9542

<div>, <ul>, <span>

zien jullie nou niet dat dit een typisch voorbeeld van een dl is?

woensdag 31 oktober 2007 01:25

Acties:

0 Henk 'm!

_Thanatos_

Ja, en kaal

Maar daarmee is het line-height probleem nog niet opgelost

日本！🎌

woensdag 31 oktober 2007 16:09

Acties:

0 Henk 'm!

Anoniem: 1114

<p class="small">
<B>Datum:</B> - <br>
<B>Commentaar:</B> -<br>
<B>Catagorie:</B> -<br>
</p>

als het goed is...

woensdag 31 oktober 2007 21:50

Acties:

0 Henk 'm!

Zillion01

Obey your screen!

ligt aan je doctype

Probeer maar es dit voorbeeld.

code:

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.1//EN"
     "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl">
<head>
<style>
.small {
    font-size:10px;
    line-height:6px;
}
.dik { 
    font-weight:bold;
}
</style>
</head>
<body>
<span class="small">
<div class="dik">Datum: - </div>
<div class="dik">Commentaar: -</div>
<div class="dik">Catagorie: -</div>
</span>
</body>
</html>

Lees wat over XHTML

[ Voor 57% gewijzigd door Zillion01 op 31-10-2007 22:07 ]

woensdag 31 oktober 2007 23:32

Acties:

0 Henk 'm!

Anoniem: 146163

Zillion01 schreef op woensdag 31 oktober 2007 @ 21:50:
code:
1
2
3
4
5
6
7
...
<span class="small">
<div class="dik">Datum: - </div>
<div class="dik">Commentaar: -</div>
<div class="dik">Catagorie: -</div>
</span>
...
Lees wat over XHTML

Nou wil ik niet zeiken, maar dit lijkt me toch ook een klassiek voorbeeld van onjuist html gebruik

Zoals al eerder vermeld is dit toch wel een klassiek voorbeeld voor een definition list imo.

code:

<dl>
<dt>Datum:</dt>
<dd>-</dd>
<dt>Commentaar:</dt>
<dd>-</dd>
<dt>Categorie:</dt>
<dd>-</dd>
</dl>

Dan een beetje pielen met CSS (bijv. de dt een float: left geven + fixed breedte) en je bent klaar!

vrijdag 2 november 2007 14:58

Acties:

0 Henk 'm!

Zillion01

Obey your screen!

Anoniem: 146163 schreef op woensdag 31 oktober 2007 @ 23:32:
[...]

Nou wil ik niet zeiken, maar dit lijkt me toch ook een klassiek voorbeeld van onjuist html gebruik

Zoals al eerder vermeld is dit toch wel een klassiek voorbeeld voor een definition list imo.

Een definition list is bedoeld om een overzicht te maken van een aantal termen en de verklaring ervan. Dit zijn duidelijk geen definities, maar goed als jij het er voor wilt misbruiken, no problem. Ik zou dan eerder kiezen voor een ordered of unordered list.

vrijdag 2 november 2007 23:31

Acties:

0 Henk 'm!

_Thanatos_

Ja, en kaal

De functie van een definition list gaat denk ik verder dan definities+verklaringen. Ik denk eigenlijk dat je de precieze semantiek van een definition list niet echt goed op kan schrijven, omdat het voor heel veel doeleinden geschikt lijkt, terwijl de naam van het element weer anders doet vermoeden.

Zo kun je ook beredeneren dat je voor dit soort gegevens een tabel moet gebruiken, met <th scope="row"> cellen aan de linkerkant. Maarja, wie ben ik

日本！🎌