I got this problem that I've been trying to solve for quite a while. Ideally, I would love particles.js to have its "spawn box" stretch down to the bottom the page (7 x viewport as calculated by fullpage.js) so that when scrolling down with fullpage.js, the whole page's content just moves up one slide (hence having particles.js covering the entire height of the website from top to bottom)
This is what I got so far:
CODE
body, html {
margin: 0;
padding: 0;
}
#container {
max-width: inherit;
background: rgb(111, 210, 255);
}
#particles-js {
width: 100%;
height: 100%;
}
.logo {
position: absolute;
top: 50%;
left: 50%;
width: 256px;
height: 256px;
margin-top: -128px;
margin-left: -128px;
z-index: 2;
}
canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="PachiSquid">
<title>PachiSquid</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/jquery.fullPage.css" rel="stylesheet" type="text/css">
<script src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<script src="https://raw.githubusercontent.com/VincentGarreau/particles.js/master/particles.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['home', 'release', 'about', 'music', 'live', 'shop', 'contact'],
scrollingSpeed: 1000,
})
})
</script>
</head>
<body id="container">
<ul id="menu">
<li data-menuanchor="home">HOME</li>
<li data-menuanchor="release">RELEASE</li>
<li data-menuanchor="about">ABOUT</li>
<li data-menuanchor="music">MUSIC</li>
<li data-menuanchor="live">LIVE</li>
<li data-menuanchor="shop">SHOP</li>
<li data-menuanchor="contact">CONTACT</li>
</ul>
<div id="fullpage">
<div id="particles-js">
<canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;"></canvas>
</div>
<div class="section active" id="section1">
<div class="intro">
<img class="logo" src="https://gdurl.com/7GCM">
</div>
</div>
<div class="section" id="section2">
<div class="intro">
<p>
Release
</p>
</div>
</div>
<div class="section" id="section3">
<div class="intro">
<p>
About
</p>
</div>
</div>
<div class="section" id="section4">
<div class="intro">
<p>
Music
</p>
</div>
</div>
<div class="section" id="section5">
<div class="intro">
<p>
Live
</p>
</div>
</div>
<div class="section" id="section6">
<div class="intro">
<p>
Shop
</p>
</div>
</div>
<div class="section" id="section7">
<div class="intro">
<p>
Contact
</p>
</div>
</div>
</div>
<script>
particlesJS("particles-js",{"particles":{"number":{"value":13,"density":{"enable":true,"value_area":1000}},"color":{"value":"#ffffff"},"shape":{"type":"image","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"https://gdurl.com/0VzA","width":100,"height":100}},"opacity":{"value":0.5,"random":false,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":41.6,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false}},"line_linked":{"enable":false,"distance":150,"color":"#ffffff","opacity":0.4,"width":1},"move":{"enable":true,"speed":0.6,"direction":"top","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"window","events":{"onhover":{"enable":false,"mode":"grab"},"onclick":{"enable":false,"mode":"push"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":400,"size":40,"duration":2,"opacity":8,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true});
</script>
</body>
</html>
Basically my idea is: height: 100% is not working due to FullPage.js, so let's set a fixed height.
Here's your JSFiddle: https://jsfiddle.net/MrMavin/0gop9xp9/
Thanks to #Nic from How to get height of entire document with JavaScript?
Related
I have the following code and I want to use ids to switch between slides, but with an id it doesn't work and als with JS scrollTo, scrollIntoView and other variations.
It works on the way down but not up.
I try to make a website which overlaps with itself and creates a nice progressive flow for surveys.
It should also be able to move to a previous slide, so you can enter or change some answer in such a survey.
I hope you can help me and maybe see something which i didn't see.
// set color for each slide
window.onload = function() {
let slides = [...document.getElementsByClassName("slide")];
for(let n in slides) {
let slide = slides[n];
slide.style.backgroundColor = "hsl("+((360 / slides.length) * n)+", 100%, 25%)";
}
}
body {
font-size: 3vw;
margin: 0;
padding: 0;
position: relative;
}
#ref {
background-color: black;
position: fixed;
top: 0;
z-index: 1000;
}
#ref a {
color: white;
text-decoration: none;
}
.slide {
background-color: #404050;
border: 1px solid white;
color: white;
height: calc(100vh - 2px);
left: 0;
position: sticky;
top: 0;
width: calc(100vw - 2px);
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="ref">
S1
S2
S3
S4
S5
S6
S7
S8
S9
</div>
<div id="s1" class="slide">
<h1>Slide 1</h1>
</div>
<div id="s2" class="slide">
<h1>Slide 2</h1>
</div>
<div id="s3" class="slide">
<h1>Slide 3</h1>
</div>
<div id="s4" class="slide">
<h1>Slide 4</h1>
</div>
<div id="s5" class="slide">
<h1>Slide 5</h1>
</div>
<div id="s6" class="slide">
<h1>Slide 6</h1>
</div>
<div id="s7" class="slide">
<h1>Slide 7</h1>
</div>
<div id="s8" class="slide">
<h1>Slide 8</h1>
</div>
<div id="s9" class="slide">
<h1>Slide 9</h1>
</div>
</body>
</html>
After trying a long time I found a solution but it is very specific.
You need to have a parent element which only includes the slides (in this case it is main), then you need to give the parent element a height and an overflow auto.
After those steps add the javascript, which gets the selected element and its parent (here again main), then calculates the average height per element, after that it gets the index of the elem relative to the parent and multiplies it with the height to get the scrollOffset, which is in the last step set for the parent.
// set color for each slide
window.onload = function() {
let slides = [...document.getElementsByClassName("slide")];
for(let n in slides) {
let slide = slides[n];
slide.style.backgroundColor = "hsl("+((360 / slides.length) * n)+", 100%, 25%)";
}
}
window.onhashchange = function() {
let hash = document.body.querySelector(location.hash);
let parent = hash.parentElement;
let scrollOffset = parent.scrollHeight / parent.childElementCount;
scrollOffset *= Array.prototype.indexOf.call(parent.children, hash);
parent.scrollTop = scrollOffset;
}
body {
font-size: 3vw;
margin: 0;
padding: 0;
position: relative;
}
#ref {
background-color: black;
position: fixed;
top: 0;
z-index: 1000;
}
#ref a {
color: white;
text-decoration: none;
}
main {
height: 100vh;
overflow: auto;
}
.slide {
background-color: #404050;
border: 1px solid white;
color: white;
height: calc(100vh - 2px);
left: 0;
position: sticky;
top: 0;
width: calc(100vw - 2px);
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="ref">
S1
S2
S3
S4
S5
S6
S7
S8
S9
</div>
<main>
<div id="s1" class="slide">
<h1>Slide 1</h1>
</div>
<div id="s2" class="slide">
<h1>Slide 2</h1>
</div>
<div id="s3" class="slide">
<h1>Slide 3</h1>
</div>
<div id="s4" class="slide">
<h1>Slide 4</h1>
</div>
<div id="s5" class="slide">
<h1>Slide 5</h1>
</div>
<div id="s6" class="slide">
<h1>Slide 6</h1>
</div>
<div id="s7" class="slide">
<h1>Slide 7</h1>
</div>
<div id="s8" class="slide">
<h1>Slide 8</h1>
</div>
<div id="s9" class="slide">
<h1>Slide 9</h1>
</div>
</main>
</body>
</html>
Absolutely loved the implentation. Such small css and so powerful effect.
But seems like Browser don't do the # magic with sticky elements. Although this could have been solved with JS, but thought of having a HTML-CSS solution to it by a little tweak in the HTML (adding an extra static element for # reference). Hope you like the solution.
// set color for each slide
window.onload = function() {
let slides = [...document.getElementsByClassName("slide")];
for(let n in slides) {
let slide = slides[n];
slide.style.backgroundColor = "hsl("+((360 / slides.length) * n)+", 100%, 25%)";
}
}
body {
font-size: 3vw;
margin: 0;
padding: 0;
position: relative;
}
#ref {
background-color: black;
position: fixed;
top: 0;
z-index: 1000;
}
#ref a {
color: white;
text-decoration: none;
}
.slide {
background-color: #404050;
border: 1px solid white;
color: white;
height: calc(100vh - 2px);
left: 0;
position: sticky;
top: 0;
width: calc(100vw - 2px);
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="ref">
S1
S2
S3
S4
S5
S6
S7
S8
S9
</div>
<div id="s1"> </div><!--Extra static element for # reference-->
<div class="slide">
<h1>Slide 1</h1>
</div>
<div id="s2"></div><!--Extra static element for # reference-->
<div class="slide">
<h1>Slide 2</h1>
</div>
<div id="s3"></div><!--Extra static element for # reference-->
<div class="slide">
<h1>Slide 3</h1>
</div>
<div id="s4"></div><!--Extra static element for # reference-->
<div class="slide">
<h1>Slide 4</h1>
</div>
<div id="s5"></div><!--Extra static element for # reference-->
<div class="slide">
<h1>Slide 5</h1>
</div>
<div id="s6"></div><!--Extra static element for # reference-->
<div class="slide">
<h1>Slide 6</h1>
</div>
<div id="s7"></div><!--Extra static element for # reference-->
<div class="slide">
<h1>Slide 7</h1>
</div>
<div id="s8"></div><!--Extra static element for # reference-->
<div class="slide">
<h1>Slide 8</h1>
</div>
<div id="s9"></div><!--Extra static element for # reference-->
<div class="slide">
<h1>Slide 9</h1>
</div>
</body>
</html>
I got particles.js to load however it pushes the bulma hero up instead of replacing the hero background. Any solutions?
#particles-js{
position: absolute;
width: 100%;
height: 100%;
background-image: linear-gradient(to bottom right, #ad5389, #3c1053);
}
<section class="hero is-fullheight" id="particles-js">
<div class="hero-body">
<div class="container has-text-centered">
<h1 class="title has-text-light is-size-1">iOS application development</h1>
<a class="button is-light is-inverted is-outlined">Learn More</a>
</div>
</div>
</section>
<script type="text/javascript" src="js/site.js"></script>
<script src="js/particles.js"></script>
<script src="js/app.js"></script>
I've used:
#particles-js canvas{
position: absolute;
height: 100vh;
z-index: -1;
}
I have two versions of a single page site that scroll using JS .animate function. One site will not scroll and the other site does. I can not find the error in my code on the "broken" site.
Any help would be greatly appreciated.
Other "helpful" comments welcome as well.
Thank You in Advance.
Working Site
$(document).ready(function() {
setBindings();
});
//Allow screen to Scroll to selected section
function setBindings() {
$("nav a").click(function (tip) {
tip.preventDefault();
var sectionID = "#" + tip.currentTarget.id + "Sect";
//alert('button id ' + sectionID);
$("html body").animate({
scrollTop: $(sectionID).offset().top
}, 1000);
});
}
h1, h2, h3, h4, h5, h6, p {
margin-bottom: 20px;
}
nav {
position: fixed;
width: 100%;
height: 50px;
background-color: black;
background-color: hsla(0, 0%, 0%, 0.50);
/* Set nav bar on top of all elements */
z-index: 99;
text-align: left;
}
nav a {
text-decoration: none;
color: #fff;
margin-left: 30px;
line-height: 50px;
}
.sect {
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.subsection {
height: 100%;
background-color: bisque;
}
.navSpace {
margin-top: 90px;
margin-left: 0;
height: 100%;
border-radius:6px;
}
#homeSect {
background-image: url(http://res.cloudinary.com/data-detective/image/upload/v1475940094/Promo/DTP3sm_rxk8pb.jpg);
color:black;
color: hsl(240, 0%, 30%);
}
#productSect {
/*Place Holder*/
background-color: bisque;
}
#servicesSect {
background-image: url('http://res.cloudinary.com/data-detective/image/upload/v1475937593/Promo/nate3_y8bwcs.jpg');
}
#portfolioSect {
/*Place Holder*/
background-color: bisque;
}
#contactSect {
background-image: url('http://res.cloudinary.com/data-detective/image/upload/v1471796677/Promo/tileable-dark-wood-textures-8_e6gwz7.jpg');
}
html, body {
height: 100%;
}
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cerulean/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<nav>
<a id="home" href="#homeSect">HOME</a>
<a id="product" href="#productSect">PRODUCT</a>
<a id="services" href="#servicesSect">SERVICES</a>
<a id="portfolio" href="#portfolioSect">PORTFOLIO</a>
<a id="contact" href="#contactSect">CONTACT</a>
</nav>
<div class="sect" id="homeSect">
<div class="container">
<div class="jumbotron">
<div class="row text-center">
<div class="col-xs-12">
<h1>Frank's Promo Page</h1>
</div>
</div>
<p class="text-center">This is where I want to talk about my company and why we are great.</p>
</div>
</div>
</div>
<div class="subsection" id="productSect">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 navSpace">
<div class="col-md-12 well">
<h2>Data Analyses</h2>
<h4 class="lead">
Find the answers to complex questions hidden inside your own proprietary data
</h4>
</div>
</div>
<div class="col-md-4 navSpace">
<div class="col-md-12 well">
<h2>Front End Web Design</h2>
<h4 class="lead">
Build a professional clean design for your company<br />
Maintain and refine your current website.
</h4>
</div>
</div>
<div class="col-md-4 navSpace">
<div class="col-md-12 well">
<h2>Visual Basic for Applications Programming</h2>
<h4 class="lead">
Design and maintian custom built applicaton for:<br />
Word, Excel, Access, Outlook, Power Point, etc.
</h4>
</div>
</div>
</div>
</div>
</div>
<div class="sect" id="servicesSect"></div>
<div class="subsection" id="portfolioSect"></div>
<div class="sect" id="contactSect"></div>
Broken Site
$(document).ready(function() {
setBindings();
});
//Allow screen to Scroll to selected section
function setBindings() {
$("nav a").click(function(tip) {
tip.preventDefault();
var sectionID = "#" + tip.currentTarget.id + "Sect";
//alert('button id ' + sectionID);
$("html body").animate({
scrollTop: $(sectionID).offset().top
}, 1000);
});
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin-bottom: 20px;
}
nav {
position: fixed;
width: 100%;
height: 50px;
background-color: black;
background-color: hsla(0, 0%, 0%, 0.50);
/* Set nav bar on top of all elements */
z-index: 99;
text-align: left;
}
nav a {
text-decoration: none;
color: #fff;
margin-left: 30px;
line-height: 50px
}
.sect {
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.subsection {
height: 100%;
background-color: bisque;
}
.navSpace {
margin-top: 90px;
margin-left: 0;
height: 100%;
border-radius: 6px;
}
#homeSect {
background-image: url(http://res.cloudinary.com/data-detective/image/upload/v1475940094/Promo/DTP3sm_rxk8pb.jpg);
color: black;
color: hsl(240, 0%, 30%);
}
#aboutSect {
/*Place Holder*/
background-color: bisque;
}
#portfolioSect {
/*Place Holder*/
background-image: url(http://res.cloudinary.com/data-detective/image/upload/v1471796677/Promo/tileable-dark-wood-textures-8_e6gwz7.jpg);
}
#contactSect {
background-image: url(http://res.cloudinary.com/data-detective/image/upload/v1475937593/Promo/nate3_y8bwcs.jpg);
}
html,
body {
height: 100%;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Frank Promo</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="Content/StyleSheet.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap-theme.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cerulean/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.10.1/bootstrap-social.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<script src="Scripts/jquery-3.1.0.js"></script>
<script src="Scripts/JavaScript.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
</head>
<body>
<!--style="margin:0 5px";-->
<nav>
<a id="home" href="#homeSect">HOME</a>
<a id="about" href="#aboutSect">ABOUT</a>
<a id="portfolio" href="#portfolioSect">PORTFOLIO</a>
<a id="contact" href="#contactSect">CONTACT</a>
</nav>
<div class="sect" id="homeSect">
<div class="container-fluid">
<div class="jumbotron navSpace">
<div class="row text-center">
<div class="col-xs-12">
<h1>Frank's Promo Page</h1>
</div>
</div>
<p class="text-center">This is where I want to talk about my company and why we are great.</p>
</div>
</div>
</div>
<div class="subsection" id="aboutSect">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 navSpace">
<div class="col-md-12 well">
<h2>Data Analyses</h2>
<h4 class="lead">
Find the answers to complex questions hidden inside your own proprietary data
</h4>
</div>
</div>
<div class="col-md-4 navSpace">
<div class="col-md-12 well">
<h2>Front End Web Design</h2>
<h4 class="lead">
Build a professional clean design for your company<br />
Maintain and refine your current website.
</h4>
</div>
</div>
<div class="col-md-4 navSpace">
<div class="col-md-12 well">
<h2>Visual Basic for Applications Programming</h2>
<h4 class="lead">
Design and maintian custom built applicaton for:<br />
Word, Excel, Access, Outlook, Power Point, etc.
</h4>
</div>
</div>
</div>
</div>
</div>
<div class="sect" id="portfolioSect"></div>
<div class="sect" id="contactSect"></div>
</body>
</html>
I'm working on this portfolio website for a guy who makes architecture models. For the gallery I used a ready-made code for a horizontal scroll. The code seems to work as expected in Safari and Firefox, but in Chrome I get this strange error involving the track pad scroll.
Here's the page:
http://www.modellverkstaden.com/modeller.html
When scrolling with the track pad in Chrome, the scroll automatically snaps back to the beginning. So the scroll is impossible to use. However, it works perfectly using an "external mouse". I also get an error with the menu button in the top. The right border of the button disappears, only in Chrome.
Would really appreciate some help in what this may have to do with and how I should proceed to make it work in Chrome and other browsers.
Here's the html for the specific gallery page I'm having trouble with:
<html lang="en-GB">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="description" content="Modellverkstaden">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="center.js"></script>
<script src="menu.js" type="text/javascript"></script>
<style>
.section {
display: block;
width: auto;
height: 500px;
max-height: 500px;
float: left;
margin-left: 20px;
}
.section img {
height: 100%;
position: relative;
}
p {margin-top: 1em;}
#content {
display: none!important;
padding-top: 6.3em!important;
}
img {
height: auto;
}
img.logo {
height: inherit;
}
#media only screen and (max-width: 800px) {
#content {
display: block!important;
}
img {
width: 100%;
}
img.logo {
width: inherit;
}
#top {
position: fixed;
}
}
</style>
<script src="Demo%20-%20Horizontal%20Scrolling-filer/jquery_002.js"></script>
<script src="Demo%20-%20Horizontal%20Scrolling-filer/jquery.js"></script>
<script>
$(document).ready(function() {
$('html, body, *').mousewheel(function(e, delta) {
this.scrollLeft -= (delta * 1);
e.preventDefault();
});
});
</script>
<!-- Enable HTML5 for old browsers -->
<!--[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>Modellverkstaden > Modeller</title>
</head>
<body>
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
<div id="hamburger"><img src="pics/menu.png" /></div>
<div id="top" style="position: fixed!important;">
<ul>
<li style="border: none;padding-left: 0;padding-right: 0;margin-right: 2em;">
<label><img class="logo" src="pics/logo.png"> </label>
</li>
<li class="menu">
Om
</li>
<li class="menu">
Kontakt
</li>
<li class="menu">
Uppdragsgivare
</li>
<li class="menu" id="active">
Modeller
</li>
</ul>
</div>
<div id="mob-menu"><ul><li>Om</li><li>Kontakt</li><li>Uppdragsgivare</li><li>Modeller</li></ul></div>
<div id="content">
<h1>Modeller</h1>
<div id="images">
<img src="pics/IMAG1306.jpg"><p></p>
<img src="pics/blandat-055.jpg"><p></p>
<img src="pics/blandat-069.jpg">
<img src="pics/IMAG0237.jpg"><p></p>
<img src="pics/IMAG1263.jpg"><p></p>
<img src="pics/diverse-paris-och-Csh-21-371.jpg"><p> </p>
<img src="pics/IMG_1464.jpg"><p> </p>
<img src="pics/IMG_1442.jpg"><p> </p>
<img src="pics/IMG_1477.jpg"><p> </p>
<img src="pics/IMG_9043.jpg"><p> </p>
<img src="pics/IMG_9067.jpg">
<img src="pics/IMG_9071.jpg"><p> </p>
<img src="pics/IMG_9161.jpg"><p> </p>
<img src="pics/IMG_9201.jpg"><p> </p>
<img src="pics/IMG_9658.jpg"><p> </p>
<img src="pics/IMG_9692.jpg"><p> </p>
<img src="pics/juni-10-181.jpg"><p> </p>
<img src="pics/juni-10-198.jpg"><p> </p>
<img src="pics/Kajen-4-JM-2012-B3.jpg"><p> </p>
<img src="pics/modellv-ffs-016.jpg"><p> </p>
<img src="pics/modellverkstaden2-(1-of-12).jpg"><p> </p>
<img src="pics/modellverkstaden2-(2-of-12).jpg"><p> </p>
<img src="pics/modellverkstaden2-(7-of-12).jpg"><p> </p>
<img src="pics/Pinc-House-Blackbarn-Sport-Pacific-1.50-002.jpg"><p> </p>
<img src="pics/Pinc-House-Blackbarn-Sport-Pacific-1.50-009.jpg"><p> </p>
<img src="pics/Pinc-House-Blackbarn-Sport-Pacific-1.50-023.jpg"><p> </p>
<img src="pics/titti,barnen-mm20061028-073.jpg"><p> </p>
<img src="pics/B19219_012.jpg"><p></p>
<img src="pics/B19219_017.jpg">
<img src="pics/B19219_023.jpg">
</div>
</div>
<div id="filler"></div>
<div id="container">
<div class="section yellow"><img src="pics/IMAG1306.jpg"><p></p></div>
<div class="section"><img src="pics/blandat-055.jpg"><p></p></div>
<div class="section"><img src="pics/blandat-069.jpg"></div>
<div class="section yellow"><img src="pics/IMAG0237.jpg"><p></p></div>
<div class="section yellow"><img src="pics/IMAG1263.jpg"><p></p></div>
<div class="section yellow"><img src="pics/diverse-paris-och-Csh-21-371.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/IMG_1464.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/IMG_1442.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/IMG_1477.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/IMG_9043.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/IMG_9067.jpg"></div>
<div class="section yellow"><img src="pics/IMG_9071.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/IMG_9161.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/IMG_9201.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/IMG_9658.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/IMG_9692.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/juni-10-181.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/juni-10-198.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/Kajen-4-JM-2012-B3.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/modellv-ffs-016.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/modellverkstaden2-(1-of-12).jpg"><p> </p></div>
<div class="section yellow"><img src="pics/modellverkstaden2-(2-of-12).jpg"><p> </p></div>
<div class="section yellow"><img src="pics/modellverkstaden2-(7-of-12).jpg"><p> </p></div>
<div class="section yellow"><img src="pics/Pinc-House-Blackbarn-Sport-Pacific-1.50-002.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/Pinc-House-Blackbarn-Sport-Pacific-1.50-009.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/Pinc-House-Blackbarn-Sport-Pacific-1.50-023.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/titti,barnen-mm20061028-073.jpg"><p> </p></div>
<div class="section"><img src="pics/B19219_012.jpg"><p></p></div>
<div class="section"><img src="pics/B19219_017.jpg"></div>
<div class="section"><img src="pics/B19219_023.jpg"></div>
<div class="section"><a style="position: absolute;z-index: 1000;" href="modeller.html"><p>← Tillbaka</p></a></div>
<div class="clear"></div>
</div>
</body></html>
And here's the CSS for the elements involved in the horizontal scroll section:
#filler { position: absolute; top: 0; left: 0; width: 18750px; height: 100%; }
#container { width: 18750px; position: absolute; top: 40%; margin-top: -150px;margin-left: 12px; }
.section {
display: block;
width: auto;
height: 500px;
max-height: 500px;
float: left;
margin-left: 20px;
}
.section img {
height: 100%;
position: relative;
}
I am working on a 960 px-design at the moment, and I am trying to do a menu in where it is supposed to be 6 "buttons" with a 5 px margin between each one. I know how to do this, and I cannot seem to find what is wrong with my code. It would be very helpful if someone could look through my code with some fresh eyes and tell me where the issue is...
http://jsfiddle.net/9tx8v/
HTML:
<!doctype html>
<html>
<head>
<title> ----- </title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<header>ASDER</header>
<nav>
<div id="ett"> <img src="menu.jpg"/>
<div id="två"> <img src="menu.jpg"/>
<div id="tre"> <img src="menu.jpg"/>
<div id="fyra"> <img src="menu.jpg"/>
<div id="fem"> <img src="menu.jpg"/>
<div id="sex"> <img src="menu.jpg"/>
</nav>
<article class="art-1"> </article>
<footer> - - - - - - - - - - - - - - </footer>
</div>
</body>
</html>
CSS:
header {
width: 100%;
height: 60px;
margin-bottom: 10px;
background-color: white;
float: left;
}
nav {
width: 100%;
height: 60px;
float: left;
}
article {
width: 462px;
height: 300px;
float: left;
margin-top: 10px;
}
footer{
width: 100%;
height: 60px;
float: left;
margin-top: 10px;
}
#ett, #två, #tre, #fyra, #fem, #sex {
width: 130px;
height: 60px;
margin-left: 5px;
}
Sorry for include a shitload of unnecessary code, but I'm so fed up atm I might just include the whole thing...
Thanks in advance
How about closing your DIV's? And you need a float:left for any DIV
HTML
<nav>
<div id="ett">
<img src="menu.jpg" />
</div>
<div id="två">
<img src="menu.jpg" />
</div>
<div id="tre">
<img src="menu.jpg" />
</div>
<div id="fyra">
<img src="menu.jpg" />
</div>
<div id="fem">
<img src="menu.jpg" />
</div>
<div id="sex">
<img src="menu.jpg" />
</div>
</nav>
CSS
nav div {
float:left;
width:130px;
height:60px;
margin-left:5px;
}
First at all as a better practice keep the closing tags for </div> elements.
<div id="ett"> <img src="menu.jpg"/></div>
<div id="två"> <img src="menu.jpg"/></div>
...
Then just float each element you don't need to float the nav:
#ett, #två, #tre, #fyra, #fem, #sex {
width:130px;
height:60px;
margin-left:5px;
float:left; /* Add this*/
}
Check this Demo Fiddle
First, close your divs:
<div id="två"><img src="menu.jpg"/></div>
<div id="tre"><img src="menu.jpg"/></div>
<div id="fyra"><img src="menu.jpg"/></div>
<div id="fem"><img src="menu.jpg"/></div>
<div id="sex"><img src="menu.jpg"/></div>
Add float: left in you css:
#ett, #två, #tre, #fyra, #fem, #sex {
width:130px;
height:60px;
margin-left:5px;
float: left;
}
<nav> should contains <a> , else it is not a <nav>.
Do not forget to close your tags and adapt their display if needed on a row , sized or on top of each others :)