One-page responsive website? - javascript

I'm trying to create a website with only one page, that is responsive.
The idea is to scroll down with anchors.
However, I have no idea how can I get all the divs fill the whole screen as intended.
body {
width: 100%;
height: auto;
font-family: Source Sans Pro, Century Gothic;
background: url('images/bg.jpg');
background-size: cover;
background-repeat: no-repeat;
margin: 0;
}
ul {
list-style: none;
}
#intro1 {
font-family:'Press Start 2P', cursive;
font-size: 80px;
display: block;
text-align: center;
margin-bottom: auto;
margin-top: auto;
top: 50%;
height: 100%;
width: 100%;
position: absolute;
}
#intro2 { //This doesn't work. I've also tried to set top with pixels.
top:100%;
height:600px;
width: 100%;
position: absolute;
font-size: 80px;
display: block;
text-align: center;
margin-bottom: auto;
margin-top: auto;
top: 50%;
font-family: Source Sans Pro;
height: 100%;
width: 100%;
}
#products { //This works fine for some reason.
top: 800px;
width: 100%;
position: relative;
background: url('images/circuit.jpg');
font-family: Source Sans Pro;
font-size: 16px;
margin: 0;
text-align: center;
}
How could I have each div to fill the whole screen?
I don't want to use any jQuery plugins, I've browsed
almost every one of the free ones.

You can use VH unit of css. this is actually unit of total viewport height.
So, 100vh = 100% height of the viewport.
Here is an example:
HTML:
<div id="content1" class="content">
content1 |
content2 |
content3
</div>
<div id="content2" class="content">
content1 |
content2 |
content3
</div>
<div id="content3" class="content">
content1 |
content2 |
content3
</div>
CSS:
.content{height:100vh}
#content1{background:#EEE}
#content2{background:#CCC}
#content3{background:#AAA}
JSfiddle: http://jsfiddle.net/Vj3dZ/
Reference: http://snook.ca/archives/html_and_css/vm-vh-units
Note: Before using, must check the browser compatibility : http://caniuse.com/viewport-units

I think you should set HTML { height: 100%;}
Check this question first

They work if you have set body to 100% and the other main divs too!
Set body height: 100; instead of auto
Then for #intro1 and #intro1:
Remove all types of positioning like margin,top etc. and then this would work....
basic demo (resize browser and then RUN it to see the div taking whole view-port area)

Related

How do I get the text body lower but not make it a footer?

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="NWC.css">
<meta charset="utf-8">
<!--Font Import Links-->
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght#700&display=swap" rel="stylesheet">
<!---JS File Imports-->
<script src="NWC.js">
</script>
<!--HTML Code Starts Below-->
</head>
<body>
<section>
<div class="header">
<div class="logo_container">
<h1>N W C</h1>
</div>
</div>
</section>
<!--Cover Section-->
<section>
<div class="coverpic">
<img src="file:///C:/Users/jakes/Desktop/NWC/nwcgfrey.png" alt="NWC LOGO" width="60%" height="40%">
</div>
</section>
<!--About Section-->
<section>
<div class="about-section">
<h1>About NWC</h1>
<p>New World Coding is a startup teaching kids to program. Coding is an essential skill to learn because it is our future. All of our technology today whether it's using a computer to making a pot of coffee is run by the code engineers write. Here at NWC, we have group lessons for you and a friend, or 1:1 lessons! For more information about NWC, our lessons, or any other questions, please fill click the button below.</p>
</div>
</section>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
body {
background-image: url(file:///C:/Users/jakes/nwcWebsitecity.png);
background-size: cover;
}
.header {
display: block;
background-color: #1E1E1E;
background-size: 1000px;
width: 100%;
height: 80px;
}
/*
.inner_header {
width: 1000px;
height: 100%;
display: table-cell;
margin: 0 auto;
}
*/
.logo_container {
height: 100%;
display: table;
float: left;
}
.logo_container h1{
color: white;
height: 100%;
display: table-cell;
vertical-align: middle;
font-family: 'Josefin Sans', sans-serif;
padding-left: 10px;
}
.coverpic {
bottom: 750px;
vertical-align: middle;
text-align: center;
display: table-cell;
}
.about-section {
background-image:
url(file:///C:/Users/jakes/nwcWebsitecity.png);
height: auto;
width: 100%;
position: fixed;
color: white;
font-family: 'Josefin Sans', sans-serif;
color: white;
text-align: center;
transform: rotate(180);
}
[What site looks like now, I just want to move the body section lower1
Basically, I want the text body to move down lower so that you don't see it when you first load into the site, I want the .coverpic to be centered when you first load into the site and when you start scrolling you see the about section.
U can use margine-top in css.
which text u want to lower just write in css margine-top: and how px u want.
Like example
h1 {
margine-top: 50%;}
to be in the middle screen or just lower or more high % to make it in the right position
Add a class to your text (p tag):
<p class= "sample">
and then adjust the margin in your CSS:
.sample {
margin-top: 50px;
}
adjust the margin-top accordingly for how low you want the text to go.
edit: change the "color" in your about-section to black for example. Basically you have white on white right now.
You'll also notice that I added margin-top: 50px on both about-section and sample classes. The first margin-top brings the title down and the second brings the text down.
.about-section {
background-image:
url(file:///C:/Users/jakes/nwcWebsitecity.png);
height: auto;
width: 100%;
position: relative;
font-family: 'Josefin Sans', sans-serif;
color: black;
text-align: center;
transform: rotate(180);
margin-top: 50px;
}
.sample {
margin-top: 50px;
};

Using particle.js in header of page, cannot get to desired size with css

I am using particle.js in just the header area of my page. I cannot get it to resize to my desired height and width. I have used canvas sizing, plain heigh and width in css and vh/wh settings. Nothing seems to change the size of it. I cannot figure out where it or what it is being controlled by and how to change it. I feel like the answer should be obvious, but I am not getting it.
Here is the hmtl:
<body>
<div class="diva">
<center>
<div class="divb">
<div id="particles-js"></div>
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script src="js/index.js"></script>
</div>
CSS:
#charset "utf-8";
/* CSS Document */
html{height: 100%}
body
{
position: absolute;
height: 100%;
width: 100%; min-width: 1037px;
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
.clear{clear: both;}
.left{float: left;}
.right{float: right; text-align: right;}
.inner_img{margin: 0px 10px 10px 0px; border: 0px;}
/* creates initial containers for entire page */
.diva
{
top: 300px;
width: 100%; height: auto !important; height: 100%; min-height: 100%;
}
.divb
{
width: 950px;
text-align: left;
padding-bottom: 165px;
}
/* ---- particles.js container ---- */
#particles-js {
display: block;
width: 950px;
height: 200 px;
background-color: white;
background-image: url("http://celt.MiamiOH.edu/lillycon/images/lillylogo2017.png");
background-position: bottom;
background-repeat: no-repeat;
}

Why do my divs have this mysterious right margin?

I am trying to align divs #inner3 and #inner4 side by side, but they refuse to cooperate. When I inspect the DOM through Chrome, there is this mysterious right side margin on both divs that extends to the end of the page.
I have the global margin set to 0, but when I look deeper it says that there is no value for margin, period. Why?? Why won't my divs cooperate either? I have removed white space, made them smaller, floating, all to no avail. I have been searching and struggling for over 2 hours now.
Note: the overflow-x is for the animation; the background CSS is for the parallax.
body, html {
height: 100%;
overflow-x: hidden;
margin: 0em;
}
#section2 {
height: 500px;
width: 100%;
background-color: black;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border: 1px;
display: inline-block;
font-size: 0;
}
#inner3 {
height: 500px;
width: 50%;
font-size: 12px;
}
#inner4 {
height: 500px;
width: 50%;
font-size: 12px;
}
Code: https://codepen.io/hungus--bungus/pen/rdgEze?editors=1100
Page: https://codepen.io/hungus--bungus/full/rdgEze
Photos are taken using the Chrome "Inspect" feature, and information can be found in the "Computed" tab at the bottom after selecting the element.
Adding display: inline-block; to #inner3 and #inner4 will put them side-by-side.
#inner3 {
height: 500px;
width: 50%;
font-size: 12px;
display: inline-block;
}
#inner4 {
height: 500px;
width: 50%;
font-size: 12px;
display: inline-block;
}

Website navigations and sliders

Is there a way in HTML4 to have your site navigation link to different sliders on the page.
Meaning if i have a navigatio:
Catagory 1 | Catagory 2 | Catagory 3 | Catagory 4
is there a way where if a click on Catagory 1, a slider of videos will come up below pertaining to catagory 1. same for catagory 2 and so on and so forth.
Depends on how you want to do this exactly, but here's an option:
Basically we have a nav bar with four links, each linking to an anchor:
<div class='nav'>
1 | 2 | 3 | 4
</div>
Then we have a container that contains four divs - each with an id relating to the anchor links in the nav bar:
<div class='container'>
<div class='container1' id="1">
Container 1
</div>
<div class='container2' id="2">
Container 2
</div>
<div class='container3' id="3">
Container 3
</div>
<div class='container4' id="4">
Container 4
</div>
</div>
Then some CSS. Some of this is just for styling purposes, but you essentially want to make your container 100% wide, with hidden x overflow.
Then, each containing div (1-4) should be set absolutely, with an offset of 100% each time.
.nav {
width:100%;
font-family: Arial;
font-size: 15pt;
text-align: center;
margin-bottom: 20px;
}
.container {
font-family: Arial;
font-size: 30pt;
width:100%;
background: black;
height: 400px;
position: relative;
overflow-x: hidden;
}
.container1 {
text-align: center;
position: absolute;
color: white;
height:400px;
display: inline-block;
width:100%;
}
.container2 {
text-align: center;
left: 100%;
position: absolute;
color: white;
height:400px;
display: inline-block;
width:100%;
}
.container3 {
text-align: center;
left: 200%;
position: absolute;
color: white;
height:400px;
display: inline-block;
width:100%;
}
.container4 {
text-align: center;
left: 300%;
position: absolute;
color: white;
height:400px;
display: inline-block;
width:100%;
}
In practice:
https://jsfiddle.net/9rfdyw27/
There are much tidier ways to do this, but I've thrown it together to at least give you an idea of where you can go with this. You really don't need JS unless you want to make it look a bit more swish with the transition from link to link.

Removing gap without affecting styling

so in a previous post I asked how to remove a gap so that the body takes up the entire height of the browser window. This was solved using:
margin: 0;
However, I need (or the only way I know to) style my text using margins. As soon as I apply something like
margin-top: 50px;
the body doesn't fit the 100% height of the browser. I know all of the contents of the div have to use margin 0 in order for it work, but how am I supposed to style things using a margin.
Are there any other ways I can make the body 100% of the browser height?
https://jsfiddle.net/fveb8wsu/
body{
margin:0;
padding:0;
}
Did the trick for me, the body has some default paddings. So since the content of the mid was 100vh + padding this would be greater than 100vh
Is that what you need ? DEMO
#content-mid {
background-color: #000000;
opacity: 0.9;
height: 100vh;
width: 750px;
margin-left: 200px;
}
#basics {
display: table;
margin: 0 auto;
height: 400px;
width: 725px;
}
/* Content Text */
#sv_title {
font-family: BebasNeue;
font-size: 60px;
color: #FFFFFF;
text-align: center;
margin-top: 50px;
}
#sv_sub {
font-family: 'Quicksand', sans-serif;
font-size: 25px;
color: #FFFFFF;
text-align: center;
margin: 0;
margin-top: -20px;
}
<div id="content-mid">
<div id="basics">
<div id="sv_title">Community Name</div>
<div id="sv_sub">Your sub title here!</div>
</div>
</div>
i agree with everyone, instead of margin use padding, take a look:
#content-mid {
background-color: #000000;
opacity: 0.9;
height:100vh;
width: 100%;
padding-left: 200px;
}
#basics {
display: table;
margin: 0 auto;
height: 400px;
width:100%;
padding-top: 50px;}
https://jsfiddle.net/keinchy/5up22vom/1/
-cheers
What you have here is collapsing margins between parent and child element because parent has no margin-top and child has margin-top: 50px Demo
So now parent element has height: 100vh and margin-top: 50px and that is why body doesn't fit the 100% height of the browser.
There are couple options how you could prevent collapsing margins
Use display: inline-block Demo
Use display: flex Demo
Use float: left Demo
Or if you want to keep margin on parent but you don't want height to be more then window height you could use calc(100vh - marginofchildren) like this Demo

Categories