I am brand new to javascript, but I have a little bit of knowledge in using HTML. The problem I am facing with my website is I created an image gallery, everything works as expected, but I cannot seem to get the content to stay inside the webpage. Here is an image of what my problem looks like: https://imgur.com/RkhF0Ka
I have already tried setting the wrapper and body height to 100%, I have tried editing the CSS file with different display settings (e.x. absolute, relative, etc), I have tried creating a wrapper inside the article itself. None of these worked. I just want to get rid of the blocks in the webpage background and have all my content on the same page. Any help would be greatly appreciated.
My HTML Code:
<!-- Title of website and page -->
<title>....:: Gallery</title>
<!-- Added variable width character encoding -->
<meta charset="utf-8">
<!-- Compatiblility for IE and Chrome -->
<!--[if IE]><meta http-equiv='X-UA-Compatible'
content='IE=edge,chrome=1'><![endif]-->
<!-- Link to external CSS style sheet -->
<link href="pps.css" rel="stylesheet">
<!--Added tablet and mobile scaling-->
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<!-- Added older browser compatibility-->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<!-- Script element to link to modernizer -->
<script src="modernizr.custom.05819.js"></script>
</head>
<body>
<!-- Added a wrapper to ensure the whole page shares the same CSS style-- >
<div id="wrapper">
<!-- Document header -->
<header>
<h1>....</h1>
<!-- Added a div class to header for image map -->
<div id="header">
<!--Added image map to HTML document-->
<map name="imgmap" id="imgmap">
<area href="https://..../" shape="rect"
coords="30,25,345,174" alt=".... Logo">
<area href="https://...../" shape="rect"
coords="500,25,845,174" alt="....">
</map>
<img src="...." usemap="#imgmap" alt="...." width="1020" height="200">
</div>
</header>
<nav> <!-- Created navigation bar and an unordered list for website
pages -->
<ul> <!-- Created button class for navigation menu-->
<li><a class="button" href="index.html">Home</a></li>
<li><a class="button" href="...s.html">...s</a></li>
<li><a class="button" href=".....html">...</a></li>
<li><a class="button" href="....html">...</a></li>
<li><a class="button" href="....html">....</a></li>
<li><a class="button" href="....html">....</a></li>
<li><a class="button" href="....html">....</a></li>
</ul>
</nav>
<!-- Added a div class for the hero image of Gallery -->
<div id="galleryhero"></div>
<!-- main body of document -->
<main>
<!-- h2 element for webpage -->
<h2>Gallery</h2>
<!-- Added paragraph to document -->
<p><span class=".....">...</span> ....</p> <br>
<h2>Images</h2>
<!-- Create image gallery layout -->
<article>
<div id="leftarrow"> <!-- create id for left arrow -->
<p><</p>
<figure id="fig2"> <!-- create id for figure 2 -->
<img src="images" alt="fig2" width="360" height="202" />
</figure>
<figure id="fig3">
<img src="images" alt="fig3" width="480" height="270" />
</figure>
<figure id="fig4">
<img src="images" alt="fig4" width="360" height="202" />
</figure>
<div id="rightarrow"> <!-- create id for right arrow -->
<p>></p>
<div id="fiveButton"> <!-- create id for fiveButton -->
<p>Show more images</p>
</div>
</article>
<script src="photos.js"></script> <!-- create script src to load the
file photos.js -->
<br> <!-- Break element -->
<!-- Added a footer to document -->
<footer>
<div id="footer">
<!-- Added an unorderedlist for footer element -->
<ul>
<li>.....</li>
<li>.....</li>
<li>.....<li>
<li>.....</li>
<li>.....</li>
<li>.....</li>
<li>.....</li>
</ul>
</div>
<!-- Added a copyright mark and fake e-mail address -->
Copyright © 2019 ..... <br>
....com
</footer>
</main>
</div>
</body>
</html>
My CSS Code:
/* Document body configurations */
body { background-color: #fffff0;
background: url("bg.jpg"); /* Configured background url to a root-
absolute url */
height: 100%;
color: #000000;
font-family: Verdana, Ariel, Helvetica; }
/* Document h1 configurations */
h1 { background-color: #FFFFFF;
color: #000000;
font-size: 0.1px;
font-family: Georgia, "Times New Roman", Palatino;
text-indent: 100%;
white-space: nowrap;
overflow: hidden; }
/* Document header configurations */
header {height: 205px;
background-color: #FFFFFF;
background: url("ppheader.gif");
margin-bottom: 0;
padding-bottom: 50px;
border-style: solid;
border-color: #000000;
color: #000000;
font-family: Georgia, "Times New Roman", Palatino; }
/* Document h2 configurations */
h2 { background-color: #fffff0;
color: #e65c00;
text-align: center;
font-family: Georgia, "Times New Roman", Palatino; }
/* Document h3 configurations */
h3 { color: #000033;
float:left; }
/* Document main body configurations */
main { padding-left: 20px;
padding-right: 20px;
display: block;
background-color: #fffff0;
margin-left: 1px;
padding-bottom: 300px;
padding-top: 1px; }
/* Document configurations for buttons */
.button { display: block;
width: 10em;
padding: 1em;
color: #FFFFFF;
background-color: #000000;
font-family: Verdana, Helvetica, Arial;
font-size: 1em;
font-weight: bold;
border: 1px solid white;
margin: 0;
text-decoration: none; }
/* Document image gallery configurations */
figure { display: inline-block;
list-style-type: none;
width: 269px;
height: 448px; }
/* Added a caption for videos */
figure figcaption {width: 269px;
padding-bottom: 10px;
margin: 0;
background-color: #f4f4f0;
text-align: center;
font-weight: bold;
font-style: italic;
font-family: Helvetica, serif; }
/* Document button configurations */
.button:link { color: #FFFFFF; }
.button:visited { color: #ffe066; }
.button:hover { color: #990000; }
/* Document navigation bar configurations */
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
nav li {
float: left;
border-right: 1px solid black;
}
nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Document header, navigation, main body, and footer display
configurations */
header, nav, main, footer { display: block; }
/* Document table configurations */
table { margin: auto;
border: 1px solid #982e01;
width: 90%;
border-collapse: collapse; }
td { text-align: center; }
th, td { padding: 5px;
border: 1px solid #982e01; }
/* Document paragraph configurations */
#text { text-align: left; }
tr:first-of-type { background-color: #000000;
color: #FFFFFF; }
tr:nth-of-type(even) { background-color: #fffecc; }
dt { color: #000033;
font-weight: bold; }
.paulpaintservice { color: #982e01;
font-size: 1.2em; }
/* Document logo configurations */
.logo { color: #FFFFFF;
font-size: 3em; }
/* Document footer configurations */
footer { font-size: .70em;
font-style: italic;
text-align: center;
padding: 10px;
margin-top: 100px;
background-color: #fffff0;
margin-left: 5px; }
#footer ul { text-align: center; list-style-type: none; }
#footer li { display: inline;
background-color: #fffff0; }
#footer a { padding: 2px 10px; }
/* Document box style configurations */
* { box-sizing: border-box;}
/* Document wrapper configurations that create a box model for the
website */
#wrapper { background-color: #000000;
margin-left: auto;
margin-right: auto;
height: 100%;
min-width: 700px;
max-width: 1024px;
box-shadow: 5px 5px 5px #1e1e1e; }
/* Document hero image configurations for the home, services, gallery,
about, and appointment pages */
#homehero { height: 300px;
background-image: url("hsunset3.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: 1px; }
#servicehero { height: 300px;
background-image: url("hsunset2.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: 1px; }
#galleryhero { height: 300px;
background-image: url("hsunset.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: 1px; }
#abouthero { height: 300px;
background-image: url("hevening.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: 1px; }
#projecthero { height: 300px;
background-image: url("hocean.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: 1px; }
#securityhero { height: 300px;
background-image: url("hfield.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: 1px; }
#appointmenthero { height: 300px;
background-image: url("hvalley.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: 1px; }
/* Configure pc.gif to float to the left on "About" page */
#pc { float: left;
margin: 0 16px 16px 0;
border: 2px ridge black;
border-radius: 5px;
background: #FFFFFF;}
/* Document "About" page paragraph configurations */
p { text-align: left;
font-size: 1.2em; }
/* Document "Gallery" configurations */
#gallery { position: relative; }
#gallery ul { width: fill; list-style-type: none; }
#gallery img { border: 1px solid black;
margin: 10px; }
#gallery a { text-decoration: none; color: #e65c00; font-style: italic;
font-family: Helvetica;
font-weight: bold; }
#gallery span { display: none; }
#gallery li { display: inline-block; }
#gallery a:hover span {display: block;
position: absolute;
left: 300px;
top: 0;
text-align: center;
text-shadow: 2px 2px 3px #000000; }
/* Document navigation configurations */
nav a { text-decoration: none; }
nav a:link { color: #FFFFFF; }
nav a:visited { color: #ffe066; }
nav a:hover { color: #FFFFFF; }
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
nav li {
float: left;
border-right: 1px solid black;
}
nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Document header, navigation, main body, and footer display
configurations */
header, nav, main, footer { display: block; }
label { float: left;
width: 8em;
display: block;
padding-right: 1em; }
/* Document contact form configurations */
input, textarea { margin-bottom: 1em;
margin-top: 1.2em;
display: block; }
/* Configure <form> */
#mySubmit { margin-left: 10em; }
#mobile { display: none; }
#desktop { display: inline; }
/* apply a natural box layout model to all elements */
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* reset rules */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a:link, a:visited {
text-decoration: none;
color: inherit;
}
a:hover {
text-decoration: none;
color: inherit;
}
a:active {
text-decoration: none;
color: inherit;
}
/* main content */
article {
background: white;
position: relative;
}
article h2 {
font-size: 1.2em;
font-weight: bold;
text-align: left;
margin: 0 0 10px 51px;
}
#leftarrow, #rightarrow {
background: #696565;
color: white;
position: absolute;
z-index: 30;
text-align: center;
height: 135px;
width: 40px;
top: 67px;
}
article div:hover {
cursor: default;
}
#leftarrow {
left: 0;
}
#rightarrow {
right: 0;
}
#fiveButton {
display: block;
width: 100%;
position: absolute;
top: 290px;
color: white;
text-align: center;
}
#fiveButton p {
width: 20%;
margin: 0 auto;
line-height: 2em;
background: #696565;
}
#leftarrow p, #rightarrow p {
position: relative;
top: 50%;
margin-top: -0.5em;
}
figure {
position: absolute;
-webkit-box-shadow: 10px 0px 5px rgb(50, 50, 50),
-10px 0px 5px rgb(50, 50, 50);
-moz-box-shadow: 10px 0px 5px rgb(50, 50, 50),
-10px 0px 5px rgb(50, 50, 50);
box-shadow: 10px 0px 5px rgb(50, 50, 50),
-10px 0px 5px rgb(50, 50, 50);
}
#fig2 {
z-index: 10;
left: 13%;
top: 34px;
}
#fig3 {
z-index: 20;
left: 50%;
margin-left: -240px;
top: 0;
}
#fig4 {
z-index: 10;
right: 13%;
top: 34px;
}
/* Document configurations for mobile devices */
#media only screen and (max-width: 1024px)
/* Document body configurations */
{
body { margin: 0;
padding: 0;
background-image: none; }
/* Document wrapper configurations */
#wrapper { min-width: 0;
margin: 0;
box-shadow: none; }
/* Document h1 configurations */
h1 { margin: 0; }
/* Document navigation configurations */
nav { float: none;
width: auto;
padding: 0.5em; }
nav li { display: inline-block; }
nav a { padding: 1em; }
/* Document main body configurations */
main { padding: 1em;
margin-left: 0;
font-size: 90%; }
/* Document footer configurations */
footer { margin: 0; }
/* Document hero image configurations */
#homehero { margin-left: 0; }
#servicehero { margin-left: 0; }
#galleryhero { margin-left: 0; }
#abouthero { margin-left: 0; }
#appointmenthero { margin-left: 0; }
#projecthero { margin-left: 0; }
#securityhero { margin-left: 0; }
/* Document logo configurations */
.logo { margin-left: 0; }
}
/* Document configurations for mobile devices */
#media only screen and (max-width: 768px) {
/* Document h1 configurations */
h1 { height: 100%;
font-size: 1.5em;
padding-left: 0.3em;
background: none; }
/* Document navigation configurations */
nav { padding: 0; }
nav a { display: block;
padding: 0.2em;
font-size: 1.3em;
border-bottom: 1px;
border-color: #330000; }
nav ul { margin : 0;
padding: 0; }
nav li { display: block;
margin: 0;
padding: 0; }
/* Document button configurations */
.button { width: auto; }
/* Document main body configurations */
main { padding-top: 0.1em;
padding-right: 0.6em;
padding-bottom: 0.1em;
padding-left: 0.4em; }
/* Document hero image configurations */
#homehero { display: none; }
#servicehero { display: none; }
#galleryhero { display: none; }
#abouthero { display: none; }
#appointmenthero { display: none; }
#projecthero { display: none; }
#securityhero { display: none; }
/* Document footer configurations */
footer { padding: 0; }
/* Document mobile, desktop, and header display options configurations */
#mobile { display: inline; }
/* Disable desktop mode while on mobile device */
#desktop { display: none; }
/* Disable header image while on mobile device */
#header { display: none; }
}
Here is my image gallery JS code:
"use strict"; // interpret document contents in JavaScript strict mode
/* global variables */
var photoOrder = [1,2,3,4,5];
var figureCount = 3;
/* Add src values to img elements based on order specified in photoOrder
array */
function populateFigures() {
var filename;
var currentFig;
if (figureCount === 3) {
//Add for loop with 3 interations and increments i by 1 after each loop
for (var i = 1; i < 4; i++) {
filename = "images/IMG_0" + photoOrder[i] + "sm.jpg";
currentFig = document.getElementsByTagName("img")[i - 1];
currentFig.src = filename;
}
//Else statement and for loop with 6 iterations
} else {
for (var i = 0; i < 5; i++) {
filename = "images/IMG_0" + photoOrder[i] + "sm.jpg";
currentFig = document.getElementsByTagName("img")[i];
currentFig.src = filename;
}
}
}
/* shift all images one figure to the left, and change values in photoOrder
array to match */
rightArrow() {
for (var i = 0; i < 5; i++) {
after each cycle
if ((photoOrder[i] + 1) === 6) {
photoOrder[i] = 1;
} else {
photoOrder[i] += 1;
}
populateFigures(); //Call populateFigures()
}
}
/* shift all images one figure to the right, and change values in photoOrder
array to match */
function leftArrow() {
for (var i = 0; i < 5; i++) {
if ((photoOrder[i] - 1) === 0) {
with index i minus 1 is equal to the value of 0
photoOrder[i] = 5;
} else {
photoOrder[i] -= 1;
}
populateFigures(); //Call populateFigures()
}
}
/* switch to 3-image layout */
function previewThree() {
var articleEl = document.getElementsByTagName("article")[0];
var numberButton = document.querySelector("#fiveButton p");
/* Remove the 1st and 5th figure elements */
articleEl.removeChild(document.getElementById("fig1"));
articleEl.removeChild(document.getElementById("fig5"));
figureCount = 3;
numberButton.innerHTML = "Show more images";
if (numberButton.addEventListener) {
numberButton.removeEventListener("click", previewThree,
false);
numberButton.addEventListener("click", previewFive, false);
} else if (numberButton.attachEvent) {
numberButton.detachEvent("onclick", previewThree);
numberButton.attachEvent("onclick", previewFive);
}
}
/* switch to 5-image layout */
function previewFive() {
var articleEl = document.getElementsByTagName("article")[0];
//Create figure and img elements for 5th image
var lastFigure = document.createElement("figure");
//Configure settings for 5th figure
lastFigure.id = "fig5";
lastFigure.style.zIndex = "5";
lastFigure.style.position = "absolute";
lastFigure.style.right = "45px";
lastFigure.style.top = "67px";
var lastImage = document.createElement("img");
lastImage.width = "240";
lastImage.height = "135";
lastFigure.appendChild(lastImage);
articleEl.appendChild(lastFigure);
//clone figure element for fifth image and edit to be first image
var firstFigure = lastFigure.cloneNode(true);
/* Change the id value for the firstFigure node from fig5 and the value
cloned from the lastFigure node to fig1, remove cloned value for the right
CSS style and specify a new value for the left CSS style */
firstFigure.id = "fig1";
firstFigure.style.right = "";
string
firstFigure.style.left = "45px";
//Use the appendChild() method to add the firstFigure node to document tree
//articleEl.appendChild(firstFigure);
articleEl.insertBefore(lastFigure,
document.getElementById("rightarrow"));
/* Insert the firstFigure node before the existing element with the id
value
fig2 */
articleEl.insertBefore(firstFigure,
document.getElementById("fig2"));
//Change from 3 images to 5 when user switches to viewing 5 photos
figureCount = 5; //Assign an image for each img element
//Add appropriate src values to two new img elements
document.getElementsByTagName("img")[0].src = "images/IMG_0" + photoOrder[0]
+ "sm.jpg";
document.getElementsByTagName("img")[4].src = "images/IMG_0" + photoOrder[4]
+ "sm.jpg";
//change button to hide extra images
var numberButton = document.querySelector("#fiveButton p"); //Assign var
numberButton value to the selector element with id #fiveButton p
numberButton.innerHTML = "Show fewer images"; //Assign the innerHTML
numberButton to the attribute show fewer images
if (numberButton.addEventListener) {
numberButton.removeEventListener("click", previewFive,
false); //Remove 5-image view
numberButton.addEventListener("click", previewThree,
false);
} else if (numberButton.attachEvent) { /* Add else-if statement to switch
between a preview of 5 or 3 images */
numberButton.detachEvent("onclick", previewFive);
numberButton.attachEvent("onclick", previewThree);
}
}
/* create event listeners for left arrow, right arrow, and
center figure element
*/
function createEventListeners() {
var leftarrow = document.getElementById("leftarrow"); //create var named
leftarrow and assign value to the element with the id value leftarrow
//if/else statement to create the event listener for the left navigation
arrow
if (leftarrow.addEventListener) {
leftarrow.addEventListener("click", leftArrow, false);
} else if (leftarrow.attachEvent) {
leftarrow.attachEvent("onclick", leftArrow);
}
/* create a variable and assign an event listener for the right navigation
arrow */
var rightarrow = document.getElementById("rightarrow"); //create var named
rightarrow and assign value to the element with the id value rightarrow
if (rightarrow.addEventListener) {
rightarrow.addEventListener("click", rightArrow, false);
} else if (rightarrow.attachEvent) {
rightarrow.attachEvent("onclick", rightArrow);
}
//Add event listener for the third img element in the document that has index
value 2
var mainFig = document.getElementsByTagName("img")[1]; //Create var variable
mainFig and assign value to the second image element with the index value of
1
//Add if-else statement to create the event listener to call zoomFig() when
user clicks the center image
if (mainFig.addEventListener) { //Add if statement to not zoom into image
if it is not clicked
mainFig.addEventListener("click", zoomFig, false);
} else if (mainFig.attachEvent) { //Add else-if statement to zoom into image
when clicked
mainFig.attachEvent("onclick", zoomFig);
}
var showAllButton = document.querySelector("#fiveButton p"); //Assign var
showAllButton value to the selector element with id #fiveButton p
if (showAllButton.addEventListener) {
showAllButton.addEventListener("click", previewFive, false);
} else if (showAllButton.attachEvent) {
showAllButton.attachEvent("onclick", previewFive);
}
}
/* open center figure in separate window */
function zoomFig() {
var propertyWidth = 960; //Assign var propertyWidth value to 960px
var propertyHeight = 600; //Assign var propertyHeight value to 600px
var winLeft = ((screen.width - propertyWidth) / 2); // Create var named
winLeft and start with the width of the existing browser window minus the
width of the new browser window, divided by two
var winTop = ((screen.height - propertyHeight) / 2); // Create var named
winTop and start with the height of the existing browser window minus the
width of the new browser window, divided by two
var winOptions = "width=960,height=600"; //Create var named winOptions and
assign to the width of 960px and height of 600px
winOptions += ",left=" + winLeft; //Create an option string for the
window.open() method that incorporates the calculated values for the left of
window
winOptions += ",top=" + winTop; //Create an option string for the
window.open() method that incorporates the calculated values for the top of
window
var zoomWindow = window.open("zoom.htm", "zoomwin", "width=960,height=600");
//Create variable named zoomWindow and assign to the window created by
window.open to display contents of zoom html file
zoomWindow.focus(); //Make the external photo gallery window the active
window
}
/* create event listeners and populate image elements */
function setUpPage() { //Call function
createEventListeners(); //Call function
populateFigures(); //Call function
}
/* run setUpPage() function when page finishes loading */
if (window.addEventListener) {
window.addEventListener("load", setUpPage, false);
} else if (window.attachEvent) {
window.attachEvent("onload", setUpPage);
}
Another bizarre thing that happened was that the logo/header image loads at first, then it immediately switches to one of the image gallery photos. I could not figure out how to fix that...
Working on a webpage that has one "div" which is aligned as center. I went through a bunch of methods to try and get it working the way that I want it to, and finally found the closest one. I have a working demo over here
FIDDLE
My only problem with it right now is that even when the content doesn't take up the whole content of the page, it still adds a scroll bar. I'm wondering if there's anyway to remove that? I believe it has to do with the jQuery method of centering the "div".
Javascript:
$(function() {
jQuery.fn.center = function() {
this.css("position", "fixed");
this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
return this;
}
$('#myDiv').center();
$(window).resize(function() {
$('#myDiv').center();
});
});
CSS
* {
margin: 0;
padding: 10px;
}
html,
body {
height: 100%;
}
body {
font-family: 'Josefin Sans';
text-align: center;
}
p {
font-size: 18px;
margin: 0 0 0.5em;
}
.centered-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100%;
}
.centered {
background: #ccc;
border-radius: 8px;
margin: 0 auto;
padding: 20px;
width: 85%;
}
body{
overflow: hidden;
}
Vertical only:
body{
overflow-y: hidden;
}
Horizontal only:
body{
overflow-x: hidden;
}
Possible duplicate: Hiding the scrollbar on an HTML page
Setting overflow to hidden may solve the scrollbar not appear but in that case it may not be fully vertically centered.
Instead you can not set padding on all elements, like you do with
* {
margin: 0;
padding: 10px;
}
It makes your body element and .content-wrapper to have extra padding of 10px that adds to its height and makes the scrollbar appear, if you set this padding to 0 the scrollbar disapears, check on your fiddle.
So for your example you could set your css like
body, html {
margin: 0;
padding: 0;
}
p, h1, h2, h3, h4, span, br, hr {
margin: 0px;
padding: 10px;
}
html,
body {
height: 100%;
margin: 0;
}
body {
font-family: 'Josefin Sans';
text-align: center;
}
p {
font-size: 18px;
margin: 0 0 0.5em;
}
.centered-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100%;
}
.centered {
background: #ccc;
border-radius: 8px;
margin: 0 auto;
padding: 20px;
width: 85%;
}
/*
Button
*/
.btn {
-webkit-border-radius: 8;
-moz-border-radius: 8;
border-radius: 8px;
font-family: Arial;
color: black;
font-size: 18px;
background: #ccc;
padding: 10px 20px 10px 20px;
text-decoration: none;
outline: none;
}
.btn:hover {
background: #bbb;
text-decoration: none;
}
In that case scrollbar won't appear.
Instead of setting margins and paddings on all elements with * use something like css style reset. Google for it. Then apply padding only on those elements you really need.
html,
body {
position: fixed;
top:00;
left:0;
bottom:0;
right:0;
}
Here is your updated demo
set overflow to hidden; this may solve it.
I'm learning web development with responsive design(still a noob) so please go easy! I will try to be as thorough as possible but please let me know if you need more information!
So I'm trying to design a page which has jquery hover effects on images. You would think I'm having trouble in the JS but my problem is much simpler which makes it frustrating like hell. I want my images to align in the center while they're aligned to the extreme left. the image boxes are li's and I've tried to add them to a div and align the div to the center.
Please note that I also need it to be responsive so can't simply add a margin or padding.
Following is my html body:
<body>
<div class="body">
<div> <img src="images/logo.png" class="image"></div>
<div class="imgs">
<ul id="da-thumbs" class="da-thumbs">
<li>
<a href="http://dribbble.com/shots/502538-Natalie-Justin-Cleaning">
<img src="images/7.jpg" />
<div><span>Natalie & Justin Cleaning by Justin Younger</span></div>
</a>
</li>
<li>
<a href="http://dribbble.com/shots/501695-Cornwall-Map">
<img src="images/9.jpg" />
<div><span>Cornwall Map by Katharina Maria Zimmermann</span></div>
</a>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
$(function() {
$(' #da-thumbs > li ').each( function() { $(this).hoverdir({
hoverDelay : 75
}); } );
});
</script>
</body>
Here is my CSS:
.body {
width: 100%;
height: 1000px;
animation-name: colorChange;
animation-duration: 10s;
animation-iteration-count: infinite;
text-align: center;
}
#keyframes colorChange {
0% {
background: #4BB4BF;
}
20% {
background: #306F7A;
}
40% {
background: #207DFF;
}
60% {
background: #1B98E0;
}
80% {
background: #7EA0E0;
}
100% {
background: #4BB4BF;
}
}
.button {
padding: 10px;
margin-top: 40px;
font-size: 20px;
}
.da-thumbs {
list-style: none;
width: 100%;
height: 100%;
position: relative;
margin: 20px auto;
padding: 0;
}
.da-thumbs li {
float: left;
margin: 5px;
background: #fff;
padding: 8px;
position: relative;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.da-thumbs li a,
.da-thumbs li a img {
display: block;
position: relative;
}
.da-thumbs li a {
overflow: hidden;
}
.da-thumbs li a div {
position: absolute;
background: #333;
background: rgba(75,75,75,0.7);
width: 100%;
height: 100%;
}
.da-thumbs li a div span {
display: block;
padding: 10px 0;
margin: 40px 20px 20px 20px;
text-transform: uppercase;
font-weight: normal;
color: rgba(255,255,255,0.9);
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
border-bottom: 1px solid rgba(255,255,255,0.5);
box-shadow: 0 1px 0 rgba(0,0,0,0.1), 0 -10px 0 rgba(255,255,255,0.3);
}
<!-- Demo content here -->
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* General Demo Style */
body{
font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
font-weight: 400;
font-size: 15px;
}
a{
color: #555;
text-decoration: none;
}
.container{
width: 100%;
position: relative;
min-height: 750px;
}
.clr{
clear: both;
padding: 0;
height: 0;
margin: 0;
}
.image {
max-width: 100%;
max-height: 100%;
background-size: cover;
}
.imgs {margin: 0 auto;
align: center;
}
Please give your thoughts on how I can align these elements?
Fiddle Case:
https://jsfiddle.net/eqyfm41r/3/
Your edited code:
.da-thumbs li {
display:inline-block;
width:46%;
margin: 5px;
padding: 8px;
position: relative;
}
.da-thumbs li img{
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
JSFiddle here: https://jsfiddle.net/1zq95tzp/
You were floating the li's for one thing, also you want to add the box shadows to the images, not the li. The reason for this is that the li is going to be larger than the image, so the box shadow will appear far away from the edges of the actual image. As the screen shrinks, the images will stack. You may need to eventually give the images this styling:
max-width:100%;
so that they don't go off the page at phone width (I didn't look at the size of the images). Hope this helps you.
Can't you do:
margin-left: auto; margin-right: auto;
? This would be responsive, it's not a fixed margin.
I have my html layout in 2 different divs that I want to align evenly.
Before
After (desired)
How can I achieve it? My html is
.main {
overflow: hidden;
display: block;
}
.column_left {
float: left;
}
#mapcontainer {
margin: 16px 0 0 32px;
position: relative;
padding-bottom: 26px;
}
.box {
display: block;
overflow: hidden;
background: #ffc801;
padding: 10px;
padding-top: 20px;
margin: 8px 0px 8px;
font-family: 'avantgardebook', sans-serif;
font-weight: 300;
}
.box h2 {
font-size: 16px;
margin-bottom: 8px;
margin-top: 0;
}
.box ul {
padding-left: 16px;
margin: 0;
}
.box li {
margin-bottom: 16px;
}
#regions {
float: left;
z-index:5;
display: block;
overflow: hidden;
width: 400px;
font-size: 19px;
margin-left: 4px;
font-weight: 500; /* medium */
}
#regions .regions_one, #regions .regions_two {
font-family: 'avantgardemd', sans-serif;
float: left;
width: 200px;
}
#regions h2 {
display: block;
clear: both;
padding: 12px 0 4px;
margin: 0;
font-size: 14px;
}
#regions ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#regions ul li {
display: block;
clear: both;
overflow: hidden;
margin-bottom: 0;
}
#regions a {
line-height: 20px;
font-size: 15px;
display: block;
float: left;
font-weight: 500; /* medium */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="column_left">
<div class="box">
<ul>
<li>Buy and sell cars, check our <a href="/india/real_estate">real
estate</a>
section, find jobs, and much more.
</li>
<li>Check our <strong>{{count}} ads online</strong> and find what you are looking for
in
your region or in all India.
</li>
</ul>
</div>
<div id="regions">
</div>
<div id="mapcontainer">
<div id='visualization'></div>
<script type="text/javascript">$(document).ready(function () {
$("#regions a").add("area").mouseover(function () {
var id = this.id.substring(this.id.indexOf("_") + 1);
var regionmap = $("#hoverregion_" + id);
if (regionmap && regionmap.length > 0) {
$("#area_highlight").removeClass().addClass("sprite_index_in_in_hover_region" + id);
$("#region_" + id).css("text-decoration", "underline");
}
});
$("#regions a").add("area").mouseout(function () {
var id = this.id.substring(this.id.indexOf("_") + 1);
var regionmap = $("#hoverregion_" + id);
if (regionmap && regionmap.length > 0) {
$("#area_highlight").removeClass();
$("#region_" + id).css("text-decoration", "none");
}
});
});</script>
</div>
If it helps I can make a fiddle with the problem and create a minimal example problem that we can align. It seems like the framework won't let us align it, or do you see where I can change in my fiddle so that the divs are more exactly side by side?
If you don't have to support older browsers have a look at flex. Flexboxes are explained here: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
It seems tag div.class="main" and div.class="column_left" haven't closed.