Text aanpassen met CSS

[Merkelbeek]

Mijn vraag
Hi allemaal ben vandaag begonnen met CSS, nu wil ik in TOPdesk wat zaken aanpassen, maar krijg het helaas niet voor elkaar.

Heb zoals in de bijlage tickets staan, wil standaard dat om de regel de lijn is gehighlight
dus de eerste regel wit de 2de regel blauw, dan weer 3de regel wit, dit om makkelijker de tekst te lezen

Dit is het dus nu:


hoe ik het graag wil:


Wat ik al gevonden of geprobeerd heb
Heb gegoogeld vind alleen hoe ik tekst die ik arceer kan laten verkleuren met:

::selection {
background: #ffb7b7;
/* WebKit/Blink Browsers */
}
::-moz-selection {
background: #ffb7b7;
/* Gecko Browsers */

[ Voor 4% gewijzigd door RobIII op 25-04-2018 15:06 . Reden: Afbeeldingen gefixed ]

[n1ck]

Kijk eens naar :nth-child(odd) en :nth-child(even)
https://www.w3schools.com/cssref/sel_nth-child.asp
https://www.w3schools.com...rycss3_nth-child_odd_even

[ Voor 8% gewijzigd door n1ck op 25-04-2018 12:02 ]

[ivan797]

je kan tabel rijen stylen dmv odd en even:

table tr:nth-child(odd) td{
background:#ccc;
}
table tr:nth-child(even) td{
background:#fff;
}

[Merkelbeek]

Heb eens even dit stukje erin gezet:
p:nth-child(odd) {
background: red;
}

p:nth-child(even) {
background: blue;
}

Echter doet deze niks moet ik niet nog iets van bepaalde waardes meegeven?

Hij doet het wel als ik bijvoorbeeld op google een HTML table opzoek doet hij het wel
maar in topdesk niet bijvoorbeeld.

[ Voor 23% gewijzigd door Merkelbeek op 25-04-2018 12:26 ]

[Feanathiel]

Nee zou gewoon moeten werken. Zie hier. In welke browsers moet het werken? Dat hangt er namelijk wel vanaf of dat werkt of niet.

[Merkelbeek]

Feanathiel schreef op woensdag 25 april 2018 @ 12:27:
Nee zou gewoon moeten werken. Zie hier. In welke browsers moet het werken? Dat hangt er namelijk wel vanaf of dat werkt of niet.

Heb IE/Firefox en chrome geprobeerd

[Hopscotch]

Gebruik je browser debug tools om uit te vinden waarom het niet wekt. In chrome kan je met je rechter muisknop op een element in de site klikken en dan inspect selecteren. Dan zie je de structuur en de styles toegepast op dat element.

Dan kan je zien of de html structuur wel is zoals je verwacht (imoet het wel p zijn?) of wordt jouw style misschien weer overschreven door een andere, of misschien wordt jou stylesheet helemaal niet meegenomen.

Dat zijn zo een beetje de dingen die je kan onderzoeken.

[Nibbz]

Dus je wilt niet de tekst aanpassen, maar de achtergrond kleur? Wezelijk verschil

[Merkelbeek]

Nibbz schreef op woensdag 25 april 2018 @ 14:20:
Dus je wilt niet de tekst aanpassen, maar de achtergrond kleur? Wezelijk verschil

Klopt de achtergrond van een regel tekst.

[CH4OS]

Merkelbeek schreef op woensdag 25 april 2018 @ 12:11:
Heb eens even dit stukje erin gezet:
p:nth-child(odd) {
background: red;
}

p:nth-child(even) {
background: blue;
}

Echter doet deze niks moet ik niet nog iets van bepaalde waardes meegeven?

Hij doet het wel als ik bijvoorbeeld op google een HTML table opzoek doet hij het wel
maar in topdesk niet bijvoorbeeld.

Is de nieuwe CSS sowieso al beschikbaar / geladen door de browser? Ververs dus even de pagina, als er geen sprake is van caching zou dat gelijk moeten werken.

[ Voor 8% gewijzigd door CH4OS op 25-04-2018 14:44 ]

[RobIII]

Ik zie hier p's en table tr's. Misschien handig als TS even aangeeft welke HTML hier aan de orde is. Verder is caching, zoals CH4AOS aangeeft, een goeie tweede kanshebber.

Merkelbeek schreef op woensdag 25 april 2018 @ 14:40:
[...]


Klopt de achtergrond van een regel tekst.

Definieer "regel tekst". Wat is de HTML?

Zoals je hier ziet werkt het wel zoals 't zou moeten.

[ Voor 77% gewijzigd door RobIII op 25-04-2018 15:15 ]

[CH4OS]

Scherp!

[thaicecube]

Merkelbeek schreef op woensdag 25 april 2018 @ 12:11:
Hij doet het wel als ik bijvoorbeeld op google een HTML table opzoek doet hij het wel
maar in topdesk niet bijvoorbeeld.

Bedoel je met topdesk het "tooltje" dat je vind als ik er op google.
Is dit überhaupt html/css die je zelf kan aanpassen? Ik ben namenlijk niet bekend met het programma.

Ik zie dat er ook een support gedeelte is van dat tooltje, misschien kunnen ze je daar verder helpen.

En anders even een stukje html geven zoals @RobIII zegt, dat kan ons wat meer helpen.

En mochten het inderdaad tabellen zijn, probeer dan

Cascading Stylesheet:

tr:nth-child(odd) {
background: red;
}

tr:nth-child(even) {
background: blue;
}

[RedFox]

In onze TopDesk (die er soortgelijk uitziet als jouw screenshot) kan het met de volgende css

Cascading Stylesheet:

#columnsscroll > div > span:nth-child(odd) {
    background-color: yellow;
}

[Merkelbeek]

RedFox schreef op woensdag 25 april 2018 @ 15:33:
In onze TopDesk (die er soortgelijk uitziet als jouw screenshot) kan het met de volgende css

Cascading Stylesheet:

#columnsscroll > div > span:nth-child(odd) {
    background-color: yellow;
}

TOP dat is hem idd,
heb je nog meer handige css'jes voor in mijn topdesk

[.oisyn]

Programming -> Webdesign, Markup & Clientside Scripting

[ Voor 19% gewijzigd door .oisyn op 25-04-2018 15:45 ]

[RedFox]

Merkelbeek schreef op woensdag 25 april 2018 @ 15:39:
[...]


TOP dat is hem idd,
heb je nog meer handige css'jes voor in mijn topdesk

Probeer er altijd zo min mogelijk calls in te hebben, dus zelf geen behoefte aan css aanpassingen