HTML:
<div class="menu-panel">
<h3>Table of Contents</h3>
<ul id="menu-toc" class="menu-toc">
<li>Home</li>
<li style="border-top: #FFF solid 1px;" class="menu-toc-current">Biography</li>
<li>Extra Curricular</li>
<li>Favorites</li>
</ul>
</div>
<div class="main">
<h2>Biography</h2>
<p>THIS INFO SHOWS UP WITH HEAVY CSS EDITING</p>
</div>
CSS:
.menu-panel {
background: #013E7D;
width: 240px;
height: 100%;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
text-shadow: 0 1px 1px rgba(0,0,0,0.1);
margin: 0px;
}
.menu-panel h3 {
font-family:Roboto;
font-size: 1.8em;
padding: 20px;
font-weight: 300;
color: #fff;
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.05);
}
.menu-toc {
list-style: none;
}
.menu-toc li a {
font-family:Roboto;
display: block;
color: #C0C0C0;
font-size: 1.1em;
line-height: 3.5;
padding: 0 20px;
cursor: pointer;
background: #013E7D;
border-bottom: 1px solid #FFF;
}
.menu-toc li a:hover,
.menu-toc li.menu-toc-current a {
background: #000000;
}
.menu-panel div {
margin-top: 20px;
}
.menu-panel div a {
text-transform: uppercase;
font-size: 0.7em;
line-height: 1;
padding: 5px 20px;
display: block;
border: none;
color: #bc0b0b;
letter-spacing: 1px;
font-weight: 800;
text-shadow: 0 1px rgba(255,255,255,0.2);
}
#media screen and (max-width: 800px) {
.no-js .menu-panel {
display: none;
}
.no-js .container {
padding: 0;
}
#media screen and (max-width: 400px) {
.menu-panel,
.content {
font-size: 75%;
}
.main {
margin-left:797px;
position:fixed;
font-family:Roboto;
}
So basically I need to get the table of contents to be static so all other elements go around it!! I have been trying to fix this and it will not work. If you could help me it would help a lot! Thank you
.menu-panel {
background: #013E7D;
width: 240px;
height: 100%;
z-index: 1000;
top: 0;
left: 0;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
margin: 0px;
float: left;
}
in css removing the position and adding the float results in horizontally aligned blocks. see also http://codepen.io/anon/pen/XXJRWx
Related
This is how my code looks like
function myFunction() {
var x = document.getElementById("leftsidebar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
body {
padding-top: 5px;
background: #efefef;
color: #000;
font: 10pt/18pt Arial, sans-serif;
border-top: 6px;
}
#navbar {
max-width: 928px;
font-size: 22px;
background: #FFF;
box-shadow: 0 0 20px #CCC;
border: 1px solid #ccc;
zoom: 1;
margin: 0 auto 10px;
padding: 10px;
font-size: 2em;
font-weight: bold;
background-color: #4596d8;
margin-bottom: -4px;
}
#content {
display: flex;
max-width: 946px;
background: #FFF;
box-shadow: 0 0 20px #CCC;
border: 1px solid #ccc;
zoom: 1;
margin: 0 auto 10px;
font-size: 2em;
font-weight: bold;
margin-bottom: -4px;
background: #FFF;
}
#leftsidebar {
width: 200px;
border-right: 2px solid #4596d8;
}
#leftsidebar ui a {
display: block;
font-size: 18px;
color: black;
width: 100%;
padding-left: 10px;
padding-top: 10px;
box-sizing: border-box;
border-top: 1px solid red rgba(255, 255, 255, .1);
border-bottom: solid 1px;
text-decoration: none;
}
#leftsidebar ui a:hover {
background-color: #4596d8;
}
#maincontent {
width: 728px;
padding: 10px;
padding-top: 5px;
font: 10pt/18pt Arial, sans-serif;
}
h1 {
display: block;
font-size: 2em;
font-weight: bold;
border-width: 6px;
}
div {
display: block;
}
#container {
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: 0 0;
padding: 0;
}
table {
margin-left: 20%;
margin-right: 20%;
border: 1px solid #4596d8;
}
form {
margin-left: 0 auto;
margin-right: 0 auto;
}
#footer {
text-align: center;
margin: 0 auto;
}
.form-inline {
flex-direction: column;
align-items: stretch;
}
#media screen and (max-width: 600px) {
.leftsidebar a:not(:first-child) {
display: none;
}
.leftsidebar a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.leftsidebar.responsive {
position: relative;
}
.leftsidebar.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
#navbar.responsive a {
float: none;
display: block;
text-align: left;
}
}
<div id="navbar">
MySite
</div>
<div id="content">
<div id="leftsidebar">
<ui>
Site1
Site2
Site3
<a href="site4.html" class="w3-bar-item w3-button">Site4/a>
Site5
</ui>
</div>
When I resize my site everything stays the same, nothing changes. I changed the lines so many times and nothing changed. Besides this problem everything else I could solve on my own.
My code is from this example. The only difference from the example site is, that my websites navbar is on the left and my logo in in the top navbar. So when I resize it or am on a certain width the menu elements are in the navbar hidden behind a icon.
You where using the .leftsidebar selector (class selector) instead of #leftsidebar the ID selector. The element doesnt have a class so you have to use #leftsidebar
function myFunction() {
var x = document.getElementById("leftsidebar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
body {
padding-top: 5px;
background: #efefef;
color: #000;
font: 10pt/18pt Arial, sans-serif;
border-top: 6px;
}
#navbar {
max-width: 928px;
font-size: 22px;
background: #FFF;
box-shadow: 0 0 20px #CCC;
border: 1px solid #ccc;
zoom: 1;
margin: 0 auto 10px;
padding: 10px;
font-size: 2em;
font-weight: bold;
background-color: #4596d8;
margin-bottom: -4px;
}
#content {
display: flex;
max-width: 946px;
background: #FFF;
box-shadow: 0 0 20px #CCC;
border: 1px solid #ccc;
zoom: 1;
margin: 0 auto 10px;
font-size: 2em;
font-weight: bold;
margin-bottom: -4px;
background: #FFF;
}
#leftsidebar {
width: 200px;
border-right: 2px solid #4596d8;
}
#leftsidebar ui a {
display: block;
font-size: 18px;
color: black;
width: 100%;
padding-left: 10px;
padding-top: 10px;
box-sizing: border-box;
border-top: 1px solid red rgba(255, 255, 255, .1);
border-bottom: solid 1px;
text-decoration: none;
}
#leftsidebar ui a:hover {
background-color: #4596d8;
}
#maincontent {
width: 728px;
padding: 10px;
padding-top: 5px;
font: 10pt/18pt Arial, sans-serif;
}
h1 {
display: block;
font-size: 2em;
font-weight: bold;
border-width: 6px;
}
div {
display: block;
}
#container {
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: 0 0;
padding: 0;
}
table {
margin-left: 20%;
margin-right: 20%;
border: 1px solid #4596d8;
}
form {
margin-left: 0 auto;
margin-right: 0 auto;
}
#footer {
text-align: center;
margin: 0 auto;
}
.form-inline {
flex-direction: column;
align-items: stretch;
}
#media screen and (max-width: 600px) {
#leftsidebar a:not(:first-child) {
display: none;
}
#leftsidebar a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
#leftsidebar.responsive {
position: relative;
}
#leftsidebar.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
#navbar.responsive a {
float: none;
display: block;
text-align: left;
}
}
<div id="navbar">
MySite
</div>
<div id="content">
<div id="leftsidebar">
<ui>
Site1
Site2
Site3
<a href="site4.html" class="w3-bar-item w3-button">Site4/a>
Site5
</ui>
</div>
Your code has a lot of bugs. Firstly the ui (unordered list) has to have li as it children. Anything besides an li as a ui child is a bug. Though you can have your link inside li you cannot have it as child of ui directly. If you put value 0 as border it doesn't work and is a bug. You should value it as none instead of 0 so border: none; the same with background padding and outline it should have a value of none.
Margin cant be both 0 and auto just say auto instead of 0 auto. You should also see some actual code of others. You are using code like english not like computer you have used a lot uneccesary css properties. Watch others coding youtube. You can use padding and margin the best way instead of writing padding left padding top. Just use thus syntax: padding: top right bottom left;
For example padding: 0 9px 0 9px;
For your media queries search on internet and use #media only screen and (max-width: 600px) {} device that has 600 px width like a mobile
Dont use the same value use a different value.
#media only screen and (max-width: 900px) {} this implements on a 900px width device like tablet.
In Firefox responsive mode works fine, but not on Chrome.
* {
margin: 0;
padding: 0;
}
body {
background: royalblue;
font-family: monospace;
}
header {
position: relative;
top: 0px;
margin: 0 auto;
width: 100%;
background: red;
}
.nav {
position: relative;
top: 0px;
list-style: none;
text-align: center;
padding: 10px 0;
}
.nav li {
margin: -3px;
display: inline-block;
padding: 7px 3px;
border-left: 1px solid silver;
}
#log {
border-right: 1px solid silver;
}
.nav a {
position: relative;
text-decoration: none;
color: silver;
padding: 10px 50px;
font-size: 15px;
}
li:hover {
background: black;
}
/* 800px ============================= */
#media screen and (max-width: 820px) {
body {
background: green;
}
.nav {
position: relative;
top: 0px;
list-style: none;
text-align: center;
padding: 8px 0; /* nav padding */
}
.nav li {
margin: -3px;
display: inline-block;
padding: 2px 3px;
border-left: 1px solid silver;
}
#log {
border-right: 1px solid silver;
}
.nav a {
position: relative;
text-decoration: none;
color: silver;
padding: 5px 40px;
font-size: 14px;
}
}
/* 680px ============================= */
#media screen and (max-width:681px) {
body {
background: royalblue;
}
.nav {
position: relative;
top: 0px;
list-style: none;
text-align: center;
padding: 8px 0; /* nav padding */
}
.nav li {
margin: -3px;
display: inline-block;
padding: 2px 3px;
border-left: 1px solid silver
}
#log {
border-right: 1px solid silver;
}
.nav a {
position: relative;
text-decoration: none;
color: silver;
padding: 5px 30px;
font-size: 14px;
}
}
/* 500px ============================= */
#media screen and (max-width: 590px) {
body {
background: green;
}
.nav {
position: relative;
top: 0px;
list-style: none;
text-align: center;
padding: 8px 0; /* nav padding */
}
.nav li {
margin: -3px;
display: inline-block;
padding: 2px 3px;
border-left: 1px solid silver;
}
#log {
border-right: 1px solid silver;
}
.nav a {
position: relative;
text-decoration: none;
color: silver;
padding: 5px 25px;
font-size: 13px;
}
}
<body>
<header>
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Services</li>
<li id="log">Login</li>
</ul>
</header>
</body>
Have you tried adding <meta name="viewport" content="width=device-width,initial-scale=1"> into the <head> section of your html code.
When the window is smaller, text on the first line:
"FILE FORMATS (XLS, XLSX, CSV OR OTHER DELIMITED, ODS)"
doesn't push the separating border down with it.
Screenshot of problem.
CSS:
.pricing-features-item {
border-top: 2px solid #000000;
font-size: 10px;
line-height: 1.5;
padding: 15px 0;
text-transform: uppercase;
text-align: left;
}
.col-tick {
float: left;
width: 10px;
}
.col-text {
float: left;
width: 90%;
}
HTML:
<ul class="pricing-features">
<li class="pricing-features-item">
<div class="col-tick">
+
</div>
<div class="col-text">
File formats (xls, xlsx, csv or other delimited, ods)
</div>
</li>
<li class="pricing-features-item">Dashboard hub</li>
<li class="pricing-features-item">Data filters and validation</li>
<li class="pricing-features-item">Premium data layout templates</li>
</ul>
How can i fix this?
If you could fix it here and send the link would be awesome :)
https://jsfiddle.net/nusmsegn/2/
That's because of float property inside .pricing-features-item, add float left to this element with width: 100%; and your problem will be solved, like:
.pricing-features-item {
float: left;
width: 100%;
border-top: 2px solid #000000;
font-size: 10px;
line-height: 1.5;
padding: 15px 0;
text-transform: uppercase;
text-align: left;
}
Have a look at the snippet below, or look at the updated fiddle
html {
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.pricing-background {
padding: 120px 4% 4%;
position: relative;
width: 100%;
}
.pricing-background::after {
content: '';
background: #3498db;
background: -moz-linear-gradient(top, #60a9ff 0%, #4394f4 100%);
background: -webkit-linear-gradient(top, #3498db 0%, #4394f4 100%);
background: linear-gradient(to bottom, #3498db 0%, #4394f4 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#3498db', endColorstr='#4394f4', GradientType=0);
height: 600px;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
#media (min-width: 900px) {
.background {
padding: 0 0 25px;
}
}
.pricing-container {
margin: 0 auto;
padding: 75px 0 0;
max-width: 1280px;
width: 100%;
}
.panel {
background-color: #fff;
border-radius: 5px;
padding: ;
position: relative;
width: 100%;
z-index: 10;
}
.pricing-table {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
#media (min-width: 900px) {
.pricing-table {
flex-direction: row;
}
}
price .pricing-table * {
text-align: center;
}
.pricing-desc {
padding: 50px 150px 0 150px;
}
.pricing-item {
border-top: 1px solid #e1f1ff;
font-size: 10px;
line-height: 1.5;
padding: 15px 0 15px;
text-transform: uppercase;
text-align: left;
}
pricing-item:last-child {
border-bottom: 1px solid #e1f1ff;
}
.pricing-plan {
border-bottom: 2px solid #e0e0e0;
padding: 50px;
}
.pricing-plan:last-child {
border-bottom: none;
}
#media (min-width: 960px) {
.pricing-plan {
border-bottom: none;
border-right: 1px solid #000000;
flex-basis: 100%;
padding: 25px 25px;
}
}
.pricing-plan:last-child {
border-right: none;
}
.pricing-plan-silver {
border-bottom: 2px solid #282929;
padding: 50px;
background: #282929;
}
.pricing-plan-silver:last-child {
border-bottom: none;
}
#media (min-width: 960px) {
.pricing-plan-silver {
border-bottom: none;
border-right: 1px solid #f1f1f1;
flex-basis: 100%;
padding: 25px 25px;
}
}
.pricing-plan-silver:last-child {
border-right: none;
}
.pricing-img {
padding: 20px;
margin-bottom: 25px;
max-width: 100%;
}
.pricing-header {
color: #808080;
font-weight: 600;
letter-spacing: 1px;
}
.pricing-headerinfo {
font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #ffffff;
font-size: 32px;
line-height: 48px;
font-weight: 300px;
}
.pricing-features {
color: #266a98;
font-weight: 600;
letter-spacing: 1px;
margin: 25px 0 25px;
padding: 25px 10px 0 10px;
}
.col-tick {
float: left;
width: 10px;
}
.col-text {
float: left;
width: 90%;
}
.pricing-features-item {
border-top: 2px solid #000000;
font-size: 10px;
line-height: 1.5;
padding: 15px 0;
text-transform: uppercase;
text-align: left;
float: left;
width: 100%;
}
.pricing-features-item:last-child {
border-bottom: 2px solid #e1f1ff;
}
/*## Gold list ##*/
.pricing-features-gold {
color: #494742;
font-weight: 600;
letter-spacing: 1px;
margin: 25px 0 25px;
padding: 25px 10px 0 10px;
}
.pricing-features-gold-item {
border-top: 1px solid #e0d7c1;
font-size: 10px;
line-height: 1.5;
padding: 15px 0;
text-transform: uppercase;
text-align: left;
}
.pricing-features-gold-item:last-child {
border-bottom: 1px solid #e0d7c1;
}
<div class="pricing-background">
<div class="pricing-container">
<div class="panel pricing-table">
<div class="pricing-plan">
<ul class="pricing-features">
<li class="pricing-features-item">
<div class="col-tick">
+
</div>
<div class="col-text">
File formats (xls, xlsx, csv or other delimited, ods)
</div>
</li>
<li class="pricing-features-item">Dashboard hub</li>
<li class="pricing-features-item">Data filters and validation</li>
<li class="pricing-features-item">Premium data layout templates</li>
<li class="pricing-features-item">Scheduling</li>
<li class="pricing-features-item">REST/API Connections (xml, json)</li>
<li class="pricing-features-item">FTP pickup / drop-off</li>
<li class="pricing-features-item">Two-way synchronisation</li>
<li class="pricing-features-item">Support</li>
<li class="pricing-features-item">X</li>
</ul>
</div>
</div>
</div>
</div>
Hope this helps!
This is an issue related to float property. You have applied float for the child elements while there is no float for parent
You can fix this in two different ways as below
Apply float: left; for ".pricing-features-item". You also may have to apply width: 100% here
Apply overflow: hidden; for ".pricing-features-item"
It depends upon your task. Hope this helps! cheers!
Just remove the float:left from col-text.
.pricing-features-item {
border-top: 2px solid #000000;
font-size: 10px;
line-height: 1.5;
padding: 15px 0;
text-transform: uppercase;
text-align: left;
}
.col-tick {
float: left;
margin-right: 8px;
}
.col-text {}
<ul class="pricing-features">
<li class="pricing-features-item">
<div class="col-tick">+</div>
<div class="col-text">
File formats (xls, xlsx, csv or other delimited, ods)
</div>
</li>
<li class="pricing-features-item">Dashboard hub</li>
<li class="pricing-features-item">Data filters and validation</li>
<li class="pricing-features-item">Premium data layout templates</li>
</ul>
Working fiddle link : https://jsfiddle.net/nusmsegn/4/
Float: left > removed from your css file:
HTML:
<div class="pricing-background">
<div class="pricing-container">
<div class="panel pricing-table">
<div class="pricing-plan">
<ul class="pricing-features">
<li class="pricing-features-item">
<div class="col-tick">
+
</div>
<div class="col-text">
File formats (xls, xlsx, csv or other delimited, ods)
</div>
</li>
<li class="pricing-features-item">Dashboard hub</li>
<li class="pricing-features-item">Data filters and validation</li>
<li class="pricing-features-item">Premium data layout templates</li>
<li class="pricing-features-item">Scheduling</li>
<li class="pricing-features-item">REST/API Connections (xml, json)</li>
<li class="pricing-features-item">FTP pickup / drop-off</li>
<li class="pricing-features-item">Two-way synchronisation</li>
<li class="pricing-features-item">Support</li>
<li class="pricing-features-item">X</li>
</ul>
</div>
</div>
</div>
</div>
CSS:
html {
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.pricing-background {
padding: 120px 4% 4%;
position: relative;
width: 100%;
}
.pricing-background::after {
content: '';
background: #3498db;
background: -moz-linear-gradient(top, #60a9ff 0%, #4394f4 100%);
background: -webkit-linear-gradient(top, #3498db 0%, #4394f4 100%);
background: linear-gradient(to bottom, #3498db 0%, #4394f4 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#3498db', endColorstr='#4394f4', GradientType=0);
height: 600px;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
#media (min-width: 900px) {
.background {
padding: 0 0 25px;
}
}
.pricing-container {
margin: 0 auto;
padding: 75px 0 0;
max-width: 1280px;
width: 100%;
}
.panel {
background-color: #fff;
border-radius: 5px;
padding: ;
position: relative;
width: 100%;
z-index: 10;
}
.pricing-table {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
#media (min-width: 900px) {
.pricing-table {
flex-direction: row;
}
}
price .pricing-table * {
text-align: center;
}
.pricing-desc {
padding: 50px 150px 0 150px;
}
.pricing-item {
border-top: 1px solid #e1f1ff;
font-size: 10px;
line-height: 1.5;
padding: 15px 0 15px;
text-transform: uppercase;
text-align: left;
}
pricing-item:last-child {
border-bottom: 1px solid #e1f1ff;
}
.pricing-plan {
border-bottom: 2px solid #e0e0e0;
padding: 50px;
}
.pricing-plan:last-child {
border-bottom: none;
}
#media (min-width: 960px) {
.pricing-plan {
border-bottom: none;
border-right: 1px solid #000000;
flex-basis: 100%;
padding: 25px 25px;
}
}
.pricing-plan:last-child {
border-right: none;
}
.pricing-plan-silver {
border-bottom: 2px solid #282929;
padding: 50px;
background: #282929;
}
.pricing-plan-silver:last-child {
border-bottom: none;
}
#media (min-width: 960px) {
.pricing-plan-silver {
border-bottom: none;
border-right: 1px solid #f1f1f1;
flex-basis: 100%;
padding: 25px 25px;
}
}
.pricing-plan-silver:last-child {
border-right: none;
}
.pricing-img {
padding: 20px;
margin-bottom: 25px;
max-width: 100%;
}
.pricing-header {
color: #808080;
font-weight: 600;
letter-spacing: 1px;
}
.pricing-headerinfo {
font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #ffffff;
font-size: 32px;
line-height: 48px;
font-weight: 300px;
}
.pricing-features {
color: #266a98;
font-weight: 600;
letter-spacing: 1px;
margin: 25px 0 25px;
padding: 25px 10px 0 10px;
}
.col-tick {
float: left;
width: 10px;
}
.col-text {
width: 90%;
}
.pricing-features-item {
border-top: 2px solid #000000;
font-size: 10px;
line-height: 1.5;
padding: 15px 0;
text-transform: uppercase;
text-align: left;
}
.pricing-features-item:last-child {
border-bottom: 2px solid #e1f1ff;
}
/*## Gold list ##*/
.pricing-features-gold {
color: #494742;
font-weight: 600;
letter-spacing: 1px;
margin: 25px 0 25px;
padding: 25px 10px 0 10px;
}
.pricing-features-gold-item {
border-top: 1px solid #e0d7c1;
font-size: 10px;
line-height: 1.5;
padding: 15px 0;
text-transform: uppercase;
text-align: left;
}
.pricing-features-gold-item:last-child {
border-bottom: 1px solid #e0d7c1;
}
My drop down menu in mobile view hides behind my banner. I can't seem to fix it. I have added the z-index, and I've gone as high as 999 and still no difference.
this is the test page
Here is HTML:
<li class="dropdown">
<a class="dropdown-toggle provinces-btn" data-toggle="dropdown">Select Province<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Alberta</li>
<li>British Columbia</li>
<li>Manitoba</li>
<li>New Brunswick</li>
<li>Newfoundland and Labrador</li>
<li>Nova Scotia</li>
<li>Nunavut</li>
<li>Ontario</li>
<li>Prince Edward Island</li>
<li>Quebec</li>
<li>Saskatchewan</li>
</ul>
</li>
Here is CSS:
.dropdown-menu {
left: 40% !important;
margin-left: -30px;
z-index: 50;
}
#media screen and (max-width: 768px) {
.provinces-btn {
width: 100%;
margin-top: 1px;
border-radius: 12px;
background-color: #3498db;
border-color: rgba(0,0,0,0.3);
text-shadow: 0 1px 0 rgba(0,0,0,0.5);
color: #FFF !important;
display: inline-block;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 12px;
padding: 10px 30px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border: 1px solid rgba(0,0,0,0.3);
border-bottom-width: 3px;
text-decoration: none;
z-index: 60;
}
.provinces-btn:hover, .provinces-btnActive {
color: #FFEE00 !important;
background: #1975D1;
font-weight: 900;
}
.provinces-btn ul{
margin: 0 auto;
}
}
#media screen and (max-width: 604px) {
.provinces-btn {
width: 100%;
margin-top: 1px;
margin-left: 15px;
border-radius: 12px;
background-color: #3498db;
border-color: rgba(0,0,0,0.3);
text-shadow: 0 1px 0 rgba(0,0,0,0.5);
color: #FFF !important;
display: inline-block;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 12px;
padding: 10px 30px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border: 1px solid rgba(0,0,0,0.3);
border-bottom-width: 3px;
text-decoration: none;
z-index: 60;
}
.provinces-btn:hover, .provinces-btnActive {
color: #FFEE00 !important;
background: #1975D1;
font-weight: 900;
}
.provinces-btn ul{
margin: 0 auto;
}
}
Other CSS with z-index that I'm not sure if it is affecting it:
nav {
padding: 0;
position:relative;
z-index:10;
height: 0;
}
.showMenu {
display: block;
background: url() no-repeat center;
background-size: 48px 48px;
height: 80px;
right: 0;
top: 0;
text-indent: -999999px;
font-size: 0;
position: absolute;
z-index:11;
border-left: 1px solid #DDDDDD;
}
the problem isnt z-index problem the real problem is your header, just change
header {
width: 100%;
height: auto;
background: #FFFFFF;
overflow: auto;
overflow-y: hidden;
overflow-x: hidden;
margin-bottom: 2%;
}
To
header {
width: 100%;
height: auto;
background: #FFFFFF;
margin-bottom: 2%;
}
Z-Index only works on positioned elements, try adding this to your .dropdown-menu:
position: relative;
Don't make the overflow hidden. If it is set to hidden, it will not allow your new divs (inside the parent element where overflow:hidden) to pop up or overlap other divs.
I'm trying to create this price column, and have been modifying the code of a tutorial, and everything was going fine until I added a border to .price section of it. The border added some extra width to the element, but only on the right side. I tried to see if another div was the reason, or some forgotten about margin/padding values with Chrome Dev Tools, but I can't see anything.
I would really appreciate any help with finding out what is causing the extra width to .price div
Here is the html:
<ul class="pricing_table">
<li></li>
<li class="price_block">
<h3>Web Development</h3>
<div class="price">
<div class="price_figure">
<span class="price_number">$9.99</span>
<span class="price_tenure">per month</span>
</div>
</div>
<ul class="features">
<li>2GB Storage</li>
<li>5 Clients</li>
<li>10 Active Projects</li>
<li>Free Goodies</li>
<li>24/7 Email support</li>
</ul>
<div class="buynow">
Buy Now
</div>
</li>
</ul>
Here is the CSS:
* {
margin: 0;
padding: 0;
}
li {
list-style:none;
}
body {
font-family: roboto;
}
h3 {
font-family: lato;
}
.pricing_table {
line-height: 150%;
font-size: 20px;
margin: 0 auto;
width: 75%;
max-width: 400px;
padding-top: 10px;
margin-top: 100px;
}
.price_block, .price_block_blue {
width: 100%;
color: black;
background-color: white;
float: left;
list-style-type: none;
transition: all 0.25s;
position: relative;
box-sizing: border-box;
margin-bottom: 10px;
}
.pricing_table h3 {
text-transform: uppercase;
padding: 5px 0;
background: white;
margin: -10px 0 0 0;
text-align: center;
border: 3px solid black;
border-bottom: 0px solid transparent;
}
.price {
display: table;
background: red;
width: 100%;
margin: 0;
padding: 0;
height: 70px;
text-align: center;
border: 3px solid black;
border-top:0px solid black;
border-bottom:0px solid black;
}
.price_blue {
display: table;
background: blue;
width: 100%;
height: 70px;
text-align: center;
}
.price_figure {
font-size: 24px;
text-transform: uppercase;
vertical-align: middle;
display: table-cell;
}
.price_number {
font-weight: bold;
padding: 10px 0 0 0;
display: block;
}
.price_tenure {
font-size: 11px;
}
.features {
background: #fff;
color: #000;
text-align: center;
border: 3px solid black;
border-bottom: 0px solid transparent;
border-top: 0px solid transparent;
}
.features li {
padding: 8px 15px;
border-bottom: 1px solid #ccc;
font-size: 11px;
list-style-type: none;
}
.buynow {
padding: 15px;
background: white;
text-align: center;
border: 3px solid black;
border-top: 0px solid black;
}
.action_button {
text-decoration: none;
color: white;
font-weight: bold;
border-radius: 5px;
background: red;
padding: 5px 20px;
font-size: 11px;
text-transform: uppercase;
}
.price_block:hover,.price_block_blue:hover {
box-shadow: 0 0 0px 5px rgba(0, 0, 0, 0.5);
transform: scale(1.04) translateY(-5px);
z-index: 1;
border-bottom: 0 none;
}
.price_block:hover .price {
background: yellow;
/*box-shadow: inset 0 0 45px 1px #ADD8E6;*/
}
.price_block_blue:hover .price_blue {
background: yellow;
}
.price_block:hover h3{
background: black;
color: white;
}
.price_block_blue:hover h3 {
background: black;
color: white;
}
.price_block:hover .action_button, .price_block_blue:hover .action_button {
background: linear-gradient(#F9B84A, #DB7224);
}
Since you are adding a border, it gets added to your overall width. So the actual width of .price is 100% + 3px (left border) + 3px (right border). To have the total width include padding and borders, use box-sizing:
.price {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}