[HTML] Regel wit tussen tekst en (unordered) list weghalen

[Tinto]

In een HTML pagina met tekst heb ik de volgende tekst staan:

Hier staat de 'header':

- hier het eerste argument van de 'unordered list'
- hier staat het tweede argument
- hier staat het derde argument

Op het moment dat ik gebruik maak van [ UL ] en [ LI ] tags, die regel automatisch verschijnt. Nu wil ik (door middel van CSS?) de opmaak zo manipuleren dat de regel wit na de 'header' verdwijnt. Zo dus:

Hier staat de 'header':
- hier het eerste argument van de 'unordered list'
- hier staat het tweede argument
- hier staat het derde argument

Ik heb al geprobeerd wat te schuiven met de tags, maar dat wordt een rommeltje. Met de stylesheet heb ik al de indent verwijderd (marge van -15 pixels) en de bullets veranderd, maar ik heb geen idee hoe ik van die witregel afkom. Iemand enig idee?

[sjroorda]

Met onderstaande code krijg ik wat jij wilt:

PHP:

    Dit is de header
    <span style="position:relative;top:-10pt;">
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
      </ul>
    </span>
    Dit is de footer

(Doe het even met [ php ], omdat ik niets anders weet zo gauw?)

[Verwijderd]

Of:

HTML:

<p style="margin-bottom: 0px;">Eki-eki</p>
<ul style="margin-top: 0px;">
<li>ni!</li>
<li>ni!</li>
</ul>

[Tinto]

Okay, dat is duidelijk. Het lukt me alleen niet om dit te vertalen naar de stylesheet. Ik heb de stylesheet als volgt aangepast:

code:

.txt {
    font-family: univers, arial, helvetica, sans-serif;
    font-size: 12px;
    text-align: left;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}

.list {
    font-family: univers, arial, helvetica, sans-serif;
    font-size: 12px;
    list-style-position: outside;
    list-style-type: disc;
    text-align: left;
    margin-left: -20px;
    margin-top: -10px;
    margin-right: 0px;
    margin-bottom: 0px;
}

Maar het effect is dat de eerst LI omhoog wordt gehaald. (?) Ik heb dus boven en onder het eerste 'argument' ongeveer 10px ruimte, de rest van de 'argumenten' is onveranderd. Wat doe ik verkeerd?

[Hangloozz]

zoiets?:

code:

<style type="text/css">
    .txt {
    font-family: univers, arial, helvetica, sans-serif;
    font-size: 12px;
    text-align: left;
    margin: 0px;
}



.list {
    font-family: univers, arial, helvetica, sans-serif;
    font-size: 12px;
    list-style-position: outside;
    list-style-type: disc;
    text-align: left;
    margin: -10px 0px 0px -20px;
}
</style>

code:

<p class="txt">Eki-eki</p>
<ul class="list">
<li>ni!</li>
<li>ni!</li>
</ul>

wel een beetje een vage vormgeving

[Tinto]

Aha. Dat was hem inderdaad. Ik had de class="list" in de li tag staan in plaats van de ul tag. Nu klopt het, bedankt.

Trouwens, nu ik toch bezig ben.. Is de ruimte tussen de bullet en de tekst ook aan te passen in de stylesheet?

Dus:

Bla bla bla
- ___hier begint de tekst pas
- en niet hier

(de underscores even wegdenken uiteraard)

[RiMaBo]

op die manier inspringen kan je doen door   toe te voegen voor de tekst in de code. Je code komt er dan zo uit te zien:

code:

<p class="txt">Inspringen</p>
<ul class="list">
<li>&nbsp;&nbsp;2 spaties ingesprongen</li>
<li>&nbsp;&nbsp;&nbsp;3 spaties ingesprongen</li>
</ul>

[Rickets]

RiMaBo schreef op 18 February 2003 @ 15:28:
op die manier inspringen kan je doen door   toe te voegen voor de tekst in de code. Je code komt er dan zo uit te zien:

code:

<p class="txt">Inspringen</p>
<ul class="list">
<li>&nbsp;&nbsp;2 spaties ingesprongen</li>
<li>&nbsp;&nbsp;&nbsp;3 spaties ingesprongen</li>
</ul>

Beter nog:

Cascading Stylesheet:

li
{
    padding-left: 10px;
}

Padding dus

[Tinto]

Maar is dat de enige manier om dit te bereiken? Ik bedoel, is het niet mogelijk om het aantal pixels in de stylesheet mee te geven?

Edit: Oops.. te laat

[ Voor 10% gewijzigd door Tinto op 18-02-2003 15:35 . Reden: Te laat.. ]

[Hangloozz]

RiMaBo schreef op 18 februari 2003 @ 15:28:
op die manier inspringen kan je doen door   toe te voegen voor de tekst in de code. Je code komt er dan zo uit te zien:

code:

<p class="txt">Inspringen</p>
<ul class="list">
<li>&nbsp;&nbsp;2 spaties ingesprongen</li>
<li>&nbsp;&nbsp;&nbsp;3 spaties ingesprongen</li>
</ul>

dit is ranziiiiig

[Verwijderd]

En nog even for the record:

Dit soort dingetjes zijn heel erg basic, ik wil mboots dan ook aanraden om op www.w3schools.com/css/default.asp en http://www.w3.org/TR/REC-CSS2/ te kijken: daar kun je de mogelijkheden van CSS nog eens doornemen. Ik zie dat je weet hoe je een stylesheet moet opzetten, dus dan is vooral die link naar het W3C erg interessant, aangezien daar de volledige lijst met properties te vinden is

Succes

[DeFeCt]

Met deze vraag zat ik vanmiddag ook te stoeien, maar dan om het fatsoenlijk te tonen in Netscape 7...

Ik zou zeggen bekijk jullie eigen voorbeelden eens in NS7 en think along...