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>
Related
I have a navbar which has 4 anchor tag buttons in the center (home, about, services, contact). I dont know how to center it on the navbar. I have another anchor tag on the far left of the navbar (a phone number link). It appears that the part I want to center is centered between the boundary of that far left link and the far right of the page.
I cant figure out how to center these 4 tags on the grid.
Hope that makes sense, im not too good with the jargon.
<a href="tel:1-530-680-8255" style="color:grey; display:inline-block">1-530-680-
8255</a>
<a href="tel:1-530-680-8255"><i class="fas fa-phone" style="display:inline-block">
</i>1-530-680-8255</a>
</div>
<nav class="navigation nav-block secondary-navigation nav-right">
<ul>
<!-- Dropdown Cart Overview
<li>
<div class="dropdown">
<span class="cart-indication"><span class="icon-shopping-cart"></span> <span class="badge">3</span></span>
<ul class="dropdown-list custom-content cart-overview">
<li class="cart-item">
<a href="single-product.html" class="product-thumbnail">
<img src="images/design-agency/portfolio/grid/no-margins/project-6-square.jpg" alt="" />
</a>
<div class="product-details">
<a href="single-product.html" class="product-title">
Cotton Jump Suit
</a>
<span class="product-quantity">2 x</span>
<span class="product-price"><span class="currency">$</span>15.00</span>
</div>
</li>
<li class="cart-item">
<a href="single-product.html" class="product-thumbnail">
<img src="images/design-agency/portfolio/grid/no-margins/project-7-square.jpg" alt="" />
</a>
<div class="product-details">
<a href="single-product.html" class="product-title">
Cotton Jump Suit
</a>
<span class="product-quantity">2 x</span>
<span class="product-price"><span class="currency">$</span>15.00</span>
</div>
</li>
<li class="cart-item">
<a href="single-product.html" class="product-thumbnail">
<img src="images/design-agency/portfolio/grid/no-margins/project-8-square.jpg" alt="" />
</a>
<div class="product-details">
<a href="single-product.html" class="product-title">
Cotton Jump Suit
</a>
<span class="product-quantity">2 x</span>
<span class="product-price"><span class="currency">$</span>15.00</span>
</div>
</li>
<li class="cart-subtotal">
Sub Total
<span class="amount"><span class="currency">$</span>15.00</span>
</li>
<li class="cart-actions">
View Cart
<span class="icon-check"></span> Checkout
</li>
</ul>
</div>
</li> -->
<!-- Dropdown Search Module
<li>
<div class="dropdown">
<span class="icon-magnifying-glass"></span>
<div class="dropdown-list custom-content cart-overview">
<div class="search-form-container site-search">
<form action="#" method="get" novalidate>
<div class="row">
<div class="column width-12">
<div class="field-wrapper">
<input type="text" name="search" class="form-search form-element no-margin-bottom" placeholder="type & hit enter...">
<span class="border"></span>
</div>
</div>
</div>
</form>
<div class="form-response"></div>
</div>
</div>
</div>
</li> -->
<li>
<div class="v-align-middle" style="margin-left: 60px;">
<i class="fab fa-facebook-f"></i>
</div>
</li>
<li class="aux-navigation hide">
<!-- Aux Navigation -->
<a href="#" class="navigation-show side-nav-show nav-icon">
<span class="icon-menu"></span>
</a>
</li>
</ul>
</nav>
<nav class="navigation nav-block primary-navigation nav-center">
<ul>
<li class="current">Home <i class="fas fa-home"></i></li>
<li class="current">About <i class="fas fa-at"></i></li>
<li class="current">Services <i class="fas fa-wrench"></i> </li>
<li class="current">Contact <i class="fas fa-phone"></i> </li>
</ul>
</nav>
</div>
</div>
</div>
</header>
You can use floats to position elements side by side on the page and then play with the widths and padding to arrange them how you like. If you are unsure how to use CSS I suggest following some online tutorials.
nav ul {
list-style-type: none;
display: inline-block;
margin: 0px;
padding: 0px;
width: 100%;
}
nav ul li {
display: inline-block;
text-align: center;
width: 60px;
margin: 0px;
padding: 0px;
}
nav ul li span {
font-size: 0.7em;
}
nav ul li i {
font-size: 2em;
}
.left {
width: 40%;
float: left;
}
.right {
width: 60%;
float: right;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<nav>
<div class="left">
<p>000 000 0000</p>
</div>
<div class="right">
<ul>
<li><i class="fas fa-phone"></i><br><span>Contact</span></li>
<li><i class="fas fa-wrench"></i><br><span>Services</span></li>
<li><i class="fas fa-at"></i><br><span>About</span></li>
<li><i class="fas fa-home"></i><br><span>Home</span></li>
</ul>
</div>
</nav>
there is alot of existing css that came with this template. For me to run your css and html, it would change too many properties to the point where its unrecognizable. Despite that this is a perfect answer. HOWEVER: I took your css:
nav ul {
list-style-type: none;
display: inline-block;
margin: 0px;
padding: 0px;
width: 100%;
}
and i changed it to these values:
nav ul {
display: inline-block;
text-align: center;
width: 1100px;
margin: 200px;
padding: 200px;
}
Its centered. But now the container is vertically huge. Need it the original height
Screenshot
Ok lets start over. I just want to center these 4 anchor tag li's inside of this ul.
Is there someway I can wrap these four into one container, and then move them to the left with css? I just want those 4 items to appear centered in that ul.
Heres a picture of what im talking about
Below is my total header in html. Theres a lot of CSS so i dont know what to link people to but ill put what i have been playing with below.
<!-- Header -->
<header class="header header-fixed header-fixed-on-mobile header-transparent" data-bkg-threshold="100">
<div class="header-inner">
<div class="row nav-bar">
<div class="column width-12 nav-bar-inner">
<div class="logo">
<div>
<a href="tel:1-530-680-8255" style="color:grey; display:inline-block">1-530-680-
8255</a>
<a href="tel:1-530-680-8255"><i class="fas fa-phone" style="display:inline-block">
</i>1-530-680-8255</a>
</div>
</div>
<nav class="navigation nav-block secondary-navigation nav-right">
<ul>
<li class="aux-navigation hide">
<!-- Aux Navigation -->
<a href="#" class="navigation-show side-nav-show nav-icon">
<span class="icon-menu"></span>
</a>
</li>
</ul>
</nav>
<nav class="navigation nav-block primary-navigation nav-center">
<ul>
<li class="current">Home <i class="fas fa-home"></i></li>
<li class="current">About <i class="fas fa-at"></i></li>
<li class="current">Services <i class="fas fa-wrench"></i> </li>
<li class="current">Contact <i class="fas fa-phone"></i> </li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<!-- Header End -->
---CSS---
nav ul li {
display: inline-block;
text-align: center;
width: 100px;
margin: 00px;
padding: 0px;
}
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>
I'm writing HTML where there is a div and and inside it there are 2 more divs. and these 2 divs are arranged one below the another. the first div(top one) has an avatar in it, and in the second div there is some content. My requirement is to keep the first div as it is and the second div scrollable (only the second div).
currently in my code, the entire div(parent) is getting scrolled, please let me know how can I fix this.
below is my HTML.
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="complaince-chat-box-new-avatar-div">
<div class="complaince-chat-box-new-head" style="display:none">Compliance Avatar</div>
<div class="animatedAvatar" id="avatar">
<br><img style="width: 174px;height: 200px;margin-left: -2px;" src="/ImageIcons/lisa.png">
</div>
<div class="belowAvatar">
<div class="Faq-chat-box-new-head">
FAQs...
</div>
<div class="panel-body chat-box-new">
<ul class="questionsUl">
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
</ul>
</div>
</div>
</div>
</div>
please let me know how can I fix the first div and make only send one scrollable. Here is the working fiddle. https://jsfiddle.net/byhrbos9/
Thanks
Given the number of explicitly defined heights, you would need to modify two things to achieve what you want:
Firstly, remove the style overflow:scroll from the following:
.col-lg-3 {
background-color: orange;
width: 35%;
overflow:scroll;
}
This will remove the scroll for the entire content.
Secondly add the following styles to the belowAvatar class:
overflow-y:scroll;
height: 252px;
The height is determined by taking the overall height of the containing div: 502px.
Remove the height of the animatedAvatar class : 310px, which is 192px.
Then, due to the margin-top offset of -60px on the belowAvatar class, you add on 60px to 192px, to get 252px.
The result is as follows:
.col-lg-3 {
background-color: orange;
width: 35%;
}
.complaince-chat-box-new-avatar-div {
height: 502px;
border-radius: 43px;
}
.animatedAvatar {
width: 250px;
height: 310px;
margin-left: 0px;
}
.belowAvatar {
margin-top: -60px;
overflow-y: scroll;
height: 252px;
}
.Faq-chat-box-new-head {
padding: 10px 1px;
border-bottom: 1px solid #fff;
color: #fff;
text-align: center;
border-top-left-radius: 4em;
border-top-right-radius: 4em;
font-size: 15px;
height: 35px;
}
.chat-box-new {
height: calc(100% - 50px);
}
.questionsUl {
margin-left: -45px;
}
.questionsUl li {
color: #fff;
list-style: none;
margin-top: 0em;
}
#custBtn {
width: auto;
white-space: normal;
font-size: 13px;
border: 0px;
text-align: left;
padding: 0.5em;
margin-left: 0.85em;
cursor: pointer;
}
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="complaince-chat-box-new-avatar-div">
<div class="complaince-chat-box-new-head" style="display:none">Compliance Avatar</div>
<div class="animatedAvatar" id="avatar">
<br>
<img style="width: 174px;height: 200px;margin-left: -2px;" src="/ImageIcons/lisa.png">
</div>
<div class="belowAvatar">
<div class="Faq-chat-box-new-head">
FAQs...
</div>
<div class="panel-body chat-box-new">
<ul class="questionsUl">
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
</ul>
</div>
</div>
</div>
</div>
In first division inside image tag write
style="position:fixed"
There are a couple of other things you need to fix to achieve the perfect look but I'll answer what you asked, the problem can be fixed if you add this css:
.belowAvatar {
margin-top: -60px;
height: 200px;
overflow: scroll;
}
I have a problem with Chrome and columns.
I want to have sets of links each with a title that are organised into columns that will not be split between multiple columns.
I have managed to acheive this in firefox, ie and safari but chrome is not playing ball.
If display:inline-block is removed it nearly works except then everything looks messy.
Any help is greatly appreciated
.
footer {
padding: 0px;
margin: 8px 0px 0px 0px;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
}
footer .footerlinks {
columns: 170px;
-webkit-columns: 170px;
-moz-columns: 170px;
padding: 0px 0px 20px 0px;
margin: 0px 0px 0px 0px;
}
footer .footerset {
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
break-inside: avoid;
display: inline-block;
}
<footer>
<div class="container">
<div class="footerlinks">
<div class="footerset">
<h3>qwerty</h3>
<ul>
<li>fsfdsfsdfdsfdsfds
</li>
<li>feefrerefref
</li>
<li>fdsfdsfdsfdsfsdfdsfsdfds
</li>
<li>fdsfdsfdsfdsfsdfdsfd
</li>
<li>gdggdgfdvfdvffgbfdgfd
</li>
<li>gfdgdfgfdgfdgfdgfdgdf
</li>
</ul>
</div>
<div class="footerset">
<h3>gdgdfvfdvfdvfdvfdvdfvfd</h3>
<ul>
<li>vcxvcvxc
</li>
<li>vxcvcxvcxvcxvcxvcxvcxvcx
</li>
<li>fdsfdsfds
</li>
<li>vfdbfdsfd
</li>
<li>dfsbgsfngfsh
</li>
<li>bgsfvsd
</li>
<li>gfdgfdgfds
</li>
<li>gfdgdfgdfgdfgsd
</li>
<li>gfdgfdgfdgfdgfdgfdgfdgfdgdfsgfdgfd
</li>
<li>gfsgtrghtrgrwgtrrewgfdvdfbfsbfgbfsb
</li>
</ul>
</div>
<div class="footerset">
<h3>dfdsfsdfds</h3>
<ul>
<li>fdsfdsfdsfdsfsd
</li>
<li>fdsfdsfdsfsd
</li>
<li>fdsfdsfds
</li>
<li>fdsfdsfsdfdsfsd
</li>
<li>fsdfdsfdsfsdfds
</li>
<li>fsdfdsfdsfds
</li>
</ul>
</div>
<div class="footerset">
<h3>fdsfdsafdsafsda</h3>
<ul>
<li>fdsfdsafadsfsda
</li>
<li>fdsfdsfdsfdsfsdfdsfdsafds
</li>
<li>fdsfdsafdsfdsa
</li>
<li>fdsfdsfdsfdsfdadvfdfavree
</li>
<li>vdafdsafdsafdsaa
</li>
<li>fdsfdsafdsfdsfdsafdsafds
</li>
<li>fdsfdsafdsfsdn
</li>
</ul>
</div>
<div class="footerset">
<h3>fdseneral</h3>
<ul>
<li>dfadsfdafdsration
</li>
<li>fdsaountisrvices
</li>
<li>ssssccsasccounts
</li>
<li>saompaniescts
</li>
</ul>
</div>
</div>
</div>
</footer>
Why not do it like that??
footer {
padding: 0px;
margin: 8px 0px 0px 0px;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
}
footer .footerlinks {
width: 100%;
box-sizing: border-box;
padding: 0px 0px 20px 0px;
margin: 0px 0px 0px 0px;
}
footer .footerset {
width: 33%;
float: left;
padding: 16px;
box-sizing: border-box;
}
footer .footerset:nth-child(4) {
clear: both;
}
<footer>
<div class="container">
<div class="footerlinks">
<div class="footerset">
<h3>qwerty</h3>
<ul>
<li>fsfdsfsdfdsfdsfds
</li>
<li>feefrerefref
</li>
<li>fdsfdsfdsfdsfsdfdsfsdfds
</li>
<li>fdsfdsfdsfdsfsdfdsfd
</li>
<li>gdggdgfdvfdvffgbfdgfd
</li>
<li>gfdgdfgfdgfdgfdgfdgdf
</li>
</ul>
</div>
<div class="footerset">
<h3>gdgdfvfdvfdvf</h3>
<ul>
<li>vcxvcvxc
</li>
<li>vxcvcxvcxvcxvcx
</li>
<li>fdsfdsfds
</li>
<li>vfdbfdsfd
</li>
<li>dfsbgsfngfsh
</li>
<li>bgsfvsd
</li>
<li>gfdgfdgfds
</li>
<li>gfdgdfgdfgdfgsd
</li>
<li>gfdgfdgfdgfdgfdgf
</li>
<li>gfsgtrghtrgrwgtrr
</li>
</ul>
</div>
<div class="footerset">
<h3>dfdsfsdfds</h3>
<ul>
<li>fdsfdsfdsfdsfsd
</li>
<li>fdsfdsfdsfsd
</li>
<li>fdsfdsfds
</li>
<li>fdsfdsfsdfdsfsd
</li>
<li>fsdfdsfdsfsdfds
</li>
<li>fsdfdsfdsfds
</li>
</ul>
</div>
<div class="footerset">
<h3>fdsfdsafdsafsda</h3>
<ul>
<li>fdsfdsafadsfsda
</li>
<li>fdsfdsfdsfdsfsdfdsfdsafds
</li>
<li>fdsfdsafdsfdsa
</li>
<li>fdsfdsfdsfdsfdadvfdfavree
</li>
<li>vdafdsafdsafdsaa
</li>
<li>fdsfdsafdsfdsfdsafdsafds
</li>
<li>fdsfdsafdsfsdn
</li>
</ul>
</div>
<div class="footerset">
<h3>fdseneral</h3>
<ul>
<li>dfadsfdafdsration
</li>
<li>fdsaountisrvices
</li>
<li>ssssccsasccounts
</li>
<li>saompaniescts
</li>
</ul>
</div>
</div>
</div>
</footer>
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