I want to add pasted text (that text goes down when user goes down of the page, etc.) at the top of my page, when somebody haven't got enabled JavaScript, something like that :
How to do this ? Is there any way to that using JavaScript or HTML ? I want not to use jQuery, because I don't know that language so good.
#EDIT : Sorry, that was my error - that cannot use JavaScript if user doesn't have JS enabled :)
This is a sample how you can make a info bar like SO:
HTML:
<noscript><div id="noscript"><p>NO JAVASCRIPT</p></div></noscript>
CSS:
div#noscript {
margin: 0 auto;
width: 100%;
padding: 10px 0;
position: fixed;
top: 0;
background: red;
z-index: 99999;
}
div#noscript p {
text-align: center;
color: white;
}
Here the JSfiddle
http://jsbin.com/AJUxayA/6/edit
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="no_js_header">test</div>
<div id="content">content</div>
<div style="margin-top: 2200px"></div>
</body>
</html>
#no_js_header {
position:fixed;
width:100%;
background-color:red;
margin: 0px;
top: 0px;
left: 0px;
padding: 3px;
}
#content {
position: absolute;
top: 50px;
}
(uncomment for activation in the jsbin)
document.getElementById('no_js_header').style.display = 'none';
You can try using the noscript tag...
<noscript>
<div>
<p>ahhh, javascript is disabled!</p>
</div>
</noscript>
Related
EDIT: Fixed it, I am daft. It was because h1 is below the div.
So I was making some web page for a school project and I keep running into this annoying problem, I am trying to make an image gallery on the page with multiple thumbnails all in ordered categories on a page. e.g. since it is video game themed it should be like heroes and maps. Problem is when I place an image, the image pushes the text I had at the top of the screen under it, probably a really simple solution to this just need a bit of help. thanks. here is the link
CSS:
#font-face {
font-family: bigNoodle;
src: url(Font/big_noodle_titling_oblique.ttf);
}
#splash {
z-index: 100;
position: absolute;
background: white url('Pictures/logo.png') center no-repeat;
top: 0;
right: 0;
left: 0;
bottom: 0;
font-family: bigNoodle;
color: #939393;
padding: 10px;
font-size: 40px;
}
body {
background: url('Pictures/bg.jpg') center fixed no-repeat;
}
h1 {
z-index: 1;
font-family: bigNoodle;
text-align: center;
text-transform: uppercase;
font-size: 60px;
color: #F99E1A;
padding-top: 10px;
margin: 0;
padding: 0;
}
div.picture img {
height: 200px;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type='text/javascript' src='anim.js'></script>
<title>Wiki</title>
<link rel="icon" type="image/x-icon" href="Pictures/logo.png" />
</head>
<body>
<div id="splash">Click to continue...</div>
<div class="picture">
<img src="Pictures/Heroes.jpg">
</div>
<h1>Welcome</h1>
</body>
</html>
You can achieve it in multiple ways
Way 1:
You can apply z-index for text
for instance text 'welcome' is there inside h1
h1
{
z-index:999;
}
way 2:
take your image as background of div
https://jsfiddle.net/ogyk1914/
I noticed that whenever I put <!DOCTYPE html> on my html document, the footer disappears. And I need to get no errors whenever I validate, so how do I fix this? thank you
The footer is show below.
#footer {
font-weight: bold;
color: white;
text-align: center;
padding: 5px;
position: fixed;
left: 0;
bottom: 20;
width: 100%;
background-color: gray;
border: 2px solid blue;
}
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="footer">
<button onclick="myFunction()">Privacy/Disclaimer Statement</button>
<script>
function myFunction() {
alert("David's Pet Store will never share any of your private information outside of its committee. The website builder is also protected from any incorrect information posted by a pet owner.");
}
</script>
<br>David's Pet Store - 2016
<br>
</div>
</body>
</html>
Is that what you need ? your code is 100% correct but u may forgot px so that problems appear try my code for 0px at buttom or 20px as you need ^_^
#footer {
font-weight: bold;
color: white;
text-align: center;
padding: 5px;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: gray;
border: 2px solid blue;
}
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="footer">
<button onclick="myFunction()">Privacy/Disclaimer Statement</button>
<script>
function myFunction() {
alert("David's Pet Store will never share any of your private information outside of its committee. The website builder is also protected from any incorrect information posted by a pet owner.");
}
</script>
<br>David's Pet Store - 2016
<br>
</div>
</body>
</html>
or u can see Fiddle for 20px at buttom
Good morning everyone,
I have a quick question about some background images in MapBox. For those who don't know MapBox, it is a online provider of custom maps that quickly create beautiful interactive maps and data visualizations. I created a map project, and wanted to put that map as a background image. I am given an embed option and here is my code so far:
<!DOCTYPE html>
<html>
<head></head>
<body>
<iframe width='100%' height='800px' frameBorder='0' src='https://a.tiles.mapbox.com/v4/ericpark.k8ehofdl/attribution,zoompan,zoomwheel,geocoder,share.html?access_token=pk.eyJ1IjoiZXJpY3BhcmsiLCJhIjoiS3pKZ0duVSJ9.tLg7r9w5zppYheaOYcv_DA'></iframe>
</body>
</html>
However, I want the Mapbox html to take the entire background.I have tried placing the url provided into a background-image: url() in css, but it does not function.
body {
background-image: url("https://a.tiles.mapbox.com/v4/ericpark.k8ehofdl/attribution,zoompan,zoomwheel,geocoder,share.html?access_token=pk.eyJ1IjoiZXJpY3BhcmsiLCJhIjoiS3pKZ0duVSJ9.tLg7r9w5zppYheaOYcv_DA");
}
Does anyone know how I might do this?
Thanks,
Eric
Jon here from Stack - I actually do most of the geo stuff here.
If you want to do this the proper way, you're going to have to embed it in a div and put the content that you want over it in its own container div. You can see a pretty straightforward implementation of what you want in the API docs on Mapbox. You can adjust the settings of the map using the JavaScript API (hiding the controls, setting the center, etc.).
L.mapbox.accessToken = 'pk.eyJ1IjoiZXJpY3BhcmsiLCJhIjoiS3pKZ0duVSJ9.tLg7r9w5zppYheaOYcv_DA';
var map = L.mapbox.map('map-container', 'ericpark.k8ehofdl');
html,
body {
height: 100%;
margin: 0px;
padding: 0px
}
#map-background,
#map-container,
#map-overlay,
#content {
width: 100%;
min-height: 100%;
position: absolute;
}
#map-background {
z-index: -1;
}
#map-container {
z-index: 0;
}
#map-overlay {
z-index: 1;
background: none;
}
#content {
z-index: 0;
}
<html>
<head>
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css' rel='stylesheet' />
</head>
<body>
<div id="map-background">
<div id="map-container">
</div>
<div id="map-overlay">
</div>
</div>
<div id="content">
<!-- This is where your regular content should be -->
<p style="color: #fff; text-align: center; font-family: Helvetica; font-size: 2.0em;">This is where your foreground code should be.</p>
</div>
</body>
</html>
Good luck Eric :)
EDIT: Restoring interactivity
I've changed the code to get rid of the overlay and some of the blocking styles. Try that.
L.mapbox.accessToken = 'pk.eyJ1IjoiZXJpY3BhcmsiLCJhIjoiS3pKZ0duVSJ9.tLg7r9w5zppYheaOYcv_DA';
var map = L.mapbox.map('map-container', 'ericpark.k8ehofdl');
html,
body {
height: 100%;
margin: 0px;
padding: 0px
}
#map-container {
width: 100%;
min-height: 100%;
position: absolute;
}
#content {
position: absolute;
}
<html>
<head>
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css' rel='stylesheet' />
</head>
<body>
<div id="map-container">
</div>
<div id="content">
<!-- This is where your regular content should be -->
<p style="color: #fff; text-align: center; font-family: Helvetica; font-size: 2.0em;">This is where your foreground code should be.</p>
</div>
</body>
</html>
To mimic a "background-image" effect with mapbox you could do something like the following:
<!DOCTYPE html>
<html>
<head>
#map_bg {
position:relative;
width:100%;
height:800px;
}
#map_bg iframe {
position:absolute;
top:0px;
left:0px;
height:100%;
width:100%;
}
.content {
z-index:1;
position:relative;
}
</head>
<body>
<div id="map_bg">
<iframe class="mapbox" frameBorder='0' src='https://a.tiles.mapbox.com/v4/ericpark.k8ehofdl/attribution,zoompan,zoomwheel,geocoder,share.html?access_token=pk.eyJ1IjoiZXJpY3BhcmsiLCJhIjoiS3pKZ0duVSJ9.tLg7r9w5zppYheaOYcv_DA'></iframe>
<div class="content">
This is other content on the page.
</div>
</div>
</body>
</html>
You position the map absolutely relative to it's parent which allows content to overlap it (much like a background image). By adding a z-index:1 to the other content you can ensure it appears on top of the map;
I dont think just putting link as background image will work. Mapbox might be rendering map in canvas.
I just found this. Try this. I am not much familiar with mapbox
I am trying to make a website for school about gothic cathedrals, and can not get the css class to work. I am trying to make a menu on the side of the page that will stay in the same position, and just typed 'hi' to test it. Nothing I have looked up is working and it would be greatly appreciated if someone could tell me what I'm doing wrong.
<html type = "text/css">
<head>
<script>
div.mydiv {
color: red;
position: fixed;
left: 0;
top: 200px; /* 200px from top */
}
</script>
<title>
Cathedral Project
</title>
</head>
<body>
<h1>
<marquee behavior = "alternate" style = "background-color:#828180" scrolldelay = "1">
<img src="gothic.jpg">
</marquee>
</h1>
<div class="mydiv">hi
</div>
</body>
</html>
Currently your css is in a <script> tag. It needs to be in a <style> tag. It should look like this:
<style type="text/css">
.mydiv { /* styles go here */ }
</style>
Change
<script>
div.mydiv {
color: red;
position: fixed;
left: 0;
top: 200px; /* 200px from top */
}
</script>
To
<style>
div.mydiv {
color: red;
position: fixed;
left: 0;
top: 200px; /* 200px from top */
}
</style>
You place your CSS code in the <style type="text/css"></style> tag, not in the <script></script> tag.
And it would be great for you if you indent the code, it will help you not making silly errors like missing the tags.
I am trying to place a solid color banner that stretches across the top of the screen like on this website, facebook, and others. For some reason I am encountering difficulties doing this
I created a div tag in my HTML file for the banner and tried to apply CSS to the div tag but nothing is working.
<!DOCTYPE html>
<html>
<head>
<style>
#banner {
background-color: #333FF;
font-family: Arial;
position: absolute;
left: 0;
right: 0;
padding:15px;
height:800px;
background-size:100%;
}
</style>
<title>Random Password Generator</title>
</head>
<body>
<div id="banner"><h1>fdsfdsfdsfds</h1></div>
</body>
</html>
I also tried linking to an external CSS file but that isn't working either.
How can I make a simple, solid color banner at the top of the page, on every page?
#333FF is an incorrect color. It should be like this: #333FFF. See the W3C Specification for more info on the length of hex codes (hint: they need to be six characters long).
Working example : http://jsfiddle.net/ntim/SKnxP/
position:absolute; also doesn't seem necessary in your case.
You don't actually need to use position absolute unless you want it to be over the top of anything. Instead, you can just use the following:
<style>
#banner {
background-color: #333FFF;
font-family: Arial;
padding:15px;
height:800px;
background-size:100% 100%;
}
</style>
here is something based on a template I use:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="CSS-STYLE-SHEET.css">
<style type="text/css">
body
{
background-color: #E7E7E7;
text-align: center;
font-family: Arial, Helvetica;
font-size: 15px;
color: #000000;
border-spacing: 0;
border-collapse:collapse;
padding: 0;
margin: 0;
}
#Banner {
background-color: #333FFF;
top: 0; /* Probably not necessary... */
height: 40px;
width: 100%; /* Also probably not necessary */
}
#ContentMain
{
background-color: #FFFFFF;
height: 100%;
}
</style>
</head>
<body>
<div id="ContentMain">
<div id="Banner">Banner goes here</div>
Content goes here
</div>
</body>
</html>
should work.. the grey bit at the back is because the html and body tags dont fill the entire screen - something like this should fix it (I would use min-height), but I have not included it here as then if you want a page taller than the browser window and works in Internet Explorer things get annoying...
Jsfiddle here