I have a div with text that is positioned over a photo. I wrote some JS that ensures that if the div is greater than 500px in height, the position goes back to inherit.
It works as when I look at the page on my phone or Ipad, the DIV is well positioned.
However, when I reduce the browser on my computer, the Javascript only works if I refresh the page. I would like it to be responsive as I reduce my screen size. I realize that my javascript isn't taking account the movement of the screensize changing.
I'm fairly new to Javscript so I'm a bit stuck.
parentHeight = document.getElementById('boxinside').offsetHeight;
if (parentHeight > 500){
console.log(parentHeight)
document.querySelector('#boxinside').style.position = "inherit";
} else {
document.querySelector('#boxinside').style.position = "absolute";
}
body {
h1, h2, h3, h4, h5, h6, p {
font-family: 'Lato';
}
p {
font-weight: 300;
}
background-color: white;
position: relative;
}
.parallax-window {
min-height: 300px;
background: transparent;
position: relative;
object-fit: 50% 50%;
img {
width: 100%;
object-fit: cover;
height: 500px;
}
}
.text {
color: white;
text-transform: uppercase;
p {
font-size: 25px;
font-weight: 200;
}
h3 {
font-family:'Lato';
font-weight: 500;
letter-spacing: 2px;
font-size: 30px;
#include from-medium {
font-size: 40px;
}
}
font-family: 'Lato';
width: 100%;
position: absolute;
top: 30%;
padding: 10px;
display: flex;
margin-left: 0px;
align-items: flex-start;
justify-content: center;
flex-direction: column;
#include from-medium-low {
margin-left: 100px;
}
}
.button {
margin-top: 50px;
padding: 10px 20px;
background-color: white;
a {
color: #5B1B14;
letter-spacing: 1px;
text-decoration: none;
}
&:hover {
color: white;
background-color:#5B1B14;
}
}
.photo-left {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
#include from-medium-low {
flex-direction: row;
align-items: inherit;
justify-content: flex-start;
}
}
.container-macaron {
margin: 50px 20px;
position: relative;
}
.header-text {
h1 {
margin-bottom: 0px;
}
h2 {
color: #5B1B14;
font-weight: 300;
}
}
#boxinside {
padding: 10px;
position: absolute;
background-color: white;
left: 420px;
p {
margin-bottom: 0px;
}
}
.photo {
// img {
// position: relative;
// }
padding: 10px 20px;
}
<div class="home">
<div class="parallax-window">
<img src="https://images.unsplash.com/photo-1590080876351-941da357bde6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2960&q=80" alt="Italian Trulli">
<div class="text">
<p>ABOUT US</p>
<h3>Good quality baking<br> for a reasonable price</h3>
</div>
</div>
</div>
<div class="container-macaron">
<div class="photo-left">
<div class="photo">
<img src="https://images.unsplash.com/photo-1590080876351-941da357bde6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2960&q=80" alt="Italian Trulli" height='550px'>
</div>
<div class="text-box">
<div class="header-text">
<h1>Benjamin Pallais</h1>
<h2 style='color:#5B1B14;'>Founder of Monsieur Macaron</h2>
</div>
<div id='boxinside'>
<div class='boxtext'>
<p class='question'><b>Who are you?</b></p>
<p>Bonjour, I am Benjamin. Creator of Monsieur Macaron, foodie, and ex rugby player.</p>
<br>
<p class='question'><b>Why did you chose New Zealand?</b></p>
<p>Probably, for the love of rugby and the attractions around the myth of the All Blacks. I first visited New Zealand in 2007, when I was 21 years old. Since that trip, I have been motivated to become a Kiwi.</p>
<br>
<p class='question'><b>Why did you become a Pastry chef?</b></p>
<p>Probably the best job to express myself creatively with my patisserie, to allow me to travel around the world, and to provide happiness to my customers.</p>
<br>
<p class='question'><b>Why have you created Monsieur Macaron Ltd? Why did you choose macarons?</b></p>
<p>In my opinion, Macarons are the most glamorous biscuit in the world. As a Parisien, the macaron is the most trendy patisserie and is well known to Kiwi people. The creation of the company gave me the opportunity to fully express myself, manage my own relationships with customers/partners, and have the honour of helping the NZ Food culture.</p>
<br>
<p class='question'><b>What's the best part of your job?</b></p>
<p>Having the pleasure to sell my pasteries and meet my customers at the Farmers Market in Hastings every Sunday.</p>
</div>
</div>
</div>
</div>
</div>
you can use the following code to detect window resizing:
function changePosition() {
let parentHeight = document.getElementById('boxinside').offsetHeight;
if (parentHeight > 500){
console.log(parentHeight)
document.querySelector('#boxinside').style.position = "inherit";
} else {
document.querySelector('#boxinside').style.position = "absolute";
}
}
document.addEventListener("DOMContentLoaded", function() {
changePosition();
});
window.addEventListener("resize", function(){
changePosition();
});
Related
I have tried looking around for this but can't seem to find a question to match my current problem. I am trying to build a mock ecommerce website to practice using React. I have a header component. I want this component to be 100% of the screen width, so that the elements inside this component shrink whenever the page shrinks. I have some global css that sets the height and width of the html and body to 100%:
html, body{
background-color: rgb(167, 72, 72);
height: 100%;
min-width: 100%;
}
I am currently facing two problems, neither of which I understand very well the causes of. When I set my header component (the outermost component) to have a width of 100%, the page shrinks correctly. But when I open up developer tools to check the responsiveness, something goes wrong so that the right side of my header is shrinking faster than the page header_shrink
I am able to fix this by setting the width of my header to "fit-content" instead of "100%". Here is what the header looks like when I shrink the page using developer tools.header_fixed But when I do it this way, the components inside of my header don't shrink correctly. For example, my search bar is supposed to decrease in width as I shrink the page, but when I use "fit-content", it just stays set to whatever size it is. search-bar-constant. When I have the width set to 100% instead of fit content, it looks the way it's supposed to search-bar-fixed.
Sorry for the long explanation, but this is the bulk of my problem. "Width: 100%" allows the items in my header component to shrink correctly, but not the component itself. And "width: fit-content" allows the outer header component to shrink correctly, but not the items inside of it.
Here is the JSX I have for reference:
import React from 'react'
import './Header.css'
import { BiSearchAlt2 as SearchIcon} from "react-icons/bi";
import {RiArrowDropDownLine as DropDownIcon} from "react-icons/ri";
import { CgProfile as Profile } from "react-icons/cg";
import { CgShoppingCart as Cart } from "react-icons/cg";
const Header = () => {
const texts = [
'ORDERS OF $5K SHIP FREE',
'FREE SHIPPING ON SELECT ITEMS: SHOP NOW',
'BUY A RIG AND YOUR ENTIRE ORDER SHIPS FREE'
];
let currentTextIndex = 0;
setInterval(() => {
const shippingDealsText = document.querySelector('.shipping-deals-text');
shippingDealsText.classList.add('out');
setTimeout(() => {
shippingDealsText.textContent = texts[currentTextIndex];
shippingDealsText.classList.remove('out');
currentTextIndex = (currentTextIndex + 1) % texts.length;
}, 1000);
}, 5000);
return (
<div className="header">
<div className="header-top">
<div className="top-logo">
<h5 className='small-logo'>LEVIATHAN</h5>
</div>
<div className="space"></div>
<div className="link-container">
<div className="link-wrap">
Gift Cards
</div>
<div className="link-wrap">
Contact Us
</div>
<div className="link-wrap">
Order Status
</div>
<div className="link-wrap">
Live Chat
</div>
</div>
</div>
<div className="header-middle">
<div className="middle-logo">
<h5 className='big-logo'>LEVIATHAN</h5>
</div>
<div className="search-container">
<div className="search-wrapper">
<input
type="text"
id="search-bar"
placeholder="Search"
className='search'
/>
<div className="search-icon-wrapper">
<SearchIcon className='search-icon'/>
</div>
</div>
</div>
<div className="shipping-deals-container">
<div className="button-container">
<div className="shipping-deals-button">
<span className="deals-text">DAILY SHIPPING DEALS </span>
</div>
</div>
<div className="text-container">
<div className="text-slideshow">
<p className="shipping-deals-text">BUY A RIG AND YOUR ENTIRE ORDER SHIPS FREE</p>
</div>
</div>
</div>
<div className="icons-right">
<Profile className='login-pic'/>
<span>Log In</span>
<Cart className='shopping-cart'/>
</div>
</div>
<div className="header-bottom">
<div className="nav-bar">
<ul className='navigation'>
<li className='menu-items'>
<a href="/" className='button drop-down red'>Shop <DropDownIcon className='drop-icon'/></a>
<a href="/" className='button'>Equipment for Crossfit</a>
<a href="/" className='button'>New Gear</a>
<a href="/" className='button'>Barbells</a>
<a href="/" className='button'>Plates</a>
<a href="/" className='button'>Rigs and Racks</a>
<a href="/" className='button'>Shoes</a>
<a href="/" className='button'>Apparel</a>
<a href="/" className='button'>3 Ships Free</a>
<a href="/" className='button'>Zeus</a>
<a href="/" className='button drop-down'>The Index</a>
</li>
</ul>
</div>
</div>
</div>
)
}
export default Header
Here is the styling I am currently applying:
.header {
min-width: 100%;
margin: 0;
padding: 0;
}
.header-top {
background-color: white;
display: flex;
height: 2.5rem;
width: 100%;
}
.top-logo {
position: relative;
margin-left: 3rem;
}
.space {
flex-grow: 1;
}
.small-logo {
padding-top: 0.5em;
position: relative;
font-size: larger;
color: rgb(133, 133, 133)
}
.link-container {
display: flex;
/*border: 1px solid red;*/
margin-right: 3rem;
}
.link-wrap {
/*border: 1px solid green;*/
font-size: 14px;
padding-left: 1rem;
padding-top: 0.75rem;
}
.link-wrap a {
text-decoration: none;
color:#666666;
cursor: pointer;
}
/* Large section of header, black background */
.header-middle {
background-color: black;
height: 7rem;
display: flex;
}
/* Big LEVIATHAN text */
.middle-logo {
/*border: 1px solid red;*/
position: relative;
margin-left: 3rem;
display: flex;
justify-content: center;
align-items: center;
cursor: co;
}
.big-logo {
font-size: 48px;
/*padding-top: 2rem;*/
position: relative;
color: white;
}
.big-logo:hover {
color: rgb(210, 0, 0);
}
.search-container {
position: relative;
width: 40%;
display: flex;
flex-basis: 60%;
margin-left: 3rem;
align-items: center;
justify-content: center;
}
/*This is what has the appearance of the search bar*/
.search-wrapper {
min-width:100%;
height: 35%;
position: relative;
background-color: white;
display: flex;
flex-basis: 50%;
}
.search-icon-wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 3rem;
}
.search-icon {
color: black;
font-size: 20px;
}
/*This is the actual search bar tucked inside*/
.search {
width: 100%;
height: 100%;
border: none;
outline: none;
margin-left: 1em;
font-size: 17px;
}
.search::placeholder {
color:rgb(94, 94, 94);
}
/* This holds onto both our daily shipping deals button */
/* and our text slideshow */
.shipping-deals-container{
width: 18em;
margin-left: 2.5em;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
/*border: 2px solid rgb(136, 77, 255);*/
}
.shipping-deals-button {
width: 65%;
height: 44%;
background-color: rgb(234, 2, 2);
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin-top: 1.5em;
}
.button-container {
width: 100%;
height: 50%;
/*border: 2px solid magenta;*/
}
.deals-text {
color: white;
font-size: 12px;
position: relative;
text-align: center;
align-items: stretch;
width: 100%;
}
.text-container {
/*border: 2px solid rgb(20, 182, 11);*/
width: 100%;
height: 50%;
}
.text-slideshow {
color: white;
width: 100%;
height: 50%;
font-size: 12px;
}
.shipping-deals-text {
transition: opacity 1s;
opacity: 1;
font-size: 13px;
}
.out {
opacity: 0;
transition: opacity 1s;
}
.shipping-deals-text-red{
color: red;
}
.navigation {
display: flex;
align-items:flex-start;
height: 3rem;
}
.menu-items {
height: 100%;
margin-left: 1.5rem;
padding-right: 1.5rem;
display: flex;
align-items: flex-start;
flex: 1;
}
ul {
list-style-type: none;
background-color: #333333;
}
.button {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
text-decoration: none;
color: white;
text-transform: uppercase;
white-space: nowrap;
padding: 1em;
font-weight: bold;
}
.button:hover {
color:rgb(210, 0, 0)
}
.red {
background-color: rgb(210, 0, 0);
}
.red:hover {
color: white;
}
.drop-icon {
font-size: 25px;
}
.icons-right {
height: 50%;
margin-top: 2em;
min-width: 10%;
display: flex;
justify-content: center;
align-items: center;
margin-right: 1rem;
}
.login-pic {
color: white;
font-size: 20px;
}
.shopping-cart {
color: white;
font-size: 20px;
margin-left: 1rem;
}
.icons-right span {
color: white;
margin-left: 0.5em;
}
#media (max-width: 1025px) {
.shipping-deals-container {
display: none;
}
.header-top {
display: none;
}
.header-middle {
height: 50%;
}
.search-wrapper {
border: 2px solid white;
height: 2rem;
}
.icons-right {
margin-bottom: 2rem;
}
}
I have tried altering the width of my body, and html, but nothing seems to be giving me the solution I am looking for
With width: 100% on .header it shrinks the header the way you want it. That seems to be correct actually.
The element that prevents shrinking is <li class="menu-items"></li> because of display: flex;. Flexbox is by default not wrapping (flex-wrap: nowrap;).
Add flex-wrap. wrap; and you'll see everything will shrink with fit-content or width: 100%;
Hope this helps.
On another note: You shouldn't use <li> (List-Element) as the list. Thats what <ul> (Unsorted list) is for.
It should look more like this ->
<ul>
<li>
Shop
</li>
<li>
Equipment for Crossfit
</li>
<li>
New Gear
</li>
<!-- ... -->
</ul>
There is a circular progress bar. This bar prints the number of days remaining, taking the day difference. But I'm having trouble adjusting the position of this bar.
I am trying to do;
What I've been able to do so far;
html
<div className={'circularremainingtime__container only-desktop' + circularColor}>
<div className="remainingday">
<p>{endDate.getDate()}</p>
<p>{endDateMonth}</p>
</div>
<AS.CircularProgress
className="circularprogress"
style={style}
variant="determinate"
value={persentage}
thickness={3}
/>
<p>{circularText}</p>
</div>
css
.circularremainingtime__container.only-desktop {
width: 110px;
display: flex;
flex-direction: column;
align-items: center;
padding-left: 1.5em;
& > p {
margin: 0;
font-weight: 600;
margin-top: 0.5em;
font-size: 1.2rem;
font-weight: 500;
color: var(--palette-red-300);
}
& > div {
padding: var(--padding);
}
.circularprogress {
color: var(--palette-red-300);
}
.remainingday {
//position: absolute;
color: #004dcf !important;
padding-top: 5px;
p{
margin: 0;
text-align: center;
color: #004dcf !important;
font-size: 8px;
font-weight: bolder;
}
p:first-child{
font-size: 13px;
text-align: center;
}
}
}
When I set the remainingday class to absolute, I can get the image I want. But when I swipe the screen, the dates don't change at all. That's why I commented that line.
You need to use position: absolute; top:0px; for . circularprogress in your style because what you are doing is rendering the element next to the div, that's why it is showing below that.
Cheers.
First off let me say how much of a big help this website has been with my little project. Anyway on to my question.
So right now I'm creating a personal website for myself and I want to add some padding to something, but when I add padding, it ends up creating space between some stuff and making it completely white without using the background image or color. This is what I mean.
When I open up the "About" tab (I added padding to that one but not the one above), do you see how there's a lot of white space? How can I have that colored in grey and use the background image aswell?
And when I close the tab, there is a big white gap, which is (I'm pretty sure) the padding not closing
I only added padding to the "About" tab and as you can see, it is messed up compared to the others (This is the jsfiddle)
.small2{
font-family: 'Ubuntu', serif;
font-size: 30px;
padding: 15px;
margin: auto;
}
This is the css code for the class holding the info.
Take the padding off .two, and if you want the white border around the content in .four, you can use a margin:
$(document).ready(function(event) {
$('.one').click(function() {
$('.two').slideToggle();
})
$('.three').click(function() {
$('.four').slideToggle();
})
$('.five').click(function() {
$('.six').slideToggle();
})
$('.seven').click(function() {
$('.eight').slideToggle();
})
setTimeout(function() {
$('.two').slideToggle();
}, 500);
});
body {
margin: 0;
}
.container {
overflow: hidden;
}
.one {
position: relative;
top: 0;
background-color: #605F5F;
z-index: 1;
cursor: pointer;
text-align: center;
background-image: url("noise.png");
color: white;
}
.two {
background-color: #333333;
display: none;
text-align: center;
color: white;
background-image: url("noise.png");
}
.three {
position: relative;
top: 0;
background-color: #605F5F;
z-index: 1;
cursor: pointer;
text-align: center;
background-image: url("noise.png");
color: white;
}
.four {
background-color: #333333;
display: none;
text-align: center;
background-image: url("noise.png");
color: white;
margin: 15px;
}
.five {
position: relative;
top: 0;
background-color: #605F5F;
z-index: 1;
cursor: pointer;
text-align: center;
background-image: url("noise.png");
color: white;
}
.six {
background-color: #333333;
display: none;
text-align: center;
background-image: url("noise.png");
color: white;
}
.seven {
position: relative;
top: 0;
background-color: #605F5F;
z-index: 1;
cursor: pointer;
text-align: center;
background-image: url("noise.png");
color: white;
}
.eight {
background-color: #333333;
display: none;
text-align: center;
background-image: url("noise.png");
color: white;
}
.botbar {
background-color: #2b2a2a;
text-align: center;
color: white;
background-image: url("noise.png");
}
.big1 {
font-family: 'Megrim', serif;
font-size: 210px;
}
.small1 {
font-family: 'Ubuntu', serif;
font-size: 80px;
}
.small2 {
font-family: 'Ubuntu', serif;
font-size: 30px;
background-clip: initial;
margin: auto;
}
.botinfo {
font-family: 'Ubuntu', serif;
font-size: 25px;
}
<div class="container">
<div class="big1">
<div class="one">Main</div>
</div>
<div class="small1">
<div class="two">Welcome to my page!
<br>Click around
<br>Learn a thing or two about me</div>
</div>
<div class="big1">
<div class="three">About</div>
</div>
<div class="small2">
<div class="four">My name is Bob and I currently attend University of Bob.
<br>If a passionate student that is always trying to learn new and exciting things and broaden their knowledge in the field of programming is someone you need, then I'm your guy.
<br>I have worked on projects ranging from this website that was created by yours truly, a game of solitaire with my own personal twist, and much more.
<br>All my projects can be found in the tab below!</div>
</div>
<div class="big1">
<div class="five">Projects</div>
</div>
<div class="small1">
<div class="six">My projects can be found here</div>
</div>
<div class="big1">
<div class="seven">Contact</div>
</div>
<div class="small1">
<div class="eight">You can contact me here</div>
</div>
<div class="botinfo">
<div class="botbar">Made by Bob | Copyright 2016</div>
</div>
</div>
Try moving the padding to the .four class, I think it will give you your desired result.
You could do some restructuring of the code to simplify it like
$(document).ready(function(event) {
$('.header').click(function() {
$(this).next('.content').slideToggle();
})
setTimeout(function() {
$('.content').first().slideToggle();
}, 500);
});
body {
margin: 0;
}
.container {
overflow: hidden;
}
.header {
position: relative;
top: 0;
background-color: #605F5F;
z-index: 1;
cursor: pointer;
text-align: center;
background-image: url("noise.png");
color: white;
}
.content {
background-color: #333333;
display: none;
text-align: center;
color: white;
background-image: url("noise.png");
}
.botbar {
background-color: #2b2a2a;
text-align: center;
color: white;
background-image: url("noise.png");
}
.big1 {
font-family: 'Megrim', serif;
font-size: 210px;
}
.small1 {
font-family: 'Ubuntu', serif;
font-size: 80px;
}
.small2 {
font-family: 'Ubuntu', serif;
font-size: 30px;
background-clip: initial;
padding: 15px;
margin: auto;
}
.botinfo {
font-family: 'Ubuntu', serif;
font-size: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="big1 header">
Main
</div>
<div class="small1 content">
Welcome to my page!
<br>Click around
<br>Learn a thing or two about me
</div>
<div class="big1 header">
About
</div>
<div class="small2 content">
My name is Bob and I currently attend University of Bob.
<br>If a passionate student that is always trying to learn new and exciting things and broaden their knowledge in the field of programming is someone you need, then I'm your guy.
<br>I have worked on projects ranging from this website that was created by yours truly, a game of solitaire with my own personal twist, and much more.
<br>All my projects can be found in the tab below!
</div>
<div class="big1 header">
Projects
</div>
<div class="small1 content">
My projects can be found here
</div>
<div class="big1 header">
Contact
</div>
<div class="small1 content">
You can contact me here
</div>
<div class="botinfo">
<div class="botbar">Made by Bob | Copyright 2016</div>
</div>
</div>
Use display : none; for .small2 in css. Even though it is hidden it is taking space on UI. (if you need padding when visible)
.small2{
font-family: 'Ubuntu', serif;
font-size: 30px;
background-clip: initial;
padding: 15px;
margin: auto;
display : none;
}
I have 3 images side-by-side, I would like to know how to get some spacing between them. I have tried everything, margins, padding and I don't know what to do.
.content1 {
background-image: url("http://www.thefreeloves.com/prototype/test/wp-content/uploads/2014/02/album-title.jpg");
color: white;
text-align: center;
width: 100%;
height: 20%;
display: block;
float: left;
}
.text1 {
font-family: "Goudy Old Style", Optima, sans-serif;
font-size: 40px;
margin-bottom: 0;
margin-top: 45px;
}
.text2 {
font-size: 30px;
color: #6CB9D9;
}
.album1 {
float: left;
width: 31%;
text-align: center;
}
.album2 {
display: inline-block;
width: 31%;
text-align: center;
}
.album3 {
float: right;
width: 31%;
text-align: center;
}
.album {
width: 100%;
overflow: hidden;
background-color: #191919;
}
<div class="content1">
<h3 class="text1">Our Latest Album<span class="slash"> / </span><span class="text2">Fresh from the house of Music Club Band</span></h3>
</div>
<div class="album">
<div class="album1">
<img src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA9133-650x385.jpg" alt="album1">
</div>
<div class="album2">
<img src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA9099-650x385.jpg" alt="album2">
</div>
<div class="album3">
<img src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA0373-650x385.jpg" alt="album3" class="album4">
</div>
</div>
You set your wrapping div's to 31% but you didn't change the size of your images so they were flowing outside the wrappers. If you set Overflow: hidden; on your album1, album2 and album3 div's you'll see that your margins are working on the divs but you'll only see part of your images. if you set the imgs themselves to a width of 100% as below you'll see it works.
.content1 {
background-image: url("http://www.thefreeloves.com/prototype/test/wp-content/uploads/2014/02/album-title.jpg");
color: white;
text-align: center;
width: 100%;
height: 20%;
display: block;
float: left;
}
.text1 {
font-family: "Goudy Old Style", Optima, sans-serif;
font-size: 40px;
margin-bottom: 0;
margin-top: 45px;
}
.text2 {
font-size: 30px;
color: #6CB9D9;
}
.album1 {
float: left;
width: 31%;
text-align: center;
margin: 1%;
}
.album2 {
display: inline-block;
width: 31%;
text-align: center;
margin: 1%;
}
.album3 {
float: right;
width: 31%;
text-align: center;
margin: 1%;
}
.album {
width: 100%;
overflow: hidden;
background-color: #191919;
}
.album img { width: 100%; }
<div class="content1">
<h3 class="text1">Our Latest Album<span class="slash"> / </span><span class="text2">Fresh from the house of Music Club Band</span></h3>
</div>
<div class="album">
<div class="album1">
<img src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA9133-650x385.jpg" alt="album1">
</div>
<div class="album2">
<img src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA9099-650x385.jpg" alt="album2">
</div>
<div class="album3">
<img src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA0373-650x385.jpg" alt="album3" class="album4">
</div>
</div>
In each div tag, just place the following style = "margin-right: 20px;". So for example, for the first image, change it ot this
div style = "margin-right: 20px;" class="album1">
You don't need to use float, you can simply set the display of the albums to inline-block, and set the text-align of their parent to center. Note that the three images there are too wide to be in one line, so you'll have to adjust that yourself.
.album1 img, .album2 img, .album3 img {
//set img width and height here
}
.album1 {
display: inline-block;
//add padding/margin here
}
.album2 {
display: inline-block;
//add padding/margin here
}
.album3 {
display: inline-block;
//add padding/margin here
}
.album {
width: 100%;
overflow: hidden;
background-color: #191919;
text-align:center;
}
So I am currently trying to create a webpage, where the user can toggle between KMZ (there will be 8) files (which depict colour coded maps of Canada made in GIS then converted to KMZ). What I would like this website to look like can be seen at www.mapathy.ca, but with the toggle option on there! This is where I am having issues, I can find similar questions where there is code options for making a toggle for these KMZ layers, but I am unable to in put them into my existing html file. Whenever I try to I seem to make the GoogleEarth window that is currently there disappear altogether. I am going to include my entire HTML as it stands currently. I appreciate any insight very much!!
<!doctype html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=News+Cycle:400,700' rel='stylesheet' type='text/css'>
<title>Mapathy</title>
<script type="text/javascript" src="https://www.google.com/jsapi"> </script>
<style>
/* normalize.css 2011-06-23T00:50 UTC //github.com/jonathantneal/normalize.css */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}html{cursor:default;font-size:100%;overflow-y:scroll;-webkit-tap-highlight-color:transparent;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body,form,input,button,select,textarea{font-size:100%;margin:0}a,a:active,a:hover{outline:none}a:focus{outline:thin dotted}abbr{_border-bottom:expression(this.title ? '1px dotted':'none')}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}mark{background:#FF0;color:#000}pre,code,kbd,samp{font-family:monospace,monospace;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small,sub,sup{font-size:75%}sub,sup{line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}nav ul{list-style:none}audio[controls],canvas,video{display:inline-block;*display:inline}audio{display:none;_display:expression(this.controls ? 'inline':'none');*zoom:1}audio[controls]{display:inline-block}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){ overflow:hidden}legend{*margin-left:-7px}button,input,select,textarea{vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal;_overflow:expression(this.type == 'button|reset|submit' ? 'visible':'')}button,input[type="button"],input[type="reset"],input[type="submit"]{overflow:visible;-webkit-appearance:button}input[type="checkbox"],input[type="radio"]{box-sizing:border-box}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-decoration{ -webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}
body {
color: #151412;
font-family: Helvetica, Arial, sans-serif;
}
h1 {
font-size: 50px;
}
h2{
font-size: 36px;
}
p {
line-height: 1.4;
}
img.profile1 {
border: 1px solid #4C4B47;
width: 200px;
height:200px;
border-radius: 50%;
padding: 5px;
}
img.GE2008 {
border: 3px solid #4C4B47;
width: 800px;
height: 600px;
}
img.favourite {
border: 2px solid #4C4B47;
width: 200px;
height: 200px;
border-radius: 50%;
padding: 5px;
margin: 15px;
}
img.logo {
margin: 0 auto;
display: block;
}
section.banner {
padding-top: 100px;
padding-bottom: 100px;
background-image: url('images/tweed.png');
text-align: center;
}
section.banner h1 {
font-size: 45px;
text-transform: uppercase;
padding: 2px;
}
section.banner h2 {
padding-top: 10px;
}
script.map {
background-image: #000;
float: center;
overflow: hidden;
text-align: center;
border: 300px solid #4C4B47;
width: 600px;
height: 400px;
}
section.about {
background-image: #000;
float: center;
overflow: hidden;
text-align: center;
}
section.moreinfo {
background-image: #000;
float: center;
overflow: hidden;
text-align: center;
}
script.map {
text-align: center;
}
section.about h2 {
text-align: center;
}
section.contact {
background-image: #000;
overflow: hidden;
text-align: center;
}
section.social {
background-image: #000;
overflow: hidden;
text-align: center;
}
section.favourites {
background-image: #000;
overflow: hidden;
text-align: center;
}
section.box {
padding: 50px 100px;
}
section.banner {
background-attachment: fixed;
}
h1, h2, h3, h4, p {
font-family: 'News Cycle', sans-serif;
}
.menu {
list-style: none;
padding: 0;
margin: 0;
text-align: center;
border-bottom: 1px solid #434A5C;
background: #ffffff;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.menu li {
display: inline-block;
padding: 20px 35px;
}
.menu a {
text-decoration: none;
color: #333333;
text-transform: uppercase;
font-weight: bold;
font-family: 'News Cycle', sans-serif;
}
</style>
</head>
<body>
<ul class="menu">
<li>About</li>
<li>More Information</li>
<li>Contact</li>
<li>Favourites</li>
</ul>
<section class= "banner">
<h1>Mapathy</h1>
<h2>A re-conceptualization of the declining voter turnout rates in Canada</h2>
</section>
<div class="map" id="map3d"></div>
<script class="map" type="text/javascript">
var ge;
google.load("earth", "1", {"other_params":"sensor=false"});
function init() {
google.earth.createInstance('map3d', initCB, failureCB);
}
function initCB(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
addKmlFromUrl('https://sites.google.com/site/mapathy2/kmz-files/1988eqintkmz.kmz?attredirects=0&d=1');
}
function addKmlFromUrl(kmlUrl) {
var link = ge.createLink('');
link.setHref(kmlUrl);
var networkLink = ge.createNetworkLink('');
networkLink.setLink(link);
networkLink.setFlyToView(true);
ge.getFeatures().appendChild(networkLink);
}
function failureCB(errorCode) {
}
google.setOnLoadCallback(init);
</script>
<section id= "about" class= "about box">
<h2>About this project</h2>
<p>The following maps depict the declining voter turnout rate being witnessed in Canada. Voter turnout refers to the percentage of eligible voters who cast a ballot in an election. Areas marked white (1.00), are where 54% or less of eligible voters cast a ballot, areas marked grey (2.00), are where between 55-74% of eligible voters cast a ballot, and areas marked black (3.00), are where 75% or more eligible voters cast a ballot. </p>
</section>
<section id= "moreinfo" class= "moreinfo box">
<h3>More Information</h3>
Elections Canada Official Information for Voters
<p>for more information on the voting process & ways to vote in Canada</p>
Elections Canada Past Elections
<p>to learn more about historical voter turnout rates.</p>
</section>
<section id= "contact" class= "contact box">
<h4>Contact Owner</h4>
<img src="images/profile1.png" class="profile1">
</section>
<section class= "social box">
<img src="images/twitter.png">
<img src="images/linkedin.png">
<p>Note: This webpage is part of a final Master's Research project for the Communication and Culture program at Ryerson University. All Rights Reserved.</p>
</section>
<section id="favourites" class= "favourites box">
<h4>My Favourite Things</h4>
<img src="images/empirebiscuit.jpg" class="favourite">
<img src="images/candy.jpg" class="favourite">
<img src="images/algonquin.jpg" class="favourite">
</section>
</body>
</html>
If you are using KML files that are pre-made and do not change in real time it is much easier to use fetchKML to toggle ON and OFF rather than use networkLink (as you are doing)
look at this Google demo
https://code.google.com/apis/ajax/playground/#fetch_kml_(interactive,_checkboxes)