Okay guys, I am having a hell of a time trying to get my next classes website to be responsive, least in a way is helpful. My header will not change background images when the viewport is smaller then a desktop(tablet/mobile device). I can get the header's max-height to change, but the background image wont. Any help?
My code is below, but here is a jsfiddle link: https://jsfiddle.net/nb0u8ho7/
#charset "utf-8";
/*Browser Reset*/
body, p, header, aside, section, article, h1, h2, h3, nav, div, footer{
padding: 0;
margin: 0;
}
/*Style Start*/
.show-menu{
font-family:Helvetica,Arial, sans-serif;
text-decoration: none;
color:#FFFFFF;
background:#000000;
text-align: center;
padding:10px 0;
position: relative;
top:-20px;
display: none;
}
/*Hide checkbox*/
input[type=checkbox] {
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu {
display: block;
}
#media screen and (min-width: 481px) and (max-width: 959px){
header{
max-height:150px;
background-image: url(../images/logoenclosed.jpg)
}
header h3{
postition: relative;
}
Nav{
margin-right: -6em;
}
nav ul li{
position: relative;
top: -138px;
font-size:75%;
margin-bottom: 1em;
}
section{
float: none;
max-width: 80%;
margin-left: 8%;
}
aside {
float: none;
max-width:50px;
}
#dashboard {
display: none;
}
}
#media screen and (max-width : 480px){
aside{
float:none;
width: 760px;
padding-bottom:1%;
}
#dashboard{
display: none;
}
header{
max-height: 150px;
max-width: 480px;
background-size: 100%;
}
header h3{
display: none;
}
header nav{
position: relative;
top:-123px;
left: -286px;
width:100%;
}
header nav ul{
position: static;
display: none;
}
header nav li{
margin-bottom: 0px;
border-top: 1px solid #252122;
}
header nav li a:hover,
header nav li a.hover{
color: #e1e2dd;
background-color:#000000;
border-radius: 0;
}
header nav ul li,
header nav ul li a{
width: 100%;
float: none;
text-align: center;
background-color: #000000;
padding: 0em 0em 0em 3em;
}
.grills{
float: left;
border: solid black 1px;
width: 30px;
margin-bottom: 1em;
height: 30%;
}
.pic_resize{
width: 100%;
max-height: 50%;
}
section{
float: none;
max-width: 80%;
}
.show-menu{
position: relative;
top: 0px;
display: block;
}
#wrapper{
margin: 0;
padding: 0;
width: auto;
}
}
.ads{
float: right;
text-align: center;
font-size: 90%;
color: #b498989;
}
.ads p{
background-color: #29292C;
padding-top: 0.3em;
}
aside{
overflow: hidden;
max-width: 200px;
float: right;
min-height: 900px;
background-color: #29292C;
}
aside p{
padding: 0px 10px;
}
article p{
padding: 1.5em;
}
article div{
align-content: center;
margin-left: 1.676em;
}
body{
color: #6D6A6C;
background-color: #131313;
font: 100% Verdana;
}
body h1, h2, h3{
color: #FFFFFF;
}
#ctrtitle{
text-align: center;
position: relative;
top: 210px;
}
footer{
clear: both;
background-color: #000000;
text-align: center;
font-size: 85%;
min-height: 100px;
}
footer p{
padding-top: 3%;
}
.grills{
float: left;
border: solid black 1px;
width: 22%;
margin-bottom: 1em;
height: 30%;
}
header{
background: #7b7c79;
background:url(../images/header.jpg);
height: 300px;
}
header h1{
text-align: center;
color: #252122;
font-weight: 900;
font-size: 2.5em;
margin: 0;
}
.lead{
font-family: Georgia;
font-size: 1.3em;
text-align: left;
font-style: italic;
}
nav{
align-content: center;
padding: 14.6em 0 0 17.9em;
}
nav ul{
text-align: center;
margin: 0em 5em 0 -16em;
list-style: none;
}
nav ul li{
position: relative;
padding: 0 2em 0 0;
float: left;
}
nav ul li a:hover,
nav ul li a:focus,
nav ul li a:active,
nav ul li.hover a{
background-image: url(../images/nav/nav_1_invert.jpg);
background-size: cover;
transition: background-image .5s ease-out; /*<-- this line will produce a transition */
color: #483838;
}
nav ul li a {
background-image: url(../images/nav/nav_1.jpg);
background-size:cover;
background-repeat:no-repeat;
background-position: center;
font-size:110%;
display: block;
color: #ffffff;
border-radius: 8px 8px 00px;/* dog-ears the top, flattens the bottom */
text-decoration: none;
padding:0.6em 0.9em 0.6em 0.7em;/* the same spacing as before */
white-space: nowrap;/* don't let long menu selections fall to the next line – messes with the display! */
outline:0;/* some browsers will outline a link – we would rather it not */
}
nav ul li:hover ul a:hover,
nav ul li.hover ul a:hover,
nav ul li.hover ul a:focus,
nav ul li.hover ul a:active {
background-image: url(../images/nav/place_holder.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border-radius: 8px 8px 00px;/* dog-ears the top, flattens the bottom */
text-decoration: none;
margin-left:-1px;/* pull them in close! */
white-space: nowrap;/* don't let long menu selections fall to the next line – messes with the display! */
outline:0;/* some browsers will outline a link – we would rather it not */
color:white;
}
p{
margin-bottom: 1.2em;
}
#pageholder{
background-image: url(../images/nav/place_holder.jpg);
background-size: cover;
background-size: 121px 50px;
pointer-events: none;
cursor: default;
}
.pic_resize{
width: 100%;
max-height: 35%;
}
.rgt{
float: right;
max-width: 45%;
padding: 0.3em;
}
section{
padding: 10px;
float: left;
max-width: 65%;
}
.text{
max-width: 80%;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
#wrapper{
max-width: 1200px;
margin: 0 auto;
background-color: #403E3A;
}
I am unsure as to what the heck is wrong with my coding, but I would appreciate any help at all.
Thanks,
-Dark_nemesis
Try adding this in <head> tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
After doing some digging, I ended up adding the following lines of code:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="css/index.css" rel="stylesheet" type="text/css">
<link href="css/tablet.css" rel="stylesheet" type="text/css" media="screen and (min-width: 481px) and (max-width:959px)">
<link href="css/mobile.css" rel="stylesheet" type="text/css" media="screen and (min-width:0px) and (max-width:480px)">
and took all of the CSS coding from my previous CSS media queries and make two more, individual .CSS files. This seems to have taken care of the problem, least so far anyway. Thank you all for your help.
P.S. Just in case someone one ends up reading through this trying to figure out a solution to a similar problem, here is some education:
I came to this solution because I read somewhere(I believe it was here on stackoverflow) that the problem may be that before I added the "(min-width:px") and (max-width): portions to my media queries that my normal "desktop" version also had the same widths as the media queries. E.G. My desktop version also had a width of 480px, and 959px. This made my site use my desktop version of CSS for all three queries. I'm not positive is this is the actual reason as to why mine wasn't working, but that made me try the different way, and it seems to work. If I am wrong, please correct me as I am not trying to misinform anyone on anything.
Thanks,
Dark_nemesis
Related
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'm curious why my 'homepage' link keeps shifting over. I've made a fiddle of the problem:
jsfiddle.net/nbf8fwdv/
Thanks for the help. I'm still getting the hang of semantics and proper usage in CSS, so if you see any glaring problems with my code that only a beginner would make, please let me know. Thanks for the help in advance.
In order to prevent the homepage from shifting on hover, you'll want to remove this property:
max-width: 75px;
from this class:
nav ul>li:hover {
background-color: rgba(253,235,193,.6);
max-width: 75px;
text-align:center;
}
Because the homepage list item is naturally greater than 75px, the max-width property is actually reducing it's width on hover.
You can write a class like bootstrap
body {
background-color: white;
font-family: PT Sans, sans-serif;
text-shadow: 1px 1px rgba(166,166,166,.2);
}
header {
background: white;
width: 100%
padding: 40px 0;
color: black;
text-align: center;
}
a {
text-decoration: none;
color: black;
font-size: 1.0em;
letter-spacing: 2px;
}
nav {
box-shadow: 1px 1px 10px rgba(166,166,166,.2);
}
nav ul {
background-color: rgba(253,235,193,.3);
overflow: visible;
color: white;
padding: 0;
text-align: center;
margin: 0;
position: relative;
}
nav ul li {
display: inline-block;
padding: 20px 40px;
position: relative;
}
nav ul ul {
display: none;
}
nav ul>li:hover {
background-color: rgba(253,235,193,.6);
text-align:center;
}
nav ul li:hover ul{
display: block;
margin-top: 20px;
}
nav ul li:hover li{
margin-left: -40px;
margin-top:-15px;
text-align: center;
float: left;
clear: left;
}
.portfolio_menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:160px;padding:5px 0;margin:2px 0 0;font-size:14px;text-align:left;list-style:none;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);border-radius:4px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175)}
To actually save your other links by shifting over when hover over the "portfolio", here is my 2 cents. http://jsfiddle.net/nbf8fwdv/5/
nav ul ul {
display: none;
position:absolute;
left:0;
}
I have an header with 100% width, and a nav inside header with 980px
Now i want to give the position as fixed for both header and nav.
I have tried with the following code but could'nt get what i wanted to
Please help me,
my header.css
width:100%;
height:60px;
background: #ffffff;
position:fixed;
z-index:999;`
and my nav.css
background: #ffffff;
height: 60px;
text-align:center;
position:fixed;
z-index:99;
.nav ul
margin:0;
padding:0;
.nav li
display: inline-block;
list-style-type: none;
vertical-align:middle;`
.nav li a
font-size: 16px;
color: black;
display: block;
line-height: 60px;
padding: 0 10px;
text-decoration: none;
If the nav is inside the header you don't need position:fixed in your nav.css, you should also remove the z-index. A clearer description of the problem and the html you're using would be helpful if that doesn't help.
#Fastnto, it's something like this that you want?
http://jsfiddle.net/alexandrecanijo/NBp8F/
I've changed some parts of your original CSS in order to show the header (#ccccccc) and nav (#000000) and added the .content with enough lorem ipsum so that you are able to see the nav.
But, the CSS might be cleaned and refactored in some parts... Didn't had a change to do this...
Hope this helps.
html,body, p {
margin: 0;
padding: 0;
border: 0;
font: 14px arial;
}
.header {
width: 100%;
height: 80px;
background: #cccccc;
position: fixed;
z-index:999;
margin: 0;
clear: both;
top: 0;
}
.nav {
background: #000000;
height: 60px;
text-align:center;
z-index:99;
}
.nav ul {
margin:0;
padding:0;
}
.nav li {
float: left;
list-style-type: none;
}
.nav li a {
font-size: 16px;
color: #fe6700;
display: block;
line-height: 60px;
padding: 0 10px;
text-decoration: none;
}
.nav li a:hover {
color: #000000;
background: #fe6700;
}
.content {
margin-top: 80px;
}
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%;
}
Ok, I give up - I can't work it out; the wrapper seems to go from the top to the bottom while I want it to leave a gap at the top and bottom so the background appears through. I can't seem to work it out. I am very novice to this. Any help & ideas very welcome.
Code
body {
background: #ffffff url(bgfin.jpg) repeat;
font-family: Tahoma,arial, sans-serif;
font-size:12px;
color:#666666;
height: 100%;
margin:0;
padding:0;
}
#wrapper {
background: url(body-line.png) center repeat-y;
padding-top: 65px;
padding-bottom: 65px;
}
#wrappertop{
background: url(header.png) top center no-repeat;
}
#wrappertbtm{
background: url(footer-new.png) bottom center no-repeat;
padding-bottom: 65px;
}
#container{
width: 959px;
margin: 0 auto;
}
.title{
width: 959px;
height: 56px;
padding: 15px 0px 10px 0px;
font-size: 30px;
color: #bd7821;
}
#navigation{
position: relative;
width: 959px;
height: 40px;
z-index: 2;
}
#navigation li{
float: left;
z-index: 2;
padding: 0px 34px 0px 0px;
}
#navigation li a{
display: inline-block;
position: relative;
outline: none;
height: 28px;
color: #e3e3e3;
z-index: 2;
font-size: 12px;
padding: 15px 0px 0px 0px;
text-decoration: none;
}
#navigation li a:hover, #navigation li#active a{
color: #bd7821;
text-decoration: none;
}
#header{
position: relative;
width: 959px;
height: 196px;
z-index: 1;
margin: 20px 0px 0px 0px;
}
Try:
body { padding:20px 0; }
Or:
#wrapper { margin:20px 0; }
That is shorthand for:
#wrapper {
margin-top:20px;
margin-right:0;
margin-bottom:20px;
margin-left:0;
}
Remember:
Padding is rendered inside of the element
Margin is on the outside
This might help as a reminder:
How to remember in CSS that margin is outside the border, and padding inside