[CSS] <li> bold probleem

[Furinax]

Hellow,

Ik heb het volgende probleem. Ik heb een mooi lijstje

• voorbeeld
  hier staat tekst
• voorbeeld2
  hier staat tekst
• voorbeeld3
  hier staat tekst

Nu wil ik dat voorbeeld 1tm3 bold is, maar de tekst die eronder staat niet.

Hiervoor heb ik de volgende broncode/css voor gebruikt

code:

CSS

ul { font-weight: none; }

li { font-weight: bold; }

code:

HTML

<ul style="margin-left: 16">
        <li>Voorbeeld</li><BR>
              hier staat tekst<BR>
              <BR>
        <li>voorbeeld2</li><BR>
             hier staat tekst
</ul>

Met deze code krijg ik dus het volgende resultaat:

• [b]
• voorbeeld
  hier staat tekst
• voorbeeld2
  hier staat tekst
• voorbeeld3
  hier staat tekst
• [/b]

Hoe kan ik er via css voor zorgen (zonder dat ik de broncode hoef aan te passen) dat het lijstje er alsvolgt uit komt te zien:

• [b]
• voorbeeld
• [/b] hier staat tekst [b]
• voorbeeld2
• [/b] hier staat tekst [b]
• voorbeeld3
• [/b] hier staat tekst

Alvast bedankt!

[ Voor 6% gewijzigd door Furinax op 07-03-2005 10:21 ]

[chem]

Mjah, je HTML code is om te beginnen al verkeerd; je sluit je li af en kwakt er vervolgens weer vrolijk wat tekst achter.

Is een dt/dd niet wat handiger?

[LoeiOrdinair]

Je zal de tekst voorbeeld echt tussen div'jes moeten zetten. En daar een class aangeven die je font-weight op bolder zet.

[BtM909]

LoeiOrdinair schreef op maandag 07 maart 2005 @ 10:21:
Je zal de tekst voorbeeld echt tussen div'jes moeten zetten. En daar een class aangeven die je font-weight op bolder zet.

Zou je misschien voortaan niet roekeloos naar divjes willen grijpen? Probeer eerst te kijken of er elementen zijn die beter van toepassing zijn

---

Dat kan in principe niet met een LI

Je voorbeeld-code klopt ook niet helemaal. Er zit een </li> teveel in en ze staan op de verkeerde plek. Waarom gebruik je geen DT en DD hiervoor ?

[ Voor 53% gewijzigd door BtM909 op 07-03-2005 10:22 ]

[chem]

LoeiOrdinair schreef op maandag 07 maart 2005 @ 10:21:
Je zal de tekst voorbeeld echt tussen div'jes moeten zetten. En daar een class aangeven die je font-weight op bolder zet.

divjes?

Een span lijkt me dan beter, of wellicht een h1 met een p oid - al is een dt/dd denk ik zowel handiger als correcter.

[chem]

Dit valt trouwens onder W&G, niet P&W - move

[Furinax]

met dd/dt heb ik hetzelfde probleem. (net even geprobeerd ^^)

[LoeiOrdinair]

BtM909 schreef op maandag 07 maart 2005 @ 10:21:
[...]

Zou je misschien voortaan niet roekeloos naar divjes willen grijpen? Probeer eerst te kijken of er elementen zijn die beter van toepassing zijn

Ok, er zijn idd een hoop opties beter maar het gaat mij meer om de manier waarop je het kan oplossen. Het is idd beter op bijvoorbeeld h1 oid te gebruiken ivm het zoeken.

[OkkE]

Zoiets?

HTML:

<dl>
    <dt>Voorbeeld 1</dt>
    <dd>Hier staat tekst.</dd>
    <dt>Voorbeeld 2</dt>
    <dd>Hier staat tekst.</dd>
    <dt>Voorbeeld 3</dt>
    <dd>Hier staat tekst.</dd>
</dl>

Cascading Stylesheet:

dt {
    font-weight: bold;
    }
dd { 
    margin-left: 0px;
    }

[Not Pingu]

Furinax schreef op maandag 07 maart 2005 @ 10:26:
met dd/dt heb ik hetzelfde probleem. (net even geprobeerd ^^)

Je kunt dus wel de HTML source wijzigen, dus waarom wil je dan perse een oplossing waarbij dat niet hoeft?

Het kan nou eenmaal niet, je wilt tekst binnen 1 element 2 verschillende stijlen geven. Doe gewoon:

code:

<li><b>Bold<b>Geen bold</li>

Je zult dus altijd in je HTML moeten aangeven dat het om 2 verschillende stukken tekst gaat. Een dt/dd oplossing zoals wordt voorgesteld is semantisch correcter hiervoor.

[ Voor 21% gewijzigd door Not Pingu op 07-03-2005 10:46 ]

[Folkert]

Met dt en dd is dit op te lossen....
Even verdiepen in deze tags!

HTML:

<dl>
<dt>item</dt>
<dd>beschrijving</dd>
<dt>item</dt>
<dd>beschrijving</dd>
<dl>

En in je style sheet:

Cascading Stylesheet:

dt
{
font-weight: bold;
}

[ Voor 127% gewijzigd door Folkert op 07-03-2005 10:47 ]

[CH4OS]

Furinax schreef op maandag 07 maart 2005 @ 10:18:

Cascading Stylesheet:

ul {font-weight: none;}
li {font-weight: bold;}

Cascading Stylesheet:

ul {font-weight: normal;}
li {font-weight: bold;}

Denk dat het zo ook werkt, ik ken geen font-weight: none; namelijk, wel een normal zoals je ziet...

Zie ook: http://www.w3schools.com/css/css_reference.asp#font dan naar beneden scrollen naar font-weight.

[ Voor 12% gewijzigd door CH4OS op 07-03-2005 10:56 ]

[Furinax]

met dt/dd krijg ik niet het gewenste resultaat

die bolletjes als menupunten wil ik er wel bij hebben. Deze heb ik niet met het dl/dd/dt verhaal

code:

ul {font-weight: normal;} 
li {font-weight: bold;}

Werkt niet. Die had ik ook al geprobeerd.

[ Voor 29% gewijzigd door Furinax op 07-03-2005 11:04 ]

[Folkert]

Met bullet:

Cascading Stylesheet:

dt,dd
{
padding-left:45px;
}
dt
{
background-image:url(bullet.gif);
background-position:left center;
background-repeat:no-repeat;
font-weight:bold;
}

[gvdh81]

in geval van xhtml 1.x

code:

<li><strong>Bold</strong><br />Geen bold</li>

waarom gebruik je geen "b" of "strong" attribuut? dan is alles opgelost.
Jij grijpt naar css terwijl dit helemaal niet nodig is imho...

[ Voor 75% gewijzigd door gvdh81 op 07-03-2005 11:11 . Reden: typo ]

[OkkE]

Mijn voorkeur gaat ook uit naar die van Folkert dan inderdaad, maar het makkelijkste is wel zoals xces post.

[Furinax]

gvdh81 schreef op maandag 07 maart 2005 @ 11:09:
in geval van xhtml 1.x

code:

<li><strong>Bold</strong><br />Geen bold</li>

waarom gebruik je geen "b" of "strong" attribuut? dan is alles opgelost.
Jij grijpt naar css terwijl dit helemaal niet nodig is imho...

ik wil het vis css regelen omdat ik anders 400 pagina's moet gaan nalopen. Het is namelijk een probleem in een helpdir van me werk.

[Wietse]

code:

CSS

ul li { font-weight: bold; }

Dit zou al voldoende moeten zijn voor wat jij wilt

[ Voor 7% gewijzigd door Wietse op 07-03-2005 12:35 ]

[BtM909]

Furinax schreef op maandag 07 maart 2005 @ 12:29:
[...]


ik wil het vis css regelen omdat ik anders 400 pagina's moet gaan nalopen. Het is namelijk een probleem in een helpdir van me werk.

Dus je impliceert ook dat je geen wijzigingen in je HTML wil doorvoeren?

[gvdh81]

Furinax schreef op maandag 07 maart 2005 @ 12:29:
ik wil het vis css regelen omdat ik anders 400 pagina's moet gaan nalopen. Het is namelijk een probleem in een helpdir van me werk.

maar ja, zoals wij al zeiden is de html nu al rotzooi; (</li> met <br> erachter etc)
dus nalopen moet je het toch. Je kunt het niet voor elkaar krijgen zonder in code te gaan hakken. (een <span>, <strong> of zelfs een andere opmaak <dt> of zoiets dergelijks)

[Folkert]

Ik denk dat je met een beetje slim 'find and replace' heel ver kan komen om alles om te zetten naar een <dl>...

<ul style="margin-left: 16"> omzetten naar <dl>
<li> omzetten naar <dt>
</li><BR> omzetten naar </dt><dd>
<BR><BR> omzetten naar </dd>
</ul> omzetten naar </dd></dl>

Maar met je huidige situatie kan het simpelweg niet omdat je zoals al vaak genoeg gezegd is, 2 verschillende opmaken wil hebben binnen hetzelfde element. Sterker nog je hebt content binnen de <ul> staan wat volgens mij geen content kan hebben.....

[ Voor 42% gewijzigd door Folkert op 07-03-2005 13:24 . Reden: replace voorbeeldje bijgevoegd ]

[Verwijderd]

Hoe kan ik er via css voor zorgen (zonder dat ik de broncode hoef aan te passen) dat het lijstje er alsvolgt uit komt te zien:

Onmogelijk in text/html.

[Savantas]

Even los van de giga-lelijke html is er zeker wel een 'hack' mogelijk, nl:

code:

li { font-weight: normal; }
li:first-line { font-weight: bold; }

Maar netjes is anders natuurlijk

@El.Greco: Bij mij werkte het, hoor... IE6

@ Anne: Uiteraard, helemaal gelijk Maar goed, beste optie is uiteraard een Search and Replace...

@Folkert: Damn, alleen de blink werkt niet...

[ Voor 43% gewijzigd door Savantas op 07-03-2005 15:50 ]

[Verwijderd]

Oh, tuurlijk. Tenzij de beschrijving binnen de LI langer is dan aangegeven zal dat prima gaan werken.

[Verwijderd]

Savantas schreef op maandag 07 maart 2005 @ 13:59:
Even los van de giga-lelijke html is er zeker wel een hack mogelijk, nl:

code:

li { font-weight: normal; }
li:first-line { font-weight: bold; }

Maar netjes is anders natuurlijk

ik zie niet waar de hack staat in dit geval....
Dat het niet zal werken in IE (toch?) betekent niet dat het een hack is

[Folkert]

Wordt idd beter door Firefox ondersteund.... alhoewel het best wel meevalt....

http://tom.me.uk/tests/cs...eudo-elements/first-line/

[ Voor 13% gewijzigd door Folkert op 07-03-2005 15:46 ]

[Verwijderd]

ik zie niet waar de hack staat in dit geval....

In de markup.

Dat het niet zal werken in IE (toch?) betekent niet dat het een hack is

Het werkt in IE als ik het me goed herinner.