Centered elements in div appear to be off center - javascript

I'm making a website, which for testing reasons I have called yeet.io.
I'm currently trying to center an input and h1 inside of a div both vertically and horizontally, but for some reason, the elements always appear offsetted somehow.
Why is this? I want the elements to be centered in the middle like any regular "io game". I have some jQuery that makes the elements fade in, could this be the problem? I am stumped.
$(".yeet").hide();
$(document).ready(function() {
$(".yeet").show(2000);
$(".nickname").show(2000);
});
body {
width: 100%;
height: 100%;
}
.container {
text-align: center;
position: absolute;
height: 100%;
width: 100%;
display: table;
}
.yeet {
font-family: "Schoolbell", cursive;
font-size: 75px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.nickname {
font-family: "Schoolbell", cursive;
display: block;
margin: 0 auto;
text-align: center;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Schoolbell" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="yeet">yeet.io</h1>
<input class="nickname" placeholder="nickname" , autofocus="autofocus">
</div>
</body>

You're currently making use of a table, by setting display: table on .container, and display: table-cell on .yeet.
This is probably unintentional, and in fact, simply removing these two declarations automatically produces your desired result -- you don't have to change the HTML at all, or create any new CSS rules.
$(".yeet").hide();
$(document).ready(function() {
$(".yeet").show(2000);
$(".nickname").show(2000);
});
body {
width: 100%;
height: 100%;
}
.container {
text-align: center;
position: absolute;
height: 100%;
width: 100%;
}
.yeet {
font-family: "Schoolbell", cursive;
font-size: 75px;
vertical-align: middle;
text-align: center;
}
.nickname {
font-family: "Schoolbell", cursive;
display: block;
margin: 0 auto;
text-align: center;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Schoolbell" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="yeet">yeet.io</h1>
<input class="nickname" placeholder="nickname" , autofocus="autofocus">
</div>
</body>
Hope this helps! :)

You need to wrap each element in their own fake table-row
$(".yeet").hide();
$(document).ready(function() {
$(".yeet").show(2000);
$(".nickname").show(2000);
});
body {
width: 100%;
height: 100%;
}
.container {
text-align: center;
position: absolute;
height: 100%;
width: 100%;
display: table;
}
.yeet {
font-family: "Schoolbell", cursive;
font-size: 75px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.nickname {
font-family: "Schoolbell", cursive;
display: block;
margin: 0 auto;
text-align: center;
}
.row{
display:table-row;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Schoolbell" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<h1 class="yeet">yeet.io</h1>
</div>
<div class="row">
<input class="nickname" placeholder="nickname" , autofocus="autofocus">
</div>
</div>
</body>

$(".yeet").hide();
$(document).ready(function() {
$(".yeet").show(2000);
$(".nickname").show(2000);
});
body {
width: 100%;
height: 100%;
}
.container {
text-align: center;
position: absolute;
height: 100%;
width: 100%;
}
.yeet {
font-family: "Schoolbell", cursive;
font-size: 75px;
text-align: center;
}
.nickname {
font-family: "Schoolbell", cursive;
text-align: center;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Schoolbell" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="yeet">yeet.io</h1>
<input class="nickname" placeholder="nickname" , autofocus="autofocus">
</div>
</body>

Related

CSS, divs moving around on content update

I'm trying to code 2048 using HTML/ CSS/ JS
I got the layout of the grid using this Html:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>2048</title>
</head>
<body>
<div class = "wrapper">
<div class="gridd">
<div><h1></h1></div>
<div><h1></h1></div>
<div><h1></h1></div>
<div><h1></h1></div>
<div><h1></h1></div>
<div><h1></h1></div>
<div><h1></h1></div>
<div><h1></h1></div>
<div><h1></h1></div>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
And for it I'm using this CSS:
* {
margin: 0;
padding: 0;
}
body {
background-color: #C2C2C2;
}
h1 {
font-family: Asap,sans-serif;
font-size: 24pt;
margin-top:35%;
text-align: center;
color: white;
}
.gridd {
width: 340px;
height: 340px;
background-color: #B4B4B4;
border-radius: 15px;
padding: 15px;
position: absolute;
margin: auto;
}
.gridd > div {
width: 100px;
height: 100px;
background-color:#787878;
border-radius: 15px;
margin:5px;
display: inline-block;
}
.wrapper{
position: absolute;
margin: 80px 0 0 200px;
}
I'm simply using this JS code to generate the initial twos on the grid:
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
var y = document.getElementsByTagName("H1");
y[getRandomInt(8)].innerHTML = 2;
y[getRandomInt(8)].innerHTML = 2;
Now, on load I'm getting this unpleasant scene:
Can someone help me understand what's going on please?
And how to fix it.
Thanks a lot.
Just add flex rules for selector .gridd:
.gridd{
...
display: flex;
flex-flow: wrap;
}
And replace display: inline-block with flex: auto in the selector .gridd >div:
.gridd >div{
...
flex: auto;
}
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
var y = document.getElementsByTagName("H1");
y[getRandomInt(8)].innerHTML = 2;
y[getRandomInt(8)].innerHTML = 2;
*{margin: 0;
padding: 0;
}
body{
background-color: #C2C2C2;
}
h1{
font-family: Asap,sans-serif;
font-size: 24pt;
margin-top:35%;
text-align: center;
color: white;
}
.gridd{
width: 340px;
height: 340px;
background-color: #B4B4B4;
border-radius: 15px;
padding: 15px;
position: absolute;
margin: auto;
display: flex;
flex-flow: wrap;
}
.gridd >div{
width: 100px;
height: 100px;
background-color:#787878;
border-radius: 15px;
margin:5px;
flex: auto;
}
.wrapper{
position: absolute;
margin: 80px 0 0 200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>2048</title>
</head>
<body>
<div class = "wrapper">
<div class = "gridd" >
<div> <H1></H1> </div>
<div> <H1></H1> </div>
<div> <H1></H1> </div>
<div> <H1></H1> </div>
<div> <H1></H1> </div>
<div> <H1></H1> </div>
<div> <H1></H1> </div>
<div> <H1></H1> </div>
<div> <H1></H1> </div>
</div>
</div>
</body>
<!--script type="text/javascript" src="script.js"></script(-->
</html>
This can be simply fixed with changed to css file. use display: grid.
Also, do not use margin-top: 35%;. If you will make h1, or div, smaller or bigger, you will have to change the percentage too. Instead, you can center it via align-items: center.
This is the entire css file to fix the issue:
* {
margin: 0;
padding: 0;
}
body {
background-color: #c2c2c2;
}
h1 {
font-family: Asap, sans-serif;
text-align: center;
color: white;
}
.wrapper {
margin: 80px 0 0 200px;
border-radius: 15px;
background-color: #b4b4b4;
width: fit-content;
padding: 10px;
}
.gridd {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
gap: 5px;
}
.gridd > div {
background-color: #787878;
border-radius: 15px;
display: grid;
align-items: center;
}
It will center your h1 no matter what text size it is and no matter how big your div container.
EDIT
In fact, this entire thing can be made without a wrapper and extra div
HTML:
<div class="grid">
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
body {
background-color: #c2c2c2;
}
.grid {
margin: 80px 0 0 200px;
border-radius: 15px;
background-color: #b4b4b4;
width: fit-content;
padding: 10px;
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
gap: 5px;
}
.grid > h1 {
background-color: #787878;
border-radius: 15px;
display: grid;
align-items: center;
font-family: Asap, sans-serif;
text-align: center;
color: white;
}
If you want to style a grid layout, you should also use a grid. The tool for it is called CSS-Grid. It delcared by using display: grid;. To have th grid 3 column wide, you use grid-template-columns: repeat(3, min-content);. Thatw ay you have 3 columns with the width of the children. To have a gap between the different chidlren cards, you use grid-gap: 15px;
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
var y = document.getElementsByTagName("H1");
y[getRandomInt(8)].innerHTML = 2;
y[getRandomInt(8)].innerHTML = 2;
* {
margin: 0;
padding: 0;
}
body {
background-color: #C2C2C2;
}
h1 {
font-family: Asap, sans-serif;
font-size: 24pt;
margin-top: 35%;
text-align: center;
color: white;
}
.gridd {
width: min-content;
padding: 15px;
display: grid;
grid-template-columns: repeat(3, min-content);
grid-gap: 15px;
margin: auto;
background-color: #B4B4B4;
border-radius: 15px;
}
.gridd>div {
width: 100px;
height: 100px;
background-color: #787878;
border-radius: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>2048</title>
</head>
<body>
<div class="wrapper">
<div class="gridd">
<div>
<H1></H1>
</div>
<div>
<H1></H1>
</div>
<div>
<H1></H1>
</div>
<div>
<H1></H1>
</div>
<div>
<H1></H1>
</div>
<div>
<H1></H1>
</div>
<div>
<H1></H1>
</div>
<div>
<H1></H1>
</div>
<div>
<H1></H1>
</div>
</div>
</div>
</body>
<!--script type="text/javascript" src="script.js"></script(-->
</html>

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;
};

css positioning i am having a problem with positioning

i am new to web development, I have a small problem with positioning i placed a element with content in it all of the word are grumble up instead of be in one line . can anyone help me with a solution. positioning has been a big problem for me so far so if you guys know any sources where i can learn more about css positioning
#import url('https://fonts.googleapis.com/css?family=Yantramanav:100');
#import url('https://fonts.googleapis.com/css?family=Montserrat:400');
#import url('https://fonts.googleapis.com/css?family=Poiret+One');
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
display: table;
top: 0;
background-size: cover;
background:url(https://picstatio.com/download/1600x900/864423/food-dishes-beer-bottle.jpg)no-repeat 50% 50%;
}
.intro .inner{
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content {
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.content h1 {
font-family: "Yantramana";
font-size: 600%;
font-weight: 100;
color: #E1EFE9;
line-height: 70%;
}
.btn{
font-family: "montserrat";
font-size: 135%;
font-weight: 400;
color: orange;
text-transform: uppercase;
text-decoration: none;
border: solid #ffffff;
padding: 10px 20px;
border-radius: 9px;
transition: all 0.7s;
}
.btn:hover {
color: #CBDFD6;
border: solid #CBDFD6;
}
.about-us{
height:100%;
width: 100%;
margin: auto;
display: table;
background-color: #ffffff;
background-size: cover;
position: relative;
}
.ab-content {
font-family: "Poiret One";
font-weight: lighter;
position: absolute;
font-size: 150%;
left: 50%;
transform: translateX(-50%);
}
.ab-p{
position: absolute;
top: 10%;
left: 50%;
font-weight: lighter;
transform: translateX(-50%);
font-family: "montserrat";
}
.color {
color:orange;
}
/*--- Media Queries --*/
#media screen and (max-width: 900px) {
}
#media screen and (max-width: 768px) {
}
#media screen and (max-width: 480px) {
}
<!DOCTYPE html>
<html>
<head>
<title>Full Screen Landing Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="css/animate.css" rel="stylesheet"/>
<link href="css/waypoints.css" rel="stylesheet"/>
<script src="js/jquery.waypoints.min.js" type="text/javascript"></script>
<script src="js/waypoints.js" type="text/javascript"></script>
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<section class="os-animation" data-os-animation="bounceInUp" data-os-animation-delay=".3s">
<h1>Find <span class="color">Your</span> Taste!</h1>
</section>
<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">
<a class="btn" href="#">Get Started</a>
</div>
</div>
</section>
<section class="about-us">
<div class="ab-inner">
<div class="ab-content">
<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">
<h2 class="center">Our Mission</h2>
<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".5s">
<p class="ab-p">Our mission is to provide the best food ingedients.</p>
</div>
</div>
</section>
</body>
</html>
"Relative" "position" relates positions, so this can avoid mess.
.ab-content {
font-family: "Poiret One";
font-weight: lighter;
position: relative;
font-size: 150%;
left: 50%;
transform: translateX(-50%);
}
I assume you would like the "Our Mission" section to be centered and readable.
.ab-p {
font-weight: lighter;
font-family: "montserrat";
text-align: center;
}
h2 {
text-align: center;
}
Recommendation: don't use position:absolute unless you absolutely needed it, because this rule removes the element from the automatic positioning of the browser - meaning you are in complete control of where to position it.

Whats wrong with this HTML

I was referring the code in js fiddle:
Jsfiddle which works fine
!DOCTYPE html>
<style>
.item {
display: inline-block;
width: 180px;
height: 120px;
border: thin solid #000;
margin: 0.25em;
}
.item .title {
font-weight: bold;
word-wrap: break-word;
}
.item {
overflow: hidden;
}
.hidden {
display: none;
}
#top {
position: fixed;
width: 100%;
height: 80px;
padding: 4px;
text-align: center;
background: #FFF;
}
#top h1 {
font-size: 2em;
margin-bottom: 0.5em;
}
#search {
width: 60%;
margin: 0 auto;
padding: 0.25em;
text-align: center;
}
#results {
padding-top: 90px;
text-align: center;
}
.icon:before {
font-size: 3em;
color: #4466DD;
}
</style>
</head>
<body>
<div id="top">
<h1>Programming Languages</h1>
<input type="text" id="search" value="" placeholder="Search..." />
</div>
<div id="results"></div>
<script>..................
But when I wrote the same code and hosted in this website (http://indianwaterpurifiers.online/) see the view source, the grid is not rendering in the browser.
What's wrong with the HTML file?
You have a site where you load jQuery UI, but that is dependent on jQuery. Make sure you include that on the page before jQuery UI.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Included
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
and it worked , thanks for the comments

How to get jQuery to recognize mouse over image once per hover

I am trying to animate a picture when the mouse hovers over it. I am currently using "animate.css" to get the animation. There are two problems:
1) How do I get jQuery to "fire" my script once per hover? For example, if I create an alert, the alert will fire several times (putting the mouse over and taking it off).
2) What is wrong with my current jQuery syntax? The animation does not play.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="CSS/stylesheet_test.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="CSS/animate.css">
<link href="https://fonts.googleapis.com/css?family=Work+Sans:500&subset=latin-ext" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<script type="text/javascript" src="scripts/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="scripts/test.js"></script>
<title>Daryl N.</title>
</head>
<body>
<div class="container">
<div class="navbar">
<div class="nav-text"><span id="home">Home</span><span id="archive">Archive</span></div>
</div>
<div id="first" class="background">
<div class="align-vert"><img id="me-pic" src="./images/me.jpg" alt="A picture of me is suppose to be here" style="width:240px;height:240px;" class="me-border animated bounceIn"><span class="daryl animated bounceIn">Hi, I'm Daryl</span></div>
</div>
<script type="text/javascript" src="scripts/test.js"></script>
<div id="second" class="background">
<p class="align-vert">This is my personal website</p>
</div>
</div>
</body>
</html>
JS
$(document).ready(function()
{
$('#me-pic').hover(function()
{
$(".bounceIn").toggleClass("bounce");
});
});
My CSS
body,html
{
width: 100%;
min-width: 200px;
height: 100%;
padding: 0;
margin: 0;
}
.container
{
width: 100%;
min-width: 500px;
height: 100%;
}
.background
{
height: 100%;
width: 100%;
display: inline-block;
position: relative;
z-index: 1;
}
.align-vert
{
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.me-border
{
border-radius: 50%;
border: 2px solid #FFF;
vertical-align:middle
}
.navbar
{
position: fixed;
background-color: rgba(0, 0, 0, 0.9);
margin: 0;
padding: 0;
width: 100%;
height: 50px;
z-index: 2;
}
.nav-text
{
color: #a3a3a3;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 16px;
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
#home
{
margin-right: 50px;
}
#home:hover
{
color: #777777;
}
#home a:hover, a:visited, a:link, a:active
{
text-decoration: none;
color: inherit;
}
#archive
{
margin-left: 50px;
}
#archive:hover
{
color: #777777;
}
.daryl
{
font-family: 'Work Sans', sans-serif;
display: inline-block;
padding-left: 20px;
font-size: 30px;
color: #FFF;
}
#first
{
background: #2C2D45;
}
#second
{
background: #354677;
font-size: 40px;
font-family: 'Work Sans', sans-serif;
color: white;
}
See here for animate.css
Could my CSS files cause a conflict?
Thanks in advance!
In your JS, I would instead use the mouseenter and mouseleave event handlers. Based on your explanation, this should serve nicely. It will fire exactly once when the mouse enters the div, and once when it leaves.
$(document).ready(function()
{
$('#me-pic').on('mouseenter', function() {
$(".bounceIn").toggleClass("bounce");
});
$('#me-pic').on('mouseleave', function() {
$(".bounceIn").toggleClass("bounce");
});
});

Categories