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

Pagina: 1
Acties:
  • 1.942 views sinds 30-01-2008
  • Reageer

Acties:
  • 0 Henk 'm!

  • Tinto
  • Registratie: November 2000
  • Laatst online: 10-10-2024
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?

Reporter: 'What do you think about western civilization?'
Gandhi: 'I think it would be a good idea.'


Acties:
  • 0 Henk 'm!

  • sjroorda
  • Registratie: December 2001
  • Laatst online: 19-07 07:46
Met onderstaande code krijg ik wat jij wilt:

PHP:
1
2
3
4
5
6
7
8
9
10
    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?)

Acties:
  • 0 Henk 'm!

Verwijderd

Of:

HTML:
1
2
3
4
5
<p style="margin-bottom: 0px;">Eki-eki</p>
<ul style="margin-top: 0px;">
<li>ni!</li>
<li>ni!</li>
</ul>

Acties:
  • 0 Henk 'm!

  • Tinto
  • Registratie: November 2000
  • Laatst online: 10-10-2024
Okay, dat is duidelijk. Het lukt me alleen niet om dit te vertalen naar de stylesheet. Ik heb de stylesheet als volgt aangepast:

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.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?

Reporter: 'What do you think about western civilization?'
Gandhi: 'I think it would be a good idea.'


Acties:
  • 0 Henk 'm!

  • Hangloozz
  • Registratie: Juli 1999
  • Laatst online: 06-12-2022

Hangloozz

{ @$%&# }

zoiets?:

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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:
1
2
3
4
5
<p class="txt">Eki-eki</p>
<ul class="list">
<li>ni!</li>
<li>ni!</li>
</ul>

wel een beetje een vage vormgeving :?

www.jurgroessen.nl


Acties:
  • 0 Henk 'm!

  • Tinto
  • Registratie: November 2000
  • Laatst online: 10-10-2024
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)

Reporter: 'What do you think about western civilization?'
Gandhi: 'I think it would be a good idea.'


Acties:
  • 0 Henk 'm!

  • RiMaBo
  • Registratie: Augustus 2000
  • Laatst online: 06-01-2022

RiMaBo

RiMaBo NETworks

op die manier inspringen kan je doen door &nbsp; toe te voegen voor de tekst in de code. Je code komt er dan zo uit te zien:
code:
1
2
3
4
5
<p class="txt">Inspringen</p>
<ul class="list">
<li>&nbsp;&nbsp;2 spaties ingesprongen</li>
<li>&nbsp;&nbsp;&nbsp;3 spaties ingesprongen</li>
</ul>

Due to the world shortage of trained trumpet players the end of the world has to be postponed. God Incorporated would like to apologize for this interruption in service.


Acties:
  • 0 Henk 'm!

  • Rickets
  • Registratie: Augustus 2001
  • Niet online

Rickets

Finger and a shift

RiMaBo schreef op 18 February 2003 @ 15:28:
op die manier inspringen kan je doen door &nbsp; toe te voegen voor de tekst in de code. Je code komt er dan zo uit te zien:
code:
1
2
3
4
5
<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:
1
2
3
4
li
{
    padding-left: 10px;
}

Padding dus :)

If some cunt can fuck something up, that cunt will pick the worst possible time to fucking fuck it up, because that cunt’s a cunt.


Acties:
  • 0 Henk 'm!

  • Tinto
  • Registratie: November 2000
  • Laatst online: 10-10-2024
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.. ]

Reporter: 'What do you think about western civilization?'
Gandhi: 'I think it would be a good idea.'


Acties:
  • 0 Henk 'm!

  • Hangloozz
  • Registratie: Juli 1999
  • Laatst online: 06-12-2022

Hangloozz

{ @$%&# }

RiMaBo schreef op 18 februari 2003 @ 15:28:
op die manier inspringen kan je doen door &nbsp; toe te voegen voor de tekst in de code. Je code komt er dan zo uit te zien:
code:
1
2
3
4
5
<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 :/

www.jurgroessen.nl


Acties:
  • 0 Henk 'm!

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

Acties:
  • 0 Henk 'm!

  • DeFeCt
  • Registratie: Juli 2000
  • Laatst online: 21-07 14:58

DeFeCt

je wéét toch

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

Flickr

Pagina: 1