Web Development
>
Web Design, HTML and CSS
>
how to make my webpage appear on a correct resoltution for all 14 - 22 inch monitor
Have something to say? Contribute New Article Reply to this Article how to make my webpage appear on a correct resoltution for all 14 - 22 inch monitor
i m currenly using a 14 inch widescreen laptop to do my webpage designing but when i send my work to a friend of 22 inch monitor the appearance change totally. Anyone know what i can do bout it ?
"Once you start to seriously consider designing your Web page, rather than just throwing up a bunch of links in a bulletted list, most Web designers start to worry about what resolution to design for. And what this really ammounts to is trying to decide how wide to design your pages. "
http://webdesign.about.com/od/webdesign/a/aa080904.htm
This is a problem for everyone, and there are some ideas on the above page.
I usually use a fixed width (1024) by some prefer percentages.
There is no allowable tag for height, so don't worry about it.
well i use dreamweaver to design up one with 1250 x 1250 pixels and even on my 14 inch laptop screen it doesnt look good, where as i send it to my friend using a 22 inch monitor it look absurd.
Note* i m a newbie too a dreamweaver just started to learn recently =*
What do you mean, "It doesn't look good?"
Post a copy or a screenshot.
Don't use a height parameter. It's not supported by W3C, and 1250 is way too big for most surfers.
http://www.liamdelahunty.com/tips/html_table_height.php
Here i attached how it look it after i zoom in few times and how it originally look like.
I think first of all you need to reconsider using dreamweaver. I hate it, most people i work with hate it and the people i know who use it, use code style only.
I noticed or assume the use of tables as of what Siriyal is saying. Tables are dead baby, tables are dead! Well for design layout anyway.
You first need to have a think about your site, do you want it to look exactly the same on all sites with the same whitespace or are you happy for these parimeters to change a bit?
A fixed design is as yours is a specfic width. Fixed designs use specific widths so that the layout is of the same size no matter what the monitor resolution is. You would normally align these left or center. Imagine a block drawn on an A4 sheet of paper. Now increase that paper to A3 but leave the block at the same size. You would normally specifie the width and height of elements in pixels (px)
A liquid layout, and this is what i think your after flows to fill the entire available viewpoint. Imagine your bit of paper again with the block on the A4 sheet of paper, when you increase the paper size to A3 increase the block size to the same proportion. You would normally set the width and height of your design in % or em. It is important to take into account that a liquid layout will not change the proportions of your images and text so you will also need to space the contained elements by the same amount.
I hope this kind of makes sense, think I will go start a blog with common things like this so i can just point people towards that.
well omol i can still make changes or stuff on it hmm well let me point out something first this is just my second time using dreamweaver. when you say reconsider using dreamweaver do you mean that i shud use html to write it ?? i have just a little knowledge bout HTML. hm and siriyal how to change the table width from html side i m a bit confused now
heavenkid, can you copy and paste the code here? I will have a look for you and use your code as an example.
When i said don't use dreamweaver what i ment to say is it is also usful to know what is happening under the bonnet.
An alternative way to fix this would be to make the background black and to center the element.
heavenkid, can you copy and paste the code here? I will have a look for you and use your code as an example.
When i said don't use dreamweaver what i ment to say is it is also usful to know what is happening under the bonnet.
An alternative way to fix this would be to make the background black and to center the element.
________________________________________________________________________
Here are my codes for that particular thumbnail i posted
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.style2 {
color: #FFFFFF;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: large;
}
.style3 {color: #FFFFFF}
.style6 {color: #FFFFFF; font-family: Georgia, "Times New Roman", Times, serif; font-size: xx-large; }
.style8 {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
font-size: small;
}
.style11 { font-family: Arial, Helvetica, sans-serif;
color: #000000;
}
.style12 {font-family: Arial, Helvetica, sans-serif}
.style15 {font-size: small}
.style16 {font-family: Arial, Helvetica, sans-serif; font-size: x-large; color: #000000; font-style: italic; }
-->
</style></head>
<body>
<table width="100%" height="100%" border="0" bordercolor="#000000" background="mainbg2.jpg" bgcolor="#000000">
<tr>
<th height="133" colspan="3" bordercolor="#B92732" scope="col"><div align="left"></div>
<div align="center"><img src="ailp-logo.gif" width="201" height="166" /><img src="AUTOMOTIVE.gif" width="1000" height="150" /></div></th>
</tr>
<tr>
<th height="48" colspan="3" bordercolor="#527084" scope="row"> </th>
</tr>
<tr>
<th width="225" height="903" bordercolor="#527084" scope="row"><div align="right">
<p><img src="words.png" width="205" height="225" /><img src="introbut.png" width="204" height="88" /></p>
<p><img src="contentbut.png" width="204" height="88" /></p>
<p><img src="indexbut.png" width="204" height="88" /></p>
<p><img src="gallerybut.png" width="204" height="88" /></p>
<p><img src="video.png" width="204" height="88" /></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div></th>
<th width="983" bordercolor="#000000" background="mainplate.png" scope="row"><p align="left" class="style12"> </p>
<p align="left" class="style16">Welcome to our website</p>
<p align="left" class="style8">First of all we welcome you to our website with a catchy flash and a series of guides. You can take</p>
<p align="left" class="style8"> this as an online book which contains information like an ordinary book with exception of internet </p>
<p align="left" class="style8">links and its convenience.Have fun reading from our site. </p>
<p align="left" class="style11"> </p>
<p align="left" class="style16">About us</p>
<p align="left" class="style8"><span class="style15">We are a group of ICT students from SVSB, Sekolah Vokasional Sultan Bolkiah and we are the </span></p>
<p align="left" class="style8"><span class="style15">developers of the</span> "AILP" <span class="style15">which is </span>"Automotive Interactive Learning Package". <span class="style15">Our </span>main aim is to </p>
<p align="left" class="style8">develop a website which can aid instructors and students from different schools in developing interest </p>
<p align="left" class="style8">in the Automotive field. Our main aim of the website was to actually remove the manual system used</p>
<p align="left" class="style8"> in our school and replace it with computerized system for the convenience of our instructor. Therefore </p>
<p align="left" class="style8">we come up with the idea of "AILP".</p>
<p align="left" class="style11"> </p>
<p align="left" class="style16">What is this about</p>
<p align="left" class="style8">This website is dedicated to Automotive Topics such as " Car engine " which we will provide a detail </p>
<p align="left" class="style8">explaination on the major componentsbof the engine. Topics covered will be clearly stated in the </p>
<p align="left" class="style8">index area for easy navigation and convenient browsing. </p></th>
<th width="20" bordercolor="#000000" scope="row"><div align="left">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div></th>
</tr>
<tr>
<th height="69" colspan="3" bordercolor="#527084" scope="row"><p align="center" class="style6">Home | About us | Help | Contact Us | Credit </p>
<p align="center" class="style2">Copyright <span class="style3">© SVSB </span></p> </th>
</tr>
</table>
</body>
</html>This article has been dead for over three months
You
© 2012 DaniWeb® LLC
