5 Replies - 2021 Views - Last Post: 27 May 2014 - 04:24 PM

#1 jcalder54   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 27-May 14

Force Web Page To Fit All Screens

Posted 27 May 2014 - 04:51 AM

Hi

I have created a web page in Frontpage 2003. I am an novice in web page design. I am hoping that someone can tell me what I need to do to my code to force the page to display on all screens including smartphones. I have linked a blank css file to my index page (although I don't really understand what it does) I only did this because I seen some people say the code should be in a css file. I am absolutely confused with this. Thank you in advance.

John

This is my code:

<html>

<head>

<meta name="google-site-verification" content="VVPsKRykjDTSwPecn-HWaC6fTpajgHtWsusRl-NblWQ" />
<meta http-equiv="Content-Language" content="en-au">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Simple Blasting Solutions</title>
<style>
<!--
body{color:#000;margin:0}body{background:#fff}body{font-size:small;font-family:arial,sans-serif}body{color:#222}#cnt{clear:both}#cnt{min-width:833px;margin-left:0;padding-top:0;}#cnt{position:relative}a:link{color:#1e0fbe}a:link{cursor:pointer}-->
</style>
<meta name="keywords" content="&quot;sand&quot;,&quot;blasting&quot;,&quot;abrasives&quot;,&quot;airless&quot;,&quot;garnet&quot;,&quot;blasting solutions&quot;,&quot;blast nozzle&quot;,&quot;abrasive blasting equipment&quot;,&quot;Sandblasting&quot;,&quot;Sandblasting Supplies&quot;,&quot;Blasting,Nova 200&quot;,&quot;Surface Profile&quot;,&quot;Airless spray&quot;,&quot;Spray Gun&quot;,&quot;Paint Gun&quot;,&quot;Paint&quot;,&quot;Sandblasting Cabinet&quot;,&quot;Blasting Cabinet&quot;,&quot;Dust Collection&quot;,&quot;Dust Extraction&quot;,&quot;Abrasive Recycling&quot;,&quot;Containment Sheeting&quot; ">
<link rel="stylesheet" type="text/css" href="new_page_1.css">
</head>

<body bgcolor="#000000" style="background-color: #000000">

<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<table border="0" width="100%" cellpadding="0" style="border-collapse: collapse">
	<tr>
		<td width="327" bgcolor="#000000">
<img border="0" src="Capture4.JPG" width="123" height="144" align="right"></td>
		<td bgcolor="#000000">
		<p align="center">
		<img border="0" src="cooltext%203.gif" width="1210" height="57"></td>
		<td width="299" bgcolor="#000000">
		&nbsp;</td>
	</tr>
</table>
<p align="center"><b><font face="Arial" color="#6699FF" size="4">For all your 
abrasive blasting enquires contact Simple Blasting Solutions and Consulting</font></b></p>
<p align="center"><b><font color="#6699FF" face="Arial" size="4">PO BOX 183 Oak 
Flats NSW 2529</font></b></p>
<p align="center" style="margin-bottom: 6px"><b><font color="#6699FF" face="Arial" size="4">
ABN 61 657 763 526</font></b></p>
<p align="center" style="margin-bottom: 6px">&nbsp;</p>
<p align="center" style="margin-bottom: 6px"><b><font face="Arial" size="6" color="#6699FF">ROB CASEY</font></b></p>
<p align="center" style="margin-bottom: 6px">&nbsp;</p>
<p align="center" style="margin-bottom: 6px">
<img border="0" src="Mobile%20Number.png" width="341" height="74"></p>
<p align="center" style="margin-bottom: 6px">&nbsp;</p>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
	<tr>
		<td width="720"><font color="#6699FF" face="Arial" size="5"><b>
		<img border="0" src="EMAIL%201.jpg" width="55" height="57" align="right"></b></font></td>
		<td width="482">
		<p align="left"><font color="#6699FF" face="Arial" size="5"><b>&nbsp;</b><span style="letter-spacing: 1pt; font-weight: 700"><font color="#6699FF"><a href="mailto:[email protected]"><font color="#6699FF">[email protected]</font></a></font></span></font></td>
		<td>&nbsp;</td>
	</tr>
</table>
<p align="center">&nbsp;</p>
<p align="center"><b><font face="Arial" color="#6699FF" size="4">20 years 
protective coating industry experience</font></b></p>
<p align="center"><b><font face="Arial" size="4" color="#6699FF">Servicing New 
South Wales</font></b></p>
<p align="center"><b><font face="Arial" color="#6699FF" size="4">Wide range of 
blasting solutions</font></b></p>
<p align="center"><b><font face="Arial" size="4" color="#6699FF">Extensive range of equipment and consumables</font></b></p>
<p align="center"><i><b><font face="Arial" size="4" color="#6699FF">(Including 
coating application equipment)</font></b></i></p>
<p align="center"><b><font face="Arial" size="4" color="#6699FF">Proud NSW 
Distributor for ABSS. &nbsp;Australia's fastest growing Abrasive Blasting Equipment 
Manufacturer</font></b></p>
<p align="center"><b><font face="Arial" size="4" color="#6699FF">&nbsp;and 
Supplier of Quality Products and Accessories&nbsp;for all Abrasive Blasting 
Applications.</font></b></p>
<p align="center">&nbsp;</p>
<p align="center"><i><b><font face="Times New Roman" color="#6699FF" size="5">Let Simple 
Blasting Solutions &amp; Consulting take care of all your blasting and consumable 
requirements</font></b></i></p>

</body>

</html>

This post has been edited by Dormilich: 27 May 2014 - 05:26 AM
Reason for edit:: please use [code] [/code] tags when posting code


Is This A Good Question/Topic? 0
  • +

Replies To: Force Web Page To Fit All Screens

#2 Atli   User is offline

  • Enhance Your Calm
  • member icon

Reputation: 4240
  • View blog
  • Posts: 7,216
  • Joined: 08-June 10

Re: Force Web Page To Fit All Screens

Posted 27 May 2014 - 06:28 AM

Hey.

This is a somewhat complicated issue, one which won't have a simple answer. The search phrase you are looking for here is "Responsive design", which represents the techniques used to make websites work across different screen types. You can't simply take the same exact layout you would display on a large HD desktop monitor and magically shrink it down to fit a 5 inch smartphone screen. You need to reduce or re-arrange the content for that. You need to user certain CSS and/or Javascript techniques to get that working.


Also, the HTML you posted looks ancient. You are using a lot of very outdated methods there. Anything that defines styling inside the HTML markup should not be there, like the <font> tag and attributes such as bgcolor and width. All of that should be done in CSS. (External CSS is best, though you can also get away with using <style> tags.)
Was This Post Helpful? 1
  • +
  • -

#3 jcalder54   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 27-May 14

Re: Force Web Page To Fit All Screens

Posted 27 May 2014 - 07:33 AM

Thank you Atli for your prompt response. Unfortunately for me your explanation is beyond me. I have constructed this web page in Microsoft Frontpage 2003 which creates the HTML automatically so I cant really avoid it being out dated.

I will do a search on Responsive Design as you have suggested and see if that helps me.


Microsoft Frontpage allows me to create a separate css file which can be linked to the web page. If I understand what you are saying any code that I need to achieve a fluid web page must be written in the css file? is that correct?

Thank You

John
Was This Post Helpful? 0
  • +
  • -

#4 Atli   User is offline

  • Enhance Your Calm
  • member icon

Reputation: 4240
  • View blog
  • Posts: 7,216
  • Joined: 08-June 10

Re: Force Web Page To Fit All Screens

Posted 27 May 2014 - 07:50 AM

You really really should not be using Frontpage 2003. It was always kind of a crappy editor to begin with, and it's now some 11 years old. It's a horrible tool to be using.

If you want WYSIWYG editors, try the latest Adobe Dreamweaver. I usually advice people that are learning web development to stay away from it in the beginning, on account of it kind of getting in the way of people actually learning the technologies (people tend to get overly attached to the visual tools), but compared to Frontpage, it's an extreme improvement.

Quote

If I understand what you are saying any code that I need to achieve a fluid web page must be written in the css file? is that correct?

No. All web development is a combination of HTML, CSS and (optionally) Javascript. The HTML defines the structure, the CSS defines the styling/layout, and the Javascript defines the behavior. In order to do a decent Responsive Design, you will usually need all three.

Like I say, there is no really simple answer. Responsive designs are not really a beginner level topic; they require a certain level of knowledge of the basics to make sense. You need to understand how these technologies work together.
Was This Post Helpful? 0
  • +
  • -

#5 Atli   User is offline

  • Enhance Your Calm
  • member icon

Reputation: 4240
  • View blog
  • Posts: 7,216
  • Joined: 08-June 10

Re: Force Web Page To Fit All Screens

Posted 27 May 2014 - 08:01 AM

One thing worth mentioning in this context are libraries like Bootstrap. They can often take care of some of the complexities of setting up sites for multiple screen sizes. You'll still need working understanding of the core web-development technologies (HTML, CSS and Javascript) to use them, but they can be used pretty effectively in setting up responsive designs without a lot of hassle.
Was This Post Helpful? 0
  • +
  • -

#6 jcalder54   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 27-May 14

Re: Force Web Page To Fit All Screens

Posted 27 May 2014 - 04:24 PM

Once again thank you Atli. What started out as a simple one page webpage for a friend has become a major headache for me. It seems that I have a mountain of learning to do before I can tackle a project like this. I will definitely take up your advice and have a look at Adobe Dreamweaver. My background is mainly IT and data analysis so something I can pick up ok, however I have no knowledge of HTML code other than to copy and paste it.

This may be one bridge too far.

Thanks again you have been very helpful.

John
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1