I'm having this problem with a page I'm creating.screenshot
Here is the code for the html:
<!DOCTYPE html>
<head>
<meta charset="UTF-8"/>
<title>JJ TECH</title>
<link rel="stylesheet" href="_css/estilo.css"/>
</head>
<body>
<div id="interface">
<header id="cabecalho">
<nav id="menu">
<h1>Menu Principal</h1>
<ul>
<li>Home</li>
<li>Informações</li>
<li>Contato</li>
</ul>
</nav>
</header>
<p>Lorem ipsum dolor sit amet, elit ferri facilisi has an, eos probatus perpetua maluisset ad. Minim ponderum pro ut, cu vim referrentur philosophia, ex posse causae signiferumque mei. Dico erant veniam sea et, ut elitr ponderum delicata sed. Tation euismod vix ex, usu latine omnesque no. Vel no libris maiestatis.</p>
</div>
</body>
and css:
#charset "UTF-8";
body{
font-family: Arial, sans-serif;
background: #370b44;
}
div#interface{
width: 900px;
background: #fff;
margin: -20px auto 0 auto;
padding: 20px;
}
p{
text-align: justify;
text-indent: 30px;
}
/*CONFIGURAÇÃO DO MENU*/
nav#menu h1{
display: none;
}
nav#menu ul{
background-color: rgba(0,0,0,.5);
overflow: hidden;
list-style: none;
display: block;
font-size: 13pt;
margin: 0;
padding: 0;
position: fixed;
width: 100%;
top: 0;
left: 0;
}
nav#menu li{
float: left;
/*border-right: 1px solid #555;*/
}
nav#menu li:hover:not(.active){
background: #000;
}
a{
display: block;
text-decoration: none;
color: #fff;
padding: 15px;
}
.ativo{
background: #751891;
}
How can I make my content come after my menu, not under it?
Since your navigation is position fixed, you have to push down the content using padding or margin. First set body margin to 0. Then add padding-top: 60px; to div#interface. That should be a good starter. And of course try to learn something about block elements, inline elements, floating elements and check their different behavior regarding layouting.
You need to update your css for div#interface
div#interface{
width: 900px;
background: #fff;
margin: 67px auto 0 auto;
padding-top: 20px;
}
I hope this may help:
Change it according to your requirements. Especially add style in separate file.
You need to shuffle your HTML markup and add position fixed to div#interface I suggest change its width to 100%
here is the working code:
<head>
<meta charset="UTF-8"/>
<title>JJ TECH</title>
<style>
body{
font-family: Arial, sans-serif;
background: #370b44;
}
div#interface{
width: 900px;
background: #fff;
margin: -20px auto 0 auto;
padding: 20px;
position:fixed;
top:71px;
}
p{
text-align: justify;
text-indent: 30px;
}
/*CONFIGURAÇÃO DO MENU*/
nav#menu h1{
display: none;
}
nav#menu ul{
background-color: rgba(0,0,0,.5);
overflow: hidden;
list-style: none;
display: block;
font-size: 13pt;
margin: 0;
padding: 0;
position: fixed;
width: 100%;
top: 0;
left: 0;
}
nav#menu li{
float: left;
/*border-right: 1px solid #555;*/
}
nav#menu li:hover:not(.active){
background: #000;
}
a{
display: block;
text-decoration: none;
color: #fff;
padding: 15px;
}
.ativo{
background: #751891;
}
</style>
</head>
<body>
<header id="cabecalho">
<nav id="menu">
<h1>Menu Principal</h1>
<ul>
<li>Home</li>
<li>Informações</li>
<li>Contato</li>
</ul>
</nav>
</header>
<div id="interface">
<p>Lorem ipsum dolor sit amet, elit ferri facilisi has an, eos probatus perpetua maluisset ad. Minim ponderum pro ut, cu vim referrentur philosophia, ex posse causae signiferumque mei. Dico erant veniam sea et, ut elitr ponderum delicata sed. Tation euismod vix ex, usu latine omnesque no. Vel no libris maiestatis.</p>
</div>
</body>
Related
Here is my Html. I want to fix my nav item on top on scrolling using html and css I tried a lot of things but I was not able to fix it. How can I build it without JavaScript or jQuery?
<div class="contain">
<p>
Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones
no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae
gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec
et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
</p>
</div>
<nav>
<div class="navWide">
<div class="wideDiv">
Link 1
Link 2
Link 3
</div>
</div>
<div class="navNarrow">
<i class="fa fa-bars fa-2x"></i>
<div class="narrowLinks hidden">
Link 1
Link 2
Link 3
</div>
</div>
</nav>
<div class="contain">
<p>
Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones
no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae
gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec
et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
</p>
</div>
My custom CSS using this. How can I fix my problem? It will be really helpful for me and others too why I want to complete this using CSS. I am making a small component using html and CSS, this is one more component and I got stuck here.
.contain{
height:100vh;
backgroud:#ccc;
}
nav {
background-color: #CCC;
overflow: hidden;
padding: 1em;
border-bottom: 1px solid #000;
}
nav a {
color: #000;
}
nav a:visited {
color: #000;
}
nav .navWide {
display: none;
margin: 0 auto;
}
nav .navWide .wideDiv {
text-align: center;
}
nav .navWide .wideDiv a {
text-decoration: none;
display: inline-block;
padding: 0 2em;
}
nav .navNarrow i {
float: left;
cursor: pointer;
color: #000;
}
nav .navNarrow .narrowLinks a {
text-decoration: none;
display: block;
float: left;
clear: left;
padding: 0.5em 0;
}
.hidden {
display: none;
}
/*Adjust breakpoint as desired to select when the "hamburger" menu is
replaced by just the links.*/
#media (min-width: 480px) {
nav .navWide {
display: block;
}
nav .navNarrow {
display: none;
}
}
You could use position: sticky; on your nav, but note that it will not be supported on all browsers (for example IE 11). Here is the compatibility chart if you wanna take a look: https://caniuse.com/#feat=css-sticky
A safer fix is to set position: fixed; to you nav, and give your content some top padding.
So your css will be as follows:
body {
margin: 0;
}
.contain{
height:100vh;
background:#ccc;
padding-top: 50px;
}
nav {
background-color: #CCC;
overflow: hidden;
padding: 1em;
border-bottom: 1px solid #000;
position: fixed;
top: 0px;
display: block;
width: 100%;
}
nav a {
color: #000;
}
nav a:visited {
color: #000;
}
nav .navWide {
display: none;
margin: 0 auto;
}
nav .navWide .wideDiv {
text-align: center;
}
nav .navWide .wideDiv a {
text-decoration: none;
display: inline-block;
padding: 0 2em;
}
nav .navNarrow i {
float: left;
cursor: pointer;
color: #000;
}
nav .navNarrow .narrowLinks a {
text-decoration: none;
display: block;
float: left;
clear: left;
padding: 0.5em 0;
}
.hidden {
display: none;
}
/*Adjust breakpoint as desired to select when the "hamburger" menu is
replaced by just the links.*/
#media (min-width: 480px) {
nav .navWide {
display: block;
}
nav .navNarrow {
display: none;
}
}
You can actually use a simple
position: sticky;
top: 0;
Sticky behavior will apply once nav bar hits top position 0.
.contain{
height:100vh;
backgroud:#ccc;
}
nav {
background-color: #CCC;
overflow: hidden;
padding: 1em;
border-bottom: 1px solid #000;
position: sticky;
top: 0;
}
nav a {
color: #000;
}
nav a:visited {
color: #000;
}
nav .navWide {
display: none;
margin: 0 auto;
}
nav .navWide .wideDiv {
text-align: center;
}
nav .navWide .wideDiv a {
text-decoration: none;
display: inline-block;
padding: 0 2em;
}
nav .navNarrow i {
float: left;
cursor: pointer;
color: #000;
}
nav .navNarrow .narrowLinks a {
text-decoration: none;
display: block;
float: left;
clear: left;
padding: 0.5em 0;
}
.hidden {
display: none;
}
/*Adjust breakpoint as desired to select when the "hamburger" menu is
replaced by just the links.*/
#media (min-width: 480px) {
nav .navWide {
display: block;
}
nav .navNarrow {
display: none;
}
}
<div class="contain">
<p>
Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones
no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae
gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec
et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
</p>
</div>
<nav>
<div class="navWide">
<div class="wideDiv">
Link 1
Link 2
Link 3
</div>
</div>
<div class="navNarrow">
<i class="fa fa-bars fa-2x"></i>
<div class="narrowLinks hidden">
Link 1
Link 2
Link 3
</div>
</div>
</nav>
<div class="contain">
<p>
Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones
no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae
gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec
et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
</p>
</div>
As stated, the way to go is:
body {
height: 100vh;
overflow-y: auto
}
.nav {
position: sticky;
top: 20px;
}
As for 'not working in all browsers' that's a whole different story. If you really want to go through that, here's a good starting point:
You could use an onscroll eventListener to check the position of the nav, in relation to the screen, with getBoundingClientRect() - but it is much more expensive than the sticky implementation.
.makeItFixed {
position: fixed;
top: 0; left: 0;
};
var nav = document.getElementsByTgName('nav')[0];
window.addEventListener('scroll', function(){
if (nav.getBoundingClientRect().top <= 0) {
nav.classList.add('makeItFixed');
} else {
nav.classList.remove('makeItFixed');
}
});
This could use some proper optimization, including a debouncing interval, and eventually moving the getBoundingClientRect() outside of the check - it is an expensive operation as it causes a page reflow/layout with every call.
In the future, the intersectionObserver API will take over, but as you wanted it to work in 'all' browsers, this is out of the question.
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Why does this CSS margin-top style not work?
(14 answers)
Closed 4 years ago.
why is there space at the top of my header and above my body?
body {
background-color: #efefef;
font-family: "verdana";
max-width: 1000px;
border: solid #ffffff 3px;
margin: auto;
}
#container {
background-color: #8a8a8a;
}
#header {
background-color: #8a8a8a;
}
h1 {
background-color: #F47D31;
color: #FFFFFF;
text-align: center;
font-family: "verdana";
text-transform: uppercase;
padding: 10px 0 10px 0;
}
h2 {
background-color: #F47D31;
color: #ffffff;
font-family: "verdana";
text-transform: uppercase;
text-align: center;
padding: 10px 0 10px 0;
}
h3 {
background-color: #F47D31;
color: #ffffff;
font-family: "verdana";
text-transform: uppercase;
text-align: center;
padding: 10px 0 10px 0;
}
p {
font-family: "verdana";
line-height: 1.5em;
color: #ffffff;
text-align: justify;
}
#nav {
display: block;
width: 25%;
float: left;
}
#nav ul {
list-style-type: none;
}
#nav a:link, #nav a:visited {
display: block;
border-bottom: 2px solid #fff;
padding: 10px;
text-decoration: none;
font-weight: bold;
margin: 5px;
}
#nav a:hover {
color: white;
background-color: #F47D31;
text-decoration: underline;
}
hr {
border: solid #efefef 1px;
}
table {
padding: 10px;
}
tr:nth-child(even) {
background-color: #E9EAE8;
color: #2a2a2a;
}
tr:nth-child(odd) {
background-color: #ffffff;
color: #2a2a2a;
}
tr:hover {
background-color: #F47D31;
}
#products_list {
list-style: none;
padding: 20px
}
figure {
display: block;
width: 202px;
height: 170px;
float: left;
margin: 10px;
background-color: #e7e3d8;
padding: 9px;
}
figure img {
width: 200px;
height: 150px;
border: 1px solid #d6d6d6;
}
figcaption {
text-align: center;
color: #F47D31;
}
fieldset {
background-color: #f1f1f1;
border: none;
border-radius: 2px;
margin-bottom: 0px;
overflow: hidden;
padding: 0 10px;
}
ul {
background-color: #fff;
border: 1px solid #eaeaea;
list-style: none;
margin: 12px;
padding: 12px;
}
li {
margin: 0.5em 0;
}
label {
display: inline-block;
padding: 3px 6px;
text-align: right;
width: 150px;
vertical-align: top;
}
.paragraph {
padding: 0 10px 0 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Innovative Multimedia Seminar 1</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<h1>Hello World</h1>
<h2>Hello World 2</h2>
<h3>Innovative Multimedia Rocks!</h3>
</div>
<div id="container">
<div id="nav">
<!--Add Links Here -->
<ul>
<li> Home Page </li>
<li> Products Page </li>
<li> Register Page </li>
<li> SHU website homepage </li>
</ul>
</div>
<div>
<figure>
<img src="img/image1.jpg" alt="Horses in a field">
<figcaption>
A horse and two foals
</figcaption>
</figure>
<figure>
<img src="img/image2.jpg" alt="Flowers growing">
<figcaption>
Three Flowers Growing
</figcaption>
</figure>
<figure>
<img src="img/image3.jpg" alt="Butterfly on flower">
<figcaption>
Butterfly on flower
</figcaption>
</figure>
<div class="paragraph">
<p>
Lorem ipsum dolor sit amet, oporteat hendrerit id pro. His munere virtute facilis ex. Detracto concludaturque vel ea, quo id iusto deseruisse accommodare. Ea sit habeo audiam concludaturque, an usu vero numquam eruditi. Ex scripta neglegentur pri, timeam
omittam theophrastus ne mel, mea simul perpetua no.
</p>
<hr>
<p>
Vel aliquid fierent te, per quas elaboraret in. Eu mei omittam prodesset, vel liber complectitur concludaturque an. Nihil choro at qui, rebum legendos mei ex, vis ex choro quaeque reprimique. No pri bonorum expetenda liberavisse, sed ut erat senserit.
</p>
<hr>
<p>
No duo habemus vivendum euripidis. Et mutat populo constituto per, veniam populo honestatis sit ex. Propriae lucilius at ius, qui tale invidunt te. In vitae probatus explicari nec, ex prima delenit moderatius sit, putent mentitum gloriatur pro in. Justo
volumus eum an.
</p>
</div>
</div>
</div>
</body>
</html>
Just remove the margin from the h1 by putting margin-top: 0;
h1 {
background-color: #F47D31;
color: #FFFFFF;
text-align: center;
font-family: "verdana";
text-transform: uppercase;
padding: 10px 0 10px 0;
margin-top: 0;
}
Code Pen Example
and I'm not sure what you mean by the body having padding.
As you can see in the h1 breakdown picture, the h1 tag gets its styling from styles.css, and there is padding set to 10 pixels above and under the h1 tag.
So you could try to remove the padding-style from styles.css and see if it removes the space. Or yet easier, just uncheck the checkbox for the padding style in the DevTools shown in the picture.
Reference images:
Required
Current
Bottom is my work, top is my goal or as close to as possible.
I have two questions, why won't my div go to the right side of the page?
and
I'm having trouble filling in h1 and div with colour and a boarder any help would
be appreciated
Here is my code that i've been working on, sorry im new to CSS and html still.
body {
background-image: url("bg.jpg");
}
div { background-color; #cccccc;
opacity: 0.8;
padding: 5px;
width: 200px;
height: 200px;
border: 3px ridge #cccccc;
padding: 5px
margin: 10px
position:absolute;
right: 0%;
top: 0%;
}
h1
{ background-color; #cccccc;
padding: 5px;
font-weight: bold;
font-size: 40px;
text-align: center
opacity: 0.8;
position:absolute;
left: 45%;
top: 60%;
font-family,sans-serif
width: 300px;
}
</style>
</head>
<body>
<header id="header">
<div class="h1">
<h1 style="color:DarkSlateBlue" text-align: center;>Rythm and Blues</h1>
</div>
<div>
<div class="div">
<h3 style="color:DarkSlateBlue" text-align: center> Artist Name</h3>
<p style="color:DarkSlateBlue"> Lorem ipsum dolor sit amet, suas utinam numquam mea ea, errem neglegentur eum ut. Aliquam
reformidans et mel. soleat corpora prodesset id quo. ei cibo natum delenit his.</p>
</div>
</body>
Wouldn't fit in comments. Below is some fixes to your syntax.
<style>
body {
background-image: url("bg.jpg");
}
.div {
background-color: #cccccc;
opacity: 0.8;
width: 200px;
height: 200px;
border: 3px ridge #cccccc;
padding: 5px;
margin: 10px;
position:absolute;
right: 0%;
top: 0%;
}
.h1
{ background-color: #cccccc;
font-weight: bold;
font-size: 40px;
text-align: center;
opacity: 0.8;
position:absolute;
left: 45%;
top: 60%;
font-family,sans-serif;
width: 300px;
}
</style>
</head>
<body>
<div class="h1">
<h1 style="color:DarkSlateBlue;text-align: center;">Rythm and Blues</h1>
</div>
<div class="div">
<h3 style="color:DarkSlateBlue" text-align: center> Artist Name</h3>
<p style="color:DarkSlateBlue"> Lorem ipsum dolor sit amet, suas utinam numquam mea ea, errem neglegentur eum ut. Aliquam
reformidans et mel. soleat corpora prodesset id quo. ei cibo natum delenit his.</p>
</div>
</body>
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.
I am currently trying to achieve this effect:
and I have gotten very close, Here's what I have so far:
JSFIDDLE DEMO
CSS:
.block {
margin-top: 1em;
position: relative;
overflow: auto;
height: 100%;
width: 100%;
float: left;
}
.icon {
background: #000000;
display: inline-block;
height: 50px;
width: 112px;
}
.line {
position: absolute;
background: #000099;
width: 100%;
height: 1px;
z-index: -1;
top: 50%;
left: 0;
margin-left: -416px;
}
.text {
/*background: #004746;*/
display: inline-block;
position: relative;
vertical-align: middle;
max-width: 400px;
float: right;
border-left: 1px solid #000099;
padding-left: 1em;
}
.text:after {
content:"";
background: #000099;
position: absolute;
bottom: 0;
left: 0;
width: 1em;
height: 1px;
}
.text:before {
content:"";
background: #000099;
position: absolute;
top: 0;
left: 0;
width: 1em;
height: 1px;
}
.text p {
padding: 0 0 1em 0;
}
.text p:last-child {
margin: 0;
}
HTML:
<div class="block">
<div class="icon"></div>
<div class="line"></div>
<div class="text">
<p>Lorem ipsum dolor sit amet, pri eu liber utroque quaestio, ei dicta quaeque sed. Civibus omnesque concludaturque vim eu, ex his nostro quodsi, graecis commune posidonium mei ad. Nam facilis alienum fastidii te, te quando euripidis usu. Torquatos consetetur suscipiantur mel eu, duo cu impedit feugait.</p>
<p>Vocibus urbanitas suscipiantur pro ut, cu nisl nobis nonumy mel. Posse omnes urbanitas usu in, nusquam invidunt ad sed, mucius recusabo has ea. Aliquip voluptua ius eu, ex vix justo mundi, indoctum scripserit mei cu. Te sit tantas albucius probatus.</p>
</div>
</div>
My only problem is the box on the left ("icon"), needs to vertically align with the line that runs through. But the box can not be position absolute.
RULES:
Has to be responsive.
Needs to work from IE8 up.
Needs to account for the fact that the text on the right is dynamic and could grow or shrink.
add this code to your .icon class:
.icon {
position: absolute;
top: 50%;
margin-top: -25px;
}