Opsomming html zonder inspringen

Wil een opsomminh maken met

<UL>
<LI>Opsomming html zonder…</LI>
<LI>Opsomming html zonder…</LI>
<LI>Opsomming html zonder…</LI>
<LI>Opsomming html zonder…</LI>
</UL>

Alleen zonder dat het inspringd en een koppelteken ipv een bullit…

Wie weet hier een voorbeeld van? Kom het niet tegen op interner lees Google.

Vast bedankt
Joost

Ik weet niet of je een beetje kaas hebt gegeten van CSS, maar daar kan het mee. Voor voorbeelden van andere CSS-kunde kijk [url=http://www.alistapart.com]hier[/url].

Heb nog weinig kaas gegeten van css...

Zou je me hier mee kunnen helpen… kom er echt niet uit…

Joost

Je zou de margin kunnen aanpassen.

Bv:

[code:1:825924c61c]
ul {
margin: 0px 0px 15px 0px;
}
[/code:1:825924c61c]

Uiteraard kan je dit in je stylesheet aangeven of:

[code:1:825924c61c]<UL style="margin: 0px 0px 15px 0px;">[/code:1:825924c61c]

Had ik even overheen gelezen:
Als je geen bullit wilt moet je inderdaad list-style : none; gebruiken.

De vraag is of je alle opsommingen of een specifieke opsomming zonder bullets en inspringing wilt maken.

Eerst maar voor alle opsommingen:

Tussen <head> en </head> an je pagina kan je de volgende syntax plaatsen:

[code:1:a884f2235a]
<html>
<head>
<title>Mijn pagina</title>
<style type="text/css">

</style>
</head>
<body>

[/code:1:a884f2235a]

Tussen de tags <style> en </style> schrijf je de CSS waarin je aangeeft hoe de ul eruit moet komen te zien:

[code:1:a884f2235a]
<style type="text/css">
ul {
margin : 0;
padding : 0;
list-style : none;
}
</style>
[/code:1:a884f2235a]

margin : 0 padding : 0 zorgen ervoor dat het inspringen weggehaald worden. list-style : none verteld dat je geen opsommingstekens wilt zien.

Als je 1 specifieke opsomming wilt veranderen en de andere opsommingen in je pagina wel met bullets wilt laten tonen dan kan moet je in je HTML het volgende doen:

[code:1:a884f2235a]
<ul id="zonderbullets">
[/code:1:a884f2235a]

Je CSS wordt dan:

[code:1:a884f2235a]
<style type="text/css">
ul#zonderbullets {
margin : 0;
padding : 0;
list-style : none;
}
</style>
[/code:1:a884f2235a]

Als je wilt dat je steeds voor een lijst kunt aangeven of er wel bullets of geen bullets nodig zijn en je meer dan 1 opsomming op je pagina hebt dan moet je de <ul> geen id, maar een class meegeven:

[code:1:a884f2235a]
<ul class="zonderbullets">
[/code:1:a884f2235a]

Een id mag je namelijk maar 1 keer op een pagina aan een HTML element geven, een class mag je meer dan 1 keer toepassen.

Je CSS wordt dan:

[code:1:a884f2235a]
<style type="text/css">
ul.zonderbullets {
margin : 0;
padding : 0;
list-style : none;
}
</style>
[/code:1:a884f2235a]

Een punt (.) geeft een class stijl aan in je CSS een hash (#) een id.

Grote dank iedereen.

Joost

[quote:c815134110="joosty"] Alleen zonder dat het inspringd en een koppelteken ipv een bullit... [/quote:c815134110] Hoe heb je het nu opgelost met die koppeltekens? De inspringing weghalen is geen probleem, maar ik had graag geweten hoe jij dit nu aangepakt hebt want ik zit hier vaak mee in de knoei. Kortom: hoe haal je enkel de inspringing weg en behoud je een opsommingsteken? Ik zit altijd in de rats met een consistente weergave bij verschillende browsers...

[quote:04b6a76bfe="GeertDD"][quote:04b6a76bfe="joosty"] Alleen zonder dat het inspringd en een koppelteken ipv een bullit... [/quote:04b6a76bfe] Hoe heb je het nu opgelost met die koppeltekens? De inspringing weghalen is geen probleem, maar ik had graag geweten hoe jij dit nu aangepakt hebt want ik zit hier vaak mee in de knoei. Kortom: hoe haal je enkel de inspringing weg en behoud je een opsommingsteken? Ik zit altijd in de rats met een consistente weergave bij verschillende browsers...[/quote:04b6a76bfe]

De opssommingstekens worden ongeveer 1 em afstand naar links getabbed buiten de kantlijn van je paragrafen. Als je dat niet wilt kan je het volgende doen:

[code:1:04b6a76bfe]
ul {
list-style-position: inside
}
[/code:1:04b6a76bfe]
de tweede regel begint dan wel recht onder de bullet.