Wil ul/li niet weergeven op de site

Status
Niet open voor verdere reacties.

CorVerm

Redacteur
Lid geworden
11 mrt 2005
Berichten
5.192
Beste mensen,
Ik heb iets raars aan de hand, als ik een opsomming wil maken dan is dat niet zichtbaar op de site.
Maak ik er een hyperlink van dan wordt het wel weergegeven.

De code in css is:
Code:
ul {
        list-style-type:square;
        list-style-position:outside;
		left: 25px;
		margin:10px 1px;
}

Voorbeeld hoe het wel werkt:
Code:
<li><a href= "https://www.schoonepc.nl/windows10.html" target="_blank">Writer voor tekstdocumenten en HTML-documenten (vergelijkbaar met Microsoft Word)</a></li>

Wie weet hoe dit komt?
 
Kijk eens in je browser bij de debugger of je overervingen ziet?
 
Hallo Aar,
Nee die zie ik niet, het ziet er goed uit.
 
Heb je een voorbeeld site? Of beter een JSfiddle.net voorbeeld?
 
Het is opgelost Aar.
Ik heb de font een kleur gegeven en nu zie ik het wel.
Die website maken doe ik voor de lol, om wat bezig te zijn.

DE code ziet er nu zo uit:
Code:
ul {
        list-style-type:square;
        list-style-position:outside;
		left: 25px;
		margin:10px 1px;
		color: #400080
}

Bedankt voor het meedenken.
 
Helaas!
Als ik het bestand lokaal open is er niets aan de hand.
Als ik het bestand upload dan is het lettertype wit.
Dat wordt zichtbaar als ik er met de muis overheen veeg.

voor de "website" klik hier.
 
Als ik css van berichtje #1 in een bestand zet krijg ik dit

ul.jpg

De stippellijn is de omlijning van de <ul>


edit: je bedoelt dit? Het lijkt opgelost?
Code:
<ul>
    <li><span style="color:#0000ff">Writer voor tekstdocumenten  .......</span></li>
    .......
</ul>
 
Laatst bewerkt:
Ik zie toch een mooie lijst op de website: zie screenshot.

Maar de website is niet responsive, misschien daar ook eens induiken.
 

Bijlagen

  • Screenshot 2022-06-27 at 10-37-01 docs.png
    Screenshot 2022-06-27 at 10-37-01 docs.png
    87,9 KB · Weergaven: 24
Beste Bron, hoi Angela,
Er zal ongetwijfeld iets in het css bestand niet goed zijn.
Ik heb het nu zo opgelost:
Code:
<li><span style="color:#0000ff">Writer voor tekstdocumenten en HTML-documenten (vergelijkbaar met Microsoft Word)</span></li>

Dit zou zo niet moeten, maar het werkt wel.

Wat bedoel je met "niet responsive" Angela?
 
CorVerm, dat betekent dat de website niet goed wordt gezien op verschillende formaten.
Als je bijv. je website in je eigen browser bekijkt, en je maakt het scherm kleiner (met je muis dus de browser kleiner maken) dan zul je zien dat je website niet meer te lezen is op een kleiner formaat. Zie screenshot.
 

Bijlagen

  • Schermafdruk van 2022-06-27 11-47-10.png
    Schermafdruk van 2022-06-27 11-47-10.png
    1,7 MB · Weergaven: 25
Laatst bewerkt:
De pagina heb ik voor je responsive gemaakt. Dan valt er op smartphone niets buiten beeld ;)
De bestaande 3-koloms vormgeving heb ik overgenomen.
Dingen die niet meer zijn toegestaan heb ik eruit gehaald (zoals <font align=".." size="..">

Suc6.


* edit. docs.html verbeterd
 

Bijlagen

  • cor2.zip
    3,5 KB · Weergaven: 26
Laatst bewerkt:
Hartelijk dank Bron, het is echt geweldig hoe jij dit hebt gedaan :thumb:

Ik heb (voorlopig) nog een vraag. Hoe kan ik de linker- en rechterkolom iets smaller maken?

ul/li werkt nu ook prima ;)
 
Laatst bewerkt:
Zoals hierboven door Aar aangegeven, het is een 12-grid.
Dit betekent dat je de breedte (denkbeeldig) in 12 gelijke stukjes kan knippen.

col-md-3 (linker kolom), col-md-6 (midden kolom), col-md-3 (rechter kolom)
3+6+3 opgeteld klopt precies in de 12-grid.

Om de kolommen smaller te maken zou je dit kunnen doen
col-md-2 (linker kolom), col-md-8 (midden kolom), col-md-2 (rechter kolom)
2+8+2 opgeteld klopt weer precies in de 12-grid.

Je hoeft links en rechts niet even breed te maken.
col-md-3 (linker kolom), col-md-7 (midden kolom), col-md-2 (rechter kolom)
3+7+2 opgeteld klopt weer precies in de 12-grid.

col-12 is voor smartphone.
Omdat zowel links, midden en rechts col-12 breed zijn zullen ze op smartphone de volle breedte hebben.

Code:
<!-- linker kolom -->
<div class="col-12 col-md-3 order-2 order-md-1">
....
</div> <!-- einde linker kolom -->


<!-- midden kolom -->
<div class="col-12 col-md-6 order-1 order-md-2">
....
</div> <!-- einde midden kolom -->


<!-- rechter kolom -->
<div class="col-12 col-md-3 order-3 order-md-3">
....
</div> <!-- einde rechter kolom -->

Laat het graag weten als je nog een vraag hebt.
 
Laatst bewerkt:
Hoe kan ik de linker- en rechterkolom iets smaller maken?
Kolomindeling 2/8/2 kan minder fraai zijn op smalle schermen. Oplossing hiervoor

Op "medium" brede schermen 3/6/3. Op "large" brede schermen 2/8/2.

Code:
<!-- linker kolom -->
<div class="col-12 col-md-3 col-lg-2 order-2 order-md-1">
....
</div> <!-- einde linker kolom -->


<!-- midden kolom -->
<div class="col-12 col-md-6 col-lg-8 order-1 order-md-2">
....
</div> <!-- einde midden kolom -->


<!-- rechter kolom -->
<div class="col-12 col-md-3 col-lg-2 order-3 order-md-3">
....
</div> <!-- einde rechter kolom -->
 
Aar, bedankt voor de tip, ik ga er naar kijken.

Bron, wederom bedankt voor de hulp en uitleg, ik heb het begrepen.
Deze vraag zet ik op opgelost en als ik weer een vraag heb stel ik hem met een gerust hart :d
 
Als ik css van berichtje #1 in een bestand zet krijg ik dit

Bekijk bijlage 365004

De stippellijn is de omlijning van de <ul>


edit: je bedoelt dit? Het lijkt opgelost?
Code:
<ul>
    <li><span style="color:#0000ff">Writer voor tekstdocumenten  .......</span></li>
    .......
</ul>
Wat ik mis is de ; na de kleurwaarde. Het viel mij op omdat ik laatst ook een poos heb zitten klooien omdat ik ergens een punt had aangeslagen i.p.v. een komma. Nu zoek ik daar het eerst. :)

Hopelijk lost dit jouw probleem op.
 
Laatst bewerkt:
Een punt wordt gebruikt in getallen met decimalen, bijv. 0.25
Code:
.overlay {
    rgba (192, 255, 128, 0.25);
}

Aan het eind van een css eigenschap komt een puntkomma!
De puntkomma mag worden weggelaten als het eerstvolgende teken een } is (spatie, tab of enter tellen niet mee). Bijv.
Code:
body {
    font-size: 14px;
    line-height: 1.4
}

Zet voor een goede leesbaarheid elke eigenschap op een eigen regel, en zet overal een puntkomma achter.


Noot. Er zijn diverse mogelijkheden om css kleiner te maken, de puntkomma voor een } weglaten is hier eentje van. Dit komt bij hele grote stylesheets ten goede van de performance. Dit is misschien iets om later naar te kijken (als de stylesheet groot is).
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan