I want to create my own calendar using css ul's and li's. Most calendars I have seen on the web use this way better than a table(don't know why is that). I have created some basic layout of the calendar, but seem to have a problem with aligning the day titles on top of the calendar. I am new to css so please be gentle with me. I know I could get one ready, but I like learning by doing and asking. So here is my code and the jsfiddle
<div id="calendar-month">
<ul class="title">
<div class="days-title">
<li>Mon</li>
<li>Tue</li>
<li>Wen</li>
<li>Thu</li>
<li>Fri</li>
<li>Sat</li>
<li>Sun</li>
</div>
</ul>
<div class="days">
<ul class="days-item">
<li></li>
<li></li>
<li></li>
<li></li>
<li>
<span class="day-label">1</span>
</li>
<li>
<span class="day-label">2</span>
</li>
<li>
<span class="day-label">3</span>
</li>
<li>
<span class="day-label">4</span>
</li>
<li>
<span class="day-label">5</span>
</li>
<li>
<span class="day-label">6</span>
</li>
<li>
<span class="day-label">7</span>
</li>
<li>
<span class="day-label">8</span>
</li>
<li>
<span class="day-label">9</span>
</li>
<li>
<span class="day-label">10</span>
</li>
<li>
<span class="day-label">11</span>
</li>
<li>
<span class="day-label">12</span>
</li>
<li>
<span class="day-label">13</span>
</li>
<li>
<span class="day-label">14</span>
</li>
<li>
<span class="day-label">15</span>
</li>
<li>
<span class="day-label">16</span>
</li>
<li>
<span class="day-label">17</span>
</li>
<li>
<span class="day-label">18</span>
</li>
<li>
<span class="day-label">19</span>
</li>
<li>
<span class="day-label">20</span>
</li>
<li>
<span class="day-label">21</span>
</li>
<li>
<span class="day-label">22</span>
</li>
<li>
<span class="day-label">23</span>
</li>
<li>
<span class="day-label">24</span>
</li>
<li>
<span class="day-label">25</span>
</li>
<li>
<span class="day-label">26</span>
</li>
<li>
<span class="day-label">27</span>
</li>
<li>
<span class="day-label">28</span>
</li>
<li>
<span class="day-label">29</span>
</li>
<li>
<span class="day-label">30</span>
</li>
<li>
<span class="day-label"></span>
</li>
</ul>
</div>
</div>
and the css
* {
margin:0px;
padding: 0px;
}
#calendar-month{
margin:auto;
width: 600px;
height: 480px;
background-color:#C2CCD1
}
.title {
margin:auto;
}
.title .days-title li{
list-style: none;
display: inline-block;
padding-left:0.5em;
padding-right:0.5em;
}
.days{
margin:auto;
width:600px;
height:475px;
}
#calendar-month .days-item li{
list-style: none;
display:inline-block;
float: left;
width:70px;
height:86px;
background-color:white;
border:1px solid black;
margin-left:4px;
padding-left:8px;
margin-bottom:2px;
}
.day-label{
float:right;
padding-right: 7px;
padding-top: 2px;
}
It migth not be the right way, maybe you could offer me a better way to understand paddings and margins or how to group them more properly. No it's not homework or anything else :), just getting inot design small step at a time :)
It's because you haven't applied the same properties to .title .days-title li as you have #calendar-month .days-item li. Specifically, width, padding and margin.
Add these to .title .days-title li:
width: 70px;
margin-left: 4px;
padding-left: 8px;
WORKING FIDDLE
If your days have a fixed width of 70px, why not add the CSS:
.days-title li{
width:64px;
text-align:center;
}
Fiddle
Related
I've been researching for hours trying to figure out this issue. I want to display sidebar with 100% height responsively without position: fixed/absolute, is this possible to do it?
.sidebar {
height: 100%;
width: 40%;
border-right: none;
background: blue;
}
<div class="sidebar">
<p class="menu-section-head text-left">MENU UTAMA</p>
<nav class="sidebar-nav">
<ul>
<li>
<span>Menu 1</span>
<hr class="underline">
</li>
<li>
<span>Menu 2</span>
<hr class="underline">
</li>
<li>
<span>Menu 3</span>
<hr class="underline">
</li>
</ul>
</nav>
</div>
Use 100vh in place 100% in height.
.sidebar {
height: 100vh;
width: 40%;
border-right: none;
background: blue;
}
<div class="sidebar">
<p class="menu-section-head text-left">MENU UTAMA</p>
<nav class="sidebar-nav">
<ul>
<li>
<span>Menu 1</span>
<hr class="underline">
</li>
<li>
<span>Menu 2</span>
<hr class="underline">
</li>
<li>
<span>Menu 3</span>
<hr class="underline">
</li>
</ul>
</nav>
</div>
does switching from 100% to 100vh (viewer height) accomplish what you are looking for? % mimics the parent contianer, vh uses the window.
.sidebar {
height: 100vh;
width: 40%;
border-right: none;
background: blue;
}
<div class="sidebar">
<p class="menu-section-head text-left">MENU UTAMA</p>
<nav class="sidebar-nav">
<ul>
<li>
<span>Menu 1</span>
<hr class="underline">
</li>
<li>
<span>Menu 2</span>
<hr class="underline">
</li>
<li>
<span>Menu 3</span>
<hr class="underline">
</li>
</ul>
</nav>
</div>
I have this (simplified) navigation:
.ctmenu {
display: none;
float: right;
}
li:hover > .ctmenu {
display: inline-block;
}
<ul class="menu">
<li>
<span class="ctmenu">CT Menu</span>
Main page
<ul class="menu sub">
<li>
<span class="ctmenu">CT Menu</span>
Sub page
</li>
</ul>
</li>
</ul>
When I hover an li, the direct child .ctmenu should be visible. That works, but I only wan't the element that the mouse is currently on to show .ctmenu. When I hover "Sub menu", .ctmenu for "Main page" is also visible, because I'm hovering that too.
I'd prefer a CSS-fix only, but javascript/jQuery can be okay.
EDIT:
I made a little mistake in my first example that I can see from the answers is important:
The .ctmenu is before the a in the structure and with a float:right, so I can't use the a + .ctmenu selector. Is there an equivalent the other way around?
You need to add one extra div after LI tag. Please check below example
.ctmenu {
display: none;
float: right;
}
.ct-div:hover > .ctmenu {
display: inline-block;
}
<ul class="menu">
<li>
<div class="ct-div">
<span class="ctmenu">CT Menu</span>
Main page
</div>
<ul class="menu sub">
<li>
<div class="ct-div">
<span class="ctmenu">CT Menu</span>
Sub page
</div>
</li>
</ul>
</li>
</ul>
Try This:
.ctmenu { display: none; }
li a:hover + .ctmenu, .ctmenu:hover { display: inline-block; }
<ul class="menu">
<li>
Main page<span class="ctmenu">C Menu 1</span>
<ul class="menu sub">
<li>
Sub page<span class="ctmenu">C Menu 2</span>
</li>
</ul>
</li>
</ul>
Try This:
.ctmenu { display:none }
li a:hover+.ctmenu,
.ctmenu:hover {
display: inline-block;
}
<ul class="menu">
<li>
Main page
<span class="ctmenu">Demo 1</span>
<span class="ctmenu">Demo 2</span>
<span class="ctmenu">Demo 3</span>
<span class="ctmenu">Demo 4</span>
<ul class="menu sub">
<li>
Sub page
<span class="ctmenu">Demo 1</span>
<span class="ctmenu">Demo 2</span>
<span class="ctmenu">Demo 3</span>
<span class="ctmenu">Demo 4</span>
</li>
</ul>
</li>
</ul>
If the HTML structure doesn't change, you can do it with JavaScript, because there is no parent selector in CSS.
With the usage of mouseover, mouseout and classList, you can do something like:
var menu = document.querySelector(".menu");
var items = menu.querySelectorAll("li");
[].forEach.call(items, function(item) {
item.addEventListener("mouseover", function(e) {
e.stopPropagation();
this.children[0].classList.add("active");
});
item.addEventListener("mouseout", function(e) {
e.stopPropagation();
this.children[0].classList.remove("active");
});
})
.ctmenu {
display: none;
float: right;
}
.active {
display: inline-block;
}
<ul class="menu">
<li>
<span class="ctmenu a">CT Menu</span>
Main page
<ul class="menu sub">
<li>
<span class="ctmenu b">CT Menu</span>
Sub page
</li>
</ul>
</li>
</ul>
I'm having a problem and I'd like to know if you guys can help me out with it.
As shown in the snippet, I have some elements with
transform: translate(0,0);
And then, inside them, I have a "dropdown" element that is shown when you click a button.
The problem comes when part of this dropdown gets hidden behind other elements, and I found out that this is happening because its parent element has this transform property.
My code has more stuff, the snippet is just an example. I can't get rid of the transform property.
I'd like to know if there is any solution for this. I'm trying to solve it using just CSS.
Cheers!!
$(document).ready(function() {
$('button[name="button"]').click(function(e) {
$(e.currentTarget).parent().find('.template-options-dropdown').toggleClass('open');
});
});
.boxes {
list-style-type: none;
}
.boxes >li {
float: left;
width: 100px;
height: 100px;
background-color: red;
margin: 5px;
transform: translate(0, 0);
}
.download-container {
background: rgba(40, 39, 39, 0.8);
bottom: 0;
position: absolute;
text-align: center;
width: 100%;
}
.download-container .dropdown-container {
display: inline-block;
position: relative;
}
.download-container .dropdown-container button {
background: #0bb9ab;
color: #fff;
padding: 6px 12px;
}
.template-options-dropdown {
list-style-type: none;
text-align: left;
padding: 0;
position: absolute;
background-color: #111;
visibility: hidden;
}
.template-options-dropdown.open {
visibility: visible;
}
.template-options-dropdown li a {
color: white;
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="boxes">
<li>
<div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div>
</li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div></li>
</ul>
Unfortunately, there maybe no CSS-only solution - CSS3 transitions creates a new stacking context - see the relevant doc description and this thread for another effect:
If the property has a value different than none, a stacking context
will be created.
Source: MDN
You can easily replace translate(0,0) there with position: relative and add a z-index more than zero to .template-options-dropdown to solve the problem.
$(document).ready(function() {
$('button[name="button"]').click(function(e) {
$(e.currentTarget).parent().find('.template-options-dropdown').toggleClass('open');
});
});
.boxes {
list-style-type: none;
}
.boxes >li {
float: left;
width: 100px;
height: 100px;
background-color: red;
margin: 5px;
/*transform: translate(0, 0);*/
position: relative; /*ADDED*/
}
.download-container {
background: rgba(40, 39, 39, 0.8);
bottom: 0;
position: absolute;
text-align: center;
width: 100%;
}
.download-container .dropdown-container {
display: inline-block;
position: relative;
}
.download-container .dropdown-container button {
background: #0bb9ab;
color: #fff;
padding: 6px 12px;
}
.template-options-dropdown {
list-style-type: none;
text-align: left;
padding: 0;
position: absolute;
background-color: #111;
visibility: hidden;
z-index: 2;/*ADDED*/
}
.template-options-dropdown.open {
visibility: visible;
}
.template-options-dropdown li a {
color: white;
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="boxes">
<li>
<div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div>
</li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div></li>
</ul>
A hacky solution that messes up the wrapping - you can add more transforms:
Add scaleY(-1) for the ul to make the list backwards because of the fact that the a list item with higher index comes over the one with a lower index.
Add an inversion scaleY(-1) to the li to bring the world back to normal.
Also clear the li floats.
See demo below:
$(document).ready(function() {
$('button[name="button"]').click(function(e) {
$(e.currentTarget).parent().find('.template-options-dropdown').toggleClass('open');
});
});
.boxes {
list-style-type: none;
transform: scaleY(-1);/*ADDED*/
}
.boxes:after {/*ADDED*/
content: '';
clear: both;
display: block;
}
.boxes >li {
float: left;
width: 100px;
height: 100px;
background-color: red;
margin: 5px;
transform: translate(0, 0) scaleY(-1);/*ADDED*/
}
.download-container {
background: rgba(40, 39, 39, 0.8);
bottom: 0;
position: absolute;
text-align: center;
width: 100%;
}
.download-container .dropdown-container {
display: inline-block;
position: relative;
}
.download-container .dropdown-container button {
background: #0bb9ab;
color: #fff;
padding: 6px 12px;
}
.template-options-dropdown {
list-style-type: none;
text-align: left;
padding: 0;
position: absolute;
background-color: #111;
visibility: hidden;
}
.template-options-dropdown.open {
visibility: visible;
}
.template-options-dropdown li a {
color: white;
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="boxes">
<li>
<div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div>
</li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div></li>
</ul>
If translate(0,0) still can't be removed, you have no option other than use javascript:
Invert the list stacking by giving a z-index equal to the index in the list.
Add position:relative to the li
See demo below:
$(document).ready(function() {
// ADDED
$($('ul.boxes > li').get().reverse()).each(function(index){
$(this).css('z-index', index);
});
$('button[name="button"]').click(function(e) {
$(e.currentTarget).parent().find('.template-options-dropdown').toggleClass('open');
});
});
.boxes {
list-style-type: none;
}
.boxes >li {
float: left;
width: 100px;
height: 100px;
background-color: red;
margin: 5px;
transform: translate(0, 0);
position: relative;/*ADDED*/
}
.download-container {
background: rgba(40, 39, 39, 0.8);
bottom: 0;
position: absolute;
text-align: center;
width: 100%;
}
.download-container .dropdown-container {
display: inline-block;
position: relative;
}
.download-container .dropdown-container button {
background: #0bb9ab;
color: #fff;
padding: 6px 12px;
}
.template-options-dropdown {
list-style-type: none;
text-align: left;
padding: 0;
position: absolute;
background-color: #111;
visibility: hidden;
}
.template-options-dropdown.open {
visibility: visible;
}
.template-options-dropdown li a {
color: white;
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="boxes">
<li>
<div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div>
</li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div></li>
</ul>
z-index will only work on an element whose position property has been explicitly set to absolute, fixed, or relative. So apply position: relative to the li element.
For fixed number of elements, you can try
.boxes li:nth-child(1) {
z-index: 8;
}
.boxes li:nth-child(2) {
z-index: 7;
}
.boxes li:nth-child(3) {
z-index: 6;
}
.boxes li:nth-child(4) {
z-index: 5;
}
.boxes li:nth-child(5) {
z-index: 4;
}
.boxes li:nth-child(6) {
z-index: 3;
}
.boxes li:nth-child(7) {
z-index: 2;
}
.boxes li:nth-child(8) {
z-index: 1;
}
Or for unknown number of elements, you can apply it dynamically with the script.
$(document).ready(function() {
$('button[name="button"]').click(function(e) {
$(e.currentTarget).parent().find('.template-options-dropdown').toggleClass('open');
});
});
.boxes {
list-style-type: none;
}
.boxes >li {
float: left;
width: 100px;
height: 100px;
background-color: red;
margin: 5px;
transform: translate(0, 0);
position: relative;
}
.download-container {
background: rgba(40, 39, 39, 0.8);
bottom: 0;
position: absolute;
text-align: center;
width: 100%;
}
.download-container .dropdown-container {
display: inline-block;
position: relative;
}
.download-container .dropdown-container button {
background: #0bb9ab;
color: #fff;
padding: 6px 12px;
}
.template-options-dropdown {
list-style-type: none;
text-align: left;
padding: 0;
position: absolute;
background-color: #111;
visibility: hidden;
}
.template-options-dropdown.open {
visibility: visible;
}
.template-options-dropdown li a {
color: white;
text-decoration: none;
}
.boxes li:nth-child(1) {
z-index: 8;
}
.boxes li:nth-child(2) {
z-index: 7;
}
.boxes li:nth-child(3) {
z-index: 6;
}
.boxes li:nth-child(4) {
z-index: 5;
}
.boxes li:nth-child(5) {
z-index: 4;
}
.boxes li:nth-child(6) {
z-index: 3;
}
.boxes li:nth-child(7) {
z-index: 2;
}
.boxes li:nth-child(8) {
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="boxes">
<li>
<div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div>
</li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div></li>
</ul>
You're close, but if it was me I would set the .open class on either the <li> or the div.download-container, set a massive z-index using that, and use the cascade to open the sub-menu. We also have to set position:relative; on the element that we're setting z-index on, otherwise z-index does nothing.
Example:
$(document).ready(function() {
$('button[name="button"]').click(function(e) {
$(e.currentTarget).parents('li').toggleClass('open');
});
});
.boxes {
list-style-type: none;
}
.boxes >li {
float: left;
width: 100px;
height: 100px;
background-color: red;
margin: 5px;
transform: translate(0, 0);
position:relative;
}
.boxes >li.open {
z-index:500;
}
.download-container {
background: rgba(40, 39, 39, 0.8);
bottom: 0;
position: absolute;
text-align: center;
width: 100%;
}
.download-container .dropdown-container {
display: inline-block;
position: relative;
}
.download-container .dropdown-container button {
background: #0bb9ab;
color: #fff;
padding: 6px 12px;
}
.template-options-dropdown {
list-style-type: none;
text-align: left;
padding: 0;
position: absolute;
background-color: #111;
visibility: hidden;
}
.boxes li.open .template-options-dropdown {
visibility: visible;
}
.template-options-dropdown li a {
color: white;
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="boxes">
<li>
<div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div>
</li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
Original
</li>
<li>
Thumb
</li>
<li>
Mobile
</li>
<li>
Tab
</li>
<li>
Web
</li>
<li>
Large web
</li>
</ul>
</div>
</div></li>
</ul>
How can I add vertical divider after the li element on the main menu?
<ul class="nav navbar-nav">
<li><i class="fa fa-home"></i> <span class="sr-only">(current)</span></li>
<li><a href="#" > نبذه عنا </a></li>
<li> اكادمية بوذيب للفروسيه </li>
<li> اسطابلات بوذيب </li>
<li> المركز الاعلامي </li>
<li> اتصل بنا </li>
<li> اكثر <i class="fa fa-bars"></i> </li>
<li> </li>
</ul>
This is the site I want to fix: the site
And this is the image I want the main menu to be like: the image
Can any one help me?
Although you could try this by giving border to sides, but nav items have more height than vertical line that you want to give, then you can try <pseudo:before> to achive this
.navbar-default .navbar-nav>li>a:after {
content: '';
display: inline-block;
position: absolute;
width: 1px;
background: #fff;
height: 30px;
right: 0;
top: calc(50% - 15px);
}
.navbar-default .navbar-nav>li:last-child>a:after,
.navbar-default .navbar-nav>li:first-child>a:after{
display:none;
}
Try this one
ul li{
float:left;
list-style:none;
padding:0 8px;
border-right:2px solid gray;
}
ul li:last-child{
border:none;
}
a{
text-decoration:none;
}
<ul class="nav navbar-nav">
<li><i class="fa fa-home"></i> <span class="sr-only">(current)</span></li>
<li><a href="#" > نبذه عنا </a></li>
<li> اكادمية بوذيب للفروسيه </li>
<li> اسطابلات بوذيب </li>
<li> المركز الاعلامي </li>
<li> اتصل بنا </li>
<li> اكثر <i class="fa fa-bars"></i> </li>
</ul>
Same HTML, CSS, and image file, but in IE8 I have this weird border line.
HTML:
<div id="admin_link_div">
<ul id="vertical_menu">
<li>
<a href="/admin/appointment_list">
<div id="sidebar_left_box">
Room List
</div><img id="admin_arrow_img_roomlist" src="/images/arrow_off_icon.gif"></a>
</li><div id="sidebar_line"></div>
<li>
<a href="#">
<div id="sidebar_left_box">
User Management
</div><img id="admin_arrow_img_userlist" src="/images/arrow_off_icon.gif"></a>
<br>
<ul>
<li>
User List
</li>
<li>
User Register
</li>
</ul>
</li><div id="sidebar_line"></div>
<li>
<a href="#">
<div id="sidebar_left_box">
Company Mangement
</div><img id="admin_arrow_img_register" src="/images/arrow_off_icon.gif"></a>
<br>
<ul>
<li>
Company List
</li>
<li>
Company Register
</li>
</ul>
</li><div id="sidebar_line"></div>
<li>
<a href="#">
<div id="sidebar_left_box">
Service Management
</div><img id="admin_arrow_img_service" src="/images/arrow_off_icon.gif"></a>
<br>
<ul>
<li>
Server Management
</li>
<li>
Barbie Management
</li>
</ul>
</li>
</ul>
</div>
CSS:
#admin_arrow_img_userlist{
margin-left: 10px;
margin-bottom: 2px;
}
Any good reason???
add this to your image #
outline:none;
border: none;
because IE sets a border for images by default!!
Try this CSS on image
img
{
border:0;
outline:none;
}
Use border 0 Check link more appropriate.