[css] :after en whitespaces

[chris]

Hoi,

ik zit met een beetje aan wazig probleempje. Ik ben eindelijk 's goed begonnen met xhtml en css enzo, geweldig allemaal, maar wel een beetje frustrerend soms.

Ik heb dus een leuk menuutje:

HTML:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

en hierbij hoort een stukje css:

Cascading Stylesheet:

#menu li {
  float:left;
  display:block;
  padding:0px;
  text-align:right;
  margin:0px;
}

#menu li:after {
  content: " * ";
}

zoals jullie al raden, wil ik dat het er zo uit komt te zien:

Item 1 * Item 2 * Item 3

In Mozilla wordt het dit:

Item 1 *Item 2 *Item 3

oftewel: die laatste whitespace wordt weggehaald. Ook als ik content: " " (dus met een spatie) doe, dan negeert ie het compleet. Internet Explorer negeert die :after tag sowieso hier.

Nog een vraagje:
ik wil graag op 800 px van links een border hebben, wat mij het makkelijkst leek was één divje waarin vervolgens de rest van de pagina staat, en dit divje een border-right geven, maar op een of andere manier werkt dit alleen voor pakweg de eerste 160 pixels van boven, iemand die zo weet wat dit kan zijn? Ik ga daar nog wel ff mee aan het klooien, eventueel kom ik er nog wel op terug.

[coubertin119]

Volgens mij moet je hardcoded een spatie er bijzetten, net zoals   Wat \n is voor alle andere talen is \A voor CSS, dus je zal in de reference moeten duikelen.

Blijkbaar kan hardcoded een spatie erin zetten dus niet.

[ Voor 17% gewijzigd door coubertin119 op 31-12-2003 19:45 ]

[Verwijderd]

misschien een goede oplossing om het met JS/PHP/iets anders dan CSS op te lossen, als IE het niet ondersteund sluit je erg veel mensen uit.

[Booster]

Zomaar een hersenspinsel: wat als je er %20 of &nbsp van maakt?

[ Voor 8% gewijzigd door Booster op 31-12-2003 20:36 ]

[creative8500]

Cascading Stylesheet:

li + li:before { content: " "; }

[Verwijderd]

chris schreef op 31 december 2003 @ 19:34:

code:

#menu li:after {
  content: " * ";
}

oftewel: die laatste whitespace wordt weggehaald. Ook als ik content: " " (dus met een spatie) doe, dan negeert ie het compleet. Internet Explorer negeert die :after tag sowieso hier.

Als je toch met CSS aan de slag gaat, waarom dan niet:

code:

#menu li:after {
  content: "*";
  margin:0 1em;
}

Nog een vraagje:
ik wil graag op 800 px van links een border hebben, wat mij het makkelijkst leek was één divje waarin vervolgens de rest van de pagina staat, en dit divje een border-right geven, maar op een of andere manier werkt dit alleen voor pakweg de eerste 160 pixels van boven, iemand die zo weet wat dit kan zijn? Ik ga daar nog wel ff mee aan het klooien, eventueel kom ik er nog wel op terug.

Heeft waarschijnlijk te maken met dat de content voornamelijk bestaat uit floats. Die hebben namelijk geen hoogte.

Zet onderaan alle content een DIV met clear:both, en dat zou het op moeten lossen... (of maak het laatste element clear:both, dat werkt ook natuurlijk)

[Verwijderd]

Verwijderd schreef op 31 december 2003 @ 20:30:
misschien een goede oplossing om het met JS/PHP/iets anders dan CSS op te lossen, als IE het niet ondersteund sluit je erg veel mensen uit.

Hangt ervanaf wat je doelgroep is, natuurlijk. Bovendien is het (bijna) puur versiersel - zoveel missen de IE gebruikers er dus niet aan. Het heeft nauwelijks invloed op de accessibility/usability van het geheel, dus als bepaalde browsers het niet ondersteunen is dat geen ramp.

[Verwijderd]

Als je toch met CSS aan de slag gaat, waarom dan niet:

code:

#menu li:after {
  content: "*";
  margin:0 1em;
}

Het is niet hetzelfde?

[chris]

Verwijderd schreef op 31 december 2003 @ 20:30:
misschien een goede oplossing om het met JS/PHP/iets anders dan CSS op te lossen, als IE het niet ondersteund sluit je erg veel mensen uit.

is ook wel zo, maar ik wil het eerst gewoon mooi en netjes hebben in browsers die het wél goed ondersteunen, en daarna kijk ik wel naar IE.

Verwijderd schreef op 01 januari 2004 @ 20:27:
[...]

Als je toch met CSS aan de slag gaat, waarom dan niet:

code:

#menu li:after {
  content: "*";
  margin:0 1em;
}

klopt, is nog niet precies wat ik wil (spaties escapen), maar in ieder geval een leuke workaround.

[...]

Heeft waarschijnlijk te maken met dat de content voornamelijk bestaat uit floats. Die hebben namelijk geen hoogte.

Zet onderaan alle content een DIV met clear:both, en dat zou het op moeten lossen... (of maak het laatste element clear:both, dat werkt ook natuurlijk)

hm, dat werkt hier nog niet echt. ik heb het betreffende bestand ff tijdelijk ergens neer gezet, om te laten zien wat ik bedoel. Kijk maar 's op deze pagina en je ziet wat ik bedoel. heel vreemd.

[Verwijderd]

Dichtste in de buurt: http://annevankesteren.nl.../tweakers/post-854977.htm

content:"\20*\20"; werkt niet, helaas.

Edit: a:after met een extra spatie werkt ook niet, op een of andere manier 'collapsed' de spatie.

[ Voor 32% gewijzigd door Verwijderd op 02-01-2004 10:08 ]

[BtM909]

Verwijderd schreef op 02 januari 2004 @ 10:07:
Dichtste in de buurt: http://annevankesteren.nl.../tweakers/post-854977.htm

content:"\20*\20"; werkt niet, helaas.

Edit: a:after met een extra spatie werkt ook niet, op een of andere manier 'collapsed' de spatie.

Stomme kick wellicht, maar moet het niet

code:

content: "\0020 * \0020"

zijn

[Verwijderd]

Nee, voorloopnullen mag je negeren. Probeer anders '\40' voor een duidelijker voorbeeld

[F97]

Kuch.

code:

content: "\0020 \002A \0020"

Probeer eens? Die doet het hier, Opera 7.22

[ Voor 16% gewijzigd door F97 op 08-01-2004 10:26 ]