Als ik een echo doe van mijn tabel hoe kan ik aan het einde van de regels afsluiten met een punt. Ik wil nl een overzicht maken bijv. appel, peer, kers, druif.
<?php
$sql = "SELECT * FROM vruchten";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo $row['fruit'];
echo ', ';
}
} else {
echo "geen resultaat";
}
?>
Jan R gaf een voorbeeldcode. Daarvan zei ik: dat is eigenlijk een lijst en kun je dus beter in html als <ul> opmaken. Omdat het een specifieke lijst lijst is (met komma's) voeg je dan aan de ul de class 'comma-list' (of hoe je het ook wil noemen) toe. Die class gebruik je dan om de komma's toe te voegen. Op het moment dat je dan een komma-gescheiden lijst wil maken, dan gebruik je die class.
Vervolgens zeg jij:
>> De enige aanvulling die ik nog heb is om de CSS class niet direct aan .comma-list > li te binden.
>> In mijn optiek kan je CSS beter zo min mogelijk, tot nooit, direct koppelen aan de HTML-tags.
>> Als je li als selector gebruikt, geldt dat meteen voor alle li's, en kan opmaak in elkaar over lopen door inheritance zonder dat je dat in de gaten hebt of wilt.
Wat bedoel je precies? Je gebruikt toch die class? Dan geldt het toch helemaal niet voor alle li's.
Ik denk dat het probleem niet zo zeer ligt bij wat _hier_ gedaan wordt met CSS (die komma's toevoegen), maar meer bij wat er nog aan een element (LI) gekoppeld wordt aan eigenschappen.
Als algemeen op de site is aangegeven dat een <li> een opsommingsteken dat uitziet als een en driehoek, en rood is, dan zal nu ook je lijstje met komma's rood worden en driehoekjes tonen.
Dat geeft dan weer ellende om dat weer terug te draaien voor de li in deze komma-lijst. Dan snap ik de opmerking van Ad.
Hier gaat het om een <ul> met een class en daaronder de <li> in de css-definitie. Dat staat vlak naast elkaar, en daar zie ik niet veel problemen in.
Maar in het licht van wat ik hierboven zeg, zou je dan misschien juist de li de class-aanduiding moeten geven.
Vandaag nog zoiets gezien: kennelijk vond mijn voorganger het handig om alle <h2> op de pagina wit te maken als het in een <div class="nieuws"> staat. Dat is honderd regels verderop.
En in combi met een witte achtergrond vandaag niet handig.
Dan geef ik dat liever lokaal in een blok aan, ipv dat alle <h2>'s maar gelijk moeten zijn.
En dan is <h2 class=nieuws> duidelijker.
Het probleem komt vaak pas na een flinke tijd boven.
?Onbekende gebruiker
11-01-2023 15:56
Inderdaad Ivo P, dat is wat ik bedoelde.
Ik had het eerder al duidelijker kunnen opschrijven.
Nog steeds zie ik het probleem niet. Je gebruikt de class 'comma-list' en geeft daarbij aan dat de <li> elementen worden gescheiden door een komma en dat ze geen opsommingsteken krijgen. Wat is precies het probleem waar jullie het over hebben?
>> En dan is <h2 class=nieuws> duidelijker.
Dat hangt er maar net vanaf. Het is niet vreemd om te zeggen binnen het blok nieuws is de achtergrond zwart en zijn de h2's wit. Dat is logischer dan alle h2's stuk voor stuk wit maken. Blijkbaar gaat het in jouw voorbeeld ergens anders fout, maar dat neemt niet weg dat de initiële gedachte (waarschijnlijk niet helemaal lekker uitgevoerd) wel degelijk prima is.
?Onbekende gebruiker
12-01-2023 16:24
gewijzigd op 12-01-2023 16:28
Ozzie, jouw voorbeeld zelf is niet fout. Er is helemaal niets mis mee.
Het enige dat ik duidelijk wilde maken is dat je soms onverwachte dingen kan krijgen met CSS omdat CSS cascading is.
Vergelijk dit:
<style>
.d { color: blue; }
.d span { text-decoration: underline; }
.t { color: red; }
.t span { font-weight: bold; }
</style>
<div class="d">
In deze tekst <span>is dit speciaal</span>.
<p class="t">En deze tekst is <span>onbedoeld onderstreept</span>.</p>
</div>
met dit:
<style>
.alinea { color: blue; }
.alinea .uitgelicht { text-decoration: underline; }
.regel { color: red; }
.regel .markering { font-weight: bold; }
</style>
<div class="alinea">
In deze tekst <span class="uitgelicht">is dit speciaal</span>.
<p class="regel">En deze tekst is <span class="markering">nu goed gemarkeerd</span>.</p>
</div>
Het verschil is subtiel, maar met meer CSS (wat meestal het geval is) worden verschillen al snel groter. Bovenstaande illustreert dat je er beter aan doet HTML tags als CSS selector helemaal te vermijden.
Oké. Dit heeft alleen dus niks met mijn voorbeeldcode te maken ;-)
Aan jouw eerste voorbeeld is niks vreemds. Als je in jouw "d" class aangeeft dat iedere span moet worden onderstreept, dan gebeurt dat ook in een paragraaf die in die "d" class staat. Dat is gewoon overerving. Dat is hoe CSS werkt. Dat is dus niet 'onbedoeld onderstreept', maar simpelweg niet juist ingesteld :-) Dat het daar onderstreept wordt, is logisch.
?Onbekende gebruiker
12-01-2023 21:12
Oké. Dit heeft alleen dus niks met mijn voorbeeldcode te maken ;-)
Dat zeg ik. Fijn dat we het eens zijn.
Het eerste voorbeeld is om aan te geven dat als je HTML tags gebruikt in CSS selectors, dat het gemakkelijk onbedoelde effecten kan geven. Want wat is een "span", en voor welk gebruik is de onderstreping bedoeld? Dat blijkt niet uit de CSS bij gebrek aan semantische naamgeving.
Als de CSS code nog geen 50 regels lang is, is dat geen probleem. Maar bij een beetje website of webapplicatie is de CSS al snel 1000+ regels lang. En dan ben je bij een conflict met opmaak wel even bezig om de CSS uit elkaar te halen en te maken zoals je het eigenlijk had bedoeld. Je kunt die situatie voor zijn met de tip in het tweede voorbeeld.
Klopt, maar het is dus niet een algemene stelregel. Als overal in je code een h2 blauw moet zijn, dan ga je niet iedere h2 een class 'blauw' geven. Het hangt dus geheel en wel van de situatie af. Jouw opmerking was "De enige aanvulling die ik nog heb is om de CSS class niet direct aan .comma-list > li te binden." Daar is echter niks mis mee, zo hebben we inmiddels beiden geconcludeerd.
?Onbekende gebruiker
13-01-2023 11:11
We zijn het eens. Het is mijn stelregel, zo presenteer ik hem ook. Code en zeker CSS blijft in mijn ervaring meestal niet beperkt tot een paar honderd regels.
Maar zoals altijd: YMMV.
>> en zeker CSS blijft in mijn ervaring meestal niet beperkt tot een paar honderd regels.
Dat is waar ... dat kan flink oplopen. De keuze is om een goede balans te vinden tussen algemeen specificeren waar het kan, en specifiek genoeg waar nodig. Ieder element een class geven <h2 class="nieuws"> lijkt mij in ieder geval niet wenselijk. Dat kun je dan beter via de omsluitende div (container) doen, dus .nieuws h2. Maar de kans is reëel dat alle h2's overal hetzelfde formaat moeten hebben, en dan gebruik je dus weer gewoon h2, en de uitzonderingen pas je aan via een omsluitende div, of met een class op het element zelf. En als het een sporadische aanpassing is, kun je ook nog inline style toepassen.
