[CSS] bullit points niet zichtbaar

[s0ulmaster]

Mijn vader heeft een website in eigen beheer en mijn broer heeft ooit (15-20 jaar terug) daar een css voor geschreven.

Nu blijk dat hij al een eeuwigheid geen bulletpoints meer kan gebruiken en mijn broer heeft zelf geen flauw idee meer hoe die css in elkaar steekt.

Nu zijn mijn css skills ook niet je van het en ben ik al blij als ik was simpele custom css hier op het forum in mn dark theme aan kan passen

Hieronder de volledige css die toegepast wordt.

code:

body {

background:url("../xxxxxx/images/bg.gif") repeat;

margin:0px;

padding:0px;

font-size:12px;

font-family:Arial, Helvetica, sans-serif;

color:#000;

}

p{

text-align:justify;

line-height:19px;

padding:0px;

margin:0px;

}

h2{

padding:0px 0 10px 0; margin:0px; color:#B52025; font-size:20px; font-weight:normal;

}

.clear{

clear:both;

}

#wrap{

width:977px;

margin:20px auto auto auto;

}

.top_corner{

width:976px;

height:15px;

background:url("../xxxxxxn/images/top_bg.gif") no-repeat center bottom;

}

#main_container{

width:977px;

background:url("../xxxxxx/images/center_bg_repeat.gif") repeat-y center;

}

#header{

width:960px;

margin:auto;

height:90px;

}

#logo{

padding:10px 0 0 20px;

float:left;

}

/*----------------------menu-------------------------*/

#menu{

width:530px;

float:right;

padding:40px 0 0 0;

}

#menu ul{

list-style:none;padding:0px;margin:0px;display:block;

}

#menu ul li{

list-style:none;display:inline;float:left;width:auto;padding:0px;font-size:12px;

}

#menu ul li a{

float:left;text-decoration:none;padding:0px 10px 0 10px; margin:0px 4px 0 4px;color:#000;text-align:center; height:31px; line-height:31px; 

}

#menu ul li a:hover{

background-color:#b52025;color:#fff;

}

#menu ul li a.current{

float:left;text-decoration:none;padding:0px 10px 0 10px; margin:0px 4px 0 4px;color:#fff;text-align:center; height:31px; line-height:31px; background-color:#b52025;

}



/*-----------------middle_banner----------------------------*/

.middle_banner{

width:977px;

height:310px;

background:url("../xxxxxx/images/middle_banner_bg.gif") no-repeat center;

}

/*----------------------slider---------------------------*/

.featured_slider { width:965px; margin:auto; float:left; margin:18px 0 0 6px; }

ul, li{

padding:0px;

margin:0px;

list-style:none;

}

/** ----------------------------------------------------- **/

#featured_border { position: relative; border: none; padding:0px; height:280px; margin: 0px; }

#featured_wrapper { position: relative; width: 100%; height: 100%; overflow: hidden; }

#featured_images { position: absolute; left: 0; top: 0; }

#featured_images li { float: left; }

#featured_positioner_desc { width:965px; height: 280px; position: absolute; top: 0px; left: 0px; }

#featured_wrapper_desc { width: 100%; height:280px; position: relative; overflow: hidden; }

#featured_desc { position: absolute; left: 0; bottom: 0;  padding:0px; margin:0px; }

#featured_desc li { width: 965px; float: left;padding:0px; margin:0px; }

#featured_desc li div { margin:0px 0 0px 0px; padding:10px; width:945px;  background: url("../xxxxxx/images/featured-desc-bg.png"); }

#featured_desc li h2 {

color:#FFFFFF;

font-size:18px;

padding:0px 0 5px 0;

margin:0px; 

}

#featured_desc li p {

color:#FFFFFF;

font-size:12px;

padding:0px 0 10px 0;

margin:0px;

line-height:18px;

font-style:italic;

}



#featured_desc li a {

color:#FFFFFF;

font-size:12px;

padding:0px 0 10px 0;

margin:0px;

line-height:18px;

font-style:italic;

text-decoration:underline;

}



#featured_buttons { position: absolute; top: 15px; right: 15px; width: auto; padding:0; list-style:none;}

#featured_buttons li { width: 22px; height: 22px; background: url("../xxxxxx/images/featured-button-off.png"); float: left; margin-left: 3px; text-align:center; font-size:12px; color:#FFFFFF; line-height:22px; cursor: pointer; }

#featured_buttons li.clicked { background: url("../xxxxxx/images/featured-button-on.png"); }

/**/





/*-------------------------------*/

.center_content{

width:960px;

clear:both;

margin:auto;

padding:20px 0px 20px 0px;

}

.center_content_pages{

width:960px;

clear:both;

margin:auto;

padding:20px 0 20px 0;

background:url("../xxxxxx/images/center_bg_pages.gif") no-repeat center top;

}



.center_content_pages a{

text-decoration:none;

color:#B52025;

}



.center_content_pages a:hover{

text-decoration:underline;

color:#B52025;

}



.home_section_left{

width:270px;

height:200px;

float:left;

margin:0 14px 0 14px;

padding:10px 10px 20px 10px;

background:url("../xxxxxx/images/home_block_bg.gif") no-repeat center bottom;

}

.home_section_left a{

text-decoration:none;

font-size:20px;

color:#B52025;

}

.home_section_left p{

clear:both;

}

.home_section_left p span{

font-weight:bold;

}

img.home_section_icon{

width:63px;

float:left;

}

h2.home_title{

width:190px;

float:left;

font-size:20px;

padding:20px 0 0px 10px; margin:0px;

color:#B52025;

}

.home_subtitle{

width:190px;

float:left;padding:0px 0 0px 10px; font-size:12px; color:#a7a7a7;

}

.home_section_thumb{

float:left; clear:both;

padding:2px; text-align:center;margin:10px 0 10px 0; border:1px #dcdcdc solid;

}

a.more{

float:right;

}

img.projects{

float:left;

padding:2px;margin:0 10px 0 0; border:1px #dcdcdc solid;

}





.left_content{

width:660px;

float:left;

padding:0;

}

.left_block{

width:295px;

float:left;

padding:20px 20px 10px 15px;

}

.left_block_wide{

width:625px;

float:left;

padding:20px 20px 10px 15px;

}

.left_block_wide1{

width:625px;

float:left;

padding:20px 20px 10px 15px;

}

.left_block_wide1 a{

text-decoration:none;

color:#000;

}

.left_block_wide1 a:hover{

text-decoration:none;

color:#000;

}

.news_block_wide{

width:625px;

height:500px;

float:left;

line-height:120%;

padding:20px 20px 10px 15px;

}

.right_block_wide{

width:625px;

float:right;

padding:20px 20px 10px 15px;

}



.financial-application-form{

width:530px;

float:left;

padding:20px 20px 10px 15px;

}

.financial-application-form p{

margin-bottom:30px;

}

.testimonials{

width:360px;

float:right;

padding:20px 20px 0 0;

}

.block_wide{

width:625px;

float:left;

margin:10px 20px 10px 15px;

padding-top:10px;

border-top:1px #ededed solid;

}

.wide_content{

width:930px;

clear:both;

padding:10px 15px 0 15px;

}

.right_block{

width:280px;

float:right;

padding:20px 20px 10px 0;

}

img.pic{

border:3px #22496a solid;

margin:0 0 10px 0;

}

.home_news a{

font-size:12px;

color:#c82127;

text-decoration:none;

border-bottom:1px #bcbcbc dotted;

padding:10px 0 5px 12px;

display:block;

float:left;

background:url("../xxxxxx/images/arrow.gif") no-repeat left top;

background-position: 0px 13px;

}



.random_list a{

    font-size:12px;

color:#c82127;

text-decoration:none;

border-bottom:1px #bcbcbc dotted;

padding:10px 0 5px 12px;

float:left;

background:url("../xxxxxx/images/arrow.gif") no-repeat left top;

background-position: 0px 13px;

display:table-cell;

width:155px;

}

.random_list ol{

    display:table-cell;

    width:155px;

    padding:none;

}





.home_news a:hover{

text-decoration:underline;

}



input.newsletter_input{

background-color:#fdeaeb;

border:1px #e2c7c8 solid;

width:193px;

height:18px;

padding:0px;

float:left;

}

form#newsletter{

padding:0 0 0 0;

}

input.newsletter_submit{

    background-color:#b52025;

    color:#FFFFFF;

    text-align:center;

    float:left;

    padding:5px 5px 4px 5px;

    margin:0 0 0 0px;

    border:1px #fdeaeb solid;

    cursor:pointer;

    text-decoration:none;

}

.testbox{

padding:20px 10px 5px 0;

margin:0;

border-bottom:1px #ededed solid;

}

.testbox p{

font-style:italic;

}







/*-----------------------contact_form-------------------*/

.form{

width:500px;

height:auto;

float:left;

padding:20px 10px 10px 20px;

border:1px #fdeaeb solid;

}

.form_row{

width:425px;

float:left;

clear:both;

padding:7px 0 7px 0;

}

label{

width:100px;

float:left;

padding:3px 15px 0 0;

color:#b52025;

text-align:right;

font-weight:bold;

}

input.main_input{

background-color:#fdeaeb;

border:1px #e2c7c8 solid;

width:300px;

height:18px;

padding:4px;

float:left;

}

textarea.main_textarea{

background-color:#fdeaeb;

border:1px #e2c7c8 solid;

width:300px;

height:120px;

padding:4px;

float:left;

}

input.submit{

background-color:#b52025;

color:#FFFFFF;

text-align:center;

float:right;

padding:3px 10px 2px 10px;

margin:0px 0 0 0;

border:1px #b52025 solid;

cursor:pointer;

}

/*-----------------------------footer------------------*/

.footer{

clear:both;

width:960px;

margin:auto;

background:url("../xxxxxx/images/footer_bg.jpg") no-repeat center;

height:65px;

}

.copyright{

float:left;

padding:30px 0 0 15px;

color:#6996c0;

}

.copyright a{

color: #2A1C11;

text-decoration:none;

}

.footer_links{

float:right;

padding:30px 15px 0 0;

}

.footer_links a{

text-decoration:none;

color: #2A1C11;

padding-left:10px;

}

.footer_links a:hover{

text-decoration:none;

color: #2A1C11;

}#wrap #main_container .center_content .left_block_wide p span i {

    font-size: 10px;

}

Nu heb ik even wat testjes gedaan, maar ik kom er niet helemaal uit, wat het stuk maakt.
Ik heb geprobeerd in "left_block_wide" een bullet list te maken.
Ik zie in de html code netjes [ol] en • tags staan met daarin de onderdelen, maar visueel verschijnt er dus niks.

Ik heb al met display:list-item geprobeerd het te forceren, maar dat lijkt niet te werken.

Iemand een tip wat er mis kan gaan of wat ik nog meer kan testen?

[edeboeck]

Surf naar de gewenste pagina en open de developer tools (F12). Met de optie "Inspect element" of iets dergelijks kan je de opsomming selecteren (ik ga ervan uit dat de elementen zélf wel zichtbaar zijn en enkel de opsommingstekens niet) waarna je de CSS kan zien die daarop van toepassing is + uit welke file die definitie komt.
Voor de volledigheid: bij een ol krijg je standaard nummering, bij ul standaard bullet points.

[Rotje333]

Ik denk dat je probleem begint op rij 145.

code:

ul, li{

padding:0px;

margin:0px;

list-style:none;

}

Hierin wordt de list-style op none gezet.

[s0ulmaster]

edeboeck schreef op woensdag 22 april 2020 @ 08:09:
Surf naar de gewenste pagina en open de developer tools (F12). Met de optie "Inspect element" of iets dergelijks kan je de opsomming selecteren (ik ga ervan uit dat de elementen zélf wel zichtbaar zijn en enkel de opsommingstekens niet) waarna je de CSS kan zien die daarop van toepassing is + uit welke file die definitie komt.
Voor de volledigheid: bij een ol krijg je standaard nummering, bij ul standaard bullet points.

Ik snap het idee van het inspecteren van elementen, maar dat hept me helaas nog niet verder.

De definitie van het stukje wat ik getest heb is een .left_block_wide en die staat in de getoonde css.
Of is er nog iets achterligends, dat het desbetreffende stukje van [ol] / [ul] stuk maakt?

[s0ulmaster]

Rotje333 schreef op woensdag 22 april 2020 @ 08:16:
Ik denk dat je probleem begint op rij 145.

code:

ul, li{

padding:0px;

margin:0px;

list-style:none;

}

Hierin wordt de list-style op none gezet.

Aahh...kijk, daar had ik ook al even naar gezocht, maar zelf nog niet gezien
Die ga ik eens proberen.

het maakt het wat makkelijker als je weet waar je naar moet zoeken en html is nou niet iets wat ik vaak doe, dan toch liever C

[ Voor 13% gewijzigd door s0ulmaster op 22-04-2020 08:18 ]

[edeboeck]

s0ulmaster schreef op woensdag 22 april 2020 @ 08:17:
[...]


Ik snap het idee van het inspecteren van elementen, maar dat hept me helaas nog niet verder.

De definitie van het stukje wat ik getest heb is een .left_block_wide en die staat in de getoonde css.
Of is er nog iets achterligends, dat het desbetreffende stukje van [ol] / [ul] stuk maakt?

Ok, maar je vergeet wel dat in CSS in regel meerdere rules van toepassing zijn op eenzelfde element (wat @Rotje333 hierboven concreet aangeeft). Houd er wel rekening mee dat de kans bestaat dat opsommingstekens uitgeschakeld zijn omwille van de elementen in een navigatiemenu. Kijk dat zeker na en maak indien nodig een aparte class (strikt genomen in html5 moet je voor een menu nav gebruiken, en zou je daarop dan kunnen selecteren, maar dat is in deze context allicht niet relevant).

[s0ulmaster]

edeboeck schreef op woensdag 22 april 2020 @ 08:22:
[...]
Ok, maar je vergeet wel dat in CSS in regel meerdere rules van toepassing zijn op eenzelfde element (wat @Rotje333 hierboven concreet aangeeft). Houd er wel rekening mee dat de kans bestaat dat opsommingstekens uitgeschakeld zijn omwille van de elementen in een navigatiemenu. Kijk dat zeker na en maak indien nodig een aparte class (strikt genomen in html5 moet je voor een menu nav gebruiken, en zou je daarop dan kunnen selecteren, maar dat is in deze context allicht niet relevant).

Ja ik snap de context een beetje, dus gaat het even uitproberen vanavond (mocht het mijn vader zelf niet lukken.)
Als meerdere rules hetzelfde proberen te definieren op 1 element, wie heeft er dan voorrang?

De site is 20 jaar oud en de css niet veel jonger, dus html5 was toen geen sprake van

[418O2]

s0ulmaster schreef op woensdag 22 april 2020 @ 08:24:
[...]


Ja ik snap de context een beetje, dus gaat het even uitproberen vanavond (mocht het mijn vader zelf niet lukken.)
Als meerdere rules hetzelfde proberen te definieren op 1 element, wie heeft er dan voorrang?

De site is 20 jaar oud en de css niet veel jonger, dus html5 was toen geen sprake van

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

[edeboeck]

s0ulmaster schreef op woensdag 22 april 2020 @ 08:24:
[...]


Ja ik snap de context een beetje, dus gaat het even uitproberen vanavond (mocht het mijn vader zelf niet lukken.)
Als meerdere rules hetzelfde proberen te definieren op 1 element, wie heeft er dan voorrang?

De site is 20 jaar oud en de css niet veel jonger, dus html5 was toen geen sprake van

De meest specifieke regel neemt altijd voorrang (waarbij je met "!important" nog wel wat kan spelen). Zijn er 2 even specifiek, dan is het diegene die het laatst (in volgorde in de html: laatste regel van "onderste" CSS-file heeft voorrang) gedefinieerd is.

Als je op een snelle manier wat opfrissing wilt (nadruk ligt op "snel", niet per se op "grondig/meest accuraat"): https://www.w3schools.com/css/default.asp

[s0ulmaster]

418O2 schreef op woensdag 22 april 2020 @ 08:27:
[...]

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Ok bedankt voor de tips zo snel.

Ik denk dat ik er nu wel redelijk uit moet kunnen komen.
Eens zien of ik mijn vader nog wat kan leren (bijna 70) anders ga ik er zelf wel ff heen om het te repareren.

@edeboeck bedankt voor het linkje. Ik ga er eens even naar kijken. Beetje extra kennis kan nooit kwaad, alhoewel ik vooralsnog lekker in mijn embedded hoek blijk plakken

[418O2]

s0ulmaster schreef op woensdag 22 april 2020 @ 08:32:
[...]


Ok bedankt voor de tips zo snel.

Ik denk dat ik er nu wel redelijk uit moet kunnen komen.
Eens zien of ik mijn vader nog wat kan leren (bijna 70) anders ga ik er zelf wel ff heen om het te repareren.

@edeboeck bedankt voor het linkje. Ik ga er eens even naar kijken. Beetje extra kennis kan nooit kwaad, alhoewel ik vooralsnog lekker in mijn embedded hoek blijk plakken

code:

.content ul, .content li{

padding:initial;

margin:initial;

list-style:initial;

}

waarbij je .content moet vervangen door een class die zo dicht mogelijk op een element staat waar de CMS tekst in komt. Dat zou het ongeveer moeten oplossen

[s0ulmaster]

418O2 schreef op woensdag 22 april 2020 @ 09:15:
[...]

code:

.content ul, .content li{

padding:initial;

margin:initial;

list-style:initial;

}

waarbij je .content moet vervangen door een class die zo dicht mogelijk op een element staat waar de CMS tekst in komt. Dat zou het ongeveer moeten oplossen

Bedankt voor de hulp zover.

Mijn vader had even een test pagina voor me online gezet.

De .featured_silder definieerde inderdaad "ul, li " daar heb ik even ".slider ul, .slider li" van gemaakt en alles lijkt weer te werken

Ik zag namelijk bij het inspecteren van de pagina, dat zijn list gebruiktmaakte van de opmaak van de slider....

Mijn vader gaat het even implementeren en kijken of alles daarmee gefixed is.

Thanks zover.

[ Voor 7% gewijzigd door s0ulmaster op 22-04-2020 10:55 ]