i am trying to make a mega menu with border to look good but the border is not 100% width of box here is my code :
.mega-menu {
display: block;
overflow: hidden;
position: absolute;
top: 90px;
max-width: 630px;
background: rgb(45, 98, 214);
z-index: 1;
padding: 10px;
}
.mega-menu a {
display: block;
color: white;
margin: 5px;
font-size: 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}
.row-reset {
margin-left: 0;
margin-right: 0;
}
<div class="mega-menu">
<div class="row row-reset">
<div class="col-xl-6">
<ul>
<li>test 1</li>
<li>test 2 </li>
<li>test 3</li>
</ul>
</div>
<div class="col-xl-6">
<ul>
<li>test 4</li>
<li>test 5 </li>
<li>test 6</li>
</ul>
</div>
</div>
</div>
here is what i mean i want the border to be from this :
From This to This
since you are using bootstrap you need to customize each element.
.mega-menu {
display: block;
overflow: hidden;
position: absolute;
top: 90px;
max-width: 630px;
background: rgb(45, 98, 214);
z-index: 1;
}
.mega-menu a {
display: block;
color: white;
margin: 5px;
font-size: 15px;
}
.row-reset {
margin-left: 0;
margin-right: 0;
}
.mega-menu > div > div {
padding: 0;
}
.mega-menu > div > div ul {
padding: 0;
margin-bottom: 0rem;
}
.mega-menu > div > div ul li {
list-style: none;
border: 1px solid #ffffff;
padding: 5px 25px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="mega-menu">
<div class="row row-reset">
<div class="col-xl-6">
<ul>
<li>test 1</li>
<li>test 2 </li>
<li>test 3</li>
</ul>
</div>
<div class="col-xl-6">
<ul>
<li>test 4</li>
<li>test 5 </li>
<li>test 6</li>
</ul>
</div>
</div>
</div>
.mega-menu{
display: block;
overflow: hidden;
position: absolute;
top: 90px;
max-width: 630px;
background: rgb(45, 98, 214);
z-index: 1;
padding: 10px;
}
.mega-menu a{
display: block;
color: white;
margin: 5px;
font-size: 15px;
}
.row-reset{
margin-left: 0;
margin-right: 0;
}
.row-reset ul{
padding-left: 0;
}
.row-reset ul li{
border-bottom: 1px solid rgba(255, 255, 255, 0.45);
list-style: none;
}
.row-reset ul li:last-child {
border-bottom: 0px;
}
.row-reset .column ul{
border-right: 1px solid rgba(255, 255, 255, 0.45);
}
.row-reset .column:last-child ul{
border-right: 1px solid transparent !important;
}
<div class="mega-menu">
<div class="row row-reset">
<div class="col-xl-6 column px-0">
<ul>
<li>test 1</li>
<li>test 2 </li>
<li>test 3</li>
</ul>
</div>
<div class="col-xl-6 column px-0">
<ul>
<li>test 4</li>
<li>test 5 </li>
<li>test 6</li>
</ul>
</div>
</div>
</div>
You could do it as follows. It is mostly bootstrap which will be easy to code. I have used table in this case which would probably be a better choice in this case.
.mega-menu {
display: block;
overflow: hidden;
position: absolute;
top: 90px;
max-width: 630px;
background: rgb(45, 98, 214);
z-index: 1;
padding: 10px;
}
.mega-menu a {
display: block;
color: white;
margin: 5px;
font-size: 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}
.table,
td {
border: 1px solid white !important;
background-color: blue;
width: 260px !important;
font-weight: 730;
font-size: 22px;
}
td {
padding: 5px 20px !important;
}
* {
color: white !important;
}
.row-reset {
margin-left: 0;
margin-right: 0;
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<div class='container'>
<table class="table table-hover table-bordered font-weight-bolder table-sm mt-5">
<tbody>
<tr>
<td>test 1</td>
<td>test 4 </td>
</tr>
<tr>
<td> test 2</td>
<td>test 5 </td>
</tr>
<tr>
<td> test 3</td>
<td>test 6 </td>
</tr>
</tbody>
</table>
<div>
</div>
Hope this helps !
Related
I am new to css
I am trying to develop a navigation bar for website it works fine when it is in full screen, but when i decrease the size of window few elements came down but the background colour remain intact to first row only.
Here's the code
.navbar {
background-color: rgb(11, 29, 66);
height: 60px;
border-radius: 0px;
}
.navbar ul {
margin: 0px;
padding: 0px;
overflow: auto;
}
.navbar li {
float: left;
list-style: none;
margin: 10px 10px;
border-right: 2px solid gold;
}
.navbar li a {
text-decoration: none;
color: khaki;
padding-right: 0.5cm;
font-family: 'Big Shoulders Stencil Display', cursive;
font-size: 28px;
}
<nav class="navbar">
<ul>
<li>
<img src="favicon-32x32.png" alt="Home">
</li>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
</ul>
</nav>
It's your height property on the navbar. I removed it, run the snippet below:
.navbar {
background-color: rgb(11, 29, 66);
border-radius: 0px;
}
.navbar ul {
margin: 0px;
padding: 0px;
overflow: auto;
}
.navbar li {
float: left;
list-style: none;
margin: 10px 10px;
border-right: 2px solid gold;
}
.navbar li a {
text-decoration: none;
color: khaki;
padding-right: 0.5cm;
font-family: 'Big Shoulders Stencil Display', cursive;
font-size: 28px;
}
<nav class="navbar">
<ul>
<li>
<img src="favicon-32x32.png" alt="Home">
</li>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
</ul>
</nav>
You can add the background color to your .navbar ul
like this :
.navbar ul {
margin: 0px;
padding: 0px;
overflow: auto;
background-color: blue;
}
For some reason Div block shadow is not showing and the last block's shadow is appearing side by side. I don't know what else I need to do. I have z-index and position set to relative but it's still not working as expected.
Edit: I want the blocks to be side by side and responsible.
.main {
padding-top: 10px;
-moz-column-count: 4;
-moz-column-gap: 0;
-webkit-column-count: 4;
-webkit-column-gap: 0;
column-count: 4;
column-gap: 0;
}
.main .columnBlock {
background-color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
margin: 0 4px 8px 8px;
-webkit-box-shadow: 0px 2px #d4d6d8;
-moz-box-shadow: 0px 2px #d4d6d8;
box-shadow: 0px 2px #d4d6d8;
position: relative;
z-index: 999;
}
.column {
display: inline-block;
min-width: 140px;
width: 22%;
vertical-align: top;
padding-top: 8px;
}
.column ul {
margin-top: 4px;
margin-bottom: 1em;
}
.column ul {
display: inline-block;
width: 100%;
vertical-align: baseline;
height: 100%;
}
#media screen and (max-device-width: 9999px) {
.column {
width: 100%;
height: auto;
float: none;
}
}
<div class="main" style="width: 100%;">
<div class="columnBlock">
<div class="column">
<ul>
<li>Data 1</li>
<li>Data 2</li>
<li>Data 3</li>
</ul>
</div>
</div>
<!-- .columnBlock -->
<div class="columnBlock">
<div class="column">
<ul>
<li>Data 1</li>
<li>Data 2</li>
<li>Data 3</li>
</ul>
</div>
</div>
<!-- .columnBlock -->
</div>
<!-- .main -->
I believe this is what you're looking for. I removed the column count and gap, and just using margin and floats with #media queries. I added two more columns so you can see it in action.
HTML:
<div class="main" style="width: 100%;">
<div class="columnBlock">
<div class="column">
<ul>
<li>Data 1</li>
<li>Data 2</li>
<li>Data 3</li>
</ul>
</div>
</div>
<!-- .columnBlock -->
<div class="columnBlock">
<div class="column">
<ul>
<li>Data 1</li>
<li>Data 2</li>
<li>Data 3</li>
</ul>
</div>
</div>
<!-- .columnBlock -->
<div class="columnBlock">
<div class="column">
<ul>
<li>Data 1</li>
<li>Data 2</li>
<li>Data 3</li>
</ul>
</div>
</div>
<!-- .columnBlock -->
<div class="columnBlock">
<div class="column">
<ul>
<li>Data 1</li>
<li>Data 2</li>
<li>Data 3</li>
</ul>
</div>
</div>
<!-- .columnBlock -->
</div>
<!-- .main -->
CSS:
.main {
padding-top: 10px;
display: flex;
flex-wrap: wrap;
}
.main .columnBlock {
background-color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
margin: 0 4px 8px 8px;
-webkit-box-shadow: 0px 2px #d4d6d8;
-moz-box-shadow: 0px 2px #d4d6d8;
box-shadow: 0px 2px #d4d6d8;
position: relative;
z-index: 999;
float: left;
margin: 5px;
}
#media screen and (max-width:767px) {
.columnBlock {
width: calc(50% - 10px);
}
}
#media screen and (min-width:768px) {
.columnBlock {
width: calc(33.3333% - 10px);
}
}
#media screen and (min-width:992px) {
.columnBlock {
width: calc(25% - 10px);
}
}
.column {
display: block;
vertical-align: top;
padding-top: 8px;
}
.column ul {
margin-top: 4px;
margin-bottom: 1em;
}
.column ul {
display: inline-block;
width: 100%;
vertical-align: baseline;
height: 100%;
}
And here's a working fiddle: https://jsfiddle.net/u2h1cwzt/3/
All your shadows are where they are supposed to be and it's responsive.
Edit: added display: flex, to prevent gaps.
EDIT: Without Flex: https://jsfiddle.net/u2h1cwzt/4/
CSS: WITHOUT FLEX
.main {
padding-top: 10px;
}
.main .columnBlock {
background-color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
margin: 0 4px 8px 8px;
-webkit-box-shadow: 0px 2px #d4d6d8;
-moz-box-shadow: 0px 2px #d4d6d8;
box-shadow: 0px 2px #d4d6d8;
position: relative;
z-index: 999;
float: left;
margin: 5px;
}
#media screen and (max-width:767px) {
.columnBlock {
width: calc(50% - 10px);
}
.columnBlock:nth-of-type(odd) {
clear: left;
}
}
#media screen and (min-width:768px) {
.columnBlock {
width: calc(33.3333% - 10px);
}
.columnBlock:nth-of-type(odd) {
clear: none;
}
.columnBlock:nth-of-type(3n+1) {
clear: left;
}
}
#media screen and (min-width:992px) {
.columnBlock {
width: calc(25% - 10px);
clear: none !important;
}
}
.column {
display: block;
vertical-align: top;
padding-top: 8px;
}
.column ul {
margin-top: 4px;
margin-bottom: 1em;
}
.column ul {
display: inline-block;
width: 100%;
vertical-align: baseline;
height: 100%;
}
i think this is what you are looking for (if i understood right). i added angularjs ng-repeat but it's just for convenient. there is also a link for a version with only html and css.
link1 - with angular https://jsfiddle.net/suunyz3e/1408/
link2 - only html and css https://jsfiddle.net/suunyz3e/1410/
html:
<div ng-app="myModule" ng-controller="myCtrl">
<div class="div-item" ng-repeat="item in loopArray">
<ul>
<li>Data 1</li>
<li>Data 2</li>
<li>Data 3</li>
</ul>
</div>
</div>
css:
.div-item{
display:inline-block;
min-width:140px;
background-color:#fff;
margin:5px;
border:1px solid red;
border-radius: 4px;
-webkit-box-shadow: 0px 2px #d4d6d8;
-moz-box-shadow: 0px 2px #d4d6d8;
box-shadow: 0px 2px #d4d6d8;
}
angualrjs
angular.module('myModule', [])
.controller('myCtrl', function ($scope) {
$scope.loopArray = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]
});
I have the following code:
.menu{
border: solid red;
border-width: 1px 1px 0px 1px;
background-color:black;
color:white;
width: 60px;
}
.dropdown{
position:absolute;
background-color: grey;
width:100px;
}
.dropdown ul{
list-style:none;
padding:10px;
margin: 0;
}
.zoom{
zoom:300%;
}
<div class="menu zoom">
Click me
<div class="dropdown">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
How can I place my dropdown menu to the same x position as the parent, without removing the border? I already tried 'box-sizing: border-box', but somehow it doesn't work.
Set position: relative on parent element and on child set position left to same negative value as left border width of parent element.
.menu {
border: solid red;
border-width: 1px 1px 0px 1px;
background-color: black;
color: white;
width: 60px;
position: relative;
}
.dropdown {
position: absolute;
background-color: grey;
width: 100px;
left: -1px;
}
.dropdown ul {
list-style: none;
padding: 10px;
margin: 0;
}
.zoom {
zoom: 300%;
}
<div class="menu zoom">
Click me
<div class="dropdown">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
Keeping the parent as positon:relative and giving the child position:absolte with top:100%; and left:-1px ( where -1 is taken because the width of border is 1 from left)
Here is the working snippet:
.menu {
border: solid red;
border-width: 1px 1px 0px 1px;
background-color: black;
color: white;
width: 60px;
position: relative;
}
.dropdown {
position: absolute;
background-color: grey;
width: 100px;
left: -1px;
top:100%
}
.dropdown ul {
list-style: none;
padding: 10px;
margin: 0;
}
.zoom {
zoom: 300%;
}
<div class="menu zoom">
Click me
<div class="dropdown">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
I have two (almost) clone elements (#container and #container-shadow). The same css rules are supposed to be applied equally to them. However, the second .box3 div element is four times the height it should be. Why is that?
codepen -> http://codepen.io/thiagoh/pen/aJwbOZ
CSS code
#container {
position: relative;
top: -90px;
left: 400px;
float: left;
}
#container-shadow div,
#container div {
width: 280px;
box-sizing: border-box;
position: relative;
}
.box3 {
background-color: lightgray;
line-height: 24px;
padding: 4px;
border: 1px solid black;
}
.box4 {
background-color: darkgray;
border: 1px solid black;
border-top: 0px;
padding: 0;
left: 10px;
}
.box4 ul {
padding: 0;
margin: 0;
}
.box4 li {
list-style: none;
line-height: 24px;
padding: 4px;
border-bottom: 1px solid lightgray;
}
HTML code
<div style="height: 100px;"></div>
<div id="container">
<div class="box3">
</div>
<div class="box4">
<ul>
<li>line 1</li>
<li>line 2</li>
<li>line 3</li>
<li>line 4</li>
</ul>
</div>
</div>
<div id="container-shadow">
<div class="box3">
why this element is this height?
</div>
<div class="box4">
<ul>
<li>line 1</li>
<li>line 2</li>
<li>line 3</li>
<li>line 4</li>
</ul>
</div>
</div>
current result
expected result
PS: Note the position of the boxes. That's the required position in my situation. clear:both on #container-shadow does not fix my problem.
You should not use the float:left on the #container, it should look like this:
#container {
position: relative;
top: -90px;
left: 400px;
}
here is an updated codepen:Codepen
This is because you have a float: left on your #container which is not cleared - add this after the #container:
<div style="clear:both"></div>
to clear the float - see demo below:
#container {
position: relative;
top: -90px;
left: 400px;
float: left;
}
#container-shadow div,
#container div {
width: 280px;
box-sizing: border-box;
position: relative;
}
.box3 {
background-color: lightgray;
line-height: 24px;
padding: 4px;
border: 1px solid black;
}
.box4 {
background-color: darkgray;
border: 1px solid black;
border-top: 0px;
padding: 0;
left: 10px;
}
.box4 ul {
padding: 0;
margin: 0;
}
.box4 li {
list-style: none;
line-height: 24px;
padding: 4px;
border-bottom: 1px solid lightgray;
}
<div style="height: 100px;"></div>
<div id="container">
<div class="box3">
</div>
<div class="box4">
<ul>
<li>line 1</li>
<li>line 2</li>
<li>line 3</li>
<li>line 4</li>
</ul>
</div>
</div>
<div style="clear:both"></div><!-- ADDED THIS -->
<div id="container-shadow">
<div class="box3">
why this element is this height?
</div>
<div class="box4">
<ul>
<li>line 1</li>
<li>line 2</li>
<li>line 3</li>
<li>line 4</li>
</ul>
</div>
</div>
EDIT:
If you don't want the #container-shadow to drop down, you can relatively position it and float it to left using something like this:
#container-shadow {
float: left;
left: -275px;
position: relative;
}
See demo below:
#container {
position: relative;
top: -90px;
left: 400px;
float: left;
}
#container-shadow div,
#container div {
width: 280px;
box-sizing: border-box;
position: relative;
}
.box3 {
background-color: lightgray;
line-height: 24px;
padding: 4px;
border: 1px solid black;
}
.box4 {
background-color: darkgray;
border: 1px solid black;
border-top: 0px;
padding: 0;
left: 10px;
}
.box4 ul {
padding: 0;
margin: 0;
}
.box4 li {
list-style: none;
line-height: 24px;
padding: 4px;
border-bottom: 1px solid lightgray;
}
#container-shadow {
float: left;
left: -275px;
position: relative;
}
<div style="height: 100px;"></div>
<div id="container">
<div class="box3">
</div>
<div class="box4">
<ul>
<li>line 1</li>
<li>line 2</li>
<li>line 3</li>
<li>line 4</li>
</ul>
</div>
</div>
<div id="container-shadow">
<div class="box3">
why this element is this height?
</div>
<div class="box4">
<ul>
<li>line 1</li>
<li>line 2</li>
<li>line 3</li>
<li>line 4</li>
</ul>
</div>
</div>
I would suggest removing float and use inline-block for #container and #container-shadow (note that I have swapped their position in the markup) and then apply positioning to the #container to get the desired result:
#container {
position: relative;
top: -90px;
left: 50px;
display: inline-block;
}
#container-shadow {
display: inline-block;
}
#container-shadow div,
#container div {
width: 280px;
box-sizing: border-box;
position: relative;
}
.box3 {
background-color: lightgray;
line-height: 24px;
padding: 4px;
border: 1px solid black;
}
.box4 {
background-color: darkgray;
border: 1px solid black;
border-top: 0px;
padding: 0;
left: 10px;
}
.box4 ul {
padding: 0;
margin: 0;
}
.box4 li {
list-style: none;
line-height: 24px;
padding: 4px;
border-bottom: 1px solid lightgray;
}
<div style="height: 100px;"></div>
<div id="container-shadow">
<div class="box3">
why this element is this height?
</div>
<div class="box4">
<ul>
<li>line 1</li>
<li>line 2</li>
<li>line 3</li>
<li>line 4</li>
</ul>
</div>
</div>
<div id="container">
<div class="box3">
</div>
<div class="box4">
<ul>
<li>line 1</li>
<li>line 2</li>
<li>line 3</li>
<li>line 4</li>
</ul>
</div>
</div>
The solution is simple.
Remove this:
float: left;
An element with position: relative; is positioned relative to its normal position.
Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.
The float: left attempts to force container-shadow to occupy this space causing distortion.
It's your same code just comment the float:
#container {
position: relative;
top: -90px;
left: 400px;
/* float: left;*/
}
#container-shadow div,
#container div {
width: 280px;
box-sizing: border-box;
position: relative;
}
.box3 {
background-color: lightgray;
line-height: 24px;
padding: 4px;
border: 1px solid black;
}
.box4 {
background-color: darkgray;
border: 1px solid black;
border-top: 0px;
padding: 0;
left: 10px;
}
.box4 ul {
padding: 0;
margin: 0;
}
.box4 li {
list-style: none;
line-height: 24px;
padding: 4px;
border-bottom: 1px solid lightgray;
}
I need to create an unordered list as menu for a small project. There are 3 categories and 9 workshops. For every workshop I want to put a little image on the left and a css circle on the right.
I really want to do it as correctly as possible but I am a beginner so I am not sure about the best practices.
Here is my code :
ul#menu {
display: inline-block;
width: 285px;
padding-left: 0;
border: 1px solid #000;
border-bottom: 0;
list-style-type: none;
}
ul#menu ul {
padding-left: 0;
}
ul#menu > li > span {
display: block;
height: 35px;
border-bottom: 1px solid #000;
background-color: #4D4D4D;
color: #FAFAFA;
font-size: 18px;
text-align: center
}
ul#menu > li:first-child {
height: 50px;
background-color: #E0E0E0;
color: #050505;
}
ul#menu ul li {
height: 35px;
padding-left: 0;
background-color: #007CB7;
color: #FAFAFA;
font-size: 14px;
border-bottom: 1px solid #000;
}
ul#menu ul li:hover {
background-color: #8BBDD9;
color: #050505;
font-weight: bold;
list-style-type: none;
}
<ul id="menu">
<li>
<span>Category 1</span>
<ul>
<li>Workshop 1</li>
</ul>
</li>
<li>
<span>Category 2</span>
<ul>
<li>Workshop 2</li>
</ul>
</li>
<li>
<span>Category 3</span>
<ul>
<li>Workshop 3</li>
<li>Workshop 4</li>
<li>Workshop 5</li>
<li>Workshop 6</li>
<li>Workshop 7</li>
<li>Workshop 8</li>
<li>Workshop 9</li>
</ul>
</li>
</ul>
Is that the best way for this ? On my code, it misses the image and the circle. Can you please give me some tips / advices to do it ?
I attache a screenshot of the result I want to reach.My menu
Many Thanks.
you can use :before and :after pseudo-elements, add your desired styling to css. Also, most people think, that direct id targeting is better(ul#menu -> #menu)
#menu {
display: inline-block;
width: 285px;
padding-left: 0;
border: 1px solid #000;
border-bottom: 0;
list-style-type: none;
}
#menu ul {
padding-left: 0;
}
ul#menu > li > span {
display: block;
height: 35px;
border-bottom: 1px solid #000;
background-color: #4D4D4D;
color: #FAFAFA;
font-size: 18px;
text-align: center
}
#menu > li:first-child {
height: 50px;
background-color: #E0E0E0;
color: #050505;
}
ul#menu ul li {
height: 35px;
padding-left: 0;
background-color: #007CB7;
color:#FAFAFA;
font-size: 14px;
border-bottom: 1px solid #000;
}
#menu ul li:hover {
background-color: #8BBDD9;
color: #050505;
font-weight:bold;
list-style-type: none;
}
/* ADDED */
#menu ul li:before{
content:"";
width:1em;
height:1em;
overflow:hidden;
margin-right:0.5em;
background: /* your image*/ red;
display:inline-block;
}
#menu ul li:after{
content:"•";
}
<ul id="menu">
<li>
<span>Category 1</span>
<ul>
<li>Workshop 1</li>
</ul>
</li>
<li>
<span>Category 2</span>
<ul>
<li>Workshop 2</li>
</ul>
</li>
<li>
<span>Category 3</span>
<ul>
<li>Workshop 3</li>
<li>Workshop 4</li>
<li>Workshop 5</li>
<li>Workshop 6</li>
<li>Workshop 7</li>
<li>Workshop 8</li>
<li>Workshop 9</li>
</ul>
</li>
</ul>
Like Pepo_rasta has written: You can use Pseudo-elements.
For getting a circle you can use border-radius. Give it a value of 50%.
Example:
ul#menu li li:before {
content: '';
display: inline-block;
height: 10px;
width: 10px;
background-color: white;
border-radius: 50%;
margin: 0 5px;
}
Adding the image should be possible with background-image.
background-position: right;
background-image: url(http://placehold.it/350x150);
background-size: 10px 10px;
background-repeat: no-repeat;
You also could use a table.
If you replace the background-color with your background images it should look like your screenshot.
th{
background-color: grey;
}
td{
background-color: yellow;
}
#circle{
background-color: green;
width : 25px;
}
#pic{
width:25px;
background-color: blue;
}
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<table cellspacing="0" cellpadding="0">
<tr>
<th colspan="3">
category 1
</th>
</tr>
<tr>
<td id="pic"></td>
<td>workshop1</td>
<td id="circle"></td>
</tr>
<tr>
<th colspan="3">
category 2
</th>
</tr>
<tr>
<td id="pic"></td>
<td>workshop2</td>
<td id="circle"></td>
</tr>
<tr>
<th colspan="3">
category 2
</th>
</tr>
<tr>
<td id="pic"></td>
<td>workshop3</td>
<td id="circle"></td>
</tr>
<tr>
<td id="pic"></td>
<td>workshop4</td>
<td id="circle"></td>
</tr>
</table>
</body>
</html>
Plunker