MY issue is simple.
I have a header-box with 3 divs inside;
A background image (relative)
a overlay; background-color with opacity (relative)
and a text.
The issue is that i can't position my text in the middle;
I created a javascript function handeling the issue, but the script doesn't do anything
The only way to set the top, left value for the element is to write it into the css file.
Any guesses? (And no the JS / JQuery code did work; tested it without the div-boxing madness)
Here are the files:
Index.html:
<head>
<title> Website </title
<!-- CSS Files -->
<link rel="stylesheet" type="text/css" href="css/content.css">
<link rel="stylesheet" type="text/css" href="css/layout.css">
<link rel="stylesheet" type="text/css" href="css/fontboxes.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/header.css">
<link rel="stylesheet" type="text/css" href="css/footer.css">
<!-- jQuery Einbindung -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function adjust() {
getElementById("mediumfontbox").style.top = 125;
}
</script>
</head>
<body>
<header>
<img src="img/header1.jpg"> </img>
<div id="overlay1"></div>
<div class="mediumfontbox" onload="adjust()"> Inspirational Quote </div>
</header>
<div class="main"></div>
<footer id="overlay1">
<div id="copy">Copyright by Vancold</div>
</footer>
</body>
header.css
header
{
width:100%;
height:100%;
}
header > *
{
position:absolute;
}
img
{
z-index: 0;
width: 100%;
height:100%;
top: 0px; left:0px;
}
header > .mediumfontbox
{
z-index: 2;
}
header > #overlay1
{
z-index:1;
height: inherit;
}
header > #overlay2
{
z-index:1;
height: inherit;
}
header > #overlay3
{
z-index:1;
height: inherit;
}
fontboxes.css
.smallfontbox
{
width: 125px;
height: 125px;
}
.mediumfontbox
{
width: 250px;
height: 250px;
}
.bigfontbox
{
width: 500px;
height: 500px;
}
.font
{
color: white;
font-family: "Times New Roman", Times, serif;
font-size: 32px;
}
layout.css
* {
margin: 0px;
padding: 0px;
}
#overlay1
{
background: blue;
opacity: 0.125;
width: 100%;
}
#overlay2
{
background: red;
opacity: 0.125;
width: 100%;
}
#overlay3
{
background: green;
opacity: 0.125;
width: 100%;
}
Your script is running in the header of your file, before anything is rendered in the body. Try moving your script to the end of your document body.
The style value for top should be a string with a unit - for example '125px'.
getElementById is a function of document.
onload doesn't apply to div. Put it on body.
#mediumfontbox {
position: absolute;
}
<head>
<script>
function adjust() {
document.getElementById("mediumfontbox").style.top = '125px';
}
</script>
</head>
<body onload="adjust()">
<div id="mediumfontbox">
Inspirational quote
</div>
</body>
Related
Hello I have a problem.
Why my css doesn't work on my head page in html?
Someone can help me the link of my code if you to see the result on run: https://jsfiddle.net/02kf1msd/`.
I use bulma for the style.
I want to have the logo and the menu in the same header line: logo on left and menu nav on right.
HTML Code:
<head>
<meta charset="utf-8">
<title>Oumar Pathe SOW Portfolio </title>
<!--css-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.1/css/bulma.min.css">
<link rel="stylesheet" href="src/css/main.css">
<!--css-->
<!--font-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:700" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
<!--font-->
</head>
<!--head-->
<!--body-->
<body>
<!--head-->
<div class="block">
<head class="header">
Oumar Pathé SOW Portfolio
<nav class="header-menu">
Accueil
Apropos
Réalisations et Expériances
Contact
</nav>
</head>
</div>
<!--head-->
CSS Code:
.header header {
width: 100%;
margin-left: 0;
margin-right: 0;
height: 70px;
line-height: 70px;
background-color: rgba( 0 , 0 , 0, 0);
position:fixed;
top: 0;
z-index: 999;
}
.header .header-logo {
color: #FFFFFF;
font-family: 'Montserrat', sans-serif;
float: left;
margin-left: 30px;
}
.header .header-menu{
float: right;
margin-right: 30px;
}
.header .header-menu a {
margin-right: 15px;
color: #FFFFFF;
}
.header .header-menu a:hover {
color: #3498db;
}
Why my access doesn't apply on this code?
sometimes Bulma style overrides your CSS codes so you will need to use !important after some of your CSS attributes.
second use navbar-end and navbar-start classes to make the logo on left and menu nav on right,
https://bulma.io/documentation/components/navbar/
I know that z-index has problems with different positionings and in this snippet I need them to work together so that I could replicate the navigation on this website http://www.ericryananderson.com/
The problem is that when the overlay is activated the button needs to be z-indexed which the position sticky doesn't like and doesn't allow it causing the overlay to be unclosable. The position sticky is on the nav bar. Is there a workaround this?
var bars = document.querySelector('.bars')
var overlay = document.querySelector('.overlay')
var isMenuOpened = false;
bars.addEventListener('click', function() {
if (isMenuOpened === false) {
bars.classList.remove('fa-bars');
bars.classList.add('fa-times');
overlay.style.display = 'block'
isMenuOpened = true;
bars.style.position = 'fixed'
bars.style.top = '40px';
bars.style.right = '60px';
}else{
bars.classList.remove('fa-times');
bars.classList.add('fa-bars');
overlay.style.display = 'none'
bars.style.position = 'static'
isMenuOpened = false;
}
})
body{
height: 3000px;
}
.video{
width: 100%;
height: 700px;
background: red;
}
nav{
display: flex;
/* position: sticky; */
top: 0px;
justify-content: space-between;
padding: 50px;
background: green;
height: 10px;
}
i{
font-size: 30px;
z-index: 10;
}
.overlay{
position: fixed;
top:0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
display: none;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<div class="video">
</div>
<div class="navigation">
<nav>
<h4>koreys site</h4>
<i class="fas fa-bars bars"></i>
</nav>
</div>
<div class="overlay">
</div>
<script type="text/javascript" src="./main.js"></script>
</body>
</html>
I am facing a problem. I use a "sticky" footer on my website. It works ok, but not on pages where CKEditor (4.6.2) is used. Problem is: there is an extra 1px-line after the footer. I believe I understand why problem occurs, but I am not sure how to fix it. Could you, please, suggest a workaround?
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet">
<script src="ckeditor/ckeditor.js"></script>
</head>
<body>
<div class="content-wrapper">
<header></header>
<textarea name="editor1"></textarea>
<script>
CKEDITOR.replace('editor1');
</script>
</div>
<footer></footer>
</body>
</html>
CSS:
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
.content-wrapper {
height: 100%;
}
.content-wrapper:after {
content: "";
}
header {
height: 100px;
background-color: blue;
}
header:after {
content: "";
}
footer {
height: 100px;
background-color: red;
margin-top: -100px;
}
footer:after {
content: "";
}
I am trying to label my picture inside a div container with a name in the h2 tag and health points on the bottom with a p tag, but its not working when I use .text. I am trying to insert the text in the js file, "Darth Vader" into the div h2 in the div container: charContainer
<!DOCTYPE html>
<html lang="en">
<head>
<title>Week 4 Game</title>
<link rel = "stylesheet" type = "text/css" href = "assets/css/reset.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<!-- Added link to the jQuery Library -->
<script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256- laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>
<style type="text/css">
.characters
{
width: 100%;
overflow: auto;
margin-left: 50px;
}
.vade, .skywalker, .obi, .dmaul
{
width: 130px;
height: 100px;
margin-top: 30px;
margin-left: 35px;
}
.charContainer, .charContainer1, .charContainer2, .charContainer3
{
width: 200px;
height: 170px;
float: left;
border: solid;
border-color: green;
background-color: white;
}
h2
{
font-size: 50px;
width: 100%;
margin-left: 50px;
}
.your
{
width: 100%;
}
.enemies
{
width: 100%;
overflow: auto;
margin-top: 50px;
}
.c1
{
width: 100%;
font-size: 20px;
}
</style>
</head>
<body>
<div class = "characters">
<div class="charContainer">
<h2 id="c1"></h2>
<img class="vade" src="assets/images/vader.jpg">
<p class="c1hp"></p>
</div>
</div>
<div class="your">
<h2>Your Character</h2>
</div>
<div class="enemies">
<img class="dmaul" src="assets/images/maul.png">
</div>
</body>
</html>
JS File
$(document).ready(function(){
$('#c1').text("Darth Vader");
}
It's just a typo in your JS file.
Replace:
$(document).ready(function(){
$('#c1').text("Darth Vader");
}
with:
$(document).ready(function(){
$('#c1').text("Darth Vader");
});
Update 16 Oct 01:46
Your script import of the jQuery library contains an extra space between sha256- and laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=
You don't reference your JS file anywhere in index.html.
Add:
<script src="NAME-OF-JS-FILE.js"></script>
just before your closing </body> tag.
i want to use wow.js on my website. I got a sidebar which needs to have the content inside a container with overflow-x: auto;. Because of this wow.js does not work.
Is it possible to define in wow.js the scrolling container?
My site looks like this:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="lib/js/wow.js"></script>
<link rel="stylesheet" type="text/css" href="lib/css/animate.css">
<script>
$("document").ready(function() {
new WOW().init();
})
</script>
<style>
body,html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#container {
height: 100%;
width: 100%;
position: relative;
}
#menu {
position: absolute;
width: 300px;
left: -300px;
background: red;
}
#content {
position: absolute;
width: 100%;
height: 100%;
background: green;
overflow-x: auto;
}
.wow {
background: yellow;
}
</style>
</head>
<body>
<div id="container">
<nav id="menu">
<ul>
<li>sidebar1</li>
<li>sidebar2</li>
<li>sidebar3</li>
</ul>
</nav>
<div id="content">
contentcontent<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="wow bounce">text</div>content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</body>
<script>
</script>
</html>
Problem solved:
I've changed the Contentcontainer to a section and used this code to init wow.js
var wow = new WOW({ scrollContainer: "section"});
wow.init();
Thanks anyway