I want to display the image in menu format while shifting it, but it doesn't work.

This is my first time to ask a question.

I recently started studying web production at a certain school, but when I was coding for the exercise assignment, it was very difficult to display the image while shifting it like the one on the left side of the attached image.
Currently, I use a box tag, make a list, and put an image on top of it, but if there is a way to make the same thing without using a box tag, please let me know.
Thank you for your cooperation.

css Description

.box{
    margin —10px0;
    float:left;
    width: 100%;
    background: #ffffff;
}
.box img{
    max-width —100%;
    float:right;
    margin:0;
}
.boxp{
    margin:0;
    padding:0px;
}
#sidebara{
    text-decoration: none;
    float:left;
    display:block;
    width —255px;
    height —60px;
    background-image:url(img/top-menu.jpg);
    background-repeat —No-repeat;
    background-position:0 left bottom;
}
#sidebarul{
    display:block;
    height —300px;
}
#sidebarulli {
    display:block;
    height —60px;
}
#sidebarul.careplana{
    background-image:url(img/top-menu.jpg);
    background-repeat —No-repeat;
    background-position:0px left bottom;
}
#sidebarul.grouphomea{
    background-image:url(img/top-menu.jpg);
    background-repeat —No-repeat;
    background-position: -60px left bottom;
}
#sidebarul.servicea{
    background-image:url(img/top-menu.jpg);
    background-repeat —No-repeat;
    background-position: -120px left bottom;
}
#sidebarul.homehelpa{
    background-image:url(img/top-menu.jpg);
    background-repeat —No-repeat;
    background-position:-180px left bottom;
}
#sidebarul.daycarea{
    background-image:url(img/top-menu.jpg);
    background-repeat —No-repeat;
    background-position;-240px left bottom;
}

HTML description

<div class="box">
        <img src="img/icatch.png">
        <div class="left">
        <p>
        <ulid="sidebar">
        <lic class="careplan"><a href="html.html">Care Plan</a></li>
        <lic class="grouphome"><a href="html.html">Group Home</a></li>
        <lic class="service"><a href="html.html">Home for the Elderly with Services</a>/li>
        <lic class="homehelp"><a href="html.html">Home Help Services</a></li>
        <lic class="daycare"><a href="html.html">Day Service</a></li>
        </ul>
        </p>
    </div>
</div>

Enter a description of the image here

html css

2022-09-30 21:24

1 Answers

Is it like this?

.box{
    margin —10px0;
    float:left;
    width: 100%;
    background: #ffffff;
}
.box img{
    max-width —100%;
    float:right;
    margin:0;
}
.boxp{
    margin:0;
    padding:0;
}
#sidebar{
    width —255px;
    list-style: none;
}
#sidebara{
    display:block;
    height —60px;
    background-image:url(img/top-menu.jpg);
    background-repeat —No-repeat;
    text-decoration: none;
}
#sidebar.careplana{
    background-position:left0;
}
#sidebar.grouphomea{
    background-position:left-60px;
}
#sidebar.service a{
    background-position:left-120px;
}
#sidebar.homehelpa{
    background-position:left-180px;
}
#sidebar.daycarea{
    background-position:left-240px;
}

2022-09-30 21:24

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656