Recently I have created my own html website for first time by learning from http://www.w3schools.com/ and http://www.tizag.com/htmlT/, however I am having trouble viewing my webpages in firefox and mobile devices. I really do not know where I am going wrong. Please suggest me how should I post my queries here, do I need to print my html texts here ? I am afraid it will be long total of 8 pages.
Many thanks in advance.
Riz
This is my Banner.html code and in Firefox, marquee creates malfunctioning, I guess there is lot of mistakes in my code, please advice me accordingly, thanks.
<!DOCTYPE html>
<html lang="en-US">
<head>
body {
background-color: #696969;
margin: 0px;
padding: 0px;
}
#banner {
width: 75%;
height: 170px;
display: block;
float: right;
}
h1 {
position: absolute;
color: #ffffff;
left: 20px;
top: 0px;
letter-spacing: 5px;
font-size: 50px;
float:left;
}
h3 {
position: absolute;
color: #ffffff;
text-shadow: 0 0 10px #ffd700;
left: 20px;
top: 78px;
letter-spacing: 2.4px;
float: left;
}
span {color: #ffd700;}
span.g {color:#ffffff; text-shadow: 0 0 10px #ffd700;}
</style>
</head>
<body>
<marquee loop="true" direction="up" scrollamount="2"><img id="banner" src="handshake1.jpg" alt="BannerImage"><img id="banner" src="web.jpg" alt="BannerImage"><img id="banner" src="art.jpg" alt="BannerImage"><img id="banner" src="flower.jpg" alt="BannerImage" style="height:230px"><img id="banner" src="apple.jpg" alt="BannerImage" style="height:230px"><img id="banner" src="green.jpg" alt="Banner Image"><img id="banner" src="ocean.jpg" alt="BannerImage" style="height:250px"></marquee>
<h1><span>Stack</span><span class="g">Overflow</span></h1>
<h3>Online & Communications</h3>
</body>
</html>
A typical mobile-optimized site contains something like the following:
<meta name="viewport" content="width=device-width, initial-scale=1">
For pages that set an initial or maximum scale, this means the width property actually translates into a minimum viewport width. For example, if your layout needs at least 500 pixels of width then you can use the following markup. When the screen is more than 500 pixels wide, the browser will expand the viewport (rather than zoom in) to fit the screen:
<meta name="viewport" content="width=500, initial-scale=1">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html lang="en-US">
<head>
<title>Stack Overflow Forums</title>
<meta name="google-site-verification" content="y4IbEwKh_krYR4qU0TDeK_R28IJCVCApOIuAm1w1n9c">
<meta name="viewport" content ="width=device-width,initial-scale=1,user-scalable=yes">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<meta content="Learning HTML, Website Tutorials" name="Keywords">
<meta content="Website Tutorials" name="keywords">
<meta content="HTML Training, etc.." name="description">
<meta http-equiv="refresh" content="1800">
</head>
<frameset rows="30%,70%">
<frame name="banner" src="banner.html" noresize scrolling="no">
<frame name="home" src="home.html">
</frameset>
</html>
You should be marking up your page properly, using body tags and getting away from framesets.
You'll get a much better output across mobile browsers and other browsers if it's all kept to strict HTML standards.
For example, a basic HTML page layout:
<html>
<head>
<title>Stackoverflow Forums</title>
</head>
<body>
<div id="banner">
// Your banner HTML
</div>
<div id="content">
// Your main content HTML
</div>
</body>
</html>
You can still use all of the things you had inside your head tag, but these will create divs that can be seen as 'blocks' that help separate sections of code.
This page is quite good to take a read through - http://www.w3schools.com/html/html_intro.asp
Related
I am working on a simple website for studying purposes. My goal is to keep all the code in a HTML5 format and use the new semantic tags as much as possible. In the code below the font and size changes that I make are not being reflected to the website, so no changes in the css is applied to the html page. I am not sure what is going on:
Here is the html and css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dasmoto's Arts & Crafts</title>
</head>
<body>
<header>
<span>Dasmoto's Arts & Crafts</span>
<img src="./resources/images/pattern.jpeg" alt="">
</header>
</body>
</html>
header {
position: relative;
}
header span {
position: absolute;
font-family: Arial, Helvetica, sans-serif;
color: khaki;
}
header img {
position: absolute;
width: 100%;
height: 150px;
}
I have the below HTML. For some reason the page is being rendered with the head as text like:
Document
* { display: block; width: 300px; } textarea { height: 300px; }
My Form
I've been searching for an explanation and think it could be because there is an error in the code in the head tag, so the never gets called and it is treated as part of the body, but I can't see any problem with it and VSCode doesn't show any errors.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
display: block;
width: 300px;
}
textarea {
height: 300px;
}
</style>
</head>
<body>
<h1>My Form</h1>
<form></form>
</body>
</html>
You can't use display, width and some more properties in "* (universal selector)". Replace * with body selector, it will work :)
I run your code on my system and the header is coming out bold just like it should... maybe you have to clear your browser cookies or try to open the code on an incognito window
.......
then for the
Document
{ display: block; width: 300px; } textarea { height: 300px; }
that is showing, i guess its an error so i removed the "*" and everything works fine... the working code is below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
{
display: block;
width: 300px;
}
textarea {
height: 300px;
}
</style>
</head>
<body>
<h1>My Form</h1>
<form></form>
</body>
</html>
I want to make this code good for all devices. If I open it with like a smartphone, it looks very bad.
If you can tell me something to improve too, I would appreciate it!
Here is my index and stylesheet.
Thanks!
index.html:
.background {
width: 99%;
height: 100%;
}
.title {
margin-top: 9%;
color: white;
font-family: "Lucida Console", "Courier New", monospace;
}
.subtitle {
margin-top: 1%;
color: #9c9c9c;
font-family: "Lucida Console", "Courier New", monospace;
}
.socials {
bottom: 0;
}
.fa {
padding: 20px;
font-size: 30px;
width: 1%;
height: 2%;
text-align: center;
text-decoration: none;
border-radius: 50%;
}
.fa:hover {
opacity: 0.7;
}
.fa-twitter {
background: #55ACEE;
color: white;
float: left;
clear: both;
}
.fa-telegram {
background: #34abdf;
color: white;
float: left;
clear: both;
}
.github {
margin-right: 55px;
}
<!DOCTYPE html>
<html>
<head>
<title>zDoctor_ | Developer</title>
<meta name="keywords" content="Minecraft, zDoctor, zDoctor_, Telegram, Github, Doctor, doctor">
<meta name="viewport" content="width=device-width">
<meta charset="UTF-8">
<link rel="stylesheet" href="css/stylesheet.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script async defer src="https://buttons.github.io/buttons.js"></script>
</head>
<body style="background-color: #262a2e" class="background">
<div class="title"><center><h1>zDoctor_</h1></center></div>
<div class="subtitle"><center><h3>Java & Web Developer(I think)</h3></center></div>
<div class="socials">
</div>
<div class="github">
<center><a class="github-button" href="https://github.com/zDoctor-Dev" data-size="large" aria-label="Follow #zDoctor-Dev on GitHub">Follow #zDoctor-Dev</a></center>
</div>
</body>
</html>
It says there is too much code and I need to add more details, but I don't know what to write ^^' so I'm just typing some random things.
One trick is to make absolutely everything relative to the viewport. That way you at least get a properly responsive site on all window aspect ratios.
Whether or not it looks OK on all sizes is something to be considered once you've done this - for a simple design, for example with lots of stuff just centered, you should not need to go into media queries.
You can't make a circle by having width in % and height in %, they are %s of different things so you won't get the underlying square you need. Think about using vmin for the units here and giving them each say 3vmin and see how it works out.
You can even define your font sizes in terms of vmin and they will adjust along with everything else (though be aware that going very very small wont work on some browsers).
So, if you find yourself using px, stop and reconsider.
Also look up more 'modern' ways of doing things like achieving centering and space filling. e.g. flex. Check that everything you are using is both standard and not deprecated. For example using HTML for formatting such as '<center'> isn't now the thing.
For the future, start thinking mobile first when you do a design - but as I say the design you have shown so far should be fine on a smaller viewport if you head for vmin.
edit your meta tag to this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
You can't simply improve like this. You have to add a meta tag for view port in HTML like: <meta name="viewport" content="width=device-width, initial-scale=1.0">In CSS you have a feature named media query like
#media screen and (min-width: /*Your size in which you want the thing to change*/930px) {
body {
/*Your command like mine is*/
background-color: black;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{
background-color: red;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>
The above code will change when the size will be decreased. You have to make one for yourself. This is my tip to use query string.
I feel like I'm going crazy, this is simple stuff yet it just refuses to work, I've done it a million times (although it's been awhile.)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<style type="text/css">
title {
background-color: #000000;
float: left;
margin: 5px;
padding: 15px;
overflow:auto;
}
</style>
<body>
<div class="title">
<p>
<img src="images/new/Salon.jpg" width="530" height="180" style="" border="0" />
</p>
</div>
</body>
</html>
The background color is not changing and that is literally all I've coded so far
You wrote
title {
instead of
.title {
I created a cocos2d-javascript game and am testing it on Chrome. The HTML of the webpage is
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Testing</title>
<link rel="icon" type="image/GIF" href="res/favicon.ico"/>
<meta name="viewport" content="width=100%, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="full-screen" content="yes"/>
<meta name="screen-orientation" content="landscape"/>
<meta name="x5-fullscreen" content="true"/>
<meta name="360-fullscreen" content="true"/>
<style>
body, canvas, div {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
width: 100%;
height: 100%;
margin: 0px;
}
</style>
</head>
<body style="padding:0; margin: 0; background: #000; width:100%; height:100%; margin: 0px;">
<script src="res/loading.js"></script>
<canvas id="gameCanvas" width="100%" height="100%"></canvas>
<script src="frameworks/cocos2d-html5/CCBoot.js"></script>
<script cocos src="main.js"></script>
</body>
</html>
As you can see, I set it up so that the canvas will fit the whole page. This is how the game looks (it is by default 500x500):
If I resize the window, the canvas will generally resize correctly. But sometimes it will have some sort or margin:
What is wrong? I imagine the problem is the HTML itself, rather than cocos2d.
It only seems to occur with Chrome. Firefox seems fine.
I am using Mac OSX Yosemite.
Try:
*, html {
margin:0 !important;
padding:0 !important;
}
And I would suggest removing the properties inside the body style attribute(just for cleanliness), and leaving just properties inside the style tag inside the head.