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.
Related
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;
};
Im trying to get content to hide behind actionbar when scrolling. I have this example pen:
https://codepen.io/Wocha/pen/ExKVNRW
HTML:
<div class="app-content">
<div class="main-content">
<div class="content">
Some main content
</div>
<div class="footer">
Footer content
</div>
</div>
</div>
CSS:
body {
background: #F2F3F5;
}
.app-content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
padding: 0;
margin-top: 60px;
}
.main-content {
width: 100%;
margin: 0;
padding-left: 16px;
padding-right: 16px;
}
.content {
background: #fff;
padding: 16px;
min-height: 82vh;
width: 100%;
margin-bottom: 25px;
}
.footer {
display: block;
position: sticky;
bottom: 15px;
width: 100%;
color: #fff;
background: #000;
padding: 10px;
margin-top: 20px;
}
What i would like is for content to hide behind footer / actionbar when scrolling so that there would always be a small line of background gray visible between footer and content.
I could do it by setting content height and overflow: auto, but that would create extra scrollbar to content div and i want it to work when scrolling main window.
This post is very close to what i would like to happen, but there Action Bar just scrolls over content, same as in my pen example.
Fixed action bar, taking footer into account
change the z index of the action bar to 1
z-index: 1;
For this personal sight I'm building I want it to be fairly simple. I have a big title in the middle of the screen, just one word, and when you hover over it I want it to be replaced with a menu -- basically a white box the size of the title with links on it.
The problem with other solutions I've seen is mostly people want to replace one word with just one word, I could do that. But I want to change the contents drastically, and I can't quite figure it out. I'm having trouble getting it to be positioned correctly, as well as there is a LOT of flickering happening.
Confused about how I'd add a whole list of links into the css "content" or js "data" fields.
Here is a jsfiddle of what i'm working with so far as well as my code.
<div class = "container">
<div class = "main">
<span class = "maintit"><h1 id = "titre"><em>KIN</em></h1></span>
<span class = "menu"><p>
HARRY - CHARLIE - JORDAN
- JESSICA - RYAN - HANNA -
SUPERFRUIT - MISC
</p></span>
</div>
</div>
and my CSS:
body{
background-color: #ED0349;
font-family:Arial;
color:#DBFA05;
}
h1{
text-align: center;
font-size:200px;
text-shadow: 5px 5px #FFFFFF;
margin-top: 0px;
}
#titre{
padding-top: .9em;
background-color: #ED0349;
}
.menu {
text-align: justify;
background-color: #FFFFFF;
}
.container{
}
.main{
display: inline-block;
padding-left: 50%;
}
.container .menu { display: none; }
.container:hover .maintit {display:none;}
.container:hover .menu {display: inline-block;}
Put the "word" and the menu inside a parent, centered (displayed one on top of the other.
When the parent is not hovered, display the word and hide the menu.
When the parent is hovered, display the menu and hide the word.
.main {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: white;
}
.main > * {
display: block;
width: 100%;
height: auto;
overflow: visible;
text-align: center;
transition: opacity .3s cubic-bezier(.5,0,.3,1);
position: relative;
}
.main:hover .maintit,.main .menu {
opacity: 0;
}
.main:hover .menu {
opacity: 1;
}
body {background-color: gray;}
.main > .menu {
position: absolute;
max-width: 100%;
}
<div class="container">
<div class="main">
<span class="maintit"><h1 id = "titre"><em>KIN</em></h1></span>
<span class="menu"><p>
HARRY - CHARLIE - JORDAN
- JESSICA - RYAN - HANNA -
SUPERFRUIT - MISC
</p></span>
</div>
</div>
The main trouble while hovering is the sizing of .container, which is monitored, changes.
Solution: Give .container a height and width and the flickering stops.
body {
background-color: #ED0349;
font-family: Arial;
color: #DBFA05;
}
h1 {
text-align: center;
font-size: 200px;
text-shadow: 5px 5px #FFFFFF;
margin-top: 0px;
}
.container {
width: 100%;
height: 100vh;
}
#titre {
padding-top: .9em;
background-color: #ED0349;
}
.menu {
text-align: justify;
background-color: #FFFFFF;
}
.main {
display: inline-block;
padding-left: 50%;
}
.container .menu {
display: none;
}
.container:hover .maintit {
display: none;
}
.container:hover .menu {
display: inline-block;
}
<div class="container">
<div class="main">
<span class="maintit"><h1 id = "titre"><em>KIN</em></h1></span>
<span class="menu"><p>
HARRY - CHARLIE - JORDAN
- JESSICA - RYAN - HANNA -
SUPERFRUIT - MISC
</p></span>
</div>
</div>
I'm trying to mimic the following site: http://weareundefined.be/ and once you get passed the first page by clicking it on it, there is a computer and a short paragraph below it.
After analyzing the site using dev webtool, I still am not able to center the elements properly. I attempted the top: 50% with position: relative, yet it is not centered correctly.
I tried to break down to the necessary CSS, but still not able to recreate it.
Code:
<div style={{height: '100%’}}>
<div className="container">
<div id="rotate-container">
<div>
Center Me
</div>
</div>
<h1> We are undefined</h1>
<p>We're a creative agency with a focus on digital.</p>
</div>
</div>
CSS (SCSS):
.container {
height: 100%;
position: relative;
padding: .5em;
margin: 0 auto;
max-width: 400px;
text-align: center;
top: 50%;
}
#rotate-container {
div {
color: #fb3131;
font-size: 40px;
font-weight: bold;
display: block;
}
}
What could I be missing or doing incorrectly? And how are they handling the resizing of elements? Any suggestions or guidance would be greatly appreciated it.
Thank you in advance and will be sure to accept and upvote answer.
You're close. both html and body need to be height: 100%;, too, otherwise it's children won't be 100% of the viewport.
.container doesn't need height: 100%;. Since you already have .container at top: 50%;, just use transform: translateY(-50%); to shift it back up 50% of it's own width so the center of it is in the center of the browser.
body, html {
height: 100%;
}
.container {
position: relative;
padding: .5em;
margin: 0 auto;
max-width: 400px;
text-align: center;
top: 50%;
transform: translateY(-50%);
}
#rotate-container div {
color: #fb3131;
font-size: 40px;
font-weight: bold;
display: block;
}
<div style="height:100%;">
<div class="container">
<div id="rotate-container">
<div>
Center Me
</div>
</div>
<h1> We are undefined</h1>
<p>We're a creative agency with a focus on digital.</p>
</div>
</div>
You can also use flexbox with align-items: center;
body,
html {
height: 100%;
}
.container {
position: relative;
padding: .5em;
margin: 0 auto;
max-width: 400px;
text-align: center;
}
#rotate-container div {
color: #fb3131;
font-size: 40px;
font-weight: bold;
display: block;
}
<div style="height:100%; display: flex; align-items: center;">
<div class="container">
<div id="rotate-container">
<div>
Center Me
</div>
</div>
<h1> We are undefined</h1>
<p>We're a creative agency with a focus on digital.</p>
</div>
</div>
Try:
body {
min-width: 970px;
padding-top: 70px;
padding-bottom: 30px;
}
.container {
width: 970px;
max-width: none !important;
padding-right: 10px;
padding-left: 10px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
And adjust accordingly
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)