I want to separate the screen into three columns using a ul tag, and I want to have a normal (vertical) list inside the first column. I tried this but it does not work:
<ul id="content_seperator">
<li class="content_left">
<ul id="vertical-nav">
<li>Menu1</li>
<li> Menu2 </li>
<li> Menu3 </li>
<li> Menu4 </li>
<li> Menu5 </li>
</ul>
</li>
<li class="content_middle"></li>
<li class="content_right"></li>
</ul>
Try the following code. I hope it helps.
#content_seperator,
.content_left,
.content_middle,
.content_right {
display: flex;
}
.content_left,
.content_middle,
.content_right {
flex: 1 1 0
}
<ul id="content_seperator">
<li class="content_left">
<ul id="vertical-nav">
<li>Menu1</li>
<li> Menu2 </li>
<li> Menu3 </li>
<li> Menu4 </li>
<li> Menu5 </li>
</ul>
</li>
<li class="content_middle">Middle</li>
<li class="content_right">Right</li>
</ul>
you may use,
#content_seperator{
display: block;
}
#content_seperator li{
display: inline-block;
vertical-align: top;
}
#content_seperator li ul li{
display: block;
}
you can give width for 'li' by using class.
Related
I've the following code with nested list items as shown below:
<ul style={{padding-top: '15px'}}>
<li style={{margin-left: '20px'}}>First Services</li>
<ul style={{margin-left: '30px'}}>
<li>get1</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get2</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get3</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get4</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get5</li>
</ul>
<li style={{margin-left: '20px'}}>Second Services</li>
<ul style={{margin-left: '30px'}}>
<li>get6</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get7</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get8</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get9</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get10</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get11</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get12</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get13 </li>
</ul>
<li style={{margin-left: '20px'}}>Workflows</li>
<ul style={{margin-left: '30px'}}>
<li>Workflow for someone </li>
</ul>
</ul>
My Goal:
I want some space between the following:
1) First Services and get1
2) get5 and Second Services
3) Second Services and get6
4) get13 and Workflows
5)Workflows and Workflow for someone
How should I go about it? Is adding an empty paragraph tag <p></p> a good idea between each of the above 5 things?
if you mean horizontal space (white space), use:   ;
if you mean vertical space, try: (CSS property) line-height, padding
or margin.
you might want to remove this from being inline and use your linked stylesheet instead as it might cause issues with your styling.
You should use classes for this. Right now, the simplest way is to wrap a div around your whole list, apply a class to it (in my example I used parent_class) and use this selector: div.parent_class > ul >li It only selects the li elements of the first level ul:
div.parent_class > ul >li {
margin-top: 10px;
margin-bottom: 10px;
}
<div class="parent_class">
<ul style="padding-top:15px;">
<li style="margin-left:20px">First Services</li>
<ul style="margin-left:30px">
<li>get1</li>
</ul>
<ul style="margin-left:30px">
<li>get2</li>
</ul>
<ul style="margin-left:30px">
<li>get3</li>
</ul>
<ul style="margin-left:30px">
<li>get4</li>
</ul>
<ul style="margin-left:30px">
<li>get5</li>
</ul>
<li style="margin-left:20px">Second Services</li>
<ul style="margin-left:30px">
<li>get6</li>
</ul>
<ul style="margin-left:30px">
<li>get7</li>
</ul>
<ul style="margin-left:30px">
<li>get8</li>
</ul>
<ul style="margin-left:30px">
<li>get9</li>
</ul>
<ul style="margin-left:30px">
<li>get10</li>
</ul>
<ul style="margin-left:30px">
<li>get11</li>
</ul>
<ul style="margin-left:30px">
<li>get12</li>
</ul>
<ul style="margin-left:30px">
<li>get13 </li>
</ul>
<li style="margin-left:20px">Workflows</li>
<ul style="margin-left:30px">
<li>Workflow for someone </li>
</ul>
</ul>
</div>
.example-list {
margin:0px;
}
.example-list > li {
margin: 30px 0px;
}
<ul class="example-list">
<li>First Services</li>
<ul>
<li>get1</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get2</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get3</li>
</ul>
<ul>
<li>get4</li>
</ul>
<ul>
<li>get5</li>
</ul>
<li style={{margin-left: '20px'}}>Second Services</li>
<ul>
<li>get6</li>
</ul>
<ul>
<li>get7</li>
</ul>
<ul>
<li>get8</li>
</ul>
<ul>
<li>get9</li>
</ul>
<ul>
<li>get10</li>
</ul>
<ul>
<li>get11</li>
</ul>
<ul>
<li>get12</li>
</ul>
<ul>
<li>get13 </li>
</ul>
<li style={{margin-left: '20px'}}>Workflows</li>
<ul>
<li>Workflow for someone </li>
</ul>
</ul>
I would do the following (or something similar - keep in mind it's not good practice to have <ul> as a child of another <ul> - you can validate here: http://validator.w3.org/). Remove the inline styles, you'll deal with A LOT of headaches later if you write you CSS as you have. Set classnames for the bits you want extra space for (you can edit the {{20px}} below for how much space you want (or if you want left/right margins, you can edit the whole rule).
<style>
.title {
margin-left: 20px;
}
.top-list {
padding-top: 15px;
}
.top-list .spacer-top {
margin-top: {{20px}};
}
.top-list > li > ul {
margin-left: 30px;
}
</style>
<ul class="top-list">
<li class="title">First Services</li>
<li class="spacer-top">
<ul>
<li>get1</li>
</ul>
</li>
<li>
<ul>
<li>get2</li>
</ul>
</li>
<li>
<ul>
<li>get3</li>
</ul>
</li>
<li>
<ul>
<li>get4</li>
</ul>
</li>
<li>
<ul>
<li>get5</li>
</ul>
</li>
<li class="title" class="spacer-top">Second Services</li>
<li class="spacer-top">
<ul>
<li>get6</li>
</ul>
</li>
<li>
<ul>
<li>get7</li>
</ul>
</li>
<li>
<ul>
<li>get8</li>
</ul>
</li>
<li>
<ul>
<li>get9</li>
</ul>
</li>
<li>
<ul>
<li>get10</li>
</ul>
</li>
<li>
<ul>
<li>get11</li>
</ul>
</li>
<li>
<ul>
<li>get12</li>
</ul>
</li>
<li>
<ul>
<li>get13 </li>
</ul>
</li>
<li class="title spacer-top">Workflows</li>
<li class="spacer-top">
<ul>
<li>Workflow for someone </li>
</ul>
</li>
</ul>
I have this simple HTML
<ul>
<li class="item">
Parent
<ul class="sub-items">
<li>Child</li>
<li>Child</li>
</ul>
</li>
<li class="item">
Parent
<ul class="sub-items">
<li>Child</li>
<li>Child</li>
</ul>
</li>
<li class="item">
Parent
<ul class="sub-items">
<li>Child</li>
<li>Child</li>
</ul>
</li>
</ul>
And this simple CSS
<style>
.sub-items {
display: none;
}
.item:hover .sub-items {
display: block;
}
</style>
This works in desktop, however, in mobile, when you touch on the second or third parent you automatically open the child url. How could I avoid this without using javascript?
Thanks in advance
According to mobile device hover features work as click or active events so better approach is .item:active .sub-items { display: block;} can we use through media query
.sub-items {
display: none;
}
#media only screen and (max-width:1240px) {
.item:hover .sub-items {
display: block;
}
}
#media only screen and (max-width:480px) {
.item:active .sub-items {
display: block;
color:red
}
}
<ul>
<li class="item">
Parent
<ul class="sub-items">
<li>Child</li>
<li>Child</li>
</ul>
</li>
<li class="item">
Parent
<ul class="sub-items">
<li>Child</li>
<li>Child</li>
</ul>
</li>
<li class="item">
Parent
<ul class="sub-items">
<li>Child</li>
<li>Child</li>
</ul>
</li>
</ul>
I have been struggling with HTML and CSS and i am trying to get the list in my drop down to display side by side, inline and center? Once i have figured out the correct method i will use the div with the class names "left", "middle" and "right" on all the drop down menus.
here is a pic of what i have got to:
So like you can see in the bath dropdown in the image above i have them in 3 columns they are not inline and there is a gap either side i cannot seem to remove? eventually i will have an extra column on each dropdown which will have a image in it.
Any help would be great and as with all my questions so far a brief description of why would be awesome just so i can get a better understanding as i am learning as i go.
here is a fiddle
https://jsfiddle.net/qesmow58/5/
.header-menu-wrap {
display: inline-block;
width: 100%;
text-align: center;
}
.headermenu {
padding: 0 10% 0 10%;
height: 30px;
background-color: #17D8C7;
}
.headermenu a {
text-decoration: none;
}
.headermenu>ul>li>a {
display: inline-block;
text-align: center;
text-decoration: none;
color: white;
}
.headermenu ul {
padding-left: 0;
list-style: none;
}
.headermenu .arrow {
line-height: 0%;
font-size: 8px
}
.headermenu>ul>li {
position: relative;
display: inline-block;
vertical-align: top;
margin-left: 0.5%;
margin-right: 0.5%;
line-height: 30px;
}
.headermenu>ul>li>div {
display: none;
position: absolute;
top: 100%;
border: 1px solid #aa2ebf;
background-color: white;
width: 450px;
}
.headermenu>ul>li:hover>div {
display: block;
}
.left,
.middle,
.right {
display: inline-block;
}
<div class="header-menu-wrap">
<nav class="headermenu">
<ul>
<li>Home</li>
<li>ON SALE</li>
<li>Suites</li>
<li>Baths<span class="arrow">▼</span>
<div>
<div class="left">
<ul class="bathdropdown1">
<li>
<h3>Bath Types</h3>
</li>
<li>Standard</li>
<li>L-Shaped</li>
<li>B-Shaped</li>
</ul>
</div>
<div class="middle">
<ul class="bathdropdown2">
<li>
<h3>Bath Accessories</h3>
</li>
<li>Bath Screens</li>
<li>Bath Panels</li>
</ul>
</div>
<div class="right">
<ul class="bathdropdown3">
<li>
<h3>All Baths</h3>
</li>
<li>All</li>
</ul>
</div>
</div>
</li>
<li>Toilets<span class="arrow">▼</span>
<div>
<ul class="toiletdropdown1">
<li>
<h3>Toilet Style</h3>
</li>
<li>Back to Wall</li>
<li>Close Coupled</li>
<li>Comfort Height</li>
<li>Fully Back to Wall</li>
<li>Low Level</li>
<li>Toilet and Basin Units</li>
</ul>
<ul class="toiletdropdown2">
<li>
<h3>Toilet Accessories</h3>
</li>
<li>Concealed Cisterns</li>
</ul>
<ul class="toiletdropdown3">
<li>
<h3>All Toilet Types</h3>
</li>
<li>All</li>
</ul>
</div>
</li>
<li>Basins<span class="arrow">▼</span>
<div>
<ul class="basindropdown1">
<li>
<h3>Style</h3>
</li>
<li>Basin and Pedestal</li>
<li>Cloakroom</li>
</ul>
<ul class="basindropdown2">
<li>
<h3>All Basins</h3>
</li>
<li>All Basins</li>
</ul>
</div>
</li>
<li>Shower Enclosures<span class="arrow">▼</span>
<div>
<ul class="showerenclosuredropdown1">
<li>
<h3>Amelia Enclosures
<h3>
</li>
<li>Amelia Bifold Door</li>
<li>Amelia Enclosure Side Panels</li>
<li>Amelia Pivot Door</li>
<li>Amelia Quadrant Enclosure</li>
<li>Amelia Sliding Door</li>
</ul>
<ul class="showerenclosuredropdown2">
<li>
<h3>Sienna Enclosures</h3>
</li>
<li>Sienna Quadrant</li>
<li>Sienna Bifold Door</li>
<li>Sienna Pivot Door</li>
<li>Sienna Sliding Door</li>
<li>Sienna Wet Room Screen</li>
<li>Sienna Enclosure Side Panels</li>
</ul>
<ul class="showerenclosuredropdown3">
<li>
<h3>Show Trays</h3>
</li>
<li>Shower Trays</li>
<li>Riser Kits</li>
</ul>
</div>
</li>
<li>Furniture<span class="arrow">▼</span>
<div>
<ul class="furnituredropdown1">
<li>
<h3>Collection</h3>
</li>
<li>Bella Collection</li>
<li>Caprice Collection</li>
<li>Gino Collection</li>
<li>Shine Collection</li>
<li>Sienna Collection</li>
<li>Valentino Collection</li>
</ul>
<ul class="furnituredropdown2">
<li>
<h3>Unit Type</h3>
</li>
<li>Vanity Unit and Basin</li>
<li>Wall Vanity Unit and Basin</li>
<li>Corner Vanity Unit and Basin</li>
<li>Back to Wall Units</li>
<li>Cupboard Units</li>
<li>Mini Units</li>
</ul>
</div>
</li>
<li>Showers<span class="arrow">▼</span>
<div>
<ul class="showersdropdown1">
<li>
<h3>Style</h3>
</li>
<li>Round Head</li>
<li>Square Head</li>
</ul>
</div>
</li>
<li>Taps<span class="arrow">▼</span>
<div>
<ul class="tapsdropdown1">
<li>
<h3>Bathroom Taps</h3>
</li>
<li>Mono Mixer</li>
<li>Bath Shower Mixer</li>
<li>Mini Mono Mixer</li>
<li>Bath Filler</li>
</ul>
<ul class="tapsdropdown2">
<li>
<h3>Kitchen Taps</h3>
</li>
<li>All</li>
</ul>
<ul class="tapsdropdown3">
<li>
<h3>All Taps</h3>
</li>
<li>All</li>
</ul>
</div>
</li>
<li>Accessories<span class="arrow">▼</span>
<div>
<ul class="accessoriesdropdown1">
<li>Wastes</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
Add this to your css
.left, .middle, .right {
float: left;
width: 33.3%;
box-sizing: border-box;
}
https://jsfiddle.net/qesmow58/8/
Give the div a class which you have used to wrap drop-down items so that you can be specific for that particular div. Here i have given sub-menu-container class to it
Add vertical-align: top to .left, .middle, .right. this is
because you have set display: inline-block to them.
.header-menu-wrap {
display: inline-block;
width: 100%;
text-align: center;
}
.headermenu {
padding: 0 10% 0 10%;
height: 30px;
background-color: #17D8C7;
}
.headermenu a {
text-decoration: none;
}
.headermenu > ul > li > a {
display: inline-block;
text-align: center;
text-decoration: none;
color: white;
}
.headermenu ul {
padding-left: 0;
list-style: none;
}
.headermenu .arrow {
line-height: 0%;
font-size: 8px
}
.headermenu > ul > li {
position: relative;
display: inline-block;
vertical-align: top;
margin-left: 0.5%;
margin-right: 0.5%;
line-height: 30px;
}
.headermenu > ul > li > div.sub-menu-container {
display: none;
position: absolute;
top: 100%;
border: 1px solid #aa2ebf;
background-color: white;
width: 450px;
}
.headermenu > ul > li:hover > div {
display: block;
}
.left, .middle, .right {
display: inline-block;
vertical-align: top;
}
<div class="header-menu-wrap">
<nav class="headermenu">
<ul>
<li>Home</li>
<li>ON SALE</li>
<li>Suites</li>
<li>
Baths<span class="arrow">▼</span>
<div class="sub-menu-container">
<div class="left">
<ul class="bathdropdown1">
<li>
<h3>Bath Types</h3>
</li>
<li>Standard</li>
<li>L-Shaped</li>
<li>B-Shaped</li>
</ul>
</div>
<div class="middle">
<ul class="bathdropdown2">
<li>
<h3>Bath Accessories</h3>
</li>
<li>Bath Screens</li>
<li>Bath Panels</li>
</ul>
</div>
<div class="right">
<ul class="bathdropdown3">
<li>
<h3>All Baths</h3>
</li>
<li>All</li>
</ul>
</div>
</div>
</li>
<li>
Toilets<span class="arrow">▼</span>
<div class="sub-menu-container">
<ul class="toiletdropdown1">
<li>
<h3>Toilet Style</h3>
</li>
<li>Back to Wall</li>
<li>Close Coupled</li>
<li>Comfort Height</li>
<li>Fully Back to Wall</li>
<li>Low Level</li>
<li>Toilet and Basin Units</li>
</ul>
<ul class="toiletdropdown2">
<li>
<h3>Toilet Accessories</h3>
</li>
<li>Concealed Cisterns</li>
</ul>
<ul class="toiletdropdown3">
<li>
<h3>All Toilet Types</h3>
</li>
<li>All</li>
</ul>
</div>
</li>
<li>
Basins<span class="arrow">▼</span>
<div class="sub-menu-container">
<ul class="basindropdown1">
<li>
<h3>Style</h3>
</li>
<li>Basin and Pedestal</li>
<li>Cloakroom</li>
</ul>
<ul class="basindropdown2">
<li>
<h3>All Basins</h3>
</li>
<li>All Basins</li>
</ul>
</div>
</li>
<li>
Shower Enclosures<span class="arrow">▼</span>
<div class="sub-menu-container">
<ul class="showerenclosuredropdown1">
<li>
<h3>Amelia Enclosures</h3>
</li>
<li>Amelia Bifold Door</li>
<li>Amelia Enclosure Side Panels</li>
<li>Amelia Pivot Door</li>
<li>Amelia Quadrant Enclosure</li>
<li>Amelia Sliding Door</li>
</ul>
<ul class="showerenclosuredropdown2">
<li>
<h3>Sienna Enclosures</h3>
</li>
<li>Sienna Quadrant</li>
<li>Sienna Bifold Door</li>
<li>Sienna Pivot Door</li>
<li>Sienna Sliding Door</li>
<li>Sienna Wet Room Screen</li>
<li>Sienna Enclosure Side Panels</li>
</ul>
<ul class="showerenclosuredropdown3">
<li>
<h3>Show Trays</h3>
</li>
<li>Shower Trays</li>
<li>Riser Kits</li>
</ul>
</div>
</li>
<li>
Furniture<span class="arrow">▼</span>
<div class="sub-menu-container">
<ul class="furnituredropdown1">
<li>
<h3>Collection</h3>
</li>
<li>Bella Collection</li>
<li>Caprice Collection</li>
<li>Gino Collection</li>
<li>Shine Collection</li>
<li>Sienna Collection</li>
<li>Valentino Collection</li>
</ul>
<ul class="furnituredropdown2">
<li>
<h3>Unit Type</h3>
</li>
<li>Vanity Unit and Basin</li>
<li>Wall Vanity Unit and Basin</li>
<li>Corner Vanity Unit and Basin</li>
<li>Back to Wall Units</li>
<li>Cupboard Units</li>
<li>Mini Units</li>
</ul>
</div>
</li>
<li>
Showers<span class="arrow">▼</span>
<div class="sub-menu-container">
<ul class="showersdropdown1">
<li>
<h3>Style</h3>
</li>
<li>Round Head</li>
<li>Square Head</li>
</ul>
</div>
</li>
<li>
Taps<span class="arrow">▼</span>
<div class="sub-menu-container">
<ul class="tapsdropdown1">
<li>
<h3>Bathroom Taps</h3>
</li>
<li>Mono Mixer</li>
<li>Bath Shower Mixer</li>
<li>Mini Mono Mixer</li>
<li>Bath Filler</li>
</ul>
<ul class="tapsdropdown2">
<li>
<h3>Kitchen Taps</h3>
</li>
<li>All</li>
</ul>
<ul class="tapsdropdown3">
<li>
<h3>All Taps</h3>
</li>
<li>All</li>
</ul>
</div>
</li>
<li>
Accessories<span class="arrow">▼</span>
<div class="sub-menu-container">
<ul class="accessoriesdropdown1">
<li>Wastes</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
Working fiddle here
I want to select with css the last of child <li> that text appear gg
I want only select Last gg <li> Please Help
ul {
margin: 0;
padding: 0;
}
.container ul li + li:nth-last-child(1) li:last-child {
border: 1px solid red
}
<div class="container">
<ul class="ng-scope">
<li>
<ul>
<li>a</li>
</ul>
</li>
<li>
aa
<ul>
<li>
bb
<ul>
<li>
cc
<ul>
<li>
dd
<ul>
<li>
ee
<ul>
<li>
ff
<ul>
<li>
gg
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Try this
ul { margin:0; padding:0;}
.gg{
color:red;
}
<div class="container">
<ul class="ng-scope">
<li>
<ul>
<li>a</li>
</ul>
</li>
<li>
aa
<ul>
<li>
bb
<ul>
<li>
cc
<ul>
<li>
dd
<ul>
<li>
ee
<ul>
<li>
ff
<ul>
<li class="gg">
gg
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
I have a div like below i need to align the 3 ul which is inside the li in single row using css.
<div id="printEmilCountDiv" >
<li id="reports-print-email-count">
<ul id="reports-print-email-count-container">
<li>Print count:</li>
<li id="printCount"></li>
</ul>
<ul >
<li>Email count:</li>
<li id="emailCount"></li>
</ul>
<ul >
<li>Other count:</li>
<li id="otherCount"></li>
</ul>
</li>
</div>
As like this
try to this code
#printEmilCountDiv, #printEmilCountDiv *{
list-style-type:none;
margin:0;padding:0;
}
#printEmilCountDiv ul{display:inline-block;vertical-align:top; border:solid 1px red;}
<ul id="printEmilCountDiv" >
<li id="reports-print-email-count">
<ul id="reports-print-email-count-container">
<li>Print count:</li>
<li id="printCount">po</li>
</ul>
<ul >
<li>Email count:</li>
<li id="emailCount">ec</li>
</ul>
<ul >
<li>Other count:</li>
<li id="otherCount"oc>oc</li>
</ul>
</li>
</ul>
Or this like
#printEmilCountDiv, #printEmilCountDiv *{
list-style-type:none;
margin:0;padding:0;
}
#printEmilCountDiv ul{display:inline-block;vertical-align:top; border:solid 1px red;}
#printEmilCountDiv ul li{display:inline-block;vertical-align:top;}
<ul id="printEmilCountDiv" >
<li id="reports-print-email-count">
<ul id="reports-print-email-count-container">
<li>Print count:</li>
<li id="printCount">po</li>
</ul>
<ul >
<li>Email count:</li>
<li id="emailCount">ec</li>
</ul>
<ul >
<li>Other count:</li>
<li id="otherCount"oc>oc</li>
</ul>
</li>
</ul>
You may remove the first li and replace it with div. Then apply a styling like;
ul{
margin-top: 0;
margin-bottom: 0;
}
Which trims the margin. Here is a demo
And you may add float: left; to either ul or li to align them in a row, like this