I am unable to put " a:hover " on my home button in menu bar. even unable to remove the text-decoration.
while i was trying my hands on media queries , just got puzzled.
****stack overflow settings is not allowing me to post question unless i add more details*****
body {
background-image: url("blue-bokeh.jpeg");
width: 100%;
height: 100%;
}
.wrap {
height: auto;
width: 90%;
margin: auto;
}
header {
background: #333;
color: white;
height: auto;
width:100%;
float: left;
}
header nav {
width: 100%;
height: auto;
}
header nav ul {
list-style: none;
height: auto;
width: auto; /* what happens if i change the value to 100% */
float: right;
margin-right:30px;
}
header nav ul li {
display: inline;
padding: 15px 30px;
float: left;
border-radius: 5px;
}
header nav ul li a.active {
text-decoration: none;
}
header nav ul li:hover {
background-color: #111;
}
header nav ul li a.active:active {
background-color: #4caf50;
}
.mainbody {
/*background: tomato;*/ /* get the code checked , if its repeated in .top class */
float: left;
margin-top: 20px;
border-radius: 10px;
/*padding: 20px 20px;*/
height: auto;
width: 60%;
margin-right: 2%;
}
.top {
background: tomato;
margin-bottom: 10px;
float: left;
border-radius: 10px;
padding: 20px 20px;
}
.top h3 {
color: darkslategray
}
.bottom {
background: tomato;
margin-bottom: 50px;
float: left;
border-radius: 10px;
padding: 20px 20px;
}
.bottom h3 {
color: darkslategray
}
.sidebar {
float: left;
height: auto;
width: 38%;
margin-top: 20px;
}
.topside {
background: orangered;
margin-bottom: 10px;
border-radius: 10px;
padding: 20px 20px;
}
.middleside {
background: orangered;
margin-bottom: 10px;
border-radius: 10px;
padding: 20px 20px;
}
.bottomside {
background: orangered;
margin-bottom: 10px;
border-radius: 10px;
padding: 20px 20px;
}
footer {
background: darkslategray;
float: left;
width: 100%;
height: auto;
border-radius: 10px;
}
footer p {
padding-left: 50px;
}
/* ------------------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------MEDIA QUERY STARTS HERE---------------------------------------------------------------*/
#media screen and (max-width: 700px) {
body {
background-image: url("blue-bokeh.jpeg");
width: 100%;
height: 100%;
}
.wrap {
height: auto;
width: 90%;
margin: auto;
}
header {
background: #444;
color: white;
height: auto;
width:100%;
}
header nav {
width: 100%;
height: auto;
}
header nav ul {
list-style: none;
height: auto;
width: 100%; /* what happens if i change the value to 100% */
margin: 0;
padding: 0;
text-align: center;
}
header nav ul li {
display: block;
padding: 15px 30px;
float: none;
}
header nav ul li:hover {
background-color: #111;
}
header nav ul li a.active:active {
background-color: #4caf50;
}
.mainbody {
/*background: tomato;*/ /* get the code checked , if its repeated in .top class */
margin-top: 20px;
border-radius: 10px;
/*padding: 20px 20px;*/
height: auto;
width: 100%;
}
.top {
background: tomato;
margin-bottom: 10px;
border-radius: 10px;
padding: 20px 20px;
}
.top h3 {
color: darkslategray
}
.bottom {
background: tomato;
border-radius: 10px;
padding: 20px 20px;
}
.bottom h3 {
color: darkslategray
}
.sidebar {
height: auto;
width: 100%;
}
.topside {
background: orangered;
margin-bottom: 10px;
border-radius: 10px;
padding: 20px 20px;
}
.middleside {
background: orangered;
margin-bottom: 10px;
border-radius: 10px;
padding: 20px 20px;
}
.bottomside {
background: orangered;
margin-bottom: 10px;
border-radius: 10px;
padding: 20px 20px;
}
footer {
background: darkslategray;
float: left;
width: 100%;
height: auto;
border-radius: 10px;
}
footer p {
padding-left: 50px;
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="restheme.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="wrap">
<header>
<nav>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
<div class="mainbody">
<article class="top">
<h3>First Post</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</article>
<article class="bottom">
<h3>Second Post</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</article>
</div>
<div class="sidebar">
<aside class="topside">
<h3>Top Sidebar</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</aside>
<aside class="middleside">
<h3>Middle Sidebar</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</aside>
<aside class="bottomside">
<h3>Bottom Sidebar</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</aside>
</div>
<footer>
<p>Copyright © 2016 Faltoo Webdesigns</p>
</footer>
</div>
</body>
</html>
If I understand you right, you want to achive something like this?
https://jsfiddle.net/j7j54Lta/1/
I did some improvements and changed the structure. The li gets the .active-class and not the anchor. If the anchor in the active li is hovered it changes the color (or whatever you want to achive):
header nav ul li.active a:hover{
color: red;
/* or whatever*/
}
Moreover there is no text-decoration:
header nav ul li.active a {
text-decoration: none;
cursor: default;
}
Related
Is there any way I can get these collapsible boxes to be in a row but still open the full content on the page? They also need to be in three columns. before opening but when opened it should show its full content.
It also has to work in mobile view also. Here is some code to help you out but this would be very useful to know due to using a system that doesn't like Java
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type='text/css'>
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.center-content {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.left {
-webkit-box-align: left;
-ms-flex-align: left;
align-items: left;
}
.right {
-webkit-box-align: right;
-ms-flex-align: right;
align-items: right;
}
.container {
display: flex;
align-items: center;
justify-content: left
}
img {
max-width: 100%
}
.image {
flex-basis: 40%
}
.text {
font-size: 20px;
padding-left: 0px;
}
/* Create two equal columns that float next to each other */
.column2 {
float: left;
width: 50%;
padding: 1%;
}
/* Create three equal columns that float next to each other */
.column3 {
float: left;
width: 33.33%;
padding: 1%;
}
/* Create four equal columns that float next to each other */
.column4 {
float: left;
width: 25%;
padding: 1%;
}
/* Create five equal columns that float next to each other */
.column5 {
float: left;
width: 20%;
padding: 1%;
}
/* Create six equal columns that float next to each other */
.column6 {
float: left;
width: 16.66666%;
padding: 1%;
}
/* Create seven equal columns that float next to each other */
.column7 {
float: left;
width: 16.5%;
padding: 0.5%;
}
/* Create eight equal columns that float next to each other */
.column8 {
float: left;
width: 12.5%;
padding: 0.5%;
}
/* Create nine equal columns that float next to each other */
.column9 {
float: left;
width: 11.1111%;
padding: 0.5%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column2 {
width: 100%;
}
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column3 {
width: 100%;
}
}
/* Responsive layout - makes the four columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column4 {
width: 100%;
}
}
/* Responsive layout - makes the five columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column5 {
width: 100%;
}
}
/* Responsive layout - makes the six columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column6 {
width: 100%;
}
}
/* Responsive layout - makes the seven columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column7 {
width: 100%;
}
}
/* Responsive layout - makes the eight columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column8 {
width: 100%;
}
}
/* Responsive layout - makes the nine columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column9 {
width: 100%;
}
}
/* Responsive layout - makes two columns of different widths stack on top of each other instead of next to each other */
.first-column {
width: 30%;
padding: 1vw;
float: left;
}
.second-column {
width: 70%;
padding: 1vw;
float: right;
}
/* Responsive layout - another example where two columns of different widths stack on top of each other instead of next to each other */
.first-column1 {
width: 75%;
padding: 1vw;
float: left;
}
.second-column1 {
width: 25%;
padding: 1vw;
float: right;
}
/* Responsive layout - another example where two columns of different widths stack on top of each other instead of next to each other */
.first-columnheader {
width: 55%;
padding: 1vw;
float: left;
}
.second-columnheader {
width: 45%;
padding: 1vw;
float: right;
}
/* Responsive layout - makes two columns of different widths stack on top of each other instead of next to each other */
.first-columntext {
width: 100%;
padding: 1vw;
float: left;
}
.second-columntext {
width: 100%;
padding: 1vw;
float: right;
}
/* the next section defines what you want the columns to look like in mobile view - all are linked to the column set ups in the rows above */
#media only screen and (max-width: 768px) {
/* links to row 93 */
.first-column {
width: 100%;
padding-bottom: 10px;
float: none;
}
.second-column {
width: 100%;
padding-bottom: 10px;
float: none;
}
/* links to row 107 */
.first-column1 {
width: 100%;
padding-bottom: 10px;
float: none;
}
.second-column1 {
width: 100%;
padding-bottom: 10px;
float: none;
}
/* links to row 137 */
.first-columnheader {
width: 100%;
padding-bottom: 2px;
float: none;
}
.second-columnheader {
width: 100%;
padding-bottom: 2px;
float: none;
}
/* links to row 151 */
.first-columntext {
width: 100%;
padding-bottom: 10px;
float: none;
}
.second-columntext {
width: 100%;
padding-bottom: 10px;
float: none;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
}
#media (min-width: 140px)
{
.style1
{
font-size:11px;
}
.style2
{
font-size:11.5px;
}
.style3
{
font-size:12px;
}
.style4
{
font-size:12.5px;
}
.style5
{
font-size:14px;
}
.style6
{
font-size:16px;
}
#media (min-width: 768px)
{
.style1
{
font-size:11px;
}
.style2
{
font-size:12px;
}
.style3
{
font-size:14px;
}
.style4
{
font-size:18px;
}
.style5
{
font-size:24px;
}
.style6
{
font-size:32px;
}
}
#media (min-width: 1400px)
{
.style1
{
font-size:18px;
}
.style2
{
font-size:20px;
}
.style3
{
font-size:24px;
}
.style4
{
font-size:28px;
}
.style5
{
font-size:32px;
}
.style6
{
font-size:36px;
}
}
.center-text {
text-align: center;
}
.bg-rbgreen {
background-color: #50bc08;
}
.bg-rbpalegreen {
background-color: #95ea5c;
}
.bg-rbgray {
background-color: #969696;
}
.bg-rbpalegray {
background-color: #cacaca;
}
.bg-rbred {
background-color: #e03a40;
}
.bg-rboffwhite {
background-color: #f4f4f4;
}
.bg-rbblue {
background-color: #131f6b;
}
.bg-rbpaleblue {
background-color: #A4CFEA;
}
.border-dark {
border: 0.5rem solid #202223;
}
.border-thindarkgray {
border: 0.1rem solid #867d72;
}
.border-mediumdark {
border: 0.3rem solid #202223; border-radius: 25px;
}
.border-mediumlight {
border: 0.3rem solid #ffffff; border-radius: 25px;
}
.border-roundlight {
border: 0.3rem solid #ffffff; border-radius: 25px;
}
.border-light {
border: 0.5rem solid #ffffff;
}
.border-thicklight {
border: 1.3rem solid #ffffff;
}
.border-thinlight {
border: 0.5rem solid #ffffff;
}
.same-height {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.tab {
margin-left: 5%;
}
.space-around {
margin: 0.5rem;
}
.space-around1 {
margin: 0rem;
}
.space-around2 {
margin: 0.5rem 0rem 0rem 0rem;
}
.space-around3 {
margin: 0.5rem 0rem 0rem 0.5rem;
}
.no-bottom-padding {
padding-bottom: 0px !important;
}
.text-white {
color: white;
}
.text-charcoal {
color: #3b3535;
}
/* img sizing */
img.xsmall {
width: 10% !important;
}
img.small {
width: 25% !important;
}
img.medium {
width: 50% !important;
}
img.large {
width: 75% !important;
}
img.xlarge {
width: 100% !important;
}
img.center {
margin: auto;
}
img.fill {
height: 100%;
width: 100%;
}
a {
text-decoration: none;
}
/* contain a tag within contents*/
a.contain {
display: contents !important;
}
/* ALLOW ITEMS IN BOX TO STACK */
.stacked {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column;
}
.layout {
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
}
.layout .box {
/* FLEX BOXES (can apply flex styles like columns) */
/*display: inline-flex; */
position: relative;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-height: 100px;
width: 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.layout .box > p {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
display: block;
}
.layout .box > img {
width: 100%;
display: block;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
}
.layout .box > a {
width: 100%;
display: block;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
}
.layout .box > a > * {
width: 100%;
display: block;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
}
.layout .box.p1 {
padding: 0.5rem;
}
.layout .box.p2 {
padding: 1rem;
}
.layout .box.p3 {
padding: 1.5rem;
}
.layout .box.p4 {
padding: 4rem;
}
.layout .box.p5 {
padding: 0.2rem;
}
.layout .box.pmxd {
padding: 0rem 0rem 0rem 2rem;
}
.layout .box.pmxd1 {
padding: 0rem 0rem 0rem 7rem;
}
.layout .box.pmxd2 {
padding: 0rem 0rem 0rem 1rem;
}
.layout.two {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row;
flex-flow: row;
}
.layout.two.split_25_75 > .box, .layout.two.split_2575 > .box, .layout.two.split2575 > .box {
width: 25%;
}
.layout.two.split_25_75 > .box:nth-child(2n), .layout.two.split_2575 > .box:nth-child(2n), .layout.two.split2575 > .box:nth-child(2n) {
width: 75%;
}
.layout.two.split_80_20 > .box, .layout.two.split_8020 > .box, .layout.two.split8020 > .box {
width: 80%;
}
.layout.two.split_80_20 > .box:nth-child(2n), .layout.two.split_8020 > .box:nth-child(2n), .layout.two.split8020 > .box:nth-child(2n) {
width: 20%;
}
.layout.two.split_60_40 > .box, .layout.two.split_6040 > .box, .layout.two.split6040 > .box {
width: 60%;
}
.layout.two.split_60_40 > .box:nth-child(2n), .layout.two.split_6040 > .box:nth-child(2n), .layout.two.split6040 > .box:nth-child(2n) {
width: 40%;
}
.layout.two > .box {
width: 50%;
}
.layout.three > .box {
width: 33.333%;
}
.layout.four > .box {
width: 25%;
}
.layout.three.split_25_50_25 > .box, .layout.three.split25_50_25 > .box, .layout.three.split_255025 > .box, .layout.three.split255025 > .box {
width: 25%;
}
.layout.three.split_25_50_25 > .box:nth-child(2n), .layout.three.split25_50_25 > .box:nth-child(2n), .layout.three.split_255025 > .box:nth-child(2n), .layout.three.split255025 > .box:nth-child(2n) {
width: 50%;
}
.bottomRight {
position: absolute;
right: -1rem;
bottom: -1rem;
width: 50% !important;
}
/*
CSS for the main interaction
*/
.accordion > input[type="checkbox"] {
position: absolute;
left: -100vw;
}
.accordion .content {
overflow-y: hidden;
height: 0;
transition: height 0.3s ease;
}
.accordion > input[type="checkbox"]:checked ~ .content {
height: auto;
overflow: visible;
}
.accordion label {
display: block;
}
/*
Styling
*/
.accordion {
margin-bottom: 1em;
height: auto;
}
.accordion > input[type="checkbox"]:checked ~ .content {
padding: 15px;
border-top: 0;
}
.accordion .handle {
margin: 0;
font-size: 1.125em;
line-height: 1.2em;
}
.accordion label {
color: #000;
cursor: pointer;
font-weight: bold;
padding: 15px;
background: #14b1e8;
margin: 0em 65.5em 0em 1.5em;
}
.accordion label:hover,
.accordion label:focus {
background: #50bc08;
color: #fff;
}
.accordion .handle label:before {
content: "+";
display: inline-block;
margin-right: 10px;
font-size: .58em;
line-height: 1.556em;
vertical-align: middle;
}
.accordion > input[type="checkbox"]:checked ~ .handle label:before {
content: "-";
}
/*
CSS for the main interaction
*/
.accordion1 > input[type="checkbox"] {
position: absolute;
left: -100vw;
}
.accordion1 .content {
overflow-y: hidden;
height: 0;
transition: height 0.3s ease;
}
.accordion1 > input[type="checkbox"]:checked ~ .content {
height: auto;
overflow: visible;
}
.accordion1 label {
display: block;
}
/*
Styling
*/
.accordion1 {
margin-bottom: 1em;
height: auto;
}
.accordion1 > input[type="checkbox"]:checked ~ .content {
padding: 15px;
border-top: 0;
}
.accordion1 .handle {
margin: 0;
font-size: 1.125em;
line-height: 1.2em;
}
.accordion1 label {
color: #000;
cursor: pointer;
font-weight: bold;
padding: 15px;
background: #14b1e8;
margin: 0em 65.5em 0em 1.5em;
}
.accordion1 label:hover,
.accordion1 label:focus {
background: #50bc08;
color: #fff;
}
.accordion1 .handle label:before {
content: "+";
display: inline-block;
margin-right: 10px;
font-size: .58em;
line-height: 1.556em;
vertical-align: middle;
}
.accordion1 > input[type="checkbox"]:checked ~ .handle label:before {
content: "-";
}
/*
CSS for the main interaction
*/
.accordion2 > input[type="checkbox"] {
position: absolute;
left: -100vw;
}
.accordion2 .content {
overflow-y: hidden;
height: 0;
transition: height 0.3s ease;
}
.accordion2 > input[type="checkbox"]:checked ~ .content {
height: auto;
overflow: visible;
}
.accordion2 label {
display: block;
}
/*
Styling
*/
.accordion2 {
margin-bottom: 1em;
height: auto;
}
.accordion2 > input[type="checkbox"]:checked ~ .content {
padding: 15px;
border-top: 0;
}
.accordion2 .handle {
margin: 0;
font-size: 1.125em;
line-height: 1.2em;
}
.accordion2 label {
color: #000;
cursor: pointer;
font-weight: bold;
padding: 15px;
background: #14b1e8;
margin: 0em 65.5em 0em 1.5em;
}
.accordion2 label:hover,
.accordion2 label:focus {
background: #50bc08;
color: #fff;
}
.accordion2 .handle label:before {
content: "+";
display: inline-block;
margin-right: 10px;
font-size: .58em;
line-height: 1.556em;
vertical-align: middle;
}
.accordion2 > input[type="checkbox"]:checked ~ .handle label:before {
content: "-";
}
html {
height: 1800px;
}
#media (max-width: 800px) {
html {
height: 3200px;
}
}
/*# sourceMappingURL=base.css.map */
</style>
</head>
<body>
<div class="page" style="font-family: 'lato',helvetica;">
<div class="layout one">
<div class="border-thinlight style1" style="color: #131f6b; padding: 1vw;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<section class="accordion">
<input type="checkbox" name="collapse" id="handle1">
<h2 class="handle">
<label for="handle1">Headers</label>
</h2>
<div class="content">
<div class="layout one">
<div class="column4 style1 bg-rboffwhite border-thinlight" style="min-height: 66vw; height: 100%; color: #002060; padding: 1vw;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="column4 style1 bg-rboffwhite border-thinlight" style="min-height: 66vw; height: 100%; color: #131f6b; padding: 1vw;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="column4 style1 bg-rboffwhite border-thinlight" style="min-height: 66vw; height: 100%; color: #131f6b; padding: 1vw;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<span class="style1" style="color: #ff0000;"><strong>Header</strong></span><br /><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="column4 style1 bg-rboffwhite border-thinlight" style="min-height: 66vw; height: 100%; color: #131f6b; padding: 1vw;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>
</section>
<section class="accordion1">
<input type="checkbox" name="collapse2" id="handle2">
<h2 class="handle">
<label for="handle2">Header</label>
</h2>
<div class="content">
<div class="layout one">
<div class="first-column" style="min-height: 20vw; height: 100%; padding: 1vw;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="second-column style1 bg-rboffwhite border-thinlight" style="min-height: 20vw; height: 100%; padding: 1vw; color: #002060;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>
</section>
<section class="accordion2">
<input type="checkbox" name="collapse3" id="handle3">
<h2 class="handle">
<label for="handle3">Header</label>
</h2>
<div class="content">
<div class="layout one">
<div class="first-column style1 bg-rboffwhite border-thinlight" style="min-height: 42.5vw; height: 100%; padding: 1vw; color: #002060;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="second-column style1 bg-rboffwhite border-thinlight" style="min-height: 42.5vw; height: 100%; padding: 1vw; color: #002060;">
<span style="color: #ff0000;"><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</section>
</div>
</body>
</html>
.accordion1 .content {
overflow-y: hidden;
height: 0;
transition: height 0.3s ease;
background-color: transparent;
position: absolute;
width: 100%;
z-index: -1;
border-radius: 6px;
left: 0;
I have found the answer it took a while but separate each column, then add left:0 then all the content goes to the left, but now got another problem, the content once selected is showing over one another. Just trying to find out how to stop it, I have tried removing the Z-index but it still does it. If there is any resolve for this would be greatly helpful
*Hello, I want to have text below the image like in the example, but I can't figure out what is wrong, i took the code from
W3Schools: https://www.w3schools.com
/css/tryit.asp?filename=trycss_ex_images_card
Can someone help? Thanks
Example Image: https://imgur.com/a/P86DVjW
What It Looks Like: https://imgur.com/a/JOXpAJI*
```{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: #32053d;
}
header {
position: absolute;
top: 0;
Left: 0;
width: 100%;
padding: 30px 100px;
display: flex;
justify-content: space-between;
align-items: center
}
header .logo
{
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
}
header ul
{
display: flex;
justify-content: center;
align-items: center;
}
header ul li
{
list-style: none;
margin-left: 20px;
}
header ul li a
{
text-decoration: none;
padding: 6px 15px;
color: #fff;
border-radius: 20px;
}
header ul li a:hover,
header ul li a.active
{
background: #fff;
color: #4a2880;
}
h1 {
color: white;
margin-top: 250px;
margin-left: 270px;
}
p {
color:white;
margin-left: 60px;
text-align: center;
font-size: 15px;
}
.sec {
margin-right: 80px;
}
div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
}
div.container {
text-align: center;
padding: 10px 20px;
}
```<!DOCTYPE html>
<html>
<h1>ABC</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<center><img src="images/ArrowDown.webp" id="arrow" width="200"></center>
<div class="sec">
<center> <div class="polaroid">
<img src="Images/Darbs1.png" alt="Darbs1" style="width:100%">
<div class="container">
<p>Code</p>
</div>
</div> </center>
<center> <div class="polaroid">
<img src="images/Darbs1.png" alt="Darbs2" style="width:100%">
<div class="container">
<p>Code</p>
</div>
</div> </center>
<head>
<title>Projects</title>
<link rel="stylesheet" type="text/css" href="Website.css"
</head>
<body>
<header>
Logo
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</header>
</body>
</html>```
The problem is with the css. You have set the p tag color:white that is why it is not showing. Set color:black
p {
color:black;
margin-left: 60px;
text-align: center;
font-size: 15px;
}
I approve of Usama's answer, the description is written in white on a white background.
You can add a specific rule:
.polaroid .container p {
color:black;
}
PS: Can you reformat your code?
Use 4 spaces or the button {} in the text editor
the parent div, .blog_content, has two childern, one is a p element and the other is an image. for some reason they are behaving like block objects and not inline block. what is happenning is they are appearing on top of each other, like block elements would and not beside each other like what im trying to accomplish. i have set widths for them but they seem to be just ignoring them.
ill post the code below.
the relevant html
edit to show the full code
<!doctype html>
<html>
<head>
<title>My blog</title>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<nav>
<div id="nav_links">
Home
all posts
Services
About
Contact
</div>
<div id="nav_search">
<form method="post" action="#">
<input id="nav_form_input" type="text" name="nav_search" placeholder="Search">
<input id="nav_search_submit" type="submit" value="GO">
</form>
</div>
</nav>
<main>
<section>
<article>
<h1>My first blog post</h1>
<hr>
<div class="blog_content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<img src="images/159.jpg" alt="shit hot 159">
</div>
</article>
</section>
<aside>
</aside>
</main>
</body>
</html>
the relevant css
/* -------------------------------------------------------------------------------------------------------------------------------------*/
/* START OF HEADER.HTML STYLES */
/* -------------------------------------------------------------------------------------------------------------------------------------*/
nav {
position: relative;
height: 40px;
width: 100%;
background-color: rgb(40,50,60);
}
#nav_links {
position: relative;
float: left;
padding-left: 40px;
height: 40px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
}
#nav_search {
position: relative;
float: right;
padding-right: 80px;
height: 40px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;
}
nav > #nav_links > a {
text-decoration: none;
font-family: arial;
font-size: 12px;
color: rgb(220,220,220);
padding-left: 25px;
text-shadow: 0px 0px 1px grey;
letter-spacing: 1px;
}
#nav_form_input{
border-radius: 10px 0px 0px 10px;
height: 20px;
border: none;
outline: none;
color: rgb(220,220,220);
background-color: rgb(60,70,80);
padding: 5px;
}
#nav_search_submit {
border-radius: 5px;
height: 30px;
border: 1px solid rgb(60,110,30);
background: linear-gradient(rgb(100,160,80), rgb(90,140,60));
font-family: arial;
font-weight: bold;
color: rgb(240,240,240);
}
/* -------------------------------------------------------------------------------------------------------------------------------------*/
/* START OF MAIN.HTML STYLES */
/* -------------------------------------------------------------------------------------------------------------------------------------*/
main {
position: relative;
margin: 0 auto;
display: flex;
flex-flow: nowrap ;
width: 100%;
min-height: 600px;
flex-flow: row nowrap;
justify-content: space-around;
align-items: flex-start;
}
main section {
margin: 20px auto;
width: 65%;
min-height: 400px;
}
main section article {
border-radius: 30px 30px 0px 0px;
background-color: rgb(240,240,240);
height: 400px;
}
main section article h1 {
margin: 0 auto;
padding: 10px 0px 10px 20px;
border-radius: 30px 20px 0px 0px;
border: 2px 2px 0px 2px solid rgb(0,0,255);
color: white;
letter-spacing: 1px;
background: linear-gradient(rgb(80,170,240), rgb(60,140,240));
font-weight: 400;
}
hr {
width: 95%;
color: rgb(120,120,120);
}
.blog_content {
display: inline-flex;
flex-flow: row nowrap;
justify-content: space-between;
width: 100%;
}
main section article p {
overflow: hidden;
text-overflow: ellipsis;
white-space: wrap;
width: 42%;
}
main section article img {
margin: 3%;
width: 42%;
border-radius: 4px;
}
main aside {
margin: 20px auto;
width: 20%;
min-height: 400px;
border: 1px solid black;
}
i have tried using both flex and inline-flex but no joy with either
I'm trying to make a vertical navbar on the left of the page which is as long as the website (i.e. stretches down to the footer). However, it is only the right height when there is nothing above it - when I add the site's title, the navbar gets longer than the site.
body{
padding: 0px;
margin: 10px auto 0 auto;
font-family: 'corbel','arial';
background: #fff;
color: #444; /* text colour */
max-width: 1500px;
height: auto;
position: relative;
}
footer{
background: #333;
color: #fff;
padding: .1em 3em;
width: auto;
margin-left: 130px;
}
h1{
text-align: center;
font-size: 85px;
padding: 10px;
margin: auto;
margin-top: 10px;
}
#content{
margin-left: 150px;
}
/* Navbar */
#navbar{
background-color: #599;
list-style-type: none;
overflow: hidden;
width: 130px;
margin: 0px;
font-family: 'corbel','arial';
text-align: center;
padding-left: 0px;
height: 100%;
float: left;
position: absolute;
}
#nav_li{
text-align: center;
}
#nav_a{
text-decoration: none;
margin: 10px;
display: inline-block;
color: white;
}
<h1>Website Title</h1>
<body>
<ul id='navbar'>
<li id='nav_li'><a id='nav_a' href='index.html'>Home</a></li>
<li id='nav_li'><a id='nav_a' href='gallery.html'>Gallery</a></li>
<li id='nav_li'><a id='nav_a' href='reviews.html'>Our reviews</a></li>
</ul>
<div id='nav_fill'> </div>
<div id='content'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<footer>
<p>Content © Business Name - Website design ©</p>
</footer>
</body>
Big thanks to anyone who can help!
There are multiple ways of fixing this problem - the easiest is to just put the html, body background color as the sidebar in CSS (with height: 100%), then add a sticky header and footer at the top and bottom, and put a background-color on the container-element.
Something like this:
* { margin: 0; padding: 0;}
html, body {
height: 100%;
background: blue;
}
#content {
background: white;
}
h1 {
background: white;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3em;
}
#menu {
margin-top: 3.5em;
float: left;
width: 7em;
color: white;
}
#content {
background: white;
height: 100%;
margin: 3em 0 4em 7em;
padding-top: 3.5em;
}
footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 4em;
background: gray;
}
<body>
<h1>This is a heading</h1>
<ul id="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<div id="content">
<p>Something goes in here</p>
</div>
<footer>This is the footer</footer>
</body>
Try using position:fixed, and min/max-height i also suggest to use calc(), to calculate good size of navbar.
Here You have jsfiddle
I have an image I will be making into a button that I want to center over a responsive image. However I do not know how to center it over the image, or prevent it from hiding behind it. I tried z-index but that failed. See div "button". Thank you in advance!
#font-face {
font-family: Gudea;
src: url(https://www.google.com/fonts#UsePlace:use/Collection:Gudea:400,400italic,700);
}
h1, h2, h3, h4, h5, h6, p {
margin: 0;
padding: 0;
}
p {
margin: 0 0 1em 0;
font-size: 93%;
line-height: 1.5em;
}
body {
font-family: Helvetica, Arial, sans-serif;
padding: 0;
margin: 0;
background-image: url(http://oi68.tinypic.com/9tzv4n.jpg);
}
img {
max-width: 100%;
height: auto;
margin: 0 0 10px 0;
}
/* Section Inner */
div.section-inner {
max-width: 1100px;
padding: 0 25px;
margin: 0 auto;
}
/* Header */
div.header {
background-image: url(http://oi67.tinypic.com/33dfi86.jpg);
margin-top:40px;
height: 30px;
background-color: #E9E9E9;
padding: 40px 0;
}
/*Logo*/
h1 span {
position: absolute;
top: 97px;
left: 50%;
width: 402px;
height: 160px;
margin: -80px 0 0 -201px;
text-indent: -999em;
z-index: 99;
background: url(http://www.cutcodedown.com/for_others/barrelPony/sandmannFarm/images/h1Logo.png);
}
/*Satooth Pattern*/
h2 span {
position: absolute;
top: 140px;
height: 20px;
text-indent: -999em;
z-index: 90;
background: url(http://i1377.photobucket.com/albums/ah69/danalavelle3/Sawtooth_zps67oxpl7p.png);
background-repeat: repeat-x;
width: 100%;
}
/*Sawtooth Pattern Two*/
h3 span {
position: absolute;
margin-top: -30px;
height: 40px;
text-indent: -999em;
z-index: 90;
background: url(http://i1377.photobucket.com/albums/ah69/danalavelle3/Sawtooth_zps67oxpl7p.png);
background-repeat: repeat-x;
width: 100%;
}
/* Navigation */
#mainMenuCheck {
/* display none breaks this in some browsers, so just slide it out of view */
position:absolute;
left:-999em;
}
#mainMenu {
position:relative; /* depth sort over h1 */
background:#754 url(images/dots.png) top left;
padding:0.40em 0.75em 0.05em;
/* left margin adjusts for uneven menu width, change as needed */
text-align:center;
}
#mainMenu li {
list-style:none;
display:inline;
}
#mainMenu ul:before,
#mainMenu ul:after,
#mainMenu:after,
#mainMenu a {
color:#F0E8E0;
text-shadow:
0 0 2px #000,
2px 2px 2px #000,
2px 2px 3px #000;
}
#mainMenu a {
display:inline-block;
vertical-align:bottom;
text-decoration:none;
color:#F0E8E0;
-webkit-transition:color 0.3s, text-shadow 0.3s;
transition:color 0.3s, text-shadow 0.3s;
}
#mainMenu a.current {
color:#87C6BC;
}
#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
color:#87C6BC;
}
#mainMenu a:after {
display:inline-block;
padding:0 0.1em 0 0.5em;
color:#FFF;
}
#mainMenu .lastInSet a:after {
display:none;
}
#mainMenu .setBreak {
padding-right:8em;
}
#mainMenu a:after,
#mainMenu:after,
#mainMenu ul:before,
#mainMenu ul:after {
content:"\2605";
font-family:"arial unicode ms","dejavu sans",lastresort,sans-serif;
}
#mainMenu:after,
#mainMenu ul:before,
#mainMenu ul:after {
position:absolute;
left:50%;
width:3em;
bottom: 1em;
}
#mainMenu:after {
bottom:0.3em;
font-size:150%;
margin-left:-1.5em;
}
#mainMenu ul:before {
margin-left:-3em;
}
/* Body Content */
div.body-content {
padding: 50px 0;
background-image: url(http://i1377.photobucket.com/albums/ah69/danalavelle3/Page_zpscom5uhou.png);
font-family: Gudea;
}
button {
}
/* Thirds */
div.thirds {
padding-bottom: 50px;
text-align: center;
font-family: Gudea;
}
div.one-third {
width: 30%;
float: left;
margin-right: 5%;
text-align: center;
font-family: Gudea;
}
div.one-third-last {
margin: 0;
text-align: center;
font-family: Gudea;
}
h2 {
color:#4EB4AC;
font-family: Gudea;
font-size: 20px;
}
/* Main Column */
div.main {
width: 100%;
float: left;
margin-top: -30px;
margin-right: 5%;
text-align: center;
padding-bottom:20px;
font-family: Gudea;
position: relative;
}
/* Footer */
div.footer {
background-image: url(http://oi67.tinypic.com/33dfi86.jpg);
margin-top: 30px;
margin-bottom: 30px;
color: #FFF;
padding: 15px 0;
text-align: center;
}
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
/*Mobile Nav*/
#media (min-width:900px) {
.header2 {
display: none;
}
.menu {
display: none;
}
}
#media (max-width:900px) {
body {
z-index: 100;
margin:;
font-family: font:bold 16px/18px arial,helvetica,sans-serif;
background-color: #f4f4f4;
}
a {
color: #F8F4E6;
text-shadow:
0 0 5px #000,
5px 5px 5px #754;
}
.menu a:before,
.menu ul:before,
.menu ul:before {
content:"\2605";
}
/* header */
.header2 {
background-color:#6A4E39;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
position: relative;
width: 100%;
z-index: 3;
}
.header2 ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-image:none;
}
.header2 li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header2 li a:hover,
.header2 .menu-btn:hover {
background-color:#4EB4AC;
}
.header2 .logo {
display: block;
float: left;
font-size: 15px;
padding: 10px 20px;
margin-top: 15px;
text-decoration: none;
}
/* menu */
.header2 .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.header2 .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header2 .menu-icon .navicon {
background: #F8F4E6;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header2 .menu-icon .navicon:before,
.header2 .menu-icon .navicon:after {
background: #F8F4E6;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
margin-top: 7px;
}
.header2 .menu-icon .navicon:before {
top: 03px;
}
.header2 .menu-icon .navicon:after {
top: -2px;
}
/* menu btn */
.header2 .menu-btn {
display: none;
}
.header2 .menu-btn:checked ~ .menu {
max-height: none;
}
.header2 .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header2 .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header2 .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header2 .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header2 .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
}
/* 48em = 768px */
#media (max-width: 899px) {
#mainMenu {
display: none;
justify-content: center;
}
/* section */
.section {
overflow: hidden;
margin: auto;
max-width: 1400px;
}
.section a {
position: relative;
float: left;
width: 100%;
}
.section a img {
width: 100%;
display: block;
}
.section a span {
color: #fff;
position: absolute;
left: 5%;
bottom: 5%;
font-size: 2em;
text-shadow: 1px 1px 0 #000;
}
.section-split a span {
display: none;
}
.section-split a:hover span {
display: block;
}
/* 48em = 768px */
#media (min-width: 48em) {
.section-split a {
width: 50%;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Introduction to Responsive Web Design</title>
<meta name="viewport" content="width=device-width">
<!-- css -->
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css" media="screen and (max-width: 900px)">
</head>
<body>
<!--Logo-->
<h1>
<a href="/">
<span>-</span>
</a>
</h1>
<!--Sawtooth Pattern-->
<h2>
<a href="/">
<span>-</span>
</a>
</h2>
<!-- Header -->
<div class="header"><div class="section-inner">
</div></div>
<!-- Navigation -->
<div id="container">
<input type="checkbox" id="mainMenuCheck">
<label for="mainMenuCheck"></label>
<div id="mainMenu">
<ul>
<li>Home</li>
<li>About</li>
<li>What We Do</li>
<li class="lastInSet setBreak">Events</li>
<li>Success Stories</li>
<li>Contact</li>
<li>Events</li>
<li class="lastInSet">Blog</li>
</ul>
</div>
<!--Mobile Navigation-->
<link href="http://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet" type="text/css" />
<header class="header2">
Navigation
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li> Home</li>
<li> About</li>
<li> What We Do</li>
<li> Success Stories</li>
<li> Contact</li>
<li> Events</li>
<li> Blog</li>
</ul>
</header>
<!-- Body-Content -->
<div class="body-content"><div class="section-inner">
<div class="button">
<img src="http://i63.tinypic.com/2hyxcls.jpg">
</div>
<div class="main">
<img src="http://oi63.tinypic.com/14ifsz6.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!-- thirds -->
<div class="thirds clearfix">
<!-- one-third -->
<div class="one-third mobile-collapse">
<img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg" alt="A bird on a fence" />
<h2>The Trainer</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><!--/one-third-->
<!-- one-third -->
<div class="one-third one-third-second mobile-collapse">
<img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg" alt="A bird eating" />
<h2>Lessons</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><!--/one-third-->
<!-- one-third -->
<div class="one-third one-third-last mobile-collapse">
<img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg" alt="A cat" />
<h2>Training</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><!--/one-third-->
</div><!--/thirds-->
</div></div><!--/body-content-->
<!--Sawtooth Pattern Two-->
<h3>
<a href="/">
<span>-</span>
</a>
</h3>
<!-- Footer -->
<div class="footer"><div class="section-inner">
<p>Footer text placed here.</p>
</div></div>
</body>
</html>
The problem is coming because of the background image you set for class body-content. If you remove that and than set the z-index of div with class main as -1 then it will put the button picture on top of your responsive image.
The issue there is that you are using a lot of images on top of another without setting proper z-indexs. Try what I said above you will get it work. Hope it can help
Also see the already posted answer related to your problem . Stacking multiple images with z-index
A very simple solution would use a responsive container of some sort, setting the under image as background. Use:
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
Then put your button image inside the container and center it like normal.