• Opgelost dejong1968

    (@dejong1968)


    Het thema is (flink aangepaste) twenty twenty-four, maar ik vermoed dat deze vraag thema-onafhankelijk is.

    Ik heb een afbeelding als bullet gebruikt in een html-list met recente artikelen op http://www.kemet.nl

    Dat deed ik door de afbeelding als background te gebruiken volgens https://stackoverflow.com/questions/7775594/css-list-style-image-size , want anders kan ik de oorspronkelijke afbeelding niet kleiner maken (en met een image-editor blijft er bij NOG kleiner maken niets van over.) Het resultaat is prima, alleen wordt de css list-style-position: outside die ik codeer bij de ul niet toegepast. Mijn gebruikte CSS:

    .recente-artikelen ul {
    list-style-position: outside !important; /*dit doet dus niets*/
    }

    .recente-artikelen li::before {
    content: ”;
    display: inline-block;
    height: 19px;
    width: 15px;
    background-size: 15px 19px;
    background-image: url(“https://www.kemet.nl/wp-content/uploads/2023/12/schrijvers-icon-rood.png”);
    margin-right: 7px;
    }

    Doel is dus om de tweede regel tekst bij een list-item ook te laten inspringen. Het heeft te maken met dat ik de afbeelding als achtergrond gebruik, want doe ik dat niet en gebruik ik ipv bovenstaande css deze css:

    .recente-artikelen li {
    list-style: square inside url(“https://www.kemet.nl/wp-content/uploads/2023/12/schrijvers-icon-rood.png”) !important;
    list-style-position: outside !important;

    }

    … dan werkt het wel, maar kan ik de afbeelding weer niet resizen.

    Alvast dank voor de reacties en hulp.

    De pagina waar ik hulp bij nodig heb: [log in om de link te zien]

4 reacties aan het bekijken - 1 tot 4 (van in totaal 4)
  • Thread starter dejong1968

    (@dejong1968)

    In mijn eerste bericht werden de closing double quotes om een of andere reden vervangen door de Unicode voor de Right Double Quotation Mark. ” In mijn css staan echter wel gewoon double quotes.

    • Deze reactie is gewijzigd 1 jaar, 1 maand geleden door dejong1968.
    • Deze reactie is gewijzigd 1 jaar, 1 maand geleden door dejong1968.
    Guido

    (@guido07111975)

    Hoi,

    Om je code goed weer te geven kun je deze in het code blok zetten, zie de opmaakbalk boven het invoerscherm.

    Probeer dit eens:

    .recente-artikelen li {
    	padding-left:30px;
    	list-style:none; 
    	background-image:url("https://www.kemet.nl/wp-content/uploads/2023/12/schrijvers-icon-rood.png");
    	background-repeat:no-repeat;
    }
    

    Met de background-size (link) kun je de grootte vh icoon aanpassen. Voor kleiner scherm kun je middels een media query eventueel ook nog een aangepaste grootte instellen.

    Guido

    Thread starter dejong1968

    (@dejong1968)

    Beste Guido,

    Dank voor je snelle hulp. Het is met jouw code gelukt. Hier de code waarmee we het gewenste resultaat hebben bereikt:

    .recente-artikelen li {
    padding-left:30px;
    list-style:none;
    background-image:url("https://www.kemet.nl/wp-content/uploads/2023/12/schrijvers-icon-rood.png");
    background-repeat:no-repeat;
    background-size: 15px;
    background-position: 0 3.5px;
    }



    Guido

    (@guido07111975)

    Ah, mooi dat het gelukt is!

    Guido

4 reacties aan het bekijken - 1 tot 4 (van in totaal 4)
  • Het onderwerp ‘css list-style-position: outside werkt niet’ is gesloten voor nieuwe reacties.