My website is working fine, except for my <a href="..."> links.
They work when I don't have a jQuery function in there. When I do have the jQuery function they don't work.
My code:
<html>
<head>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: Calibri, sans-serif;
text-align: center;
}
.hidden {
display: none;
}
.background-wrap {
position: fixed;
z-index: -1000;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
}
#video-bg-elem {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
background-size: 100%
}
.content {
position: absolute;
width: 100%;
min-height: 100%;
left: 0;
bottom: 0;
top: 0;
right: 0;
margin: auto;
z-index: 1000;
}
.content h1 {
text-align: center;
font-size: 65px;
text-transform: uppercase;
font-weight: 300;
color: #fff;
padding-top: 18%;
margin-bottom: 10px;
}
.content p {
text-align: center;
font-size: 20px;
letter-spacing: 3px;
color: #aaa;
}
.box {
width: 200px;
-webkit-transition: all .2s;
background: #e3e3e3;
line-height: 50px;
text-align: center;
font-weight: bold;
color: #333;
border-radius: 5px;
box-shadow: 0px 0px 2px rgba(0, 0, 0, .5), 1px 1px 5px rgba(0, 0, 0, .3);
cursor: pointer;
}
.box:hover {
background: #333;
color: #e3e3e3
}
nav > ul > li {
display: inline;
text-align: center;
color: white;
margin: 0 auto;
overflow: hidden;
font-size: 20px;
padding: 1em;
}
nav > ul > li.active {
text-decoration: underline;
}
a {
text-decoration: none;
color: inherit;
}
</style>
</head>
<body>
<br>
<nav>
<ul>
<li class="active">Home</li>
<li><a href="producten.html">Assortiment<a></li>
<li>Contact</li>
</ul>
</nav>
<div class="background-wrap">
<video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted">
<source src="video.mp4" type="video/mp4"> Video not supported
</video>
</div>
<script>
$(document).ready(function() {
$('.hidden').fadeIn('slow').removeclass('.hidden')
});
</script>
<center>
<div class="hidden">
<div class="content">
<h1>OortjesShop.nl</h1>
<p id="test">De webwinkel voor al jouw oortjes en koptelefoons!</p>
<br>
<br>
<div class="box">Bekijk ons assortiment</div>
</div>
</div>
</center>
</body>
</html>
The weird thing is that my <a href="..."> on the box does work, but the one on my menu doesn't.
When I remove the jQuery function it does work.
Your style for h1 is overlapping the navigation,just put it in your css then see the changes.
nav {
float: left;
position: relative;
width: 100%;
z-index: 9999;
}
Thanks
Your .content is positioned absolutely so it's likely covering up your navigation bar which does not allow anything to be clicked (even if it doesn't appear to be covered).
.content {
position: absolute;
width: 100%;
min-height: 100%;
left: 0;
bottom: 0;
top: 0;
right: 0;
margin: auto;
z-index: 1000;
}
When jQuery isn't included, that content is hidden which would explain why it works then. Perhaps adjust/remove that style to see if the issue persists.
Your "content" block is z-indexed, but your menu is not. So, when your jQuery fires and reveals the content, it ends up z-indexed over the top of your menu. You have two choices. Either add:
pointer-events: none;
..to your content background so that you can click through the layer (though this may impact click events within that container), or you need to give your menu a position:absolute and a z-index higher than your "content" div.
you got a typo in the second link of your menu:
<a href="producten.html">Assortiment<a>
youre not closing it with </a>
AND
as #Timbal stated
your h1 is overlapping your nav, just put to your nav an higher z-index than z-index of h1:
nav {
position: relative;
z-index: 1001;
}
Related
I am using Concreate5 version 8.5.4 and PHP version 7.4 on my VPS.
I want to add a pop-up of notice to my users.
When I am adding this code in Global Region > HTML Block
then my site covered with black color and am not able to do anything.
<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.js"></script>
<style type="text/css">
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 100;
display: none;
}
.cnt223 a{
text-decoration: none;
}
.popup{
width: 100%;
margin: 0 auto;
display: none;
position: fixed;
z-index: 101;
}
.cnt223{
min-width: 600px;
width: 600px;
min-height: 150px;
margin: 100px auto;
background: #f3f3f3;
position: relative;
z-index: 103;
padding: 15px 35px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
}
.cnt223 p{
clear: both;
color: #555555;
/* text-align: justify; */
font-size: 20px;
font-family: sans-serif;
}
.cnt223 p a{
color: #d91900;
font-weight: bold;
}
.cnt223 .x{
float: right;
height: 35px;
left: 22px;
position: relative;
top: -25px;
width: 34px;
}
.cnt223 .x:hover{
cursor: pointer;
}
</style>
<script type='text/javascript'>
$(function(){
var overlay = $('<div id="overlay"></div>');
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
$('.close').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
$('.x').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
});
</script>
<div class='popup'>
<div class='cnt223'>
<h1>Important Notice</h1>
<p>
A simple pop-up!
<br/>
<br/>
<a href='' class='close'>Close</a>
</p>
</div>
</div>
Is there any mistake in this coding, as I am reviewing this code then I am not able to pin point the actual part of code.
Please review this code and help me fix it for fine working.
Thanks
My submit button shows up in very different places when i'm viewing it on different screens. I understand the usage of media queries helps with this, but I just want the items to show up in generally the same area.
I've tried using percentages for my dimensions, but the problems persists. Any recommendation? I've had luck with percentages in the past, I'm not sure why they aren't working for me with this specific problem. Is there something else wrong?
Here is my code (the styling for the submit button is at the bottom of the styling sheet):
html {
font-family: 'PT Sans', Helvetica, Arial, sans-serif;
background: #f1f2f6;
}
body {
background: #f1f2f6;
margin: 0;
padding: 0;
}
.Class-Name-Bar {
position: relative;
height: 270px;
width: 75%;
background-color: #ffffff;
margin: auto;
margin-top: 35px;
border-radius: 5px;
}
.Class-Name {
position: absolute;
height: 220px;
background-image: linear-gradient(to bottom, rgba(10, 10, 25, .85), rgba(0, 0, 0, 0.85)), url(https://miro.medium.com/max/2656/1*d0Qd8OUx_TUxG7N6H991ew.jpeg);
width: 100%;
border-radius: 5px 5px 0 0;
}
.Class-Name h1 {
text-align: center;
font-size: 60px;
margin-top: 50px;
font-weight: 200;
color: #ffffff;
}
.Class-Name p {
text-align: center;
font-size: 20px;
color: #f1f2f6;
margin: -20px;
}
#navigation {
position: absolute;
}
div#navigation ul li {
display: inline-block;
margin-top: 86%;
margin-left: 25px;
color: #333333;
font-size: 20px;
list-style: none;
}
div#navigation ul li a {
text-decoration: none;
color: #000000;
}
div#navigation ul li a:hover {
text-decoration: none;
color: #ff4757;
}
.post-area-wrapper {
position: relative;
height: 120px;
background-color: #ffffff;
margin: 20px;
width: 35%;
margin-left: 52.5%;
border-radius: 5px;
}
.post-area {
position: relative;
width: 95%;
margin: 2%;
}
input[type=post] {
padding: 3%;
width: 95%;
border: none;
font-size: 18px;
background-color: #f1f2f6;
margin-top: 3%;
}
.submit {
position: absolute;
border: none;
margin-left: 83%;
padding: 5px 16px;
border-radius: 25px;
background-color: #D3D3D3;
}
<html>
<head>
<link href="~/css/ClassReview.css" rel="stylesheet">
</head>
<body>
<div class="Class-Name-Bar">
<div class="Class-Name">
<h1> Calculus</h1>
<p> MA2500</p>
</div>
<div id="navigation">
<ul>
<li>Notes</li>
<li>Tests</li>
<li>Quizlets</li>
</ul>
</div>
</div>
<div class="description">
</div>
<div class="post-area-wrapper">
<form>
<div class="post-area">
<input type="post" name="post" placeholder="Review this class, tell us how you really feel..">
</div>
<button type=submit class="submit">Submit</button>
</form>
</div>
</body>
</html>
In order for your submit button to be at the same place all the time you have to either define the exact position for it using top left right bottom or using the below code without defining the position absolute you can simply define it as a block and then give it margin-left:auto which will position it on the right side of the div and give it a small margin from the right side.
.submit {
display:block;
border: none;
margin-right:10px;
margin-left:auto;
padding: 5px 16px;
border-radius: 25px;
background-color: #D3D3D3;
}
So basically I am using Font named merkur from dafont.com and i downloaded it and added it to my files. afterward font showed up but something weird happen. The text on top of my video became weird but when I looked at the font not on top of the video, the font was just fine. Whats happening and how can i fix this
I have already checked if it was the centering that messed up, or if it was the font size that messes it up.
<div class="bgsection">
<div class="video-container">
<video autoplay loop muted>
<source src="BGVIDEO.mp4" type="video/mp4">
</video>
</div>
<div class="color-overlay"></div>
<nav class="navbar">
<div class="nav-container">
<div class="nav-logo">
<img class="logo" src="\Ahmed,Shahriyar\2019-2020\Computer-Science-3\Assignments\01-Project-Portfolio\3-Logos-and-Layout\Logo1.png" width="150" height="70">
<span class="open-slide">
<a href="#" onclick="openNav()">
<svg width="30" height="40">
<path d="M0,8 40,5" stroke="black" stroke-width="6"/>
<path d="M0,17 040,14" stroke="black" stroke-width="6"/>
<path d="M0,26 40,23" stroke="black" stroke-width="6"/>
</svg>
</a>
</span>
</div>
</div>
<div id="mySidebar" class="sidebar">
×
Home
Portfolio
About
Contact
</div>
</nav>
<div class="text-overlay" >
<h1>KS DESIGNS</h1>
</div>
</div>
<center>KS DESIGN KS DESIGN KS DESIGN KS DESIGN KS DESIGNS </center>
<script>
function openNav() {
document.getElementById("mySidebar").style.width = "450px";
document.getElementById("main").style.marginright = "450px";
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginright= "0";
}
// Show loading animation.
var playPromise = audio.play();
if (playPromise !== undefined) {
playPromise.then(_ => {
// Automatic playback started!
// Show playing UI.
})
.catch(error => {
// Auto-play was prevented
// Show paused UI.
});
}
</script>
CSS
#font-face {
src: url("Merkur.ttf");
font-family: Merkur;
}
body {
font-family: "Merkur";
margin: 0px;
overflow-x:hidden;
font-size: 72px;
}
ul {
list-style-type: inline;
margin: 0;
padding: 0;
overflow: hidden;
background: -webkit-linear-gradient(left, #00d2e9 0%,#045962 100%);
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
wth: 100%;
z-index: 99;
}
li {
float: left;
margin-right: 80px;
font-size: 30px;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none ;
}
li a:hover {
background-color: #000000;
color: white;
}
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
opacity: 0.9;
text-align: center;
}
.sidebar a {
padding: 50px 8px 8px 32px;
text-decoration: none;
font-size: 50px;
color: white;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #a38313;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: -25px;
font-size: 36px;
margin-right: 50px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: #444;
}
#main {
transition: margin-right .5s;
padding: 16px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}
.navbar{
background-color: #f6c399;
margin: 0px;
padding: 0px;
z-index: 2;
top: 0;
width: 100%;
}
.logo{
margin: 0px;
}
.video-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: -1;
}
.bgsection {
position: relative;
width: 100%;
height: 100vh;
display: flex;
overflow: hidden;
}
.bgsection nav{
height: 80px;
}
.video-container video{
min-width: 100%;
min-height: 100%;
}
.color-overlay{
height:100vh;
position: absolute;
top:0;
left:0;
width:100vw;
z-index:1;
background-image: linear-gradient(#a38313, black);
opacity:0.55;
}
.open-slide{
margin-top: 25px;
right: 20px;
position: absolute;
}
.text-overlay{
align-self: center;
text-align: center;
width: 100%;
z-index: 2;
position: absolute;
font-size: 72px;
color: black;
}
Low reputation so can't add a comment
My debug suggestion :
I'm familiar with Chrome, so I suggest opening the developer tools, selecting the header text and using the properties window to find how the font-family is being set. A possible issue might be <h1> being set to a different font family by some other css
You could improve your question by creating a jsfiddle or pen that shows what is happening
I am currently creating a website that is vertically scroll-able and has a navbar on the top as shown in the image. The navbar gets bigger when the user is not on the very top and this is implemented as:
if (window.scrollY == nav.offsetTop) {
document.querySelector('.nav').classList.add("largerNavbar");
} else {
document.querySelector('.nav').classList.remove("largerNavbar");
}
In javascript, so, it just adds a new class that has larger height to the navbar. But the problem is, it hides the content of the 2nd row. The 2nd row's style looks like:
div#firstRow {
padding: 10px;
width: 100%;
//position: relative;
margin:0 auto;
line-height: 1.4em;
background-color: green;
}
I commented out the position: relative because then the 2nd row will hide the navbar.
What is the problem here?
EDIT:
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
height: 100%;
font: 100% $font-stack;
color: $primary-color;
margin: 0px;
.largerNavbar .nav{
font-size: 20px;
height: 90px;
}
.largerNavbar #firstRow {
font-size: 20px;
height: 90px;
}
.onSection {
background-color: gray;
}
.nav{
color: white;
//vertical center
display: flex;
align-items: center;
font-size: 12px;
height: 70px;
overflow: hidden;
background-color: #333;
transition:all 1s;
-webkit-transition:all 1s;
.menus {
position: absolute;
right: 0px;
padding: 10px;
}
.logo {
position: absolute;
left: 0px;
padding: 10px;
}
}
.stationary {
position: fixed;
top: 0;
width: 100%;
}
.nav a {
color: white;
float: left;
display: block;
text-align: center;
padding: 14px;
text-decoration: none;
}
div#firstRow {
padding: 10px;
width: 100%;
//position: relative;
margin:0 auto;
line-height: 1.4em;
background-color: green;
}
div#secondRow {
padding: 10px;
//position: relative;
margin:0 auto;
line-height: 1.4em;
background-color: blue;
}
div#thirdRow {
padding: 10px;
//position: relative;
margin:0 auto;
line-height: 1.4em;
background-color: yellow;
}
div#lastRow {
height: 100px;
background-color: black;
}
}
<div class="logo">
HOME
</div>
<div class="menus">
<span>About</span>
<span>Archive</span>
<span>Projects</span>
<span>Contact</span>
</div>
</div>
<div id="firstRow">
<a id="about" class="smooth"></a>
</div>
<div id="secondRow">
<a id="history"></a>
</div>
<div id="thirdRow">
<a id="contact"></a>
</div>
<div id="fourthRow">
<a id="contact"></a>
</div>
<div id="lastRow">
<a id="footer"></a>
footer goes here
</div>
<script src="bundle.js" type="text/javascript"></script>
I'm guessing that you gave the navbar either absolute or fixed positioning.
If that's the case, I would try adding that largerNavbar class to an element that is a parent to both your navbar and your green container there, and then have some CSS selectors that alter both the navbar's height property and the green container's padding-top property at the same time.
So something like this:
.largerNavbar .nav {
...
height: 120px; // Use the same height for both
}
.largerNavbar #firstRow {
...
padding-top: 120px // Use the same height for both
}
Add some CSS transitions and it should look great. Good luck!
I have to make a slideshow of images based on my this jsfiddle. I need to have three more images just after this image which is already there in my jsfiddle. So I will have three more images and three dots at the bottom border of the image and if I click those dots, it should show other image and I want to keep BESPOKE INSURANCE SOLUTIONS text on top of my slideshow.
I tried integrating this w3schools example but my original jsfiddle is getting messed up and it is not working at all. Here is my updated jsfiddle and as you can see it is messed up. What is the best way to solve this?
Below is my code:
<div class="header">
<div class="header-background">
<img src="https://s4.postimg.org/yg8mjvsv1/image-home.png">
</div>
<div class="orange-bar">
<img class="orange-bar-image" src="https://s12.postimg.org/dmd7nd1dp/headline.png">
</div>
<div class="topnav">
<nav>
<ul>
<li class="home"><img src="https://s11.postimg.org/ywuxj79j7/logo.png" style="width:240px; height:53px;"></li>
</ul>
</nav>
</div>
<h1 class="text-inside-orange">BESPOKE INSURANCE SOLUTIONS</h1>
</div>
Here is my CSS:
.header {
position: relative;
height: 769px;
}
.header-background {
height: 769px;
width: 100%;
}
.orange-bar {
position: relative;
top: -430px;
left: -160px;
}
.topnav {
position: relative;
top: -890px;
background-color: rgba(0, 0, 0, 0.8);
height: 89px;
border-bottom: 3px solid #EF7440;
overflow: hidden;
}
.topnav ul>li {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
li.home {
position: relative;
right: 40px;
}
li.insurance {
margin-right: 80px;
margin-left: 80px;
left: 15px;
position: relative;
color: white;
font-family: AvantGarde;
letter-spacing: .30em;
}
li.login-signup {
font-style: italic;
font-size: 10px;
position: relative;
left: 20px;
top: 5px;
font-family: Adelle PE;
letter-spacing: .30em;
color: white;
}
li.get-covered {
border-color: #EF7440;
border-style: solid;
color: white;
top: 3px;
font-size: 12px;
position: relative;
left: 35px;
letter-spacing: .30em;
font-family: Adelle PE;
}
li.get-covered {
margin-top: 15px;
padding-bottom: 10px !important;
padding-top: 10px !important;
}
li.login-signup {
padding-top: 30px !important;
position: relative;
left: -35px;
}
li.insurance {
padding-top: 30px !important;
}
body {
border: 0;
margin: 0;
height: 100%;
min-height: 100%;
overflow-x: hidden;
}
.header h1 {
padding-left: 110px;
color: white;
text-align: center;
font-size: 25px;
left: -175px;
letter-spacing: .300em;
position: relative;
top: -613px;
font-family: "AvantGarde";
text-transform: uppercase;
}
This is my way. You should create a div contain BESPOKE INSURANCE SOLUTIONS, set position: absolute, align: top left. It's keep text no changes.