CSS - Fixed list-item

[Verwijderd]

Ik heb was <ul> / <li> elementen in mijn pagina verwerkt, met een fixed size van de tekst die daar in staat.
Echter zijn de list items zelf (disc, square, etc) niet fixed, ze bewegen dus mee als ik de "font size" in de browser aanpas.

Iemand een idee hor ik nu die list items (bullits) een vaste grote geef ??

[André]

Images er voor gebruiken.

[Verwijderd]

Maar ik wil helemaal geen images gebruiken, omdat ik dan met de achtergrond kleuren in de knoop kom. Ik kan natuurlijk wel een transparante gif maken, en een matte aanleggen met de achtergrond kleur, alleen heb ik meerdere achtergrond kleuren, dus die gaat niet op. Helaas is dat dus geen optie..

[André]

Als jij gewoon een simpele gif gebruikt kom je niet in de knoop met je achtergrond-kleuren:

HTML:

<ul imagesrc="bullet.gif">

[ Voor 22% gewijzigd door André op 12-12-2003 13:04 ]

[Verwijderd]

Ik zie inderdaad ook niet waarom zo'n transparante gif invloed op je achtergrond gaat hebben, ongeacht hoe de achtergrond eruit ziet.

Wanneer je met een gif plaatje als bullet gaat werken kan je natuurlijk ook de css methode kiezen:

code:

ul li  { list-style-image: url(x.gif) }

[ Voor 4% gewijzigd door Verwijderd op 12-12-2003 13:09 ]

[Verwijderd]

Ik kan idd wel een image gebruiken, maar moet hoe dan ook een matte kleur hebben. Die mattekleur, is er maar een, en vloekt erg met de rest van de kleuren bij mij op de achtergrond. Om dat hele probleem dus te ontlopen gebruik ik gewoon de standaard bullits. Die zijn met elke achtergrond kleur goed.

Vandaar dat ik dus geen images wil gebruiken.

[OkkE]

Een transparante gif ziet er het zelfde uit als een standaard bullit alleen heeft de font-size hier geen invloed op, wat op de gewone bullits wel het geval is. Er is dus geen reden om geen images te gebruiken..
_{Oke, zoals drm al zegt is gif wel iets minder, maar als je de achtergrond kleur ongeveer het zelfde maakt voor je transparant opslaat zie je dat bijna niet.}

__ Edit ______________

Oke, wanneer je de achtergrond 'wit' laat, zie je een licht grijs randje, maar maakt je de achtergrond van je gif ongeveer de zelfde als je website-achtergrond, dan zie je het echt bijna niet.

Voorbeeldje:


__ Edit 2 _____________

Om op je vraag terug te komen.. zover ik weet, kan het niet..
- Ik vind net een pagina, waar wel wat uitleg staat, maar dat is alleen voor Opera en Mozilla..

[ Voor 74% gewijzigd door OkkE op 12-12-2003 14:09 ]

[Verwijderd]

OkkE schreef op 12 december 2003 @ 13:55:
Een transparante gif ziet er het zelfde uit als een standaard bullit alleen heeft de font-size hier geen invloed op, wat op de gewone bullits wel het geval is. Er is dus geen reden om geen images te gebruiken..

Maar dat was de vraag niet
De vraag was: hoe kun je de groote van de standaard bullit (dus geen image) vast zetten, zodat hij niet groter of kleiner word vanneer de "font-size" veranderd word in de web-browser.

[drm]

Er is wel een reden om geen image te gebruiken, namelijk dat gifjes niet goed kunnen antialiasen met de achtergrondkleur als die achtergrond kleur niet zelf in het gifje staat. Dan zou je png moeten gebruiken, en we weten allemaal wel hoe goed IE met png omgaat.

Verder heeft IE vaak moeite met het renderen van achtergrond- en vooral list-item-plaatjes.

Ik zou dus gewoon de font-size van de li fixed houden en een extra containing element toevoegen:

HTML:

<ul>
   <li><span>Text</span></li>
</ul>

Cascading Stylesheet:

ul, li {
   font-size:10px;
}
ul span {
   vertical-align:middle;
   font-size:20px;
}

[Verwijderd]

Das nou precies wat ik bedoel !!!
Dat antialias verhaal, wat ook te maken heeft met matte .....

Alleen werkt de bovengenoemde oplossing niet met mijn probleem
Hij renderd alleend de innhoud van het element, niet de bullit die deel uit maakt van element zelf ipv de inhoud.

Jammer maar helaas, dus nog geen oplossing

[ Voor 55% gewijzigd door Verwijderd op 12-12-2003 16:04 ]

[drm]

Kan je daar ff een voorbeeldje van online zetten, want ik geloof niet dat ik begrijp wat je bedoelt...

[André]

Verwijderd schreef op 12 december 2003 @ 15:58:
Das nou precies wat ik bedoel !!!
Dat antialias verhaal, wat ook te maken heeft met matte .....

Ik heb even lopen klooien maar ik krijg het ook niet voor elkaar om het fixed te krijgen.

En over het anti-aliasing probleem: als je de 'square' gebruikt heb je dat niet natuurlijk. Dus kun je als bullet wel een vierkante gif gebruiken, die heeft geen ge-aliasde randjes.

Als je toch voor de disc gaat moet er toch een ander oplossing komen.

[Verwijderd]

Hieronder een klein probeerseltje, niet helemaal netjes zoals het hoort, en de tekst verschuift nog iets. Maar wellicht dat je zonder de <ul> en <li> tags en met behulp van de MIDDOT wat kunt

code:

ul, li{
    font-size: 12px;
    margin: 0px 0px 0px -6px;
    padding: 0px 0px 0px 0px;
    list-style-type: none;
}
ul li span.dot{
    float: left;
    position: relative;
    top: -12px;
    font-size: 40px;
}

</style>
</head>

<body>

<ul>
    <li><span class="dot">&middot;</span> sdfsdf</li>
</ul>

[drm]

Ah, nou geloof ik dat ik je begrijp. Je bedoelt dat je niet wilt dat de bullet aangepast wordt als men bijvoorbeeld ctrl+scrollwieltje gebruikt om de font-size aan te passen?

Mja, daar zou ik me eerlijk gezegd niet echt druk om maken... Als iemand die bullets te klein vindt, dan past 'ie toch lekker de bulletsize aan, zelf weten