+ 2
Am trying to customize bullets in<ul> with image, and image appears in its actual size what might be problem or what should I do
4 Réponses
+ 3
Gordon Okoth Agola I think you should use any image editor and then resize your images. That might help. However, you can add your code too in case I try to find any alternative :))
+ 2
<!DOCTYPE html>
<html>
<head>
<link href="h1.css" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Recipe of Beef Pilau By Gordon</title>
</head>
<body>
<h1>BEEF PILAU</h1>
<p class="p1">
Pilau is a Kenyan food which originate from coast because of their love for
spices. <br />It can be prepared from beef & rice or chicken & rice or just rice alone</p>
<!.. ingredients using unerdered list..>
<div class="In" >INGREDIENTS</div>
<ul id="unordered">
<li >250g beef</li>
<li>2 onions chops</li>
<li>400g pishori rice, washed and soaked for 15 minutes.</li>
<li>1/2 tsp turmeric powder</li>
<li>1/2tsp corriander powder</li>
<li> 1/2tsp cummin piwder</li>
<li>vegetable cooking oil</li>
<li>1/2tsp garlic paste</li>
<li>chopped coriander</li>
<li>3 tomatoes</li>
<li>whole spices</li>
<li>1 TBS cumin</li>
<li>2 cinnamon sticks</li>
<li>2 cloves 2 cardamon</li>
<li>1/2tsp whole pepper</li>
</ul>
<div class="pro">PROCEDURE<
+ 2
body{
background: repeating-linear-gradient(45deg,white 20px,yellow 30px);
}
h1{
background-color: teal;
}
.pro,.In{
color:darkgreen;
}
#order{
padding:20px 10px 20px 10px;
list-style-type: lower-roman;
background-color: coral;
}
#unordered{
padding:20px 10px 20px 10px;
list-style-image: url("download/img.jpg");
background-color: coral;
}
.p1{padding:20px 10px 20px 10px;
background-color: darkkhaki;
}
.span span{
font-style: italic;
}
.span span:last-child{
text-decoration: underline;
}
.bottom {padding:20px 10px 20px 10px;
background-color: antiquewhite;
}
.bottom p{
background-color: cyan;
}