How do I make the marquee go behind my logo?

How do I make the marquee go behind my logo? - html

^title practically
i wanted to put my marquee to go behind my logo on my header. how do i do this?
I have tried lots of stuff, asked my classmates but no one came up with an idea.
so here's my html code
<img class="logo" src="logo.jpeg">
<marquee>hello world</marquee>
<ul class="navbar">
<li><a class="active" href="homepage.html">Home</a></li>
<li>Products</li>
<li>History</li>
<li>About Us</li>
<li>Contact Us</li>
<div class="filler">.</div>
</ul>`
here's my css (used a lot of classes)
.slideshow {
height: 400px;
width: 600px;
display: block;
margin: 0 auto;
}
.slideshow2 {
text-align: center;
background-color: burlywood;
font-family: sans-serif;
font-size: 20px;
color: chocolate;
margin: 0;
padding: 0;
}
.sd3 {
text-decoration: underline;
color: darkgoldenrod;
}
.filler {
color: bisque;
background-color: bisque;
font-size: 34px;
padding-right: 16px;
}
.title {
background-color: burlywood;
color:#382E1C;
font-size: 30px;
font-family: sans-serif;
}
.img1 {
width: 500px;
height: 300px;
margin: 0;
padding: 0;
}
.bg {
background-color: #BAA378;
text-align: center;
}
.par{
background-color: #BAA378;
font-family: sans-serif;
font-size: 30px;
color: #453823;
margin: 0;
padding: 0;
}
.pricedesc {
background-color: chocolate;
color:#382E1C;
font-size: 30px;
font-family: sans-serif;
margin: 0;
padding: 0;
}
.logo {
position: absolute;
z-index: 10;
opacity: 0.75;
width: 225px;
height: 125px;
display: block;
margin: 0 auto;
}
.filler {
color: bisque;
background-color: bisque;
font-size: 34px;
padding-right: 16px;
}
body {
background-color: cornsilk;
width:100%;
}
.navbar{
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
}
li a {
font-size: 20px;
font-family: sans-serif;
display: block;
padding: 8px;
background-color: bisque;
color: chocolate;
text-decoration: none;
text-align: center;
}
li a:hover {
background-color: burlywood;
}
.active {
background-color:chocolate;
color: beige;
}
h1 {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
background-color: coral;
color:blanchedalmond;
text-align: center
}

You can absolutely position the image, and give it some higher z-index
img {
position: absolute;
z-index: 10;
opacity: 0.75;
}
<img src="https://unsplash.it/200/200">
<marquee>marquee text goes here</marquee>
I've made the image transparent, so you can see the text going under it.

Related

How to fix img in navbar not scaling

I'm trying to create a small website and want to place an image (logo, square, svg) in the navbar. I want the logo to fit the navbar but it simply just won't scale no matter what I try.
I've tried floating a div with the image to the left and the navbar to the right but it still won't scale. It's really frustrating.
Here's an image of the problem:
Here's my code (sorry it's messy):
#import url('https://fonts.googleapis.com/css?family=Montserrat');
.heading {
display: inline-block;
font-family: "Montserrat";
font-weight: lighter;
text-align: left;
margin-left: 20vw;
line-height: 30vw;
}
body {
width: 100%;
margin: auto;
font-family: 'Montserrat', sans-serif;
background-color: white;
}
.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
margin-top: 30px;
flex-flow: row wrap;
margin-top: -10vw;
}
img {
margin: 9px;
transition: filter 0.2s;
filter: brightness(100%);
display: inline-block;
min-height: 100px;
height: 50vh;
}
img:hover {
filter: brightness(80%);
}
.responsive:hover {}
header {
position: relative;
height: 50vh;
background-image: linear-gradient(rgb(50, 50, 50), rgb(30, 30, 30));
margin-top: -20px;
transform: skewY(-5deg);
transform-origin: top left;
}
.fullwidth {
width: 100%;
}
.headertitle {
margin-top: -36vh;
margin-left: 12vw;
position: absolute;
font-size: calc(13px + 2.5vw);
color: white;
font-family: 'Montserrat';
font-weight: lighter;
}
/* navbar */
nav {
background: rgb(52, 52, 52);
position: relative;
z-index: 1;
height: calc(18px + 6vh);
box-shadow: 0 3px 3px -1px rgba(0, 0, 0, 0.065);
overflow: auto;
width: 100vw;
}
nav ul {
margin: 0;
padding: 0;
text-align: left;
margin-left: 1.2vw;
}
nav ul li {
display: inline-block;
list-style: none;
font-size: 1.2em;
padding: 1vh;
}
.navul a {
text-decoration: none;
color: white;
line-height: 5.5vh;
height: 5.5vh;
font-size: calc(15px + 0.25vh + 0.15vw);
}
.navuul a:visited,
a:link,
a:active {
text-decoration: none;
color: white;
font-weight: 200;
line-height: 5.5vh;
height: 5.5vh;
}
.navuul a:hover {
text-decoration: none;
color: grey;
font-weight: 200;
line-height: 5.5vh;
height: 5.5vh;
}
.submit {
float: right;
margin-right: 1.5vw;
}
.submit a {
color: white;
border-radius: 5px;
}
.navimg img {
max-width: 100%;
max-height: 20%;
}
.navimgdiv {
height: 1.5vh;
}
/* navbar end */
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="pgallerystyles.css">
<title> Photo Gallery </title>
<link rel="shortcut icon" href="logo.ico">
</head>
<body>
<div class="fullwidth">
</div>
<nav>
<ul class="navul">
<li>
<div class="navimgdiv"><img class="navimg" src="logo.svg"></div>Lumastock</li>
<li>Photos</li>
<li>Featured</li>
<li>Contact</li>
<li>Pricing</li>
<li>Assesment Requirements</li>
<li class="submit">Submit a photo</li>
</ul>
</nav>
<header>
</header>
<h1 class="headertitle">Image Gallery</h1>
Thanks!

Simply use the logo outside of the list. I have added max-width for logo image. Optionally padding and margin you can customize based on your requirement. I hope this solution will be helpful.
.heading {
display: inline-block;
font-family: "Montserrat";
font-weight: lighter;
text-align: left;
margin-left: 20vw;
line-height: 30vw;
}
body {
width: 100%;
margin: auto;
font-family: 'Montserrat', sans-serif;
background-color: white;
}
.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
margin-top: 30px;
flex-flow: row wrap;
margin-top: -10vw;
}
img {
/* margin: 9px;
transition: filter 0.2s;
filter: brightness(100%);
display: inline-block;
min-height: 100px;
height: 50vh; */
max-width: 100%;
}
img:hover {
filter: brightness(80%);
}
.responsive:hover {}
header {
position: relative;
height: 50vh;
background-image: linear-gradient(rgb(50, 50, 50), rgb(30, 30, 30));
margin-top: -20px;
transform: skewY(-5deg);
transform-origin: top left;
}
.fullwidth {
width: 100%;
}
.headertitle {
margin-top: -36vh;
margin-left: 12vw;
position: absolute;
font-size: calc(13px + 2.5vw);
color: white;
font-family: 'Montserrat';
font-weight: lighter;
}
/* navbar */
nav {
background: rgb(52, 52, 52);
position: relative;
z-index: 1;
height: calc(40px + 6vh);
box-shadow: 0 3px 3px -1px rgba(0, 0, 0, 0.065);
overflow: auto;
width: 100vw;
display: flex;
}
nav ul {
margin: 0;
padding: 0;
text-align: left;
margin-left: 1.2vw;
}
nav ul li {
display: inline-block;
list-style: none;
font-size: 1.2em;
padding: 1vh;
}
.navul a {
text-decoration: none;
color: white;
line-height: 5.5vh;
height: 5.5vh;
font-size: calc(15px + 0.25vh + 0.15vw);
}
.navuul a:visited,
a:link,
a:active {
text-decoration: none;
color: white;
font-weight: 200;
line-height: 5.5vh;
height: 5.5vh;
}
.navuul a:hover {
text-decoration: none;
color: grey;
font-weight: 200;
line-height: 5.5vh;
height: 5.5vh;
}
.submit {
float: right;
margin-right: 1.5vw;
}
.submit a {
color: white;
border-radius: 5px;
}
.navimgdiv img {
max-width: 50px;
}
.navimgdiv {
padding: 5px 0;
}
<div class="fullwidth"></div>
<nav>
<a class="navimgdiv"><img src="https://cdn.worldvectorlogo.com/logos/react.svg"></a>
<ul class="navul">
<li>Lumastock</li>
<li>Photos</li>
<li>Featured</li>
<li>Contact</li>
<li>Pricing</li>
<li>Assesment Requirements</li>
<li class="submit">Submit a photo</li>
</ul>
</nav>
<header></header>
<h1 class="headertitle">Image Gallery</h1>

web page layout problems

I am working on web page layouts. I created this one.
https://codepen.io/iamgonge/pen/paOxxb
I dont understand why the .container .left-side and .right-side elements start at the top of the browser and not below the header. Shouldn't the layout out be header->section(hero)->section(one)? I would think that the top of any of those three divs would be underneath the header but they are not. What amy I not understanding here?
body {
font-family: Verdana, Geneva, sans-serif;
margin: 0;
padding: 0;
}
.container {
background: #333338;
display: inline-block;
width: 60%;
height: 800px;
}
header {
position: fixed;
background: #10105f;
width: 100%;
height: 150px;
}
.main-links a {
text-decoration: none;
color: #fff;
font-size: 20px;
text-transform: uppercase;
}
.main-links a:hover {
color: #00843d;
}
.main-links a:active {
color: red;
}
.left-side {
display: inline-block;
width: 20%;
background: #4C4C59;
height: 800px;
float: left;
}
nav {
position: absolute;
bottom: 0;
left: 0;
height: 50px;
width: 100%;
text-align: center;
}
nav ul {
margin: auto;
padding: 0;
display: inline-block;
list-style: none;
color: #fff;
// border: 1px solid #00843D;
width: 60%;
;
}
nav li {
display: inline-block;
margin: 5px -3px;
padding: 5px 10px;
// border: 1px solid#fff;
}
nav li:hover {
background: rgba(255, 255, 255, 0.25);
}
nav li:active {
border-bottom: 2px solid red;
color: red;
}
.nav-left {
float: left;
height: 50px;
width: 20%;
padding-bottom: 96px;
// border: 1px solid #00843D;
}
.nav-right {
float: right;
height: 50px;
width: 20%;
padding-bottom: 96px;
//border: 1px solid #00843D;
}
.nav-center {
position: relative;
padding-bottom: 21px;
margin: 0 auto;
height: 75px;
width: 300px;
// border: 1px solid #00843D;
}
.nav-right p a {
font-size: 16px;
text-decoration: none;
color: #fff;
}
.nav-right p a:hover {
color: #00843d;
}
.nav-right p {
margin: 20px;
padding: 0;
color: #fff;
}
.one {
display: block;
width: 100%;
height: 800px;
background: #080853;
}
.right-side {
display: inline-block;
width: 20%;
background: #4C4C59;
height: 800px;
float: right;
}
.rss-title,
.rss-date {
margin: 0px!important;
}
.rss-feed {
margin: 10px 5px 20px 0px;
}
.rss-date {
padding: 0;
font-size: 12px;
font-style: italic;
}
.hero,
.one {
position: relative;
height: 100%;
}
.success {
display: block;
text-align: center;
margin-top: 20%;
font-size: 69px;
color: #00843d;
// margin-left: auto;
// margin-right: auto;
}
.success:hover {
font-size: 71px;
}
#timestamp {
margin: 10px 5px 20px 0px;
text-align: center;
color: #fff;
font-size: 16px;
}
#timestamp,
.rss-feed {
background: #080853;
padding: 10px;
height: 110px;
}
#media (min-width:1530px) {}
<body>
<header>
<div class="nav-left">
<div id="timestamp"></div>
</div>
<div class="nav-right"></div>
<div class="nav-center"></div>
<nav>
<ul class="main-nav">
<li class="main-links">home</li>
<li class="main-links">about</li>
<li class="main-links">projects</li>
<li class="main-links">portal</li>
<li class="main-links">links</li>
</ul>
</nav>
</header>
<section="hero">
<div class="left-side"></div>
<div class="right-side"></div>
<div class="container">
<div class="success"></div>
</div>
<!--***Container***-->
</section>
<section class="one"></section>
</body>

The reason is that you have applied position: fixed; to your <header> tag. When you do this you must account for the height of the header and push down other elements to restore the layout.

Space between navigation bar and drop-down bar

I'm fairly new to html, and when I tried to create a webpage, I encountered a problem. I managed to make a navigation bar with a drop down menu directly under the "Games" section, but if I scroll down and open the drop down menu, it no longer opens directly under the navigation bar. This is my HTML code.
<div class="wrapper">
<div id="main-title">
<header>
<h1>Max Reviews</h1>
</header>
</div> <!-- Title box-->
<div id="nav"> <!-- Navigation Bar -->
<nav>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>About Me</li> <!-- Link to about page -->
<li class="drop">
<p>Games</p>
<div class="drop-content">
<p>Red Faction: Guerrilla</p> <!-- Contains links to the respective pages -->
<p>Way of the Samurai 3</p>
<p>Singularity</p>
</div>
</li>
<li>Reviews</li>
<li>External Store</li> <!-- Link to external site -->
<li>Videos</li> <!-- Contains links to Youtube -->
</ul>
</nav>
</div>
<div class="image"> <!-- Banner-->
<a href="singularity.html">
<img src="modified singularity aging 1.jpg" alt="singularity">
<h2><span>Recommended Game of the Month</span></h2>
</a>
</div>
<div id="home-content"><p>Learn more about the site &#9755here&#9754</p></div>
<div id="footer">
<p>&copy Copyright 2016-2017. All images here were taken and edited by me. All rights reserved. Games featured here might not be suitable for all audience.</p>
</div>
</div>
And this is the stylesheet.
article, body, div, footer, header, h1, h2, p {
border: 0;
padding: 0;
margin: 0;
}
html, body {
height: 100%;
margin: 0;
width: 100%;
background-color: #FFFFFF;
padding: 0px;
overflow-x: hidden;
}
body {
transition: background 600s ease-in-out;
}
body:hover {
background-color: #4B0101;
}
/*main title*/
#main-title {
background-color: #33B2E7;
color: #FFFFFF;
position: relative;
top: 25px;
left: 20px;
padding: 10px;
margin-left: 10px;
display: inline-block;
transition: color 1s, transform 1s;
transition-delay: 2s;
}
#main-title:hover {
color: black;
transform: rotate(360deg);
}
/* Nav */
#nav nav{
padding-top: 100px;
margin-bottom: 0;
}
#nav ul {
list-style-type: none;
margin: 0;
overflow: hidden;
background-color: #1C86EE;
padding: 0;
position: relative;
width: 100%;
bottom: 40px;
display: inline-block;
}
#nav li {
float: left;
width: 16%;
}
li a, .dropbtn {
display: inline-block;
color: #FFFFFF;
text-align: center;
padding-left: 50px;
padding-right: 50px;
text-decoration: none;
}
.active {
background-color: #6CCC0A;
padding-right: 50px;
}
li a:hover, .drop:hover .dropbtn {
background-color: #BFA811;
}
a {
padding-top: 10px;
padding-bottom: 10px;
}
li.drop {
display: inline-block;
}
.drop-content {
display: none;
position: absolute;
background-color: #970707;
min-width: 50px;
box-shadow: 0px 8px 16px 0px #000000;
z-index: 100;
}
.drop-content a {
color: #FFFFFF;
padding: 15px 20px;
display: block;
text-align: left;
}
.drop-content a:hover {
background-color: #02BBC4
}
.drop:hover .drop-content {
display: block;
position: fixed;
top: 155px;
border: 1px solid black;;
}
/*banner*/
.image {
position: relative;
width: 100%;
}
.image h2 {
position: absolute;
top: 600px;
text-align: center;
width: 100%;
right: 350px;
}
.image h2 span {
color: #FFFFFF;
font: Arial, Calibri, Sans-serif;
background: #000000;
padding: 10px;
}
.image h2:hover span {
background-color: #003316;
}
.button {
position: absolute;
top: 1013px;
left: 700px;
padding: 16px 32px;
text-align: center;
margin: 4px 2px;
display: inline-block;
cursor: pointer;
background-color: rgb(41,120,104);
color: rgb(240,144,22);
font-family: Cambria, Times New Roman, serif;
font-size: 20px;
}
/*content*/
#home-content {
position: relative;
padding: 20px;
text-align: center;
margin-left: 90px;
display: block;
color: #8A0707
}
#home-content a {
color: #09922A
}home-content a:visited {
color: #000000
}
/*Footer*/
#footer {
background: #000000;
width: 100%;
height: 40px;
position: relative;
bottom: 0;
left: 0;
padding-top: 10px;
overflow: hidden;
}
#footer p {
font-family: arial, calibri, sans-serif;
color: #FFFFFF;
text-align: center;
}
#aboutme h2 {
margin-bottom: 20px;
text-align: center;
text-decoration: underline;
font-family: Cambria, Calibri, sans-serif;
font-size: 20px;
color: #000000;
}
#aboutme article {
padding-top: 20px;
position: relative;
margin-left: 25%;
margin-right: 25%;
display: inline-block;
font-family: arial, cambria, serif;
line-height: 200%;
color: #777000;
text-align: center;
border: 2px solid #000000;
padding: 10px;
}
#gallery-title {
text-align: center;
font-family: Cambria, calibri, sans-serif;
padding-top: 20px;
}
#image-1 {
text-align: center;
margin: 0 25%;
padding: 20px;
}
.img-desc-1 {
padding: 20px;
color: #047615;
}
#image-2 {
text-align: center;
margin: 0 25%;
border: 2px solid #262020;
padding: 20px;
}
#prompt-text {
text-align: center;
padding-top: 30px;
font-family: cambria, calibri, sans-serif;
}
.image-container img{
height: 300px;
width: 300px;
padding-left: 60px;
padding-top: 60px;
}
.image-container p{
padding-left: 80px;
font-family: Arial, cambria, sans-serif;
color: #560404;
text-decoration: none;
}
.image-container {
display: block;
text-align: center;
padding-left: 20px;
}
#image1 {
padding-right: 60px;
padding-bottom: 10%
}
#image2 {
padding-right: 60px;
padding-bottom: 10%;
}
#image3 {
padding-bottom: 0;
margin: 0;
}
.gameimages {
padding-bottom: 15%;
text-align: center;
}
.gameimages p {
padding-top: 20px;
}
.gameimages h3 {
text-align: center;
font-family: cambria, times new roman, sans-serif
}
#side-nav {
height: 200px;
float: right;
bottom: 1500px;
right: 3%;
padding: 10px;
background-color: #8C3406;
display: block;
position: relative;
text-align: center;
}
Please help me as I've been trying to solve this problem for 2 days. Also, this is my first time posting a question here, so forgive me if I indented my code wrongly, or if I inadvertently violated some of the rules of Stack Overflow.

The reason for this behaviour is that your drop-content has position:fixed on hover.
From MDN:
…an element that is absolutely positioned is taken out of the flow; thus, other elements are positioned as if it did not exist. The absolutely positioned element is positioned relative to its nearest positioned ancestor… Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the viewport.
Working example on JSFiddle and here is what I've changed:
#nav ul {
/*overflow: hidden;*/
}
.drop:hover .drop-content {
/*position: fixed;
top: 155px;*/
position: absolute;
}

Update CSS to
article, body, div, footer, header, h1, h2, p {
border: 0;
padding: 0;
margin: 0;
}
html, body {
height: 100%;
margin: 0;
width: 100%;
background-color: #FFFFFF;
padding: 0px;
overflow-x: hidden;
}
body {
transition: background 600s ease-in-out;
}
body:hover {
background-color: #4B0101;
}
/*main title*/
#main-title {
background-color: #33B2E7;
color: #FFFFFF;
position: relative;
top: 25px;
left: 20px;
padding: 10px;
margin-left: 10px;
display: inline-block;
transition: color 1s, transform 1s;
transition-delay: 2s;
}
#main-title:hover {
color: black;
transform: rotate(360deg);
}
/* Nav */
#nav nav{
padding-top: 100px;
margin-bottom: 0;
}
#nav ul {
list-style-type: none;
margin: 0;
background-color: #1C86EE;
padding: 0;
position: relative;
width: 100%;
bottom: 40px;
display: inline-block;
}
#nav li {
float: left;
width: 16%;
}
li a, .dropbtn {
display: inline-block;
color: #FFFFFF;
text-align: center;
padding-left: 50px;
padding-right: 50px;
text-decoration: none;
}
.active {
background-color: #6CCC0A;
padding-right: 50px;
}
li a:hover, .drop:hover .dropbtn {
background-color: #BFA811;
}
a {
padding-top: 10px;
padding-bottom: 10px;
}
li.drop {
display: inline-block;
}
.drop-content {
display: none;
position: absolute;
background-color: #970707;
min-width: 50px;
box-shadow: 0px 8px 16px 0px #000000;
z-index: 100;
}
.drop-content a {
color: #FFFFFF;
padding: 15px 20px;
display: block;
text-align: left;
}
.drop-content a:hover {
background-color: #02BBC4
}
.drop:hover .drop-content {
display: block;
}
/*banner*/
.image {
position: relative;
width: 100%;
}
.image h2 {
position: absolute;
top: 600px;
text-align: center;
width: 100%;
right: 350px;
}
.image h2 span {
color: #FFFFFF;
font: Arial, Calibri, Sans-serif;
background: #000000;
padding: 10px;
}
.image h2:hover span {
background-color: #003316;
}
.button {
position: absolute;
top: 1013px;
left: 700px;
padding: 16px 32px;
text-align: center;
margin: 4px 2px;
display: inline-block;
cursor: pointer;
background-color: rgb(41,120,104);
color: rgb(240,144,22);
font-family: Cambria, Times New Roman, serif;
font-size: 20px;
}
/*content*/
#home-content {
position: relative;
padding: 20px;
text-align: center;
margin-left: 90px;
display: block;
color: #8A0707
}
#home-content a {
color: #09922A
}home-content a:visited {
color: #000000
}
/*Footer*/
#footer {
background: #000000;
width: 100%;
height: 40px;
position: relative;
bottom: 0;
left: 0;
padding-top: 10px;
overflow: hidden;
}
#footer p {
font-family: arial, calibri, sans-serif;
color: #FFFFFF;
text-align: center;
}
#aboutme h2 {
margin-bottom: 20px;
text-align: center;
text-decoration: underline;
font-family: Cambria, Calibri, sans-serif;
font-size: 20px;
color: #000000;
}
#aboutme article {
padding-top: 20px;
position: relative;
margin-left: 25%;
margin-right: 25%;
display: inline-block;
font-family: arial, cambria, serif;
line-height: 200%;
color: #777000;
text-align: center;
border: 2px solid #000000;
padding: 10px;
}
#gallery-title {
text-align: center;
font-family: Cambria, calibri, sans-serif;
padding-top: 20px;
}
#image-1 {
text-align: center;
margin: 0 25%;
padding: 20px;
}
.img-desc-1 {
padding: 20px;
color: #047615;
}
#image-2 {
text-align: center;
margin: 0 25%;
border: 2px solid #262020;
padding: 20px;
}
#prompt-text {
text-align: center;
padding-top: 30px;
font-family: cambria, calibri, sans-serif;
}
.image-container img{
height: 300px;
width: 300px;
padding-left: 60px;
padding-top: 60px;
}
.image-container p{
padding-left: 80px;
font-family: Arial, cambria, sans-serif;
color: #560404;
text-decoration: none;
}
.image-container {
display: block;
text-align: center;
padding-left: 20px;
}
#image1 {
padding-right: 60px;
padding-bottom: 10%
}
#image2 {
padding-right: 60px;
padding-bottom: 10%;
}
#image3 {
padding-bottom: 0;
margin: 0;
}
.gameimages {
padding-bottom: 15%;
text-align: center;
}
.gameimages p {
padding-top: 20px;
}
.gameimages h3 {
text-align: center;
font-family: cambria, times new roman, sans-serif
}
#side-nav {
height: 200px;
float: right;
bottom: 1500px;
right: 3%;
padding: 10px;
background-color: #8C3406;
display: block;
position: relative;
text-align: center;
}
2 changes done.
Removed overflow:hidden in #nav ul
Keot display:block only in .drop:hover .drop-content

Why is my content area stopping before my footer?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0">
<meta name="viewport" content="width=device-width">
<!--<meta name="viewport" content="width=960">
<meta name="viewport" content="width=480">-->
<title>Habitat for Humanity Restore | Home</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<div class="headimg">
<h2 class="slogan1">HOME IMPROVEMENT & FURNITURE OUTLET</h2>
<h3 class="slogan2"> A clean, happy place to find treasures</h3>
</div>
</header>
<!--
<div class="socialmedia"><img src="images/facebook-14.png" width="40" height="52" alt="FacebookSM">
<img src="images/Pinterest-icon.png" width="40" height="52" alt="PinterestLogo">
<img src="images/twitter-icon.png" width="40" height="52" alt="TwitterLogo"></div>
-->
</div>
<div id="nav">
<ul>
<li>SHOP</li>
<li>DONATE</li>
<li>VOLUNTEER</li>
<li>CONTACT US</li>
</ul>
</div>
<!-- Tony please fix text shadows, sidebar shadows and nagivation effects -->
<div id="sidebarleft">
<ul class="sidebartextleft">
<li class="pleftsidebar">ABOUT US</li>
<li class="pleftsidebar">REPURPOSED </li>
<li class="pleftsidebar">DONATE</li>
<li class="pleftsidebar">VOLUNTEER</li>
<li class="pleftsidebar">UNITED WAY </li>
<li class="pleftsidebar">NEWSLETTER</li>
<li class="pleftsidebar">EMAIL US</li>
<li class="pleftsidebar">SEND US PHOTOS</li>
<li class="pleftsidebar">MAP TO RESTORE</li>
<li class="pleftsidebar">DIRECTIONS</li>
</ul>
<!--<p>CONTACT US </p>-->
<div class="sidebartextleftsmall">
Restore Facility<br/>
200 South Larkin<br/>
Joliet, IL. 60436<br/>
P: 815-714-7100<br/>
E: info#restorejoliet.org
</div>
</div>
<!--</div>-->
<div id="sidebarright">
<div class="sidebartextright">
<p>FEATURED THIS WEEK:</p>
</div>
<div class="rightsidebarimg">
<div class="featuredimg">
<img src="images/furniture for sale.jpg" width="265" height="457" alt="furniture for sale">
</div>
</div>
<div class="sidebartextrightsmall"><span>Save our contact info to your smartphone</span>
<img src="images/scancode.jpg" width="125" height="126" alt="Habitat Restore Contact Information Smartphone Code">
</div>
</div>
<div id="content">
<div id="captioned-gallery">
<figure class="slider">
<figure>
<img src="images/restorelocationtext.png" alt="Will County Habitat For Restore Location">
</figure>
<figure>
<img src="images/slider2.jpg" alt="Worker setting up bookshelf">
</figure>
<figure>
<img src="images/slider3.jpg" alt="Warehouse selection">
</figure>
<figure>
<img src="images/slider4.JPG" alt="More Ware Selection Tables and fans">
</figure>
<figure>
<img src="images/slider5.JPG" alt="Household furniture warehouse selection">
</figure>
</figure>
</div>
<div id="box">
<img src="images/habitatBox1.png" alt="Shop for repurposed materials" class="center" />
<img src="images/habitatBox2.png" alt="Donate Heart" class="center" />
<img src="images/habitatBox3.png" alt="Shop for repurposed materials" class="center" />
</div>
</div>
<div id="sidebarbottom">
<ul class="sidebartextleft">
<li class="pleftsidebar">ABOUT US</li>
<li class="pleftsidebar">REPURPOSED</li>
<li class="pleftsidebar">DONATE</li>
<li class="pleftsidebar">VOLUNTEER</li>
<li class="pleftsidebar">UNITED WAY</li>
<li class="pleftsidebar">NEWSLETTER</li>
<li class="pleftsidebar">EMAIL US</li>
<li class="pleftsidebar">SEND US PHOTOS</li>
<li class="pleftsidebar">MAP TO RESTORE</li>
<li class="pleftsidebar">DIRECTIONS</li>
</ul>
</div>
<div id="footer">2015 Will County Habitat for Humanity ReStore. All Rights Reserved.</div>
</div>
</body>
</html>
I'm having an issue in which my content section suddenly stops before reaching the footer causing a black underlay to show up, I've looked into editing the wrapper size and height of the content container but cannot figure out what the issue may be, please help me out
This below image is what the page is complete page should look like
CSS
#media only screen and (min-width: 960px) {
* {
padding: 0px;
margin: 0px;
}
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
header {
height: 106px;
background-color: #d9e6ef;
}
#wrapper {
width: 100%;
}
#nav {
height: 52px;
background-color: #51b948;
}
#nav ul {
padding: 7px;
text-align: center;
font-size: 24px;
font-style: normal;
font-weight: bold;
color: #FFF;
}
#nav ul li {
display: inline-block;
list-style-type: none;
margin: 0 15px;
}
#nav ul li a {
display: inline-block;
text-align: center;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
color: #F4E9E9;
text-decoration: none;
background-color: #406718;
padding: 5px;
border: thin solid #030303;
width: 170px;
}
.socialmedia {
float: right;
margin-right: 45px;
padding: 8px 8px 0;
}
a {
text-decoration: none;
}
a:visited {
color:#FFF !important;
}
#sidebarleft {
float: left;
width: 20%;
height: 784px;
background-color: #005596;
}
#sidebarright {
float: right;
width: 20%;
height: 784px;
background-color: #005596;
}
#sidebarbottom {
display: none;
}
.sidebartextleft {
font-family: Arial, Helvetica, sans-serif;
padding-top: 30px;
margin-left: 25px;
font-size: 20px;
color: #FFF;
font-weight: bolder;
height: 368px;
font-style: normal;
}
.sidebartextright {
position: relative;
font-family: Arial, Helvetica, sans-serif;
padding: 15px 0 20px 5px;
text-align: center;
color: #FFF;
font-weight: bold;
font-size: 20px;
height: 30px;
font-style: normal;
}
.sidebartextlefthead {
font-family: Arial, Helvetica, sans-serif;
font-style: bold;
font-size: 22px;
padding-bottom: 20px;
font-weight: bold;
}
.pleftsidebar {
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #d5b89a;
padding-top: 4px;
padding-bottom: 3px;
width: 80%
}
#content {
width: 60%;
height: 768px;
float: left;
}
#footer {
width: 100%;
padding-top: 10px;
bottom: 0;
text-align: center;
background-color: #dbf1da;
font-weight: bold;
color: #000;
}
.rightsidebarimg {
text-align: center;
padding: 0 15px;
}
.sidebartextrightsmall {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: #FFF;
font-size: 20px;
width: 90%;
height: 200px;
font-style: normal;
margin: 60px auto 0;
}
.sidebartextrightsmall span {
display: block;
padding-bottom: 20px;
}
.sidebartextrightsmall img {
max-width: 125px;
height: auto;
text-align: center;
}
.sidebartextleftsmall {
margin: 200px 1px 0;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: #c7b199;
font-size: 17px;
font-weight: normal;
width: 100%;
height: auto;
font-style: normal;
}
.featuredimg img {
width: 100%;
height: auto;
}
#box {
text-align: center;
}
img.center {
display: inline-block;
width: 30%;
padding: 0 8px;
}
.headimg {
height: 106px;
margin-left: 100px;
display: inline-block;
background: url(images/head.png) no-repeat;
}
h2.slogan1 {
padding: 53px 0 0 220px ;
font-weight: bold;
font-size: 24px;
}
h3.slogan2 {
padding-left: 220px ;
font-style: italic;
font-weight: bold;
font-size: 20px;
}
#keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
body, figure {
margin: 0;
background: #101010;
}
div#captioned-gallery {
width: 90%;
overflow: hidden;
border:5px solid #eaeaea;
box-shadow:1px 1px 5px rgba(0,0,0,0.7);
margin: 40px auto;
}
figure.slider {
position: relative;
width: 500%;
font-size: 0;
animation: 30s slidy infinite;
}
figure.slider figure {
width: 20%;
height: auto;
display: inline-block;
position: inherit;
}
figure.slider img {
width: 100%;
height: auto;
}
figure.slider figure figcaption {
position: absolute;
bottom: 0;
background: rgba(0,0,0,0.4);
color: #fff;
width: 100%;
padding: .6rem;
}
/* Bracket below closes desktop media query */
}
#media only screen and (min-width: 768px) and (max-width: 959px) {
* {
padding: 0px;
margin: 0px;
}
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
header {
height: 106px;
background-color: #d9e6ef;
}
#wrapper {
width: 100%;
}
#header {
height: 106px;
background-color: #d9e6ef;
}
#nav {
height: 52px;
background-color: #51b948;
}
#nav ul {
padding: 9px;
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: bold;
color: #FFF;
}
#nav ul li {
display: inline-block;
list-style-type: none;
margin: 0 15px;
}
#nav ul li a {
display: inline-block;
text-align: center;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
color: #F4E9E9;
text-decoration: none;
background-color: #406718;
padding: 5px;
border: thin solid #030303;
width: 140px;
}
.socialmedia {
float: right;
margin-right: 45px;
padding: 8px 8px 0;
}
#sidebarleft {
float: left;
width: 25%;
height: 784px;
background-color: #005596;
}
#sidebarright {
display: none;
}
#sidebarbottom {
display: none;
}
.sidebartextleft {
font-family: Arial, Helvetica, sans-serif;
padding-top: 30px;
margin-left: 25px;
font-size: 20px;
color: #FFF;
font-weight: bolder;
height: 368px;
font-style: normal;
}
.sidebartextright {
position: relative;
font-family: Arial, Helvetica, sans-serif;
padding: 15px 0 20px 5px;
text-align: center;
color: #FFF;
font-weight: bold;
font-size: 20px;
height: 30px;
font-style: normal;
}
.sidebartextlefthead {
font-family: Arial, Helvetica, sans-serif;
font-style: bold;
font-size: 22px;
padding-bottom: 20px;
font-weight: bold;
}
.pleftsidebar {
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #d5b89a;
padding-top: 4px;
padding-bottom: 3px;
width: 80%
}
#content {
width: 75%;
height: 768px;
float: left;
}
#footer {
width: 100%;
padding-top: 10px;
bottom: 0;
text-align: center;
background-color: #dbf1da;
font-weight: bold;
color: #000;
}
.rightsidebarimg {
text-align: center;
padding: 0 15px;
}
.sidebartextrightsmall {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: #FFF;
font-size: 20px;
width: 90%;
height: 200px;
font-style: normal;
margin: 60px auto 0;
}
.sidebartextrightsmall span {
display: block;
padding-bottom: 20px;
}
.sidebartextrightsmall img {
max-width: 125px;
height: auto;
text-align: center;
}
.sidebartextleftsmall {
margin: 200px 1px 0;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: #c7b199;
font-size: 17px;
font-weight: normal;
width: 100%;
height: auto;
font-style: normal;
}
.featuredimg img {
width: 100%;
height: auto;
}
#box {
text-align: center;
}
img.center {
display: inline-block;
width: 30%;
padding: 0 8px;
}
.headimg {
height: 106px;
margin-left: 40px;
background: url(images/head.png) no-repeat;
}
h2.slogan1 {
padding: 53px 0 0 220px ;
font-weight: bold;
font-size: 22px;
}
h3.slogan2 {
padding-left: 220px ;
font-style: italic;
font-weight: bold;
font-size: 18px;
}
#keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
body, figure {
margin: 0;
background: #101010;
}
div#captioned-gallery {
width: 90%;
overflow: hidden;
border:5px solid #eaeaea;
box-shadow:1px 1px 5px rgba(0,0,0,0.7);
margin: 40px auto;
}
figure.slider {
position: relative;
width: 500%;
font-size: 0;
animation: 30s slidy infinite;
}
figure.slider figure {
width: 20%;
height: auto;
display: inline-block;
position: inherit;
}
figure.slider img {
width: 100%;
height: auto;
}
figure.slider figure figcaption {
position: absolute;
bottom: 0;
background: rgba(0,0,0,0.4);
color: #fff;
width: 100%;
padding: .6rem;
}
/* Bracket below closes tablet media query */
}
#media only screen and (min-width: 320px) and (max-width: 767px) {
* {
padding: 0px;
margin: 0px;
}
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
header {
height: 106px;
background-color: #d9e6ef;
}
#wrapper {
width: 100%;
}
#nav {
background-color: #51b948;
}
#nav ul {
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: bold;
color: #FFF;
}
#nav ul li {
display: block;
list-style-type: none;
border-bottom: 2px dotted white;
}
#nav ul li:last-child {
border-bottom: none;
}
#nav ul li a {
display: block;
text-align: center;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
color: #F4E9E9;
padding: 20px;
}
#nav ul li a:link {
text-decoration: none;
}
#nav ul li a:visited {
color: #F4E9E9;
}
#nav ul li a:hover {
background: #51b948;
}
#nav ul li a:active {
background: #406718;
}
.socialmedia {
float: right;
margin-right: 45px;
padding: 8px 8px 0;
}
#sidebarleft {
display: none;
float: left;
width: 25%;
height: 784px;
background: #005596;
}
#sidebarright {
display: none;
}
#sidebarbottom {
width: 100%;
background: #005596;
text-align: center;
}
#sidebarbottom ul li a {
display: block;
padding: 15px;
border-bottom: 3px solid #fff;
}
#sidebarbottom ul li a:link {
text-decoration: none;
}
#sidebarbottom ul li a:visited {
color: #fff;
}
#sidebarbottom ul li a:hover {
background: #005596;
}
#sidebarbottom ul li a:active {
background: #d9e6ef;
}
.sidebartextleft {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #FFF;
font-weight: bolder;
font-style: normal;
}
.sidebartextright {
position: relative;
font-family: Arial, Helvetica, sans-serif;
padding: 15px 0 20px 5px;
text-align: center;
color: #FFF;
font-weight: bold;
font-size: 20px;
height: 30px;
font-style: normal;
}
.sidebartextlefthead {
font-family: Arial, Helvetica, sans-serif;
font-style: bold;
font-size: 22px;
padding-bottom: 20px;
font-weight: bold;
}
#content {
width: 100%;
background: #dbf1da;
padding: 0;
margin: 0;
}
#footer {
width: 100%;
padding-top: 10px;
bottom: 0;
text-align: center;
background-color: #dbf1da;
font-weight: bold;
color: #000;
}
.rightsidebarimg {
text-align: center;
padding: 0 15px;
}
.sidebartextrightsmall {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: #FFF;
font-size: 20px;
width: 90%;
height: 200px;
font-style: normal;
margin: 60px auto 0;
}
.sidebartextrightsmall span {
display: block;
padding-bottom: 20px;
}
.sidebartextrightsmall img {
max-width: 125px;
height: auto;
text-align: center;
}
.sidebartextleftsmall {
margin: 200px 1px 0;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: #c7b199;
font-size: 17px;
font-weight: normal;
width: 100%;
height: auto;
font-style: normal;
}
.featuredimg img {
width: 100%;
height: auto;
}
#box {
text-align: center;
}
img.center {
display: inline-block;
width: 33%;
margin: 0;
background: #42603C;
}
img.center:first-child {
float: left;
}
img.center:last-child {
float: right;
}
.headimg {
height: 106px;
margin: 0 auto;
padding: 0 auto;
text-align: center;
background: url(images/head.png) no-repeat center;
}
h2.slogan1 {
display: none;
/*
padding: 35px 0 0 220px ;
font-weight: bold;
font-size: 20px;
*/
}
h3.slogan2 {
display: none;
/*
padding-left: 220px ;
font-style: italic;
font-weight: bold;
font-size: 16px;
*/
}
#keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
body, figure {
margin: 0;
background: #101010;
}
div#captioned-gallery {
width: 100%;
overflow: hidden;
margin: 0 auto;
}
figure.slider {
position: relative;
width: 500%;
font-size: 0;
animation: 30s slidy infinite;
}
figure.slider figure {
width: 20%;
height: auto;
display: inline-block;
position: inherit;
}
figure.slider img {
width: 100%;
height: auto;
}
figure.slider figure figcaption {
position: absolute;
bottom: 0;
background: rgba(0,0,0,0.4);
color: #fff;
width: 100%;
padding: .6rem;
}
/* Bracket below closes phone media query */
}

You are closing one div more then you open div (tags). Count them and then look, which div should close at which point. You could for example search for all div> to get all open and closing div tags. One tip: take a look at the sourcecode in the browser, at least Firefox highlights wrong html syntax (too manny or to few tags or not matching tags) which makes it easy to find them.
Edit:
You close your content div after this div <div id="box">....</div>

How can I fix this gap between nav and full screen div?

I am trying to figure out this gap in between the nav and the "home" image. Every time I try with any margin-top: -15px the div class="inner" jumps to the far right of the image.
I'm still learning so I'm assuming its something pretty simple that I'm overlooking or have added too much junk code. This is also my 1st post on here so I'm hoping it all comes out correctly.
/**************************
GENERAL
**************************/
body {
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
position: relative;
background-color: #fff;
}
img {
max-width: 100%;
margin: 0;
padding: 0;
border: 0;
}
a {
text-decoration: none;
color: #4E4E4E;
}
h1 {
color: #4E4E4E;
font: normal 50px 'oswald', sans-serif;
margin: 15px 0;
font-size: 1.75em;
font-weight: normal;
line-height: 0.8em;
}
h2 {
color: #4E4E4E;
font-size: 0.75em;
margin: -5px 0 0;
font-weight: normal;
}
h3 {
color: #4E4E4E;
margin: 0 0 1em 0;
color: #384047;
}
#wrapper {
position: relative;
width: 100%;
background: #fff;
}
/**************************
NAVIGATION
**************************/
/* Clearfix */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* Basic Styles */
nav {
height: 60px;
width: 100%;
background: #fff;
font-size: 13pt;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
position: relative;
padding-top: 10px;
border-bottom: solid 1px #666;
z-index: 999;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 625px;
}
nav li {
display: inline;
float: left;
}
nav a {
color: #4E4E4E;
display: inline-block;
width: 125px;
text-align: center;
text-decoration: none;
line-height: 40px;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
color: #77308f;
}
nav a#pull {
display: none;
}
/**************************
HOME | SLIDES | SPLASH
**************************/
#slides {
max-width: 100%;
height: 1122px;
background: url('http://greytprints.com/images/home_bg.jpg') no-repeat top center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
display: block;
z-index: -2;
}
#slides .inner {
position: relative;
top: 60%;
text-align: center;
width: 100%;
text-shadow: 0 0 2px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.4);
}
#slides .inner h1 {
color: #fff;
font-weight: 600;
font-size: 60px;
text-transform: uppercase;
letter-spacing: 1px;
}
#slides .inner h2 {
color: #fff;
font-weight: 400;
font-size: 40px;
text-transform: uppercase;
letter-spacing: 1px;
}
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 2000px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
<nav class="clearfix">
<ul class="clearfix">
<li>Newsletter</li>
<li>Store</li>
<li id="hide_logo"><img src="images/gp_logo_color.png" width="55" height="55"></li>
<li>About Us</li>
<li>Connect</li>
</ul>
Menu
</nav>
<div id="wrapper">
<div id="slides" name="home">
<div class="inner">
<h1>WE ARE GREYT PRINTS</h1>
<br>
<span><h2>AND WE LOVE GREYHOUNDS</h2></span>
</div>
</div>
</div>

The problem is margin collapse, because inside #wrapper there is a <h1> with some margin-top.
In this case, you can fix it using absolute positioning instead of relative one. This way .inner (including <h1>) will be removed from the normal flow of the document, so the margin won't affect #wrapper.
#slides .inner {
position: absolute;
}
/**************************
GENERAL
**************************/
body {
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
position: relative;
background-color: #fff;
}
img {
max-width: 100%;
margin: 0;
padding: 0;
border: 0;
}
a {
text-decoration: none;
color: #4E4E4E;
}
h1 {
color: #4E4E4E;
font: normal 50px 'oswald', sans-serif;
margin: 15px 0;
font-size: 1.75em;
font-weight: normal;
line-height: 0.8em;
}
h2 {
color: #4E4E4E;
font-size: 0.75em;
margin: -5px 0 0;
font-weight: normal;
}
h3 {
color: #4E4E4E;
margin: 0 0 1em 0;
color: #384047;
}
#wrapper {
position: relative;
width: 100%;
background: #fff;
}
/**************************
NAVIGATION
**************************/
/* Clearfix */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* Basic Styles */
nav {
height: 60px;
width: 100%;
background: #fff;
font-size: 13pt;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
position: relative;
padding-top: 10px;
border-bottom: solid 1px #666;
z-index: 999;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 625px;
}
nav li {
display: inline;
float: left;
}
nav a {
color: #4E4E4E;
display: inline-block;
width: 125px;
text-align: center;
text-decoration: none;
line-height: 40px;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
color: #77308f;
}
nav a#pull {
display: none;
}
/**************************
HOME | SLIDES | SPLASH
**************************/
#slides {
max-width: 100%;
height: 1122px;
background: url('http://greytprints.com/images/home_bg.jpg') no-repeat top center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
display: block;
z-index: -2;
}
#slides .inner {
position: absolute;
top: 60%;
text-align: center;
width: 100%;
text-shadow: 0 0 2px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.4);
}
#slides .inner h1 {
color: #fff;
font-weight: 600;
font-size: 60px;
text-transform: uppercase;
letter-spacing: 1px;
}
#slides .inner h2 {
color: #fff;
font-weight: 400;
font-size: 40px;
text-transform: uppercase;
letter-spacing: 1px;
}
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 2000px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
<nav class="clearfix">
<ul class="clearfix">
<li>Newsletter</li>
<li>Store</li>
<li id="hide_logo"><img src="images/gp_logo_color.png" width="55" height="55"></li>
<li>About Us</li>
<li>Connect</li>
</ul>
Menu
</nav>
<div id="wrapper">
<div id="slides" name="home">
<div class="inner">
<h1>WE ARE GREYT PRINTS</h1>
<br>
<span><h2>AND WE LOVE GREYHOUNDS</h2></span>
</div>
</div>
</div>

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

How do I make the marquee go behind my logo? - html

You can absolutely position the image, and give it some higher z-index img { position: absolute; z-index: 10; opacity: 0.75; } <img src="https://unsplash.it/200/200"> <marquee>marquee text goes here</marquee> I've made the image transparent, so you can see the text going under it.

Related

How to fix img in navbar not scaling

web page layout problems

Space between navigation bar and drop-down bar

Why is my content area stopping before my footer?

How can I fix this gap between nav and full screen div?

Categories

Resources