So I have a div that is supposed to have 100% height. It's only parent element is <body>, so 100% should be the height of the window. But instead of spanning the height of the screen, it only is as high as the container element inside it. The funny thing is, if I use fixed positioning, it does what I want it to. Alas, I can't use fixed in the site layout. Here is my css. If you would like to see what the site looks like right now, here is the link: http://ion.comli.com/projects/
body, ul {
margin: 0;
padding: 0;
}
body {
background: url('/images/background.png') no-repeat fixed;
}
/* CONTENT */
.content{
margin-left: auto;
margin-right: auto;
position: absolute;
top: 50px;
left: 15%;
height: 100%;
width: 70%;
background-color: #ffffff;
}
/* END CONTAINER*/
/* CONTAINER */
.container{
background: #ffffff;
margin: 5% 10%;
text-align: center;
}
.container .title a {
font-family: Franchise, "sans-serif";
font-size: 48px;
color: black;
line-height: 48px;
text-align: center;
text-decoration: none;
}
.container .date {
font-family: Ubuntu, "sans-serif";
font-size: 12px;
color: #666666;
line-height: 12px;
text-align: center;
text-decoration: none;
}
.container .body {
font-family: Ubuntu, "sans-serif";
font-size: 16px;
text-align: left;
}
/* END CONTAINER */
/* PROJECT */
.project {
display: block;
margin: 5% auto;
height: 100px;
width: 500px;
border-radius: 10px;
background: url("/images/background.png");
opacity: 0.5;
}
.project h2 {
font-family: Franchise;
font-size: 48px;
color: white;
text-align: center;
}
/* END PROJECT */
/* NAVIGATION */
nav ul {
background-color: #1b1b1b;
display: table;
list-style: none;
position: fixed;
top: 0;
height: 50px;
width: 100%;
box-shadow: 0 0 6px #888888;
z-index: 1;
}
nav ul li {
float: left;
}
nav ul li a {
display: table-cell;
height: 50px;
line-height: 50px;
padding: 0 65px;
font-family: Ubuntu;
font-size: 16px;
color: #ffffff;
text-decoration: none;
background-color: #292929;
}
nav #title {
font-family: Lobster;
font-size: 36px;
line-height: 50px;
border-right: 1px solid #ffffff;
background-color: #1b1b1b;
}
nav #menu {
padding: 0 25px;
background-color: #1b1b1b;
}
nav #menu:hover {
box-shadow: none;
background-color: #292929;
}
nav li:hover #menu {
box-shadow: none;
background-color: #292929;
}
nav ul ul {
background: #292929;
display: none;
position: absolute;
top: 100%;
right: 0px;
width: 15%;
}
nav ul ul li {
background: #292929;
float: left;
position: relative;
clear: both;
}
nav ul li:hover > ul {
box-shadow: none;
display: block;
}
/* END NAVIGATION */
/* SCROLLBAR */
/* END SCROLLBAR */
Any way I can get this div to span the whole 100%? I'm pretty sure there is a simple answer to this question, but I can't find it. Thanks in advance!
You have to make sure all parents of .content have a height defined.
So in your case what is missing is:
html, body {
height: 100%;
}
Alternative
Or you could position .content as fixed and you'd have the same effect but with a different approach
.content {
position: fixed;
top: 0;
left: 0;
height: 100%;
}
Make body 100% high
html, body {
height: 100%;
}
Related
I've been ask at work to fix an issue with our website.I didn't created it so I have to understand what cause this bug but some help will be appreciate.
In Screen PC, the website is working fine ; on mobile when you click to open the sidebar, you click on Services, the submenu opens fine :
But when you click below on Industries, this it what appears :
I download the theme installed on Ghost and check the css file, I think there and issue with bootstrap but I'm not sure...
If someone can give me some tips or idea - Let me know if should put some code here of this portion.
Thank you
enter code here
/*------INDUSTRIES-SUBMENU------*/
#content-desktop {display: block;}
#content-mobile {display: none;}
#media screen and (max-width: 768px) {
#industries-submenu ul{
padding: 0;
margin: 20px 0 40px 0;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: flex-start;
position: relative;
}
#industries-submenu ul li{
width: 25%;
margin-top: 20px;
padding-right: 30px;
}
#content-desktop {display: none;}
#content-mobile {display: block;}
#industries-submenu ul li a{
color: #1a2c47;
font-size: 16px;
font-weight: 700;
}
#industries-submenu ul li ul{
margin: 10px 0 0 0;
}
#industries-submenu ul li ul li{
margin-bottom: 10px;
width: 100%;
margin-top: 0;
}
#industries-submenu ul li ul li a{
color: #4f5661;
font-size: 14px;
font-weight: 600;
}
}
/*===== 2. INDUSTRIES =====*/
.breadcrumbs-blog .breadcrumb-item.active:last-child:before{
content: 'Blog';
margin-left: 4px;
display: block;
color: #1a2c47;
}
#breadcrumb-section{
border-top: 1px solid #f0f0f0;
padding: 25px 0 50px 0;
}
.breadcrumb{
background-color: transparent;
padding: 0;
margin: 0;
}
.breadcrumb .breadcrumb-item{
padding: 0;
}
.breadcrumb li a{
color: #0e50b2;
font-size: 14px;
font-weight: 700;
}
.breadcrumb li a:after{
width: 5px;
height: 8px;
content: '';
display: inline-block;
background-image: url('../img/icon-arrow-small.svg');
margin: 0 5px 1px;
}
.breadcrumb-item+.breadcrumb-item::before{
display: none;
}
.breadcrumb-item.active {
color: #1a2c47;
font-weight: 600;
font-size: 14px;
display: flex;
line-height: 22px;
align-items: flex-end;
}
#page-content .post-title{
font-size: 40px;
font-weight: 800;
line-height: 48px;
margin-bottom: 20px;
}
#page-content .featured-image{
max-width: 100%;
height: auto;
margin-bottom: 20px;
}
.editor-content h1,
.editor-content h2,
.editor-content h3,
.editor-content h4,
.editor-content h5,
.editor-content h6{
font-weight: 700;
margin-bottom: 20px;
margin-top: 50px;
}
.editor-content h1{
font-size: 36px;
line-height: 48px;
}
.editor-content h2{
font-size: 32px;
line-height: 38px;
}
.editor-content h3{
font-size: 28px;
line-height: 34px;
}
.editor-content h4{
font-size: 24px;
line-height: 28px;
}
.editor-content h5{
font-size: 18px;
line-height: 30px;
}
.editor-content h6{
font-size: 14px;
line-height: 24px;
}
.editor-content p{
font-size: 18px;
font-weight: 400;
line-height: 30px;
}
.editor-content a:not(.btn){
text-decoration: underline;
}
.editor-content ul,
.editor-content ol{
padding-left: 20px;
margin: 0;
}
.editor-content ul li{
list-style-type: disc;
font-size: 18px;
line-height: 30px;
margin-bottom: 10px;
}
.editor-content ol li{
font-size: 18px;
line-height: 30px;
margin-bottom: 10px;
}
.editor-content img{
max-width: 100%;
height: auto;
}
.editor-content table{
width: 100%;
margin: 30px 0;
background-color: transparent;
}
.editor-content td,
.editor-content th {
padding: .75rem;
vertical-align: top;
border-top: 1px solid #dee2e6;
}
.editor-content .table-holder{
width: 100%;
overflow: auto;
}
/*-----SIDEBAR-----*/
.sidebar{
overflow: hidden;
}
.sidebar .sidebar-get-a-quote{
background-color: #082e69;
position: relative;
padding: 60px 20px;
text-align: center;
background-image: url('../img/sidebar-illustration-1.svg');
background-position: center bottom;
background-repeat: no-repeat;
border-radius: 3px;
}
.sidebar .sidebar-get-a-quote .get-a-quote-info{
position: relative;
z-index: 2;
}
.sidebar .sidebar-get-a-quote .get-a-quote-info h3{
color: #ffffff;
font-size: 24px;
font-weight: 700;
line-height: 32px;
margin-bottom: 25px;
}
.sidebar .sidebar-get-a-quote .get-a-quote-info .btn{
font-size: 18px;
}
.sidebar .sidebar-associated-links{
background-color: #f8f8f8;
padding: 25px 20px;
}
.sidebar .sidebar-associated-links h3{
font-size: 18px;
font-weight: 700;
line-height: 30px;
margin-bottom: 20px;
}
.sidebar .sidebar-associated-links ul{
margin: 0;
}
.sidebar .sidebar-associated-links ul li{
margin-bottom: 15px;
}
.sidebar .sidebar-associated-links ul li:last-child{
margin-bottom: 0;
}
.sidebar .sidebar-associated-links ul li a{
line-height: 26px;
font-size: 14px;
color: #0e50b2;
display: block;
}
.sidebar .list-boxed .parent{
width: 100%;
margin-bottom: 0;
}
.sidebar .list-boxed li ul li{
border-bottom: 1px solid #ededed;
}
.sidebar p,
.sidebar ul li,
.sidebar ol li{
font-size: 16px;
line-height: 26px;
}
.widget{
margin-bottom: 30px;
}
.widget h3{
font-weight: bold;
margin-bottom: 20px;
}
.sidebar .latest-posts{
border-top: 1px solid #e5e5e5;
padding-top: 30px;
margin: 0;
}
.sidebar .latest-posts li a{
display: block;
margin-bottom: 20px;
text-decoration: underline;
}
.sidebar .latest-posts li:last-child a{
border: none;
}
#big-get-a-quote{
margin-top: 100px;
padding: 120px 0;
background-color: #082e69;
background-image: url('../img/big-get-a-quote.png');
background-position: center bottom;
background-repeat: no-repeat;
color: #fff;
text-align: center;
font-size: 18px;
font-weight: 400;
line-height: 30px;
}
#big-get-a-quote h3{
font-size: 36px;
font-weight: 400;
line-height: 48px;
color: #fff;
font-weight: bold;
margin-bottom: 25px;
}
#big-get-a-quote p:first-of-type{
font-size: 24px;
line-height: 34px;
}
#big-get-a-quote .btn{
margin: 50px auto 0;
}
.editor-content img,
.editor-content .kg-width-full img,
.editor-content .kg-width-wide img{
max-width: 100%;
height: auto;
position: relative;
margin: 0;
border-radius: 5px;
}
.editor-content .kg-gallery-container {
display: flex;
flex-direction: column;
margin: 10px auto;
position: relative;
left: 50%;
transform: translateX(-50%);
z-index: 5;
}
.editor-content .kg-gallery-row {
display: flex;
flex-direction: row;
justify-content: center;
}
.editor-content .kg-gallery-image img {
display: flex;
object-fit: cover;
margin: 0;
width: 100%;
height: 100%;
}
.editor-content .kg-gallery-row:not(:first-of-type) {
margin: 10px 0 0 0;
}
.editor-content .kg-gallery-image:not(:first-of-type) {
margin: 0 0 0 10px;
}
.editor-content figcaption{
padding: 10px 15px;
font-size: 14px;
border-bottom: 1px solid #ededed;
}
.loop .post{
display: flex;
margin-bottom: 30px;
}
.loop .post .post-inner-content{
width: 100%;
position: relative;
overflow: hidden;
}
.loop .inner{
position: relative;
}
.post .img-holder {
overflow: hidden;
border-radius: 5px;
margin-bottom: 10px;
}
.post .img-holder .featured-image{
display: block;
width: 100%;
position: relative;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.post .img-holder .featured-image:before{
display: block;
content: '';
width: 100%;
padding-bottom: 75%;
}
#page-content .post .img-holder .featured-image{
margin: 0;
}
.post .inner-featured-image{
margin-bottom: 30px;
}
.loop .post:hover .img-holder .featured-image{
transform: scale(1.1, 1.1);
}
.loop h3{
font-size: 20px;
margin: 5px 0;
padding: 0;
font-weight: bold;
}
#load-posts{
display: flex;
width: 180px;
margin: 100px auto;
}
#load-posts.finish{
width: 260px;
opacity: .5;
}
.manual-tags{
display: flex;
flex-wrap: wrap;
}
.manual-tags a{
padding: 5px 10px;
background: #f0f0f0;
margin-right: 10px;
}
.loop-news .item:first-child .post{
border-top: 1px solid #9e9e9e;
padding-top: 30px;
}
.loop-news .post{
border-bottom: 1px solid #9e9e9e;
padding-bottom: 20px;
}
.loop-news .inner{
padding-right: 30px;
}
.loop-news .post-inner-content{
display: flex;
justify-content: space-between;
}
.loop-news .post-inner-content .post-meta{
min-width: 150px;
text-align: right;
}
#media screen and (max-width: 1199px) {
.sidebar .sidebar-get-a-quote .get-a-quote-info .btn {
font-size: 14px;
height: 50px;
}
#stats ul li p{
font-size: 16px;
}
#stats ul li p b{
font-size: 18px;
}
#industries ul li a{
font-size: 16px;
line-height: 1.2;
}
#why-obelis .blockquote p{
font-size: 18px;
line-height: 28px;
}
#stats ul li .img-inner{
width: 54px;
height: 54px;
}
.home-video iframe[src*="https://www.youtube.com/"] {
height: calc(210px / 1.77777778) !important;
width: 100% !important;
}
}
#media screen and (max-width: 991px) {
.navigation-trigger,
.mobile-nav,
.mobile-backdrop{
display: block;
}
.mobile-nav .logo img{
width: 200px;
height: 62px;
}
header .topbar{
display: none;
}
header .nav {
padding: 10px;
}
header .menu .nav {
display: none;
}
.navigation-trigger{
display: flex;
align-items: center;
}
.mobile-backdrop{
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 998;
background: rgba(0, 0, 0, 0.5);
visibility: hidden;
opacity: 0;
pointer-events: none;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.mobile-nav{
position: fixed;
width: 100%;
max-width: 300px;
height: 100%;
left: 0;
top: 0;
z-index: 999;
transform: translateX(-100%);
background: #fff;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.menu-active .mobile-backdrop{
visibility: visible;
opacity: 1;
pointer-events: all;
}
.menu-active .mobile-nav{
transform: translateX(0);
}
header .mobile-nav .topbar{
display: block;
margin-bottom: 44px;
}
header .mobile-nav .nav{
display: block;
padding: 0;
}
header .mobile-nav .logo{
padding: 15px;
}
header .nav ul{
flex-direction: column;
}
header .nav ul li a{
display: flex;
padding: 10px 15px;
border-bottom: 1px solid #f8f8f8;
color: #143074;
font-weight: 600;
justify-content: space-between;
align-items: center;
text-decoration: none;
}
header .nav ul li a:focus,
header .nav ul li a:hover{
text-decoration: none;
}
header .nav ul li .btn{
margin: 15px;
}
header .topbar .container{
padding: 0;
}
header .topbar .search-btn{
display: none;
}
header .topbar .header-top{
justify-content: flex-start;
}
header .topbar .header-top ul{
width: 100%;
display: flex;
justify-content: flex-start;
white-space: nowrap;
overflow: auto;
}
header .topbar ul li{
margin-right: 0;
}
header .topbar ul li a{
display: flex;
padding: 5px 10px;
line-height: 24px;
}
header .mobile-nav{
overflow: auto;
}
header .mobile-nav .search{
visibility: visible;
opacity: 1;
left: 0;
max-width: 100%;
width: 100%;
height: 44px;
pointer-events: all;
}
header .mobile-nav .search input{
font-size: 14px;
}
header .mobile-nav ul li a i{
display: none;
}
header .mobile-nav ul li a[data-submenu] i{
display: inline-block;
margin-left: 10px;
}
#services .inner .service-holder p{
font-size: 16px;
line-height: 24px;
}
.industries-and-services .col-industries ul li{
width: 100%;
}
#stats{
overflow: auto;
}
#stats ul{
min-width: 1000px;
padding-right: 30px;
}
#about-us-section .who-we-are:before{
width: 100vw;
right: 50%;
transform: translateX(50%);
}
#about-us-section .who-is-it-for .inner {
padding-left: 0;
}
.submenu{
display: none !important;
}
header .mobile-nav .submenu{
position: relative;
top: 0;
left: 0;
opacity: 1;
visibility: visible;
padding: 0;
}
header .mobile-nav .active .submenu{
display: block !important;
}
header .mobile-nav .submenu p,
header .mobile-nav .submenu p + a,
header .mobile-nav .submenu .link{
display: none;
}
#industries-submenu ul{
margin: 0;
}
#industries-submenu ul li {
width: 100%;
margin-top: 0px;
padding-right: 0px;
}
.submenu h3{
margin: 0;
}
header .nav ul li .submenu a{
padding: 15px 30px;
border-bottom: 1px solid #aeb3bd;
margin-left: -15px;
width: calc(100% + 30px);
line-height: 1;
color: #143074;
}
.submenu-style-1 {
padding: 10px 0 10px 20px;
}
header .search .btn{
top: 2px;
transform: none;
right: 17px;
}
.list-boxed .parent{
width: calc(50% - 30px);
}
.safer-markets ul li{
width: 100%;
flex: auto;
margin-bottom: 30px;
border: none;
}
.home-video{
margin-top: 0;
}
.home-video iframe[src*="https://www.youtube.com/"] {
height: calc(510px / 1.77777778) !important;
width: 100% !important;
}
.why-obelis ul{
padding: 40px 20px;
}
}
#media screen and (max-width: 767px) {
.intro{
padding: 60px 0 100px 0;
}
.intro h1{
font-size: 30px;
}
.intro p{
font-size: 16px;
}
#why-obelis{
padding: 50px 0;
}
#about-us-section .who-is-it-for{
padding: 50px 0;
}
#about-us-section .inner {
padding: 50px 0;
}
#about-us-section .who-is-it-for .inner{
padding: 0;
}
.list-posts ul li b{
display: block;
margin: 0;
}
footer .footer-bottom ul{
flex-wrap: wrap;
}
.banner .text-right{
display: flex;
margin-bottom: 20px;
}
#services .features li{
width: 100%;
}
#services .inner .row:before, #services .inner .row:after,
#services .inner:before{
display: none;
}
#services .inner .service-holder{
padding: 30px 0;
}
#services .features{
margin: 0;
}
#services .inner{
border: none;
}
.section-title{
margin-bottom: 50px;
}
.list-boxed .parent{
width: 100%;
margin: 0 15px 15px;
}
.industries-and-services {
margin: 0 0 50px 0;
}
.loop .post .post-inner-content{
flex-direction: column;
}
.loop-news .post-inner-content .post-meta{
text-align: left;
}
.loop-news .post{
padding-bottom: 30px;
}
}
#media screen and (max-width: 575px) {
#why-obelis .blockquote{
padding: 60px 30px;
}
header .nav .menu .logo img,
.mobile-nav .logo img {
width: 100px;
height: auto;
}
footer .footer-top{
padding: 20px 0;
}
.home-video iframe[src*="https://www.youtube.com/"] {
height: calc((100vw - 30px) / 1.77777778) !important;
width: 100% !important;
}
}
I found the problem - but I think, you are able to solve it by your own, as you know better the structure of your project.
Open your Link with Chrome (or Firefox)
Press F12 and select the mobile resolution:
Here you can open the mobile menu and see the bug, as shown in your picture
Now try to change the width of the resolution in Chrome:
You will see, that the bug will be automatically fixed
When looking at the HTML and CSS in Developer Tools, while doing these steps, you will see, that they change. Therefore you have to look at, what is changing and try to find a solution here.
My guess in your case is that some CSS values are wrongly set at the beginning (maybe while initializing the page dynamically??).
UPDATE:
It seems, that the top CSS attribute in your li tag (parent sub-industries classes) causes the problem (which seems to be dynamically calculated).
Hope I could help!
I found similar topics, but it did not work.
1) I am trying to show an image when I hover over each item on the navigation bar, but it is not showing up.
2) I want to create a single line of repeated images, but it is not showing up under this tag:
<div id= "coffeeBean"></div>
Example: https://jsfiddle.net/RE006/LLo4246b/
jsfiddle and Stackoverflow won't let me upload my image.
CSS:
nav ul {
background-color: #dcedec;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 1rem;
list-style: none;
padding-left: 1em;
padding-top: 1em;
width: 100%;
}
nav li {
float: left;
padding: .5em;
}
nav a, nav a:visited {
color: #000;
padding: 5px 5px 5px 15px;
text-decoration: none;
}
nav a:hover, ul.nav a:active, ul.nav a:focus {
color: #fff;
position: relative;
}
nav li a:hover:after { border-top: 1px solid red;
background-image: url("images/bean.png");
background-repeat: no-repeat;
display: block;
position: absolute;
top: 0px;
}
#coffeeBean {
background-image: url(images/beans.png);
background-repeat: repeat-x;
height: 30px;
position: absolute;
}
body {
background-color: #c4c7c6;
color: #000;
font-family: "Times New Roman", Times, serif;
font-size: 62.5%;
position: relative;
}
.container {
background-color: #fff;
margin: 0px auto;
width: 80%;
}
nav ul {
background-color: #dcedec;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 1rem;
list-style: none;
padding-left: 1em;
padding-top: 1em;
width: 100%;
}
nav li {
float: left;
padding: .5em;
}
nav a, nav a:visited {
color: #000;
padding: 5px 5px 5px 15px;
text-decoration: none;
}
nav a:hover, ul.nav a:active, ul.nav a:focus {
color: #fff;
position: relative;
}
nav li a:hover::after {
background-image: url("http://www.tutomarket.com/wp-content/uploads/2017/03/H-I-W-1.png");
background-repeat: no-repeat;
background-size: cover;
border-top: 1px solid red;
content: "";
display: block;
height: 40px;
position: absolute;
top: 0;
width: 40px;
opacity: .5;
z-index:-1;
}
nav li a{z-index:9999;}
header, main, footer {
display: block;
}
header h1 {
background-color: #858070;
color: #fff;
font-size: 2rem;
letter-spacing: 2px;
padding: 1.25em .5em .25em 1em;
width: 100%;
}
img {
filter: alpha(opacity=35); /* For IE8 and earlier */
height: 200px;
margin: 0px auto;
opacity: 0.35;
position: absolute;
left: 30%;
top: 200px;
}
main {
font-size: 1rem;
padding: 1.5em;
}
label, input, select {
margin: 10px 0px;
}
#coffeeBean {
background-image: url(http://www.tutomarket.com/wp-content/uploads/2017/03/H-I-W-1.png);
background-repeat: repeat-x;
height: 30px;
position: absolute;
}
footer {
clear: both;
font-size: 1rem;
margin-top: 50px;
padding: 1em;
position: relative;
text-align: center;
}
Please insert content:'' and width property like below will work
nav li a:hover:after { border-top: 1px solid red;
background-image: url("images/bean.png");
background-repeat: no-repeat;
display: block;
position: absolute;
top: 0px;
content:'';
width:100%;
}
Not quite sure why my media queries aren't working. Very much a beginner. Trying to get the navigation menu to respond similarly to
http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav
Normal media queries don't work either, I know i don't have topnav as the class setting for the nav like they do in the w3 example. I just have been using nav.
/**********************************
GENERAL
***********************************/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
}
html, body {
height: 100%;
}
body{
margin:0;
padding:0;
background: rgba(226,226,226,1);
}
a{
text-decoration: none;
}
li{
list-style-type: none;
display: inline
}
#wrapper{
max-width: 100%;
max-height: 100%;
/*min-height: calc(100vh - 120px);*/
/* 80px header + 40px footer = 120px */
width: 85%;
margin: 0 auto;
overflow: visible;
position:relative;
background: rgba(147,206,222,1);
}
img{
max-width: 100%;
width: 200px;
margin-right: 15px;
float: left;
margin-bottom: 20px;
padding:1px;
border:1px solid #021a40;
}
h1{
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
font-family: Garamond;
}
/**********************************
HEADING
***********************************/
header{
color:blue;
text-align: left;
float: left;
margin: 0 0 30px 0;
padding: 20px 0 0 0;
width: 100%;
font-size: 32;
}
/**********************************
NAVIGATION
***********************************/
nav{
max-width: 100%;
max height: 100%;
padding: 3.5em;
margin: 0;
background-color: green;
text-align: right;
font-family: Garamond;
}
nav ul {
list-style: none;
margin: 0 10px 20px; /*pushes div down*/
padding: 0;
text-decoration: none;
/*background-color: purple;*/
max-width: 100%;
max-height: 200px;
}
nav menu:{
}
nav li {
display: inline-block;
}
nav a, a:link, a:visited {
font-weight: 800;
padding: 15px 10px;
/*border-style: double;*/
border-radius: 10px;
margin-bottom: 20px;
color:white;
text-align: center;
font-weight: bold;
text-transform: uppercase;
}
a:hover{
background-color: gray;
}
#back-to-hp{
text-align: left;
}
/**********************************
FOOTER
***********************************/
footer {
background: rgba(255,255,255,1);
/*max-height: 100%;
position:relative;
left: 0;
bottom: 0;
height: 60px;
width: 100%;
overflow:hidden;
text-align: center;*/
width:100%;
height:100px;
position:relative;
bottom:0;
left:0;
padding-top: 10px;
margin-top: 15px;
}
}
/**********************************
PAGE: ADOPTION
***********************************/
#image-paragraph{
font-size: 20;
text-align: center;
float: right;
}
#content{
font-family: Garamond;
}
/**********************************
PAGE: ABOUT
***********************************/
/**********************************
PAGE: CONTACT
***********************************/
/**********************************
COLORS
***********************************/
/**********************************
MEDIA QUERIES
***********************************/
/*#media all (max-width: 960px) {
body{
background-color: royalblue;
}
p{
color:white;
}
}
##media (min-width:481px) and (max-width: 700px) {
}*/
#media screen and (max-width:680px) {
ul.nav li:not(:first-child) {display: none;}
ul.nav li.icon {
float: right;
display: inline-block;
}
}
#media screen and (max-width:680px) {
ul.nav.responsive {position: relative;}
ul.nav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.nav.responsive li {
float: none;
display: inline;
}
ul.nav.responsive li a {
display: block;
text-align: left;
}
}
You have two media queries set at the max-width of 680px. Possibly one was meant to be a min-width? If not then I don't see why you didn't put all of it under a single media query.
EDIT:
Try changing ul.nav li:not(:first-child) {display: none;} to nav ul li:not(:first-child) {display: none;}.
This is because media queries read css as nested from their parents, so you need to include the parent elements correctly.
Also, from experience, I've noticed visibility: hidden; consistently works better in many scenarios than display: none;. This depends on your element positioning, though. Either works in your case.
I have a css element #main that for some reason is set to 0px x 0px (it was working earlier, I'm not sure what changed.) when #main ul is at 800px x 39px, so therefore the entire element is hidden
Is there a way to have the dimensions of #main automatically change without having to hard-code it in?
I've tried:
overflow: hidden, auto
float: left, center, right
width: 100%
display: block, inline-block, inline
but none of them work.
Here's the link to the html page:
http://goo.gl/Ml2FIo
here's the css code:
/* HEADERS*/
h1 {
margin-top: 80px;
text-align: center;
font-family: Baskerville, 'Baskerville Old Face', 'Hoefler Text', Garamond, 'Times New Roman', serif;
font-size: 50px;
font-weight: 200;
color: #212121;
}
/* MAIN NAVIGATION */
#main {
/*width: 800px;
height: 100px;*/
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
background-color: #fa5858;
position: fixed;
top: 0;
left: 0;
text-align: center;
overflow: auto;
display: inline-block;
}
#main ul {
/*overflow: hidden;*/
margin: 0 auto;
padding: 0;
position: fixed;
width: 800px;
}
#main ul li {
width: 100px;
display: block;
padding: 10px 20px;
text-align: center;
float: left;
list-style: none;
background-color: #FA5858;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
}
#main ul li a {
text-decoration: none;
color: #ffffff;
}
/*
#main li a:hover{
opacity: 0.8;
}
*/
/*SIDE NAVIGATION*/
#side {
min-width: 100px;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
background-color: #ffffff;
position: fixed;
top: 0px;
right: 0px;
text-align: center;
overflow: hidden;
margin: 0 auto;
padding: 0;
display: inline-block;
border: 1px solid #fcacac;
padding: 0px 10px;
text-align: center;
float: left;
list-style: none;
}
#side a {
font-size: .75em;
text-decoration: none;
color: #505050;
line-height: 40px;
}
body {
background-image: url("http://commentnation.com/backgrounds/images/argyle_pattern_background_seamless_light_gray.gif");
background-attachment: fixed;
}
/* PARAGRAPH */
section {
background-color: #ffffff;
width: 600px;
margin: 0 auto;
/*margin-: 50px 150px 50px 150px;*/
font-family: Baskerville, 'Baskerville Old Face', 'Hoefler Text', Garamond, 'Times New Roman', serif;
font-size: 1em;
font-weight: lighter;
line-height: 30px;
padding: 20px 50px;
border: 1px solid #fcacac;
text-align: justify;
text-justify: inter-word;
color: #393939;
}
/* FOOTER */
footer {
display: block;
background-color: #ffffff;
padding: 30px 100px;
margin-top: 150px;
position: relative;
/*width: 100%;
bottom: -10px;
left: -10px;*/
border-top: 1px solid #e6e6e6;
}
/* TITLE IMAGE */
#title-img {
/*position: relative;i*/
display: block;
margin-top: 80px;
margin-left: auto;
margin-right: auto;
}
EDIT 1:
I just realized that the #main element is actually visible on a Windows Chrome, but not on Mac Chrome or Safari (which I've been using) while still having the 0px x 0px dimensions.
You can use flex. It's a nice and easy way to set width, margins, paddings for things.
Here's a wonderful "Complete guide to flexbox":
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
You could do something like this:
nav {
display: flex;
flex: 1;
/* you can set some width if you want
width: 400px;
*/
background-color: #eee;
}
nav ul {
margin: 0;
padding: 0;
display: flex;
flex: 1;
list-style-type: none;
background-color: #ddd;
border: 1px solid #00f;
}
nav ul li {
display: flex;
flex: 1;
padding: 5px 10px;
margin-right: 10px;
background-color: #bbb;
border: 1px solid #f00;
}
nav ul li:last-child {
margin-right: 0;
}
<nav>
<ul>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>dddd</li>
<li>eeee</li>
</ul>
</nav>
You can change width of nav to whatever you like, or not set it at all and give the nav flex: 1 for "100%".
When highlighting text with IE 8 on a webpage that I'm currently developing the font changes and/or sometimes the size. The same thing happens sometimes when I hover over the menu.
This is how my css looks like and I don't know why the error occurs? One more thing that is very strange is that I have installed Windows 7 with paralells on my osx and the error does not occur there but only on PC computers. I have tried changing fonts but with no help...
This is my css:
body {
font-family: verdana, sans-serif;
font-size: 14px;
}
#wrapper, .wrapper {
width: 900px;
padding: 0 30px;
margin-left: auto;
margin-right: auto;
}
#header {
background: url('http://localhost:8888/wp-content/uploads/2012/09/120920_scam_banner.jpg') no-repeat;
height: 150px;
margin: 20px 0;
}
#header div {
width: 900px;
height: 150px;
margin-left: auto;
margin-right: auto;
position: relative;
background: none;
}
#header div a {
text-indent: -9999px;
position: absolute;
width: 900px;
height: 150px;
}
#header div a:hover {
background: none;
}
#section {
}
#menu {
float: left;
width: 175px;
padding: 20px 25px 0 0;
border-right: 2px solid #000;
text-align: right;
}
#menu a, a {
color: #000;
text-decoration: none;
}
.mp-formdiv {
float: right;
}
img {
border: 1px solid #000;
}
#menu a:hover, a:hover {
color: #fff;
background: #000;
}
.menu li {
margin: 3px 0;
text-align: right;
}
#menu h3 {
line-height: 52px;
}
#menu .artists {
padding-left: 10px;
}
#menu-artists li {
}
#content {
float: right;
width: 670px;
padding: 20px 0 50px 20px;
}
#footer {
overflow:hidden;
clear: both;
}
#white_footer {
float: left;
width: 300px;
background: #fff;
height: 20px;
}
#footer_content {
height: 20px;
}
.store {
overflow-y: scroll;
}
#the_store {
margin-top: 10px;
}
/* FONTS */
h1 {
font-size: 3em;
margin-bottom: 40px;
white-space: nowrap;
line-height: 0%;
}
h1.storefront {
font-size: 2em;
}
h2 {
font-size: 2em;
}
h3 {
font-size: 1.5em;
}
#content p strong {
font-weight: bold;
}
#content p img {
float: left;
margin: 5px 20px 20px 0;
}
#content p img:after {
margin-top: 20px;
}
#subscribe_mail input[type=text]{
width: 85px;
height: 12px;
font-size: 0.60em;
margin-bottom: 5px;
float: left;
margin-right: 4px;
}
#subscribe_mail input[type=text]:focus {
font-size: 0.75em;
}
#subscribe_mail input[type=submit] {
border: 1px solid #999;
font-size: 0.75em;
float: left;
}
.mp-message, .mp-loading {
font-size: 0.75em;
}
.MailPressFormName {
display: none;
}
#artist_info {
display: none;
margin-top: 40px;
overflow: hidden;
clear: both;
}
.more-less {
background: #000;
float: left;
color: #fff;
padding: 0 2px;
margin-top: 10px;
}
#artist_less {
display: none;
}
.gallery-icon a:hover {
background: none;
}
.gallery dl {
margin-top: 0 !important;
margin-bottom: 15px;
}
.gallery dl dd {
font-size: 0.75em;
}
.newsletterH {
margin-bottom: 5px;
}
I would use Firefox's Firebug plugin to see where the styles are coming from. IE provides a less friendly developer tool window that does something similar (I only use this if the style issue is only occurring in IE). I'd check your :hover and :focus rules first since those would cause things to happen on hover or select.