CODEWITHSUNDEEP
html
Rizin
Rizin

Reputation: 1

Trouble Viewing HTML Website in Firefox and mobile devices

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&nbsp;&#38;&nbsp;Communications</h3>
</body>
</html>

Upvotes: 0

Views: 73

Answers (2)

Jon Snow
Jon Snow

Reputation: 123

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>

Upvotes: 1

Lee
Lee

Reputation: 4323

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

Upvotes: 0

Related Questions