I'm going to apologize in advance for how basic this question is, but this is my first time using JavaScript in HTML.
Basically, I have a JavaScript that produces a different bit of random text every time a user loads the page. I'd like to format that text in Helvetica and then display it centred in the middle of the page. I'm attempting to do this with CSS as indicated below, but it is not working for me. Any suggestions much appreciated.
HTML
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>home</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="horizon">
<div id="content">
<script type="text/javascript" src="scripts.js"></script>
</div>
</div>
</body>
CSS
#horizon {
color: white;
background-color: #ffffff;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: visible;
display: block
}
#content {
font-family: Helvetica, Geneva, Arial, sans-serif;
font-color: black;
background-color: white;
margin-left: -410px;
position: absolute;
top: -237px;
left: 50%;
width: 825px;
height: 475px;
visibility: visible
}
Well for starters, your missing your HTML tags.
You need to wrap your HTML code between HTML Tags.
Second, you will need to set your text to a different color as the background color. In your CSS, you will need to change the #horizon color to black, or something else.
Other than that, your code works.
try
#content
{
margin: auto;
width: 200px; /* however wide it should be (required) */
}
...
<div id="content">
stuff goes here from js / whatever
</div>
for vertical alignment you are looking at JS and not CSS.
How about using text-align: center?:
#content
{
font-family: Helvetica, Geneva, Arial, sans-serif;
font-color: black;
background-color: white;
text-align: center;
}
Related
I created this split screen view using split.js. Two divs are shown next to each other. You can drag the middle to make one bigger of smaller.
Now it would be nice to let the two divs automatically fall below each other if the screen is smaller than lets say 768 px, but offcourse keeping the split screen functionality.
Even better apart from automatically changing the view when scaling the browser it would be nice to give the user the option to choose for horizontal/vertical themselves as well. So this way they can overrule the standard behavior.
I already tried working with bootstrap 4, cfr. https://www.youtube.com/watch?v=bh3UAetYkUI&feature=youtu.be, but they don't seem to work together well.
My code: https://jsfiddle.net/rjtpvhn1/1/
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="content">
<div class="split a">text left</div>
<div class="split b">text right</div>
</div>
</body>
</html>
CSS:
* {
box-sizing: border-box;
}
body {
margin: 0;
height: 100vh;
font-size: 20px;
}
.content {
width: 100%;
height: 100%;
display: flex;
justify-items: center;
align-items: center;
}
.split {
width: 100%;
height: 100%;
padding: 30px;
border: 1px solid;
overflow: auto;
}
.gutter {
cursor: e-resize;
height: 100%;
background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #ccc;
}
JAVASCRIPT: (include https://unpkg.com/split.js/dist/split.min.js)
Split(['.a', '.b'], {
gutterSize: 9,
sizes: [50, 50]
});
Im having trouble with transitioning between two html pages. When the enter button is pressed you will be brought to another page, When this button is pressed the page should simply slide in from the right. http://jsfiddle.net/fs488b3r/5/ in this fiddle is a perfect example of what Im looking for.
Ive tried this code with my own code however it doesn't seem to be working the way it should. Anyone know how I can fix this? or properly implement this? Below is my code, Any help would be much appreciated
<!DOCTYPE html>
<html>
<head>
<title>Landing Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#font-face {
font-family: Geoma Regular Demo;
src: url(Geoma Regular Demo.otf);
}
#font-face {
font-family: Geoma Demo;
src: url(Geoma Light demo.otf);
}
#media screen and (max-width: 425px){
html,body{
overflow-x: hidden;
width: 100%;
margin: 0;
}
#logo {
margin: 0 auto;
display: block;
margin-top: 50px;}
h1 {color: white;
text-align: center;
font-family: Geoma Regular Demo;
font-size: 28px;
margin: 0;
padding-bottom: 25px;}
p{text-align: center;
color: white;
font-size: 16px;
font-family: Geoma Demo;
margin: 0 ;
padding-bottom: 35px;
}
#enter {margin: 0 auto;
display: block;
font-size: 16px;
color: white;
font-family: Geoma Demo;
border: 2px solid white;
background-color:#0BF446 ;
border-radius: 0 15px 0 15px;
padding: 10px 30px;}
#enter:hover {background-color:#04A12B;}
.green {margin-top: 50px;
background-color: #0BF446;
border-radius: 20px 20px 0 0;
padding: 40px 30px 30px 30px;
position: absolute;
bottom: 0;
top: 150px;
}
}
</style>
</head>
<body>
<img src="biglogo.png" id ="logo">
<div class = "green">
<h1>Welcome to Elemental!</h1>
<p>Elemental is an interactive platform,
that allows creative people to discover and
explore design elements inspired by nature
throughout the world</p>
<button id = "enter">Enter</button>
</div>
<script>
function transitionPage() {
// Hide to left / show from left
$("#enter").toggle("slide", {direction: "left"}, 500);
// Show from right / hide to right
$("#about-2").toggle("slide", {direction: "right"}, 500);
}
$(document).ready(function() {
$('#enter').click(transitionPage);
$('#about-2').click(transitionPage);
});
</script>
</body>
</html>
What this js fiddle essentially does is shift the view within the same page, not load a new page.the jsfiddle has 2 divs (containers of content) which are actually on the same page. Your button
<button id = "enter">Enter</button>
is a button link to the new page. basically this opens the link before the javascript is run. for the javascript to be run on the same page, your first step, would be to remove the a href
<button id = "enter">Enter</button>
now this would run the code without loading the new page.
here is something close to what you want to do from my understanding
- the "landing page" or view the github repo
this code only works for me within the jsfiddle, below is just the javascript portion.
function transitionPage() {
// Hide to left / show from left
$("#about-1").toggle("slide", {direction: "left"}, 500);
window.open("homepage.html","_self");
// Show from right / hide to right
$("#about-2").toggle("slide", {direction: "right"}, 500);
}
$(document).ready(function() {
$('#about-1').click(transitionPage);
$('#about-2').click(transitionPage);
});
this would be everything in one page (except jquery which is linked) , also fix your css to match the exacts of your page. below would be your landingpage.html
<!DOCTYPE html>
<html>
<head>
<title>Landing Page</title>
<link rel="stylesheet"
href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="Scripts/js/jquery-3.3.1.min.js"></script>
<style type="text/css">
html, body {
font: normal normal 16px Arial;
width: 100%;
height: 100%;
}
p {
font-size: 20px;
margin: 100px 0 0 0;
}
.nodisplay {
display: none;
}
#about {
position: relative;
width: 100%;
height: 100%;
}
.page {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
}
#logo {
margin: 0 auto;
display: block;
margin-top: 50px;}
#about-1 {
background-color: #003366;
color: #FFFFFF;
display:inline-block;
}
#about-2 {
background-color: #F6BC0C;
color: #000000;
float:left;
}
</style>
<script>
function transitionPage() {
// Hide to left / show from left
$("#about-1").toggle("slide", {direction: "left"}, 500);
window.open("homepage.html","_self");
// Show from right / hide to right
$("#about-2").toggle("slide", {direction: "right"}, 500);
}
$(document).ready(function() {
$('#about-1').click(transitionPage);
$('#about-2').click(transitionPage);
});
</script>
</head>
<body>
<img src="biglogo.png" id ="logo">
<div id="about">
<div id="about-1" class="page">
<p>Welcome to Elemental!
Elemental is an interactive platform, that allows creative people to
discover and explore design elements inspired by nature throughout the
world</p>
<br>
<button id = "enter" style="color:#000">Enter</button>
</div>
<div id="about-2" class="page nodisplay">
<p>Content for about 2</p>
</div>
</div>
</body>
</html>
then you just need your second page
<html>
<head>
<title>
Page 2
</title>
<link rel="stylesheet"
href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
html, body {
font: normal normal 16px Arial;
width: 100%;
height: 100%;
background-color: #F6BC0C;
}
#about-2 {
background-color: #F6BC0C;
color: #000000;
float:left;
}
.page {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
}
p {
font-size: 20px;
margin: 100px 0 0 0;
}
</style>
</head>
<body>
<div id="about-2" class="page nodisplay">
<p>Content for about 2</p>
</div>
</body>
I start making a page without
<!doctype html>,
but when I add this line with
<!doctype html>
my code doesn't display correctly. Where is the problem? (and please sorry if my code seems bad, difficult and with mistakes.
I am just a newcomer in front-end. I will very thankful if you help me.
with !doctype html
without !doctype html
<html>
<head>
<title> Repear phones, laptops, tablets. Replacement screen, battery, touch screen. Unlock and re-flashing phone.</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="visit-card">
<div class="visit-card__part-1">
<table class="visit-card__part-1__table">
<tr>
<td class="visit-card__part-1__table__logo">
<img class="visit-card__part-1__logo" src="images/servis-plus.png" alt="Service-plus.by">
</td>
<td class="visit-card__part-1__table__tel-1">
<span class="visit-card__part-1__table__tel-1__number">+375291386105</span> <br /> <span class="visit-card__part-1__table__tel-1__time">10:00-20:00</span><span class="visit-card__part-1__table__tel-1__empty">11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</span
</td>
<td class="visit-card__part-1__table__empty-block">
</td>
<td class="visit-card__part-1__table__tel-2">
+375293711698
</td>
</tr>
</table>
</div>
<div class="visit-card__part-2">
<div class="visit-card__part-2__headline"> Quickly need <br /> repair device?
</div>
</div>
</div>
</body>
</html>
body {
margin: 0;
}
.visit-card {
width: 1280px;
height: 750px;
background-size: 1280px 750px;
background-image: url(images/main-bg.jpg);
}
.visit-card__part-1__logo {
width: 191px;
height: 78px;
}
.visit-card__part-1__table {
width: 100%;
height: 140px;
color: white;
font-family: arial;
font-size: 24;
border-bottom: 1px solid #80705c;
}
.visit-card__part-1__table__logo {
text-align: right;
width: 270px;
}
.visit-card__part-1__table__tel-1 {
text-align: right;
vertical-align: top;
}
.visit-card__part-1__table__tel-2 {
vertical-align: top;
}
.visit-card__part-1__table__tel-1__time {
font-size: 17;
line-height: 1%;
}
.visit-card__part-1__table__tel-1__empty {
visibility: hidden;
font-size: 1;
}
.visit-card__part-1__table__tel-1__number {
line-height: 75px;
}
.visit-card__part-1__table__tel-2 {
line-height: 75px;
}
.visit-card__part-1__table__empty-block {
width: 65px;
}
.visit-card__part-2__headline {
color: white;
}
When you add <!doctype html> you need to be more careful with your html and css. First fix the span typo in the closing tag. But then you also need to add units to your font sizes in css:
For example:
.visit-card__part-1__table__tel-1__time {
font-size: 17px;
line-height: 1%;
}
It needs to be 17px not 17. I think there are three font sizes in your css with no units. Changing this should fix it.
I wanna to get element background value from javascript file.
I has three files -
html.html
css.css
js.js
html.html
<!DOCTYPE html>
<html>
<head>
<title> I'm Button! </title>
<link rel="stylesheet" type="text/css" href="css.css"/>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<div class="myBlock" onclick="heyJS()"></div>
</body>
</html>
css.css
.myBlock {
width: 300px; max-width: 100%;
height: 100px; max-height: 100%;
margin: 0 auto; margin-top: 100px;
font-size: 50px; font-weight: lighter; font-style: normal; text-align: center;
line-height: 100px; position: relative;
background-color: #83DF31;
}
js.js
function heyJS() {
alert(document.getElementsByClassName('myBlock')[0].style.backgroundColor);
}
After running the scrpit,I only get blank alert box.
How can i get div background value ?
You can replace your alert() with this
alert(window.getComputedStyle(document.getElementById('myBlock')).backgroundColor);
or
alert(window.getComputedStyle(document.getElementsByClassName('myBlock')[0]).backgroundColor);
And modify your html a little bit if you using the first one.
<div id="myBlock" class="myBlock" onclick="heyJS()"></div>
Try the following:
window.getComputedStyle(document.querySelector(".myblock")).getPropertyValue("background-color");
Please help to fix this error Web with blank space at bottom
Link: http://www.khohanghoa.com
I spent all day time to search and try to fix.
I tried set CSS
body {
font-size: 100%;
margin: 0;
padding: 0 }
but, it did not change
So, please help me
Thanks so much!
please apply top:0px on this div tag.
<div id="fb-root"></div>
<div style="left: -9999px; position: absolute;">
change this to like.
<div id="fb-root"></div>
<div style="left: -9999px; position: absolute;top:0px;">
Change the body css to the below and the white spacing would go away.
body {
background-color: #CCCCCC;
height: 0;
}
Hope this helps.
Remove position:relative in foundation.css at line 384
Just edit the follwing css it works fine
media="all"
body {
background: white;
color: #777777;
padding: 0;
margin: 0;
font-family: "Helvetica", Helvetica, Arial, sans-serif;
font-weight: normal;
font-style: normal;
line-height: 1;
position: relative; // delete this css
cursor: default;
}