Integrate Randomly Selected Photos into Web Page from a Specified Link - javascript

I've come across an issue when coding a site for a colleague of mine. He resells t-shirts that are given to him by a friend, and does so by listing them on his current eBay page. He asked me to code a site for him which would promote his t-shirts more, and wanted me to allow customers to click on the shirts from his website to be redirected to the corresponding eBay page. I want to be able to randomly generate images from his eBay page and have them show up on the website, and therefore be able to redirect users to his eBay page from the site.
EDIT: I have already included a script in my .html file for randomly selecting images. My main issue is being able to randomly select such images from eBay itself.
Here is the HTML for the page:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ADARA Enterprises</title>
<link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8" />
</head>
<script type="text/javascript">
var imageURLs = [
"http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg"
, "http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg"
, "http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg"
];
function getImageTag() {
var img = '<img src=\"';
var randomIndex = Math.floor(Math.random() * imageURLs.length);
img += imageURLs[randomIndex];
img += '\" alt=\"Some alt text\"/>';
return img;
}
</script>
</head>
<body>
<div id="background">
<div id="page">
<div id="header">
<span id="connect">
</span>
<!-- /#logo -->
<ul id="navigation">
<li>Home</li>
<li>About</li>
<!-- <li>Blog</li> -->
<li>Shop</li>
<li class="selected">Contact Us</li>
</ul>
</div> <!-- /#header -->
<div id="contents">
<div id="main">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
</p>
<address>
<span>Telephone numbers:</span>
555-5678901 to 555-5678902
<span>Email Address:</span>
adarasomething#whateverthehell.com
<span>Street Address:</span>
4th Lit Street, 73813 Yeet, CO
</address>
</div>
<div id="featured">
<ul>
<li><img src="http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg" alt="shirt" /></li>
<li><img src="http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg" alt="shirt" /></li>
<li><img src="http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg" alt="shirt" /></li>
<li class="last"><img src="http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg" alt="shirt" /></li>
</ul>
shop here!
</div>
</div> <!-- /#contents -->
<div id="footer">
<div id="description">
<div>
<span>© Copyright © 2017. ADARA Enterprises All rights reserved</span>
</div>
<p>
This is just filler text. <br>
<br>
Filler text.
</p>
</div>
<div class="navigation">
Home|
About|
<!-- Yeet| -->
Shop|
Contact Us
</div>
</div> <!-- /#footer -->
</div> <!-- /#page -->
</div> <!-- /#background -->
</body>
</html>
And here is the CSS file associated with it:
html {
font-family: 'Trebuchet MS', sans-serif, Arial, Helvitica;
}
body {
background-color: #ffffff;
margin: 0;
// padding-top: 19px;
min-height: 100%;
}
#background {
background: url(https://static.pexels.com/photos/29724/pexels-photo-29724.jpg) repeat;
min-height: 100%;
//border-top: 1px solid #000000;
margin: 0;
}
#page {
width: 960px;
margin: 0 auto;
min-height: 100%;
height: 100%;
}
#font-face {
font-family: 'Arial Bold';
src: url('fonts/corben-bold-webfont.eot');
src: local('?'), url('fonts/corben-bold-webfont.woff') format('woff'),
url('fonts/corben-bold-webfont.ttf') format('truetype'),
url('fonts/corben-bold-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
/*
img {
border: 0;
}
*/
#connect .facebook, #connect .twitter, #connect .vimeo {
background: url(../images/icons.png) no-repeat;
}
/*------------------------------ HEADER ------------------------------*/
#header {
background: url(../images/bg-header.png) no-repeat center top;
min-height: 340px;
margin-bottom: 20px;
}
#connect {
float: left;
display: inline-block;
height: 30px;
width: 300px;
margin: 15px 0 15px 10px;
}
#connect a {
display: inline-block;
height: 30px;
margin: 0 10px;
padding: 0;
}
#connect .facebook {
background-position: 0 2px;
width: 27px;
}
#connect .twitter {
background-position: 0 -36px;
width: 36px;
}
/* #connect .vimeo {
background-position: 0 -74px; // Removed Vimeo Logo. Can implement any other logo here with matching dimensions
width: 32px; */
}
#infos {
float: right;
color: #ffe680 ;
display: inline-block;
height: 30px;
width: 200px;
margin: 15px 0;
}
#infos a {
color: #ffe680;
font-family: Arial;
font-size: 14px;
line-height: 30px;
margin: 0 5px;
text-decoration: none;
}
/** Logo **/
#logo {
clear: both;
display: block;
height: 217px;
width: 950px;
margin: 0 auto;
}
/** Navigation **/
#navigation {
height: 40px;
list-style-type: none;
margin: 0;
display: inline-block;
padding: 8px 20px 12px 84px;
}
#navigation li {
float: left;
font-family: 'Arial Black';
font-size: 22px;
font-weight: bold;
line-height: 40px;
width: 186px;
text-align: center;
}
#navigation a {
color: #ffe680;
text-decoration: none;
text-shadow: 1px 1px #C3A33B;
}
#navigation a:hover, #navigation li.selected a {
color: #FFFFAC;
text-shadow: 1px 1px 0 #C3A33B;
}
/*------------------------------ CONTENTS ------------------------------*/
#contents {
margin: 0 0 40px;
padding: 0 5px;
}
#main {
background: url(../images/border-dashed.jpg) repeat-x left bottom;
margin: 0 0 30px;
padding: 0 0 30px;
}
#main p {
color: #ffe680;
font-size: 14px;
line-height: 20px;
margin: 0;
padding: 0 0 20px;
text-shadow: 1px 1px #C3A33B;
}
#main p a {
color: #ffe680;
text-shadow: 1px 1px #C3A33B;
}
#main address {
color: #FFFFAC;
font-style: normal;
width: 350px;
margin: 0 auto;
text-align: center;
text-shadow: 1px 1px #C3A33B;
}
#main address span {
color: #ffe680;
text-shadow: 1px 1px #C3A33B;
display: block;
font-family: 'Arial Black';
font-size: 18px;
line-height: 20px;
margin: 20px 0;
width: 350px;
}
/* #adbox {
background: #FFFFAC url(../images/bottom-shadow-headliner.jpg) no-repeat center bottom;
height: 371px;
width: 935px;
margin: 0 auto;
padding: 7px 7px 22px;
position: relative;
}
#adbox img {
height: 371px;
width: 935px;
margin: auto;
}
*/
#featured {
background: url(../images/border-dashed.jpg) repeat-x left bottom;
padding: 0 0 42px;
position: relative;
}
#featured ul {
display: inline-block;
list-style-type: none;
margin: 0 auto;
padding: 0;
}
#featured ul li {
float: left;
background: #FFFFAC url(../images/bottom-shadow-img.jpg) no-repeat center bottom;
height: 253px;
width: 204px;
margin-right: 28px;
padding: 6px 6px 15px;
}
#featured ul li.last {
margin-right: 0;
}
#featured ul li img {
border: 1px solid #e4e0d1;
}
#featured a.button {
background: url(../images/bg-button.jpg) no-repeat;
color: #C3A33B;
display: block;
font-family: 'Arial Black';
font-size: 18px;
height: 30px;
line-height: 30px;
width: 144px;
padding: 4px 0 6px;
text-align: center;
text-decoration: none;
position: absolute;
bottom: -20px;
left: 403px;
}
/*------------------------------ Blog Page ------------------------------*/
#blogs {
background: url(../images/border-dashed.jpg) repeat-x left bottom;
padding: 0 0 20px;
position: relative;
}
#blogs div {
background: url(../images/border-dashed.jpg) repeat-x left bottom;
display: inline-block;
margin: 0 0 20px;
padding: 0 0 20px;
}
#blogs div.last {
background: none;
margin: 0;
}
#blogs span {
float: left;
background: #FFFFAC url(../images/bottom-shadow-img.jpg) no-repeat center bottom;
display: block;
height: 253px;
width: 204px;
margin-bottom: 6px;
margin-right: 40px;
padding: 6px 6px 15px;
}
#blogs span img {
border: 1px solid #e4e0d1;
}
#blogs h3 {
background: url(../images/border-dashed.jpg) repeat-x left bottom;
line-height: 30px;
margin: 0 0 20px 258px;
padding: 0 0 10px;
}
#blogs p {
color: #ffe680;
max-height: 160px;
line-height: 20px;
margin: 0 0 20px 258px;
padding: 0 0 20px;
overflow: hidden;
text-shadow: 2px 2px #C3A33B;
}
#blogs p a {
color: #ffe680;
text-shadow: 2px 2px #C3A33B;
}
#blogs a.more {
color: #C3A33B;
font-style: italic;
text-decoration: none;
}
#blogs div.buttons, #blogs div.blog-entry-buttons {
background: none;
display: inline-block;
width: 328px;
margin: 0;
padding: 0;
position: absolute;
bottom: -20px;
left: 311px;
}
#blogs div.buttons a, #blogs div.blog-entry-buttons a {
float: left;
background: url(../images/bg-button.jpg) no-repeat;
color: #C3A33B;
display: block;
font-family: 'Arial Black';
font-size: 18px;
height: 30px;
line-height: 30px;
width: 144px;
margin-right: 20px;
padding: 4px 0 6px;
text-align: center;
text-decoration: none;
}
#blogs div.blog-entry-buttons {
width: 690px;
left: 258px;
}
#blogs div.blog-entry-buttons a.back {
float: right;
font-size: 16px;
margin-right: 0;
}
/*------------------------------ Shop Page ------------------------------*/
#shop {
background: url(../images/border-dashed.jpg) repeat-x left bottom;
padding: 0 0 20px;
position: relavive;
}
#shop ul.items {
display: inline-block;
list-style-type: none;
margin: 0 auto 16px;
padding: 0;
}
#shop ul.items li {
float: left;
color: #ffe680;
height: 340px;
width: 216px;
margin-bottom: 20px;
margin-right: 28px;
}
#shop ul.items li span {
background: #FFFFAC url(../images/bottom-shadow-img.jpg) no-repeat center bottom;
display: block;
height: 253px;
width: 204px;
margin-bottom: 10px;
padding: 6px 6px 14px;
}
#shop ul.items li span img {
border: 1px solid #e4e0d1;
}
#shop ul.items li span.price {
float: right;
background: none;
color: #FFFFAC;
display: inine-block;
font-size: 17px;
height: 20px;
line-height: 20px;
width: 80px;
margin: 0;
padding: 0;
text-align: right;
}
#shop ul.items li a.buy {
background-color: #ffe680;
color: #C3A33B;
display: block;
font-family: 'Arial Black';
font-size: 14px;
height: 20px;
line-height: 20px;
width: 80px;
border-radius: 3px;
margin: 13px auto 0;
padding: 1px 0 4px;
text-align: center;
text-decoration: none;
}
#shop ul.items li.last {
margin-right: 0;
}
/*------------------------------ FOOTER ------------------------------*/
#footer {
padding: 0 5px;
}
#description {
background: url(../images/border-dashed.jpg) repeat-x left bottom;
margin: 0 0 30px;
padding: 0 0 30px;
}
#description div {
float: left;
width: 180px;
margin-right: 50px;
}
/*#description div a.logo {
background: url(../images/logo-footer.gif) no-repeat;
display: block;
height: 30px;
width: 175px;
margin: 0 0 10px;
}
*/
#description div span {
padding-bottom: 5px;
color:#ffe680;
display: block;
font-size: 11px;
line-height: 20px;
text-shadow: 1px 1px #C3A33B;
}
#description div span a {
color: #ffe680;
text-decoration: none;
text-shadow: 1px 1px #C3A33B;
}
#description p {
color: #ffe680;
font-size: 13px;
line-height: 20px;
margin: 20px 0;
text-align: justify;
text-shadow: 1px 1px #C3A33B;
}
#description p a {
color: #ffe680;
text-shadow: 1px 1px #C3A33B;
}
#footer div.navigation {
color: #ffe680;
font-size: 14px;
line-height: 20px;
width: 338px;
margin: 0 auto 20px;
text-shadow: 0 1px 0 #C3A33B;
}
#footer div.navigation a {
color: #ffe680;
padding: 0 15px;
text-decoration: none;
text-shadow: 1px 1px 0 #C3A33B;
}
#footer div.navigation a:hover {
color: #FFFFAC;
}
/*------------------------------ For IE6 ------------------------------*/
#background {
_height: 1440px;
min-height: 100%;
}
#featured a.button {
_top: 299px;
}
#blogs {
_height: 620px;
}
#blogs div.buttons, #blogs div.blog-entry-buttons {
_top: 620px;
}
I know this is a lot, and I'm not asking for anyone to look through the entirety of the code and provide me with completely revamped code that I can use right off the bat. I could really just use some help figuring out an algorithm to put into place for creating these randomly generated images on the page.
Any help that can be provided is very much appreciated! Thank you all!


I ended up creating an iframe and pulling the photos from E-bay's site regardless. Couldn't create live image pulls due to built-in security, so I had to go ahead and use images manually in a DB.
Also created an href redirect to the owner's ebay sales page, which worked out when it came to overall sales of the shirts / products, etc.

Related

JS Onclick function is not working properly

Html:
<div class="prog shrink" id="prog">
<div class="div1">
<img src="svg/close.svg" class="collapse" id="collapse">
<div class="progNum" style="--i: 'Program 1'">
<div>
<h1>1</h1>
</div>
</div>
</div>
<div class="div2">
<h1>Program 01:</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu ipsum in elit congue blandit. Nullam vitae lobortis lorem, sagittis convallis felis. Praesent tincidunt tristique. Nullam vitae lobortis lorem, sagittis convallis felis. </p>
<div class="btns"> <button class="btn btn1 showDiv3"> <img src="svg/dash.svg"> </button> <button class="btn btn2"> <span>Source code</span> <img src="svg/arrow.svg"> </button>
</div>
</div>
<div class="div3">
<div class="h-div3">
<h1>C++</h1>
<img src="svg/close.svg" class="div3-close">
</div>
<div class="d-link-div3"> <span>Download</span> Turbo C++ Code Dev C++ Code
</div>
<div class="c-link-div3"> <span>Compiler</span> Compile
</div>
<div class="view-div3"> <span>View Code</span> View Code
</div>
</div>
</div>
When a user click on div.prog shrink the class name changes to div.prog expand
I want to add the class shrink and remove the class expand when a user click on img.collapse#collapse
I tried:
var closeBtn = document.getElementById('collapse');
var prog = document.getElementById('prog');
closeBtn.onclick = function(){
console.log('close button clicked..');
prog.classList.remove('expand');
prog.classList.add('shrink');
}
The output statement is displaying on the console but the div is not returning to its initial state.
Full code :
var progElements = document.getElementsByClassName('prog');
var closeBtn = document.getElementById('collapse');
for (let i = 0; i < progElements.length; i++) {
progElements[i].onclick = function() {
this.classList.add('expand');
this.classList.remove('shrink');
for (let j = 0; j < progElements.length; j++) {
if (i !== j) {
if (!progElements[j].classList.contains('shrink')) {
progElements[j].classList.add('shrink');
progElements[j].classList.remove('expand');
}
}
}
}
}
var showDiv3 = document.getElementsByClassName('showDiv3');
var div3 = document.getElementsByClassName('div3');
var div3Close = document.getElementsByClassName('div3-close');
for (let i = 0; i < div3.length; i++) {
showDiv3[i].onclick = function() {
div3[i].style.display = 'block';
div3[i].style.zIndex = '100';
}
div3Close[i].onclick = function() {
div3[i].style.display = 'none';
}
}
var closeBtn = document.getElementById('collapse');
var prog = document.getElementById('prog');
closeBtn.onclick = function() {
console.log('close button clicked..');
prog.classList.remove('expand');
prog.classList.add('shrink');
}
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;600&family=Roboto+Condensed:wght#300;400;700&family=Source+Sans+Pro:wght#300;400;600;700;900&display=swap");
* {
outline: 0px solid #0f0;
font-family: "Poppins", sans-serif;
user-select: none;
}
.container {
position: relative;
transform: translateX(60px);
width: calc(100vw - 60px);
height: 100vh;
overflow: scroll;
background: #152644;
}
.container .title {
text-align: center;
width: 100%;
height: 66px;
background: #11101d;
display: flex;
justify-content: center;
align-items: center;
}
.container .title h1 {
color: #fff;
font-size: 35px;
font-weight: 700;
font-family: "Poppins", sans-serif;
background: var(--rainbow);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.container .content {
position: relative;
height: calc(100% - 66px);
width: 100%;
overflow: scroll;
padding: 10px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
}
.home-content {
border: 0px solid #fff;
}
.home-content h1 {
color: #fff;
border: 0px solid #aaa;
}
.home-content .hc-links {
border: 0px solid #f0f;
}
.home-content .hc-links div {
border: 0px solid #0ff;
}
.home-content .hc-links div h1 {
border: 0px solid #faa;
}
.home-content .hc-links div a {
border: 0px solid #ff0;
}
.home-content .fback {
border: 0;
}
.content::-webkit-scrollbar {
display: none;
}
.content .prog.shrink {
margin: 16px;
width: 125px;
height: 125px;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 -5px 5px rgba(250, 250, 255, 0.05), inset 0 -5px 5px rgba(250, 250, 255, 0.05), 0 5px 5px rgba(0, 0, 0, 0.3), inset 0 5px 5px rgba(0, 0, 0, 0.3);
}
.content .prog.expand {
position: relative;
margin: 20px auto;
width: 75%;
background-color: #007bff;
border-radius: 20px;
display: flex;
justify-content: space-evenly;
align-items: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 20;
box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.3), 0 5px 10px rgba(0, 0, 0, 0.3);
}
.prog.shrink .div1 {
height: 125px;
width: 125px;
background: #11101d;
display: flex;
justify-content: center;
align-items: center;
}
.prog.expand .div1 {
height: 200px;
width: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.prog.shrink .div1 .collapse {
display: none;
}
.prog.expand .div1 .collapse {
border: 1px solid #00f;
position: absolute;
top: 10px;
left: 10px;
height: 40px;
filter: invert(1);
background: #778;
border-radius: 5px;
}
.prog.shrink .div1 .progNum {
padding: 7px;
position: relative;
height: 75px;
width: 75px;
background: rgba(250, 250, 255, 0.45);
border-radius: 50%;
transform: translateY(-15px);
}
.prog.shrink .div1 .progNum::after {
content: var(--i);
position: absolute;
bottom: -28px;
left: 50%;
transform: translateX(-50%);
color: #0088ff;
font-size: 15px;
font-weight: 500;
font-family: "Poppins", sans-serif;
opacity: 0.8;
}
.prog.expand .div1 .progNum {
background: #0088ff;
height: 125px;
width: 125px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
padding: 12px;
box-shadow: 0 0 20px rgba(0, 0, 255, 0.2);
}
.prog.shrink .div1 .progNum>div {
background: #11101d;
height: 100%;
width: 100%;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.prog.expand .div1 .progNum>div {
background: #def;
width: 100%;
height: 100%;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.prog.shrink .div1 .progNum>div>h1 {
font-size: 2.5em;
color: #0088ff;
font-weight: bold;
opacity: 0.8;
}
.prog.expand .div1 .progNum>div>h1 {
font-size: 52px;
}
.prog.shrink div2 {
display: none;
}
.prog.expand .div2 {
padding: 20px;
width: calc(100% - 250px);
}
.prog.expand .div2 h1 {
color: #fff;
font-size: 30px;
font-family: "Poppins", sans-serif;
}
.prog.expand .div2 p {
color: rgba(255, 255, 255, 0.8);
height: 100px;
margin-top: 20px;
margin-bottom: 10px;
font-size: 17px;
}
.prog.expand .div2 .btns {
width: 100%;
display: flex;
}
.prog.expand .div2 .btns .btn {
padding: 10px 15px;
display: flex;
justify-content: center;
align-items: center;
background: #0bc42a;
border: none;
border-radius: 5px;
color: #fff;
}
.prog.expand .div2 .btns .btn1 {
padding: 10px;
}
.prog.expand .div2 .btns .btn2 {
margin-left: 20px;
}
.prog.expand .div2 .btns .btn2 span {
font-size: 20px;
}
.prog.expand .div2 .btns .btn img {
filter: invert(1);
}
.prog.expand .div3 {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 10px;
background: #11101d;
}
.prog.expand .div3 .h-div3 {
margin-left: -10px;
margin-top: -10px;
width: calc(100% + 20px);
min-height: 50px;
background: #007bff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 12px;
}
.prog.expand .div3 .h-div3 h1 {
font-size: 30px;
color: #fff;
}
.prog.expand .div3 .h-div3 img {
filter: invert(1);
height: 30px;
}
.prog.expand .div3 .d-link-div3 {
margin-top: 20px;
position: relative;
border-top: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
flex-direction: row;
padding: 15px 0;
}
.prog.expand .div3 .d-link-div3 span {
background: #11101d;
padding: 0 5px;
position: absolute;
top: -11px;
left: 50%;
transform: translateX(-50%);
font-size: 15px;
color: rgba(250, 250, 255, 0.3);
}
.prog.expand .div3 .d-link-div3 a {
margin: 5px 5px;
padding: 8px;
width: 100%;
background: #007bff;
color: #fff;
font-size: 16px;
text-decoration: none;
border-radius: 4px;
text-align: center;
font-family: "Poppins", sans-serif;
font-weight: 500;
}
.prog.expand .div3 .c-link-div3 {
position: relative;
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 0px;
min-height: 50px;
}
.prog.expand .div3 .c-link-div3 span {
background: #11101d;
padding: 0 5px;
position: absolute;
top: -11px;
left: 50%;
transform: translateX(-50%);
font-size: 15px;
color: rgba(250, 250, 255, 0.3);
}
.prog.expand .div3 .c-link-div3 a {
display: block;
margin-top: 20px;
margin-bottom: 20px;
padding: 8px;
width: 100%;
background: #007bff;
color: #fff;
font-size: 16px;
text-decoration: none;
border-radius: 4px;
text-align: center;
letter-spacing: 1px;
font-family: "Poppins", sans-serif;
font-weight: 500;
}
.prog.expand .div3 .view-div3 {
position: relative;
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 0px;
min-height: 50px;
}
.prog.expand .div3 .view-div3 span {
background: #11101d;
padding: 0 5px;
position: absolute;
top: -11px;
left: 50%;
transform: translateX(-50%);
font-size: 15px;
color: rgba(250, 250, 255, 0.3);
}
.prog.expand .div3 .view-div3 a {
display: block;
margin-top: 20px;
margin-bottom: 10px;
padding: 8px;
width: 100%;
background: #007bff;
color: #fff;
font-size: 16px;
text-decoration: none;
border-radius: 4px;
text-align: center;
letter-spacing: 1px;
font-family: "Poppins", sans-serif;
font-weight: 500;
}
#media screen and (max-width: 700px) {
.home-content {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px 22px;
min-width: 270px;
min-height: 300px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: #11101d;
border-radius: 8px;
box-shadow: 0 -5px 5px rgba(250, 250, 255, 0.05), inset 0 -5px 5px rgba(250, 250, 255, 0.05), 0 5px 5px rgba(0, 0, 0, 0.3), inset 0 5px 5px rgba(0, 0, 0, 0.3);
}
.home-content h1 {
margin-top: 15px;
font-size: 32px;
font-family: "Poppins", sans-serif;
}
.home-content .hc-links {
position: relative;
margin-top: 10px;
margin-bottom: 25px;
width: 100%;
border-radius: 8px;
}
.home-content .hc-links div {
padding: 12px;
margin-top: 15px;
display: flex;
flex-direction: column;
align-items: stretch;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border-radius: 10px;
}
.home-content .hc-links div:nth-child(2) {
margin-bottom: 10px;
}
.home-content .hc-links div h1 {
font-size: 25px;
color: #def;
margin-bottom: 5px;
}
.home-content .hc-links div a {
white-space: nowrap;
text-decoration: none;
color: #fff;
background: #007bff;
font-size: 16px;
padding: 8px;
text-align: center;
border-radius: 5px;
}
.container .content {
display: flex;
justify-content: space-evenly;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
}
.content .prog.shrink {
margin: 6px;
margin-bottom: 12px;
}
.content .prog.expand {
position: relative;
top: 0;
left: 0;
transform: translate(0, 0);
width: 250px;
min-height: 370px;
border-radius: 10px;
overflow: hidden;
margin: 10px;
background: #11101d;
flex-direction: column;
}
.prog.expand .div1 {
position: relative;
top: 0px;
width: 100%;
height: 100px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background: #007bff;
}
.prog.expand .div1 .collapse {
height: 32px;
filter: invert(0);
opacity: 1;
position: absolute;
right: 10px;
}
.prog.expand .div1 .progNum {
position: absolute;
bottom: -37px;
left: 15px;
background: #11101d;
height: 75px;
width: 75px;
padding: 7px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.prog.expand .div1 .progNum>div {
background: #eee;
border-radius: 50%;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.prog.expand .div1 .progNum>div>h1 {
font-size: 2.5em;
color: #000;
opacity: 0.6;
}
.prog.expand .div2 {
padding: 8px 16px;
display: block;
position: relative;
left: 0;
top: 0;
min-height: 270px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: #fff;
}
.prog.expand .div2 h1 {
transform: translateY(-10px);
align-self: flex-end;
margin-right: 0px;
font-size: 24px;
font-weight: 700;
color: #fff;
font-family: "Roboto Condensed", sans-serif;
text-transform: uppercase;
}
.prog.expand .div2 p {
transform: translateY(-10px);
margin-top: 10px;
margin-bottom: 0px;
font-size: 16.5px;
color: rgba(250, 250, 255, 0.8);
height: 160px;
overflow-y: scroll;
font-family: "Source Sans Pro", sans-serif;
word-break: break-all;
}
.prog.expand .div2 .btns {
display: flex;
justify-content: flex-start;
}
.prog.expand .div2 .btns .btn {
border: none;
border-radius: 4px;
}
.prog.expand .div2 .btns .btn1 {
padding: 4px 5px;
}
.prog.expand .div2 .btns .btn1 img {
height: 28px;
}
.prog.expand .div2 .btns .btn2 {
margin-left: 10px;
padding: 5px 10px;
}
.prog.expand .div2 .btns .btn2 span {
font-size: 20px;
margin-right: 10px;
color: #fff;
font-family: "Source Sans Pro", sans-serif;
font-weight: 500;
}
.prog.expand .div2 .btns .btn2 img {
height: 25px;
}
.prog.expand .div3 .d-link-div3 {
flex-direction: column;
align-items: center;
}
.prog.expand .div3 .d-link-div3 a {
margin: 7px 0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>C++ programs</title>
<link rel="stylesheet" href="css/sideBar.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<section class="main">
<!--< --sideBar-- >-->
<section class="sidebar close" id="sideBar">
<div class="logo-section close" id="logoSection">
<img src="svg/cpp.svg" id="btn1">
<h1>C++<span>programs</span></h1>
<img src="svg/bar.svg" id="btn2" class="close">
</div>
<ul class="nav-list close" id="navList">
<li>
<a href="11th.html" class="navLinks">
<img src="svg/1.svg" class="navImg">
<span class="navItem">
11th class
</span>
</a>
<span class="tooltip">
11th class
</span>
</li>
<li>
<a href="12th.html" class="navLinks">
<img src="svg/2.svg" class="navImg">
<span class="navItem">
12th class
</span>
</a>
<span class="tooltip">
12th class
</span>
</li>
<li>
<a href="others.html" class="navLinks">
<img src="svg/3.svg" class="navImg">
<span class="navItem">
Others
</span>
</a>
<span class="tooltip">
Others
</span>
</li>
<li>
<a href="feedback.html" class="navLinks">
<img src="svg/4.svg" class="navImg">
<span class="navItem">
Feedback
</span>
</a>
<span class="tooltip">
Feedback
</span>
</li>
<li>
<a href="more.html" class="navLinks">
<img src="svg/5.svg" class="navImg">
<span class="navItem">
More
</span>
</a>
<span class="tooltip">
More
</span>
</li>
<li>
<a href="FAQ.html" class="navLinks">
<img src="svg/6.svg" class="navImg">
<span class="navItem">
FAQ
</span>
</a>
<span class="tooltip">
FAQ
</span>
</li>
<li class="theme">
<a id="theme">
<span>
Darkmode
</span>
<img src="svg/sun.svg" id="ThemeImg">
</a>
</li>
</ul>
</section>
<!--< --content-section-- >-->
<section class="container">
<div class="title">
<h1>C++ programs</h1>
</div>
<div class="content 11th">
<!--program 1-->
<div class="prog shrink" id="prog">
<div class="div1">
<img src="svg/close.svg" class="collapse" id="collapse">
<div class="progNum" style="--i: 'Program 1'">
<div>
<h1>1</h1>
</div>
</div>
</div>
<div class="div2">
<h1>Program 01:</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu ipsum in elit congue blandit. Nullam vitae lobortis lorem, sagittis convallis felis. Praesent tincidunt tristique. Nullam vitae lobortis lorem, sagittis convallis felis.
</p>
<div class="btns">
<button class="btn btn1 showDiv3">
<img src="svg/dash.svg">
</button>
<button class="btn btn2">
<span>Source code</span>
<img src="svg/arrow.svg">
</button>
</div>
</div>
<div class="div3">
<div class="h-div3">
<h1>C++</h1>
<img src="svg/close.svg" class="div3-close" />
</div>
<div class="d-link-div3">
<span>Download</span>
Turbo C++ Code
Dev C++ Code
</div>
<div class="c-link-div3">
<span>Compiler</span>
Compile
</div>
<div class="view-div3">
<span>View Code</span>
View Code
</div>
</div>
</div>
<!--program 2-->
<div class="prog shrink" id="prog">
<div class="div1">
<img src="svg/close.svg" class="collapse">
<div class="progNum" style="--i: 'Program 2'">
<div>
<h1>2</h1>
</div>
</div>
</div>
<div class="div2">
<h1>Program 02:</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu ipsum in elit congue blandit. Nullam vitae lobortis lorem, sagittis convallis felis. Praesent tincidunt tristique. Nullam vitae lobortis lorem, sagittis convallis felis.
</p>
<div class="btns">
<button class="btn btn1">
<img src="svg/dash.svg">
</button>
<button class="btn btn2">
<span>Source code</span>
<img src="svg/arrow.svg">
</button>
</div>
</div>
</div>
</div>
</section>
</section>
<script src="js/sidebar.js"></script>
<script src="js/main.js"></script>
<script>
links[0].classList.add('active');
</script>
</body>
</html>
I want to close the div by changing its class from prog expand to prog shrink
Can anyone tell how can I achieve that ...
Full project : link

First you need to have a unique id for example id="prog-one" id="prog-two".
Secondly you need to set the data-target attribute so you can target specific div to toggle(add/remove) classes like this.
<img src="svg/close.svg" class="collapse" data-target="prog-two" id="collapse">
Finally you have to get all the collapse image and add the event listener.
var closeBtns = document.querySelectorAll('.collapse');
closeBtns.forEach(closeBtn => {
closeBtn.addEventListener('click', function({target}) {
const targetId = target.getAttribute('data-target');
const targetDOM = document.getElementById(targetId);
console.log('close button clicked..');
targetDOM.classList.remove('expand');
targetDOM.classList.add('shrink');
})
})
Here is the code pen link.😊 LINK ONE LINKTWO
[UPDATED]
var progElements = document.getElementsByClassName("prog");
var closeBtn = document.getElementById("collapse");
for (let i = 0; i < progElements.length; i++) {
progElements[i].onclick = function ({ target }) {
if (target.getAttribute("class") === "collapse") return;
this.classList.add("expand");
this.classList.remove("shrink");
console.log("running");
for (let j = 0; j < progElements.length; j++) {
if (i !== j) {
if (!progElements[j].classList.contains("shrink")) {
progElements[j].classList.add("shrink");
progElements[j].classList.remove("expand");
}
}
}
};
}
var showDiv3 = document.getElementsByClassName("showDiv3");
var div3 = document.getElementsByClassName("div3");
var div3Close = document.getElementsByClassName("div3-close");
for (let i = 0; i < div3.length; i++) {
showDiv3[i].onclick = function () {
div3[i].style.display = "block";
div3[i].style.zIndex = "100";
};
div3Close[i].onclick = function () {
div3[i].style.display = "none";
};
}
var closeBtns = document.querySelectorAll(".collapse");
closeBtns.forEach((closeBtn) => {
closeBtn.addEventListener("click", function ({ target }) {
const targetId = target.getAttribute("data-target");
const targetDOM = document.getElementById(targetId);
console.log("close button clicked..");
targetDOM.className = "prog shrink";
});
});

conflict - jumbotron vs responsive img

I created simple website, by used HTML5, CSS3, JS and Bootstrap. I have conflict with jumbotron and img-responsive. When I minimize the screen aprox. below 760, I see two wallpapers the div.jumbotron, and img-responsive. but I want to see only the img-responsive.
I was checking many times what's going on, but I have no idea.
Do somebody can review the code. I will be really grateful.
Link to this web -https://magdalena-dering.github.io/RWD-Coffee-Corner/
/*BODY*/
body {
background-color: #ffeee6;
font-family: 'Mirza', cursive;
}
/*HEADER*/
#header-nav {
background-color: #ffffff;
border-radius: 0;
border: 0;
}
#logo-img {
background: url('../images/logo.png') no-repeat;
height: 120px;
width: 318px;
margin-top: 20px;
}
.navbar-brand {
padding-top: 25px;
}
.navbar-brand a:focus,
.navbar-brand a:hover {
text-decoration: none;
}
.navbar-brand h1 {
/* Restaurant name */
font-size: 1.8em;
color: #4d0000;
margin-left: 10px;
text-shadow: 5px 5px 5px #ff9999;
font-weight: bold;
line-height: .75;
}
.navbar-brand span {
font-size: 1em;
color: #4d0000;
}
#nav-list a {
font-size: 1.6em;
color: #4d0000;
text-shadow: 3px 3px 3px #ff9999;
font-weight: bold;
text-align: center;
margin-top: 5px;
margin-left: 5px;
background-color: #ffeee6;
border: 1px solid #ffffff;
box-shadow: 0 0 30px #ff9999;
}
#nav-list a:hover {
background: #ffeee6;
box-shadow: 3px 3px 3px #ff9999;
}
.navbar-header button.navbar-toggle,
.navbar-header .icon-bar {
border: 1px solid #661400;
}
.navbar-header button.navbar-toggle {
clear: both;
margin-top: -30px;
}
.navbar-brand a:hover,
.navbar-brand a:focus {
text-decoration: none;
}
/*HOME PAGE*/
.container .jumbotron {
box-shadow: 0 0 30px #ff9999;
border: 1px solid #4d1a00;
padding: 0;
border: 1px solid #ffffff;
}
#menu-tile,
#specials-tile,
#map-tile {
box-shadow: 0 0 30px #ff9999;
border: 1px solid #ffffff;
height: 280px;
margin: 30px;
position: relative;
overflow: hidden;
text-align: center;
object-position: center;
}
#menu-tile:hover,
#specials-tile:hover,
#map-tile:hover {
box-shadow: 3px 3px 3px #ff9999;
}
#menu-tile {
background: url('../images/menu.jpg') no-repeat;
background-position: center;
background-color: #ffccb3;
}
#specials-tile {
background: url('../images/specials1.jpg') no-repeat;
background-position: center;
background-color: #ffccb3;
}
#menu-tile span,
#specials-tile span,
#map-tile span {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
text-align: center;
font-size: 1.6em;
color: #800000;
background-color: #ffcccc;
opacity: .7;
}
/* FOOTER */
.panel-footer {
background-color: #ffffff;
font-size: 1.2em;
margin-top: 20px;
margin-bottom: 20px;
}
.visible-xs {
border-top: 1px solid #800000;
}
#hours span,
#address span,
#sentence span {
color: #4d0000;
text-align: center;
text-shadow: 3px 3px 3px #ff9999;
font-size: 1.3em;
}
/***********MENU SIDE*********/
.category-tile {
position: relative;
box-shadow: 0 0 30px #ff9999;
border: 1px solid #ffffff;
overflow: hidden;
width: 200px;
height: 200px;
margin: 0 auto 15px;
}
.category-tile span {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
text-align: center;
font-size: 1.6em;
color: #800000;
background-color: #ffcccc;
opacity: .7;
}
.category-tile:hover {
box-shadow: 3px 3px 3px #ff9999;
}
.category-tile+div {
margin-bottom: 50px;
}
#menu-title {
font-size: 1.8em;
color: #4d0000;
margin-left: 10px;
text-shadow: 5px 5px 5px #ff9999;
font-weight: bold;
text-align: center;
}
span {
font-size: 1.4em;
text-align: center;
}
.text-center {
margin-top: 0px;
margin-bottom: 30px;
}
/***********COFFEE CATEGORY SIDE*********/
.coffee-position {
position: relative;
box-shadow: 0 0 30px #ff9999;
border: 1px solid #ffffff;
overflow: hidden;
width: 180px;
height: 180px;
margin: 0 auto 15px;
margin-bottom: 120px;
}
.coffee-position:hover {
box-shadow: 3px 3px 3px #ff9999;
}
.coffee-position span {
position: absolute;
bottom: 0;
right: 0;
text-align: center;
font-size: 1.6em;
color: #800000;
background-color: #ffcccc;
opacity: .7;
width: 100%;
}
.row {
margin-right: 0px;
margin-left: 0px;
}
.coffee-price {
font-size: 1.2em;
text-align: center;
margin-top: -110px;
margin-bottom: 20px;
}
.menu-item-tile .menu-item-price span {
font-size: .6em;
}
/***********SWEETS CATEGORY SIDE*********/
.sweets-position {
position: relative;
box-shadow: 0 0 30px #ff9999;
border: 1px solid #ffffff;
overflow: hidden;
width: 230px;
height: 230px;
margin: 0 auto 15px;
}
.sweets-position:hover {
box-shadow: 3px 3px 3px #ff9999;
}
.sweets-position span {
position: absolute;
bottom: 0;
right: 0;
text-align: center;
font-size: 1.3em;
color: #800000;
background-color: #ffcccc;
opacity: .7;
width: 100%;
}
.sweet-price {
font-size: 18px;
text-align: center;
margin-top: 10px;
margin-bottom: 35px;
}
/***********SPECIALS SIDE*********/
.specials-tile {
position: relative;
box-shadow: 0 0 30px #ff9999;
border: 1px solid #ffffff;
overflow: hidden;
width: 300px;
height: 300px;
margin: auto;
background: url('../images/bday.jpg') no-repeat;
}
.specials-tile2 {
position: relative;
box-shadow: 0 0 30px #ff9999;
border: 1px solid #ffffff;
overflow: hidden;
width: 300px;
height: 300px;
margin: auto;
background: url('../images/catering.jpg') no-repeat;
}
.specials-tile:hover,
.specials-tile2:hover {
box-shadow: 3px 3px 3px #ff9999;
}
.specials-tile span,
.specials-tile2 span {
position: absolute;
bottom: 0;
right: 0;
text-align: center;
font-size: 1.6em;
color: #800000;
background-color: #ffcccc;
opacity: .7;
width: 100%;
}
h4 {
color: #4d0000;
margin-left: 10px;
text-shadow: 5px 5px 5px #ff9999;
font-weight: bold;
}
.text1,
.text2 {
font-size: 1.3em;
text-align: center;
margin-top: 10px;
position: relative;
border: solid 1px #ffcccc;
padding: 5px;
background-color: #ffe6e6;
}
.text1 a {
color: #4d0000;
text-shadow: 5px 5px 5px #ff9999;
font-weight: bold;
}
.text2 a {
color: #4d0000;
text-shadow: 5px 5px 5px #ff9999;
font-weight: bold;
}
/***********CONTACT SIDE*********/
#map-contact {
box-shadow: 0 0 30px #ff9999;
border: 1px solid #ffffff;
height: 250px;
width: 100%;
position: relative;
overflow: hidden;
text-align: center;
object-position: center;
}
#map-contact:hover {
box-shadow: 3px 3px 3px #ff9999;
}
.head-text {
color: #4d0000;
text-shadow: 5px 5px 5px #ff9999;
font-weight: bold;
text-align: center;
margin: 20px;
}
.contact-description {
font-size: 1.3em;
color: #4d0000;
text-shadow: 3px 3px 3px #ff9999;
font-weight: bold;
text-align: center;
margin: 30px;
}
}
/********** Large devices only **********/
#media (min-width: 1200px) {
/* Header */
#logo-img {
background: url('../images/logo.png') no-repeat;
height: 120px;
width: 318px;
margin-top: 20px;
}
}
.container .jumbotron {
background: url(../images/coffee-wallpapers-1200.jpg) no-repeat;
height: 675px;
box-shadow: 0 0 30px #ff9999;
}
}
/********** Medium devices only **********/
#media (min-width: 992px) and (max-width: 1199px) {
/* Header */
#logo-img {
background: url('../images/logo.png') no-repeat;
height: 120px;
width: 318px;
margin-top: 20px;
}
/* Home Page */
.container .jumbotron {
background: url(../images/coffee-wallpapers-992.jpg) no-repeat;
height: 558px;
box-shadow: 0 0 30px #ff9999;
}
}
/********** Small devices only **********/
#media (min-width: 768px) and (max-width: 991px) {
/* Header */
#logo-img {
background: url('../images/logo.png') no-repeat;
height: 120px;
width: 318px;
margin-top: 20px;
margin: 5px;
}
/* Home Page */
.container .jumbotron {
background: url('../images/coffee-wallpapers-768.jpg') no-repeat;
height: 432px;
box-shadow: 0 0 30px #ff9999;
}
}
/********** Extra small devices only **********/
#media (max-width: 767px) {
/* Header */
#nav-list a {
color: #4d0000;
text-shadow: 3px 3px 3px #ff9999;
font-weight: bold;
text-align: center;
background-color: #ffeee6;
border: 2px solid #ffffff;
margin-top: 6px;
margin-bottom: 3px;
}
.navbar-nav {
margin: 0px;
margin-top: 3px;
margin-left: -3px;
}
.navbar-brand {
padding-top: 10px;
}
.navbar-brand h1 {
/* Restaurant name */
padding-top: 10px;
font-size: 5vw;
/* 1vw = 1% of viewport width */
margin-top: -10px;
}
#nav-list a {
font-size: 4vw;
}
.navbar-brand span {
font-size: 3vw;
color: #4d0000;
}
/*Home Page*/
#logo-img {
background: url('../images/md.png') no-repeat;
height: 76px;
width: 210px;
}
.container .jumbotron {
margin-top: 30px;
padding: 0;
box-shadow: 0 0 30px #ff9999;
}
/*Footer*/
#menu-tile span,
#specials-tile span,
#map-tile span {
font-size: vw;
}
.panel-footer {
font-size: 3vw;
}
#hours span,
#address span,
#sentence span {
font-size: 4vw;
}
/***********MENU SIDE*********/
.category-tile span {
font-size: 4vw;
}
#menu-title {
font-size: 4vw;
}
span {
font-size: 3vw;
}
/***********COFEE CATEGORY SIDE*********/
.coffee-position span {
font-size: 4vw;
}
.coffee-price {
font-size: 4vw;
}
/***********SWEETS CATEGORY SIDE*********/
.sweets-position span {
font-size: 4vw;
}
.sweet-price {
font-size: 4vw;
}
/***********SPECIALS SIDE*********/
.specials-tile {
background: url('../images/bday 200x200.jpg') no-repeat;
width: 200px;
height: 200px;
margin-bottom: 10px;
}
.specials-tile2 {
background: url('../images/catering 200x200.jpg') no-repeat;
width: 200px;
height: 200px;
}
.specials-tile span,
.specials-tile2 span {
font-size: 4vw;
}
.text1,
.text2 {
font-size: 3vw;
margin: 15px;
}
.text-center span {
font-size: 4vw;
}
/***********CONTACT SIDE*********/
.head-text span {
font-size: 4vw;
}
}
/********** Super extra small devices Only :-) (e.g., iPhone 4) **********/
#media (max-width: 479px) {
/* Header */
#nav-list a {
color: #4d0000;
text-shadow: 3px 3px 3px #ff9999;
font-weight: bold;
text-align: center;
background-color: #ffeee6;
border: 2px solid #ffffff;
margin-top: 6px;
margin-bottom: 3px;
}
.navbar-nav {
margin: 0px;
margin-top: 3px;
margin-left: -3px;
}
.navbar-brand h1 {
font-size: 6vw;
margin-left: 10px;
}
#nav-list a {
font-size: 5vw;
}
/*Home Page*/
.container .jumbotron {
margin-top: 30px;
padding: 0;
box-shadow: 0 0 30px #ff9999;
}
.navbar-brand span {
font-size: 4vw;
color: #4d0000;
}
#menu-tile span,
#specials-tile span,
#map-tile span {
font-size: 5vw;
}
#logo-img {
background: url('../images/sm.png') no-repeat;
}
/*Footer*/
.panel-footer {
font-size: 5vw;
}
#hours span,
#address span,
#sentence span {
font-size: 6vw;
}
/***********MENU SIDE*********/
.category-tile span {
font-size: 6vw;
}
#menu-title {
font-size: 6vw;
}
span {
font-size: 5vw;
}
/***********COFEE CATEGORY SIDE*********/
.coffee-position span {
font-size: 6vw;
}
.coffee-price {
font-size: 6vw;
}
/***********SWEETS CATEGORY SIDE*********/
.sweets-position span {
font-size: 7vw;
}
.sweet-price {
font-size: 6vw;
}
/***********SPECIALS SIDE*********/
.specials-tile {
background: url('../images/bday 200x200.jpg') no-repeat;
width: 200px;
height: 200px;
margin-bottom: 10px;
}
.specials-tile2 {
background: url('../images/catering 200x200.jpg') no-repeat;
width: 200px;
height: 200px;
}
.specials-tile span,
.specials-tile2 span {
font-size: 6vw;
}
.text1,
.text2 {
font-size: 5vw;
margin: 15px;
}
.text-center span {
font-size: 5vw;
}
/***********CONTACT SIDE*********/
.head-text span {
font-size: 6vw;
}
/********** Super EXTRA (created by me) extra small devices Only :-)**********/
#media (max-width: 423px) {
/* Header */
#nav-list a {
color: #4d0000;
text-shadow: 3px 3px 3px #ff9999;
font-weight: bold;
text-align: center;
background-color: #ffeee6;
border: 2px solid #ffffff;
margin-top: 6px;
margin-bottom: 3px;
}
.navbar-nav {
margin: 0px;
margin-top: 3px;
margin-left: -3px;
}
.navbar-brand h1 {
font-size: 7vw;
}
#nav-list a {
font-size: 6vw;
}
#logo-img {
background: url('../images/sm.png') no-repeat;
width: 150px;
height: 54px;
}
.navbar-brand span {
font-size: 4vw;
color: #4d0000;
}
/*Home Page*/
.container .jumbotron {
margin-top: 30px;
padding: 0;
box-shadow: 0 0 30px #ff9999;
}
#menu-tile span,
#specials-tile span,
#map-tile span {
font-size: 5vw;
}
/*Footer*/
.panel-footer {
font-size: 5vw;
}
#hours span,
#address span,
#sentence span {
font-size: 6vw;
}
/***********MENU SIDE*********/
.category-tile span {
font-size: 6vw;
}
#menu-title {
font-size: 6vw;
}
span {
font-size: 5vw;
}
/***********COFEE CATEGORY SIDE*********/
.coffee-position span {
font-size: 6vw;
}
.coffee-price {
font-size: 5vw;
}
/***********SWEETS CATEGORY SIDE*********/
.sweets-position span {
font-size: 7vw;
}
.sweet-price {
font-size: 5vw;
}
/***********SPECIALS SIDE*********/
.specials-tile {
background: url('../images/bday 200x200.jpg') no-repeat;
width: 200px;
height: 200px;
margin-bottom: 10px;
}
.specials-tile2 {
background: url('../images/catering 200x200.jpg') no-repeat;
width: 200px;
height: 200px;
}
.specials-tile span,
.specials-tile2 span {
font-size: 6vw;
}
.text1,
.text2 {
font-size: 5vw;
margin: 15px;
}
.text-center span {
font-size: 5vw;
}
/***********CONTACT SIDE*********/
.head-text span {
font-size: 6vw;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>responsive design - coffee corner</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Mirza:400,500,600,700" rel="stylesheet">
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="pull-left visible-xs visible-sm visible-md visible-lg">
<div id="logo-img"></div>
</a>
<div class="navbar-brand">
<a href="index.html">
<h1>coffee corner</h1><span> Magdalena Dering ©<br> RWD</span></a>
</div>
<button id="navbarToggle" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="collapsable-nav" class="collapse navbar-collapse">
<ul id="nav-list" class="nav navbar-nav navbar-right">
<li id="navMenuButton">
<a href="menu.html " onclick="$dc.loadMenuCategories();">
<span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs"> menu</a>
</li>
<li>
<a href="specials.html">
<span class="glyphicon glyphicon-star-empty"></span><br class="hidden-xs"> specials</a>
</li>
<li>
<a href="contact.html">
<span class="glyphicon glyphicon-envelope"></span><br class="hidden-xs"> contact</a>
</li>
</ul>
<!-- #nav-list -->
</div>
<!-- .collapse .navbar-collapse -->
</div>
<!-- .container -->
</nav>
<!-- #header-nav -->
</header>
<div id="main-content" class="container">
<div class="jumbotron">
<img src="images/coffee-wallpapers-768.jpg" alt="Picture of restaurant" class="img-responsive visible-xs">
</div>
</div>
<div class="row"></div>
<div id="home-tiles" class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="menu.html">
<div id="menu-tile"><span>menu</span></div>
</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="specials.html">
<div id="specials-tile"><span>specials</span></div>
</a>
</div>
<div class="col-md-4 col-sm-12 col-xs-12">
<a href="https://www.google.pl/maps/place/1211+6th+Ave,+New+York,+NY+10036,+Stany+Zjednoczone/#40.7586101,-73.9841164,17z/data=!3m1!4b1!4m5!3m4!1s0x89c258ff14d2b811:0x3569ce18f2731425!8m2!3d40.7586101!4d-73.9819277" target="_blank">
<div id="map-tile">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.155246285712!2d-73.98411638459368!3d40.75861007932681!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c258ff14d2b811%3A0x3569ce18f2731425!2s1211+6th+Ave%2C+New+York%2C+NY+10036%2C+Stany+Zjednoczone!5e0!3m2!1spl!2spl!4v1482304685186"
width=315 height="280" frameborder="0" style="border:0" allowfullscreen></iframe>
<span>map</span>
</div>
</a>
</div>
</div>
<!-- End of #home-tiles -->
</div>
<!-- End of #main content -->
<footer class="panel-footer">
<div class="container">
<div class="row">
<section id="hours" class="col-sm-4">
<span><b>hours:</b><br></span> monday - friday: 11am- 8pm<br> saturday - sunday: 10am - 9pm<br>
<hr class="visible-xs">
</section>
<section id="address" class="col-sm-4">
<span><b>address:</b><br></span> 1211 6th Ave, New York<br> NY 10036
<hr class="visible-xs">
</section>
<section id="sentence" class="col-sm-4">
<span><b>quots:</b><br></span><i>
“Let me wake up next to you, have coffee in the morning and wander through<br>the city with your hand in mine, and I'll be happy for the rest of my fucked<br> up little life.”</i><br> ― Charlotte Eriksson
<hr class="visible-xs">
</section>
</div>
</div>
</footer>
<!-- jQuery (Bootstrap JS plugins depend on it) -->
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Best,
Megi

add background for 760 media without url & height 100% to your custom style css
#media (max-width: 767px) {
.container .jumbotron {
margin-top: 30px;
padding: 0;
box-shadow: 0 0 30px #ff9999;
background: url('');
height: 100%;
}
}

Background image overlaps another div

I'm trying to stop the .background image from overlapping skills div when viewport gets taller or wider. I'v tried many different things and i have no luck. Please help me! I'm fairly new to this so please don't be surprised if its something simple stupid thing that I did that's causing this problem. Thanks!
$(document).ready(function(){
//MENU
$('.menu-icon').click(function(){
$('.menu-nav').animate({
height: 'toggle'
}, 200
);
});
//SKILLS
flagScroll = true;
$(window).scroll(function() {
if ($(this).scrollTop() > 40 && flagScroll) {
// apply effects and animations
flagScroll= false;
$('.html').animate({
marginRight: 0,
width: 100
}, 2200
);
$('.css').animate({
marginRight: 0,
width: 90
}, 2200
);
$('.javascript').animate({
marginRight: 0,
width: 40
}, 2200
);
}
});
});
/*$mat-black: #37474F;*/
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: #rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
/*background:transparent;*/
}
body {
line-height: 1;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
nav ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
* h1 {
font-family: 'Open Sans', sans-serif;
font-weight: lighter;
}
header {
background-color: black;
height: 420px;
}
header .background {
opacity: 0.2;
background-image: url(http://lorempixel.com/400/200/sports/1);
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
width: 100%;
height: 74%;
position: absolute;
overflow: hidden;
}
header nav {
width: 100%;
z-index: 2;
}
header .menu-icon {
padding: 5px 0 5px 10px;
cursor: pointer;
width: 50px;
}
header .menu-icon img {
width: 50px;
height: 50px;
}
header .menu {
width: 100%;
border-top: solid #18FFFF 1px;
border-width: 70%;
height: 0;
}
header .menu:before {
content: " ";
display: block;
width: 90%;
height: 5px;
margin: 0 auto;
left: 0;
right: 0;
background-color: #18FFFF;
opacity: 1;
}
header .menu .menu-nav {
z-index: 2;
position: absolute;
background-color: #18FFFF;
width: 90%;
margin: 0 auto;
left: 0;
right: 0;
border-bottom-radius: 5px;
display: none;
}
header .menu .menu-nav ul {
margin-top: 20px;
}
header .menu .menu-nav ul li {
text-align: center;
padding: 10px;
list-style: none;
border-radius: 5x;
font-size: 2em;
cursor: pointer;
}
header .menu .menu-nav ul li:hover {
/*background-color: #607D8B;*/
background-color: black;
color: #18FFFF;
}
header .menu h1 {
text-align: center;
}
header .menu .menu-social {
width: 155px;
margin: 30px auto;
}
header .menu .menu-social img {
cursor: pointer;
margin: 0 1px 0 1px;
float: left;
padding-top: 20px;
padding-bottom: 20px;
}
header .menu .menu-social img:hover {
position: relative;
top: -5px;
}
header .bio {
width: 70%;
margin: 0 auto;
margin-bottom: 0;
position: relative;
}
header .bio .hello h1 {
font-size: 3.4em;
color: #18FFFF;
text-align: center;
padding-bottom: 20px;
padding-top: 45px;
font-family: 'Bowlby One SC', cursive;
}
header .bio .desc p {
color: white;
text-align: center;
line-height: 25px;
padding-bottom: 80px;
}
header img {
display: block;
margin: 0 auto;
padding-bottom: 3px;
cursor: pointer;
position: relative;
}
.skills-2 {
width: 90%;
margin: 15px auto;
background-color: white;
overflow: hidden;
border: solid black 1px;
border-radius: 5px;
}
.skills-2 h1 {
text-align: center;
font-size: 3em;
color: black;
padding-top: 20px;
padding-bottom: 20px;
}
.skills-2 .my-skills {
width: 50%;
padding-top: 20px;
float: left;
padding-bottom: 20px;
}
.skills-2 .my-skills ul li {
text-align: center;
padding-bottom: 10px;
}
.skills-2 .graph {
float: left;
width: 50%;
padding-top: 20px;
}
.skills-2 .graph .html {
width: 1px;
}
.skills-2 .graph .css {
width: 1px;
}
.skills-2 .graph .javascript {
width: 1px;
}
.skills-2 .graph .bar {
height: 10px;
background-color: #2962FF;
margin-bottom: 18px;
}
.work {
width: 100%;
background-color: white;
color: black;
}
.work:before {
/*#include divider;*/
}
.work h1 {
text-align: center;
font-size: 3em;
padding-top: 40px;
padding-bottom: 20px;
color: black;
}
.work p {
text-align: center;
display: block;
width: 70%;
margin: 0 auto;
padding-bottom: 60px;
line-height: 20px;
padding-top: 30px;
}
.work p span {
display: block;
padding-top: 10px;
font-size: 0.8em;
line-height: 15px;
}
.work h2 {
text-align: center;
padding-top: 50px;
padding-bottom: 20px;
font-size: 1.3em;
}
.work .site1 {
width: 100%;
}
.work .site1 img {
display: block;
width: 90%;
margin: 0 auto;
padding-bottom: 5px;
box-shadow: 8px 10px 35px black;
}
.work .site2 {
width: 100%;
}
.work .site2 img {
display: block;
width: 90%;
margin: 0 auto;
padding-bottom: 5px;
box-shadow: 8px 10px 35px black;
}
.contact {
background-color: black;
overflow: hidden;
color: white;
}
.contact h1 {
text-align: center;
font-size: 3em;
padding-top: 40px;
padding-bottom: 20px;
}
.contact form {
padding-top: 50px;
text-align: left;
width: 85%;
margin: 0 auto;
}
.contact form label p {
float: left;
width: 100%;
padding-bottom: 15px;
}
.contact form input {
width: 100%;
float: left;
margin-bottom: 20px;
border-top: none;
border-right: none;
border-left: none;
border-bottom: 2px solid #18FFFF;
height: 30px;
font-size: 18px;
background-color: black;
color: white;
}
.contact form input:focus {
outline: none;
}
.contact form textarea {
width: 100%;
border: #18FFFF solid 2px;
background-color: black;
font-size: 18px;
margin-top: 20px;
color: white;
}
.contact form input[type=submit] {
width: 30%;
padding: 5px;
margin: 20px auto;
border-bottom: none;
border: #18FFFF solid 1px;
background-color: black;
color: white;
}
.contact form input[type=submit]:hover {
color: black;
background-color: #18FFFF;
-webkit-transition: background-color 100ms linear;
-moz-transition: background-color 100ms linear;
-o-transition: background-color 100ms linear;
-ms-transition: background-color 100ms linear;
transition: background-color 100ms linear;
}
<title>Ivan B</title>
<link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
<!--FONTS-->
<link href="https://fonts.googleapis.com/css?family=Bowlby+One+SC" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<img src="images/Menu-64.png">
</div><!--menu-icon-->
</nav>
<div class="menu">
<div class="menu-nav">
<ul>
<li>Home</li>
<li>Work</li>
<li>Contact</li>
</ul>
<div class="menu-social">
<img src="images/Instagram.png" alt="instagram" />
<img src="images/Twitter.png" alt="twitter" />
<img src="images/LinkedIn.png" alt="linkedin" />
</div>
</div><!--menu-nav-->
</div>
<div class="background">
</div><!--BACKGROUND-->
<div class="bio">
<div class="hello">
<h1>Hello...</h>
</div><!--Hello-->
<div class="desc">
<p>Lorem ipsum dolor sit amet, ut movet persius fierent vis, nominavi deseruisse eu vis. Pri eruditi apeirian periculis at, summo scriptorem has in.</p>
</div><!--desc-->
</div><!--Bio-->
<img src="images/arrow-down.png">
</header>
<div class="skills-2">
<h1>Skills</h1>
<div class="my-skills">
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
</div><!--My SKills-->
<div class="graph">
<div class="html bar">
</div>
<div class="css bar">
</div>
<div class="javascript bar">
</div>
</div><!--Graph-->
</div><!--SKills 2-->
<div class="work">
<h1>Work</h1>
<div class="site1">
<h2>A very clear statement <br/>of your offer</h2>
<img src=images/site1.png>
<p>Lorem ipsum dolor sit amet, ut movet persius fierent vis, <br/><span>*Lorem ipsum dolor sit amet, ut movet persius fierent vis,</span></p>
</div><!--Site 1-->
<div class="site2">
<h2>The Yalow</h2>
<img src="images/site2.png">
<p>Lorem ipsum dolor sit amet, ut movet persius fierent vis,<br/><span>Lorem ipsum dolor sit amet, ut movet persius fierent vis,</span></p>
</div><!--Site 2-->
</div><!--Work-->
<div class="contact">
<h1>Contact</h1>
<form action="contact.php" method="post">
<label>
<p>Name *</p>
<input type="text" name="name">
</label>
<label>
<p>Your E-mail *</p>
<input type="text" name="email">
</label>
<label>
<p>Your message *</p>
<textarea name="message" rows="8" cols="40"></textarea>
</label>
<div id="button">
<input type="submit" name="name" value="Send">
</div><!--button-->
</form>
</div>

to fix your image overlapping issue, add below changes to your css -
header {
background-color: black;
height: 420px;
position: relative; /* Added */
}
header .background {
opacity: 0.2;
background-image: url(http://lorempixel.com/400/200/sports/1);
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
width: 100%;
height: 100%; /* editied */
top: 0px; /* added */
position: absolute;
overflow: hidden;
}

In your css file :
height:78% change it to 38% and it should resize it for you. Always check your css when it comes to positioning and resizing.

Give this property
backface-visibility:hidden;
to your background image element.

How do I get a div to move with window resize without pushing other divs out of the way?

I've spent a long time trying to get this working.
I have a section called "RightExtra" and a div inside it called "RightExtraContent". I'm trying to make it so that these two divs can move freely when the window is resized up to a certain point, without affecting the position of any other divs.
Here is a visual explanation of what I mean:
http://i.imgur.com/A3qBGsj.png
And here is the fiddle: http://jsfiddle.net/c21nzs13/1/
I've tried a bunch of different code combinations and still no success.
* {
padding: 0;
margin: 0;
}
html {
background: #1e1e1e;
/*Back Colors 1*/
}
body {
background-color: #1e1e1e;
/*background:url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/4657039731.jpg');*/
}
a {
color: #FFFFFF;
text-decoration: none;
}
a:active,
a:hover {
text-decoration: underline;
}
.nofancy a {
text-decoration: none;
}
/*These nofancies don't work*/
.nofancy a:hover {
text-decoration: none;
}
/*These nofancies don't work*/
#heady {
text-align: center;
width: 100%;
height: 75px;
background-color: #1e1e1e;
/*Back Colors 2*/
font-family: Tahoma;
font-size: 16px;
color: #000000;
position: relative;
margin-bottom: 30px;
}
#wrapper {
text-align: center;
width: 1000px;
height: 100%;
margin-left: auto;
margin-right: auto;
/*background-color:#1e1e1e; Back Colors 3*/
font-family: Tahoma;
font-size: 16px;
position: relative;
}
#RightExtra {
background-color: none;
width: 500px;
float: right;
margin-left: auto;
margin-right: auto;
position: relative;
}
#RightExtraContent {
font-family: Tahoma;
font-size: 16px;
height: 800px;
width: 300px;
color: white;
background-color: #343434;
text-align: center;
border-radius: 30px;
position: fixed;
float: right;
}
#followfoot {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 180px;
background-color: none;
text-align: center;
/*display:none;*/
}
#mag {
background-color: #739FE0;
border-color: #739FE0;
border-style: solid;
border-width: 2px;
border-radius: 20px;
line-height: 10px;
text-align: center;
margin-left: 8px;
cursor: pointer;
}
#feety {
text-align: center;
width: 100%;
height: 0px;
//100px background-color:darkslateblue;
/*Back Colors 4*/
font-family: Tahoma;
font-size: 16px;
color: white;
position: fixed;
//Changing this to relative makes followfoot disappear when you scroll long enough.
}
.UpCenter {
/*background-color:#1e1e1e; Back Colors 5*/
padding-top: 30px;
margin-bottom: 50px;
height: 90px;
}
.SignUp {
background-color: #ccc;
border-width: 1px;
border-color: #ccc;
border-radius: 10px;
width: 75px;
padding: 0px 0px;
margin-left: 30px;
text-align: center;
float: right;
}
/* clearfix */
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.cf:after {
clear: both;
}
.cf {
* zoom: 1;
}
ul.navbar {
border-style: solid;
border-width: 1px;
border-color: #739FE0;
width: 100px;
/*Widthchanger1*/
border-radius: 4px;
margin-left: 0px;
margin-right: 0px;
font-size: 14px;
height: 33px;
}
ul.navbar li a.ActiveListItem {
color: white;
!important;
background-color: #222 !important;
padding: 7.5px 0px !important;
font-weight: normal !important;
margin-left: 0px;
/*Widthchanger2, got the activeitem centered with list text this way*/
margin-right: 0px;
border-radius: 4px;
height: 18px;
width: 100px;
/*kinda messes with width of text*/
margin-bottom: 1px;
}
ul.navbar li {
position: relative;
width: 100px;
/*Changes width of actual list*/
}
ul.navbar li a {
display: block;
color: white;
padding: 10px 5px;
text-decoration: none;
transition: all .1s ease-in;
}
ul.navbar li a:hover,
ul.navbar li:hover > a {
/*background:black; */
background: #739FE0;
color: #FFFFFF;
/*font-weight:600;*/
/*border-bottom-color:#FFFFFF;
border-bottom-style:solid;*/
/*border-color:#FFFFFF;
border-style:solid;
border-width:1px; */
}
ul.navbar li ul {
margin-top: 0px;
/*Controls space from listdropdown to listchooser*/
position: absolute;
background: #222;
font-size: 14px;
/* min-width: 200px; */
display: none;
z-index: 99;
box-shadow: inset 0 0px 3px rgba(0, 0, 0, .6), 0 5px 10px rgba(0, 0, 0, .6);
}
ol,
ul {
list-style: outside none none;
}
.hidden {
display: none;
}
/*Lister*/
form {} .lister input {
width: 235px;
/*width of todo input box*/
height: 33px;
padding-left: 10px;
padding-right: 10px;
border-width: 1px;
border-style: solid;
border-color: #739FE0;
float: left;
margin-bottom: 20px;
font-size: 14px;
font-family: "Tahoma";
background-color: #222;
color: white;
}
.lister input:focus {
outline: none;
border-color: #739FE0;
/*ccc*/
box-shadow: 0px 0px 7px 0px #739FE0;
}
.lister ul {
/*list-style: square inside;*/
padding: 10px 0px 55px 0px;
/* padding for outside area of list*/
/* This is what's visible when not in use Used to be 10*/
/*height:50px;*/
/*background: #0f705d; DarkerOutsideColor*/
background: none;
/*width: 100%;*/
font-family: "Tahoma";
}
.active {
text-align: center;
}
.inactive {
display: none;
}
.lister li {
font-size: 14px;
/*font size of list items*/
/*font-weight: 600;*/
color: #181818;
/*Font Color d5faf3*/
display: inline-block;
/*This makes the items side-by-side and not columns*/
padding: 9px;
margin-bottom: 5px;
/*SEPARATE*/
/* float:left; Interferes with text-align of Active*/
}
.lister li:nth-child(odd) {
background: #343434;
/*LighterInside Color,Odd*/
border-color: #ccc;
border-width: 1px;
border-radius: 5px;
border-style: solid;
box-shadow: 0px 0px 10px 0px #000000;
color: #ccc;
/*opacity:0.6;
filter:alpha(opacity=60);*/
}
.lister li:nth-child(even) {
background: #343434;
/*LighterInside Color,Even*/
border-color: #ccc;
border-width: 1px;
border-radius: 5px;
border-style: solid;
box-shadow: 0px 0px 10px 0px #000000;
color: #ccc;
}
.lister li > a {
/*float: right;*/
text-decoration: none;
color: white;
font-weight: bold;
/*transition: all .2s ease-in-out;*/
/*position:relative;*/
margin-top: 2px;
display: inline-block;
}
.lister li > a:hover {
/*font-size: 105%;*/
/*color: #c0392b;*/
color: #000000;
}
.lister li > span {
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 379px;
}
/*Clearable*/
.clearable {
/*background: #fff; */
/*background:url(../images/splusgreen.png); */
background-repeat: no-repeat;
background-size: 10px 10px;
background-position: right 5px center;
/* -15*/
transition: background 0.4s;
}
.clearable.x {
/*background-position: right 5px center;*/
}
.clearable.onX {
cursor: pointer;
}
<section id="heady">
<div style="width:1000px;margin-left:auto;margin-right:auto;">
<div style="text-align: left;padding:25px 0px;display:inline-block;float:left;font-size:18px;"><b>Calories</b>
</div>
<div style="text-align: right;padding:25px 00px;display:inline-block;float:right;">
<!--Home | --> Sign In | Sign Up
</div>
</div>
</section>
<section id="RightExtra">
<div id="RightExtraContent">Yes hello....!</div>
</section>
<section id="wrapper">
<br>
<br>
<div class="UpCenter">
<div style="vertical-align:top;display:inline-block;">
<ul class="navbar cf">
<li> Category
<ul></ul>
</li>
</ul>
</div>
<div class="lister" style="display:inline-block;vertical-align:top;padding:0px 0px 0px 10px;">
<form action="">
<input type="text" class="clearable" placeholder="Add your meals here..." autocomplete="off">
</form>
</div>
<div id="mag" style="display:inline-block;vertical-align:top;">
<img src="images/magCircy.png" width="33px" height="33px" onClick="changeHeight(this,event);"></img>
</div>
</div>
</div>
</section>
<section id="followfoot"></section>

In order to achieve this, I increased the width of the wrapper and moved the new div into it.

Center website in the middle of the page from top to bottom

Simple question. I want my page to be in the middle, from top to bottom. It's already centered from left to right.
Just point out what I need to add and where, thank you. If you see some error in the css, please correct that too.
#charset "utf-8";
/* CSS Document */
/* Created By CaptainMcMarcus */
/* Heavily customized by Sjokomelk */
#import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,600);
html {
height: 100%; -webkit-font-smoothing: antialiased; font-smoothing: antialiased;
}
/* Clearing some default browser settings */
* {border: 0px; margin: 0px; padding: 0px;}
a:active {outline:none;}
:focus {-moz-outline-style:none;}
.clear {clear:both;}
/* These parts can be easily changed to affect the design */
body {color: #FFF; font-family: "Open Sans", Arial, Helvetica, sans-serif;
background: url('images/bg.jpg') no-repeat; background-size: 100% auto; background-size: cover; background-attachment: fixed;}
p {text-align: justify; font-size:16px;}
p a { text-decoration: underline; color: #ea5353; text-decoration: underline;}
p a:hover { text-decoration: none; color: #333;}
/* Core Wrapper which we vertically align */
.wrapper {width: 700px; height: auto; margin: 0 auto;}
.box-wrap {
width: 100%;
height: auto;
margin: 20px 0 0 0;
-webkit-box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
}
.box-wrap h2 {width: 100%; height: auto; padding: 15px 0; text-align: center;
background: url('images/header-bg.png') repeat center top; background-color: RGBA(42,52,59,0.75);}
.box-wrap p {font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-weight: 300; font-size: 18px; padding: 15px 30px; overflow: hidden;
text-align: justify; width: 640px; height: auto; background: #ffffff; color: #717171;}
.icon-box {width: 210px; height: 210px; background: #FFF; margin: 20px 15px 20px 0; float: left; text-decoration: none;}
.icon-box a {text-decoration: none;}
.icon-box p {font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-weight: 300; font-size: 22px; text-align: center; color: #717171; text-decoration: none;}
.icon-box:hover {background: #f1f1f1;}
.wide {width: 700px; margin: 0px;}
.end2 {margin: 0px 0px 0px 0px;}
.end {margin: 20px 0px 0px 0px;}
nav {margin: 10px auto; width: 700px;}
nav ul {width: 700px; height: auto; list-style: none; float: left; padding:0;}
nav ul li a {
background: #FFFFFF;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-weight: 300;
font-size: 18px;
text-align: center;
color: #717171;
text-decoration: none;
float: left;
padding: 8px 0;
width: 105px;
margin: 0px 14px 0 0;
}
nav ul li{ position:relative; float:left;}
nav ul li a:hover {background: #f1f1f1;}
nav ul li:last-child a{
margin-right:0;
}
nav ul li ul.submenu {
position: absolute;
width: auto;
display:none;
top: 35px;
}
nav ul > li:hover > ul {
left: 0;
display: block;
}
code, pre {
padding: 0 3px 2px;
font-family: Menlo, Monaco, "Courier New", monospace;
font-size: 10px;
color: #333333;
}
code {
padding: 3px 4px;
color: #d14;
background-color: #f7f7f9;
border: 1px solid #e1e1e8;
}
pre {
display: block;
padding: 8.5px;
margin: 0px;
font-size: 11px;
line-height: 18px;
background-color: #f5f5f5;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.15);
}
pre code {
padding: 0;
color: inherit;
background-color: transparent;
border: 0;
}
.footer h3 {width: 100%; height: auto; padding: 15px 0; text-align: center;
background: url('images/header-bg.png') repeat center top; background-color: RGBA(42,52,59,0.75);}
.footer {
width: 100%;
height: auto;
margin: 20px 0 0 0;
-webkit-box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
}
html:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Forside" />
<title>Hjortefjellet</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/jquery.js"></script><!-- Link to jquery so we can center the content -->
</head>
<body>
<div class="wrapper"><!-- Opens the wrapper so we can contain and center everything -->
<img src="images/logo.png" width="702" height="87" alt="Your Logo" />
<nav>
<ul>
<li>HJEM</li>
<li>FORUM</li>
<li>DONER</li>
<li>SERVERE
<li>FAQ</li>
<li><a style="margin-right: 0 !important;" href="kontakt.html">KONTAKT</a></li>
</ul>
</nav>
<div class="clear"></div>
<div class="box-wrap">
<h2>Velkommen til Hjortefjellet</h2>
<p class="text-box"><!-- PAGE TEXT -->
Hjortefjellet er et nytt norsk gaming coummunity som har brukeroplevelsen i fokus. Vi startet opp 21. februar og har nå en Garry's Mod som kjører Trouble in Terrorist Town. Ta gjerne turen innom for å bli bedre kjent med oss.</p>
<p class="text-box">Has albucius oporteat eu, eos eu etiam intellegam. Has posse dicant feugiat ut, cu quo case convenire definitionem, possim persius meliore no est. Urbanitas vituperatoribus eos in, pro delenit reformidans eu. Nec detracto sadipscing te.</p>
</div>
<div class="footer">
<h3>© Hjortefjellet.com 2014 | Siden benytter cookies</h3>
</div>
</div><!-- This closes the wrapper -->
</body><!-- Closes off the HTML Document -->
</html>
Thank you.

Like this
$(function() {
$(window).on('resize', function() {
$('.wrapper').css('margin-top', function() {
return ($(document).height() - $(this).height()) / 2;
});
}).trigger('resize');
});
FIDDLE

CSS can help you with display :
html {display:table}
body {
display:table-cell;
vertical-align:middle;/* will center content in middle , what you look for*/
/* vertical-align:top; pushes content to top */
/* vertical-align:bottom; pushes content to bottom */
}
DEMO
If you dislike to use table display , you may want to try the flex display:
html,body {
height:100%;
width:100%;
}
body {
display:flex;
}
.wrapper {
margin:auto;/* because of flex, auto margin is applied on both axis*/
}
DEMO

Categories

Resources