Adjust window to resolution

L

liunx

Guest
I have CSS lik e.g.:

body
{margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;background-color:#DDE8FF}

.footer
{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #DDE8FF; text-decoration: none}

.footer:hover { color: #CCCCCC}


and my page:

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
<meta name="description" content="">

<title>My website</title>

</head>

<body>

<!--Start Header-->
<table bgcolor="#809AFF">
<tr bgcolor="#809AFF" height="80">
<td align="left" valign="middle" bgcolor="#809AFF"><img alt="" src=http://www.webdeveloper.com/forum/archive/index.php/"images/spacerb.gif" width="10"></td>
<td align="left" valign="middle" bgcolor="#809AFF" width="400">
<!--1024x768 is 400x57--><!--800x600 is 340x48-->
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/head.gif">
</td>
<td align="left" valign="middle" bgcolor="#809AFF"><img alt="" src=http://www.webdeveloper.com/forum/archive/index.php/"images/spacerbheader.gif" width="93"></td>
<td align="right" bgcolor="#809AFF" width="470">
<!--1024x768 is 470x63--><!--800x600 is 368x49-->
<IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"images/banner1.gif" ALT="Banner1.gif - 9321 Bytes"> </td>
<td align="left" valign="middle" bgcolor="#809AFF"><img alt="" src=http://www.webdeveloper.com/forum/archive/index.php/"images/spacerb.gif" width="10"> </td>
</tr>
<!--End Header-->
</table>


<table border="0" height="1">
<tr>
<td height="1"><img alt="" src=http://www.webdeveloper.com/forum/archive/index.php/"images/spacerw.gif" width="1" height="1"></td>
<td height="1"><img alt="" src=http://www.webdeveloper.com/forum/archive/index.php/"images/spacerw.gif" width="1" height="1"></td>
</tr>

</table>


<!-- #Begin Main window-->
<table width="100%" border="0" cellspacing="0" cellpadding="5" bgcolor="#FFFFFF">
<tr>
<td bgcolor="#FFFFFF" width="20"><img alt="" src=http://www.webdeveloper.com/forum/archive/index.php/"images/spacerw.gif" width="20" height="10"></td>
<td bgcolor="#FFFFFF" align="left" valign="top" class="text" height="309" width="99%"><br>
<!--Start Middle page-->
<p class="title">...</b> </p>
<!--End Middle page-->
</td>
<td bgcolor="#FFFFFF" width="20"><img alt="" src=http://www.webdeveloper.com/forum/archive/index.php/"images/spacerw.gif" width="20" height="10"></td>
</tr>


<!-- #End Main window-->


<tr bgcolor="#809AFF">
<td width="20"> </td>
<td height="35" align="center" valign="middle" class="footer">My website
</td>
<td bgcolor="#809AFF"width="20"> </td>
</tr>
</table>
</body>
</html>


Can you please help me, how to do that HEADER will move according to resolution? It works when I have 1024x768, but 1152x864 it goes HEADER to much left (also with 1280x1024) and when I have 800x600 it is too big. Please help. :rolleyes:Use % for all your values.I will do, thanks,
I have question how to do such page with DIV TAGS? I'm new to this, but I read that it is loaded page faster because for advanced users and design professionals designing using CSS styles and div tags is a must for optimal results of load time and to follow W3C standards.
Please advise me how to do it?yep! how is it supposed to look like?
i tried your code, and it looks pretty messy, might partly be because of the missing graphics.
any links to it?No,there is no link. I just test page outlook and would like to do it with
CSS styles and div tags. Can you help me how to start if I have this simple code?

<!-- #Begin Main window-->
<table width="100%" border="0" cellspacing="0" cellpadding="5" bgcolor="#FFFFFF">
<tr>
<td bgcolor="#FFFFFF" width="20"><img alt="" src=http://www.webdeveloper.com/forum/archive/index.php/"images/spacerw.gif" width="20" height="10"></td>
<td bgcolor="#FFFFFF" align="left" valign="top" class="text" height="309" width="99%"><br>
<!--Start Middle page-->
<p class="title">...</b> </p>
<!--End Middle page-->
</td>
<td bgcolor="#FFFFFF" width="20"><img alt="" src=http://www.webdeveloper.com/forum/archive/index.php/"images/spacerw.gif" width="20" height="10"></td>
</tr>


<!-- #End Main window-->


<tr bgcolor="#809AFF">
<td width="20"> </td>
<td height="35" align="center" valign="middle" class="footer">My website
</td>
<td bgcolor="#809AFF"width="20"> </td>
</tr>
</table>what about you compress the whole directory(or just the necessary files) and post it, so i'll be able to see how you want it to look likeI would like to transform above table to DIV tags. Can you suggest me how to do it?yes:
start by not using tables and think of the purpose of the tags. If you are unsure of the purpose of a specific tag, you can check the html 4.01 tags reference (<!-- m --><a class="postlink" href="http://www.w3schools.com/tags/default.asp">http://www.w3schools.com/tags/default.asp</a><!-- m -->).

For example,
Use heading for "headings" and "titles", etc..
Use lists for listed elements, (e.g. your favorites meals), as opposed to text and then a <br> tag.
Also use lists for menu's
Use paragraphs for text paragraphs, and labels for form labels, etc..

Once you use correct markup, style it with CSS.Hi -
This is just an idea to get you started - using an internal style sheet so you can see them:

<html>
<head>
<title>table test conversion</title>
<style type="text/css">
body{
background:silver none; width:100%; height:100%; margin:0; padding:0;
font-size:100%; text-align:center;}
div.contain{
width:100%; margin:0 auto; font-family:"arial", "helvetica", sans-serif;}
div.left{
width:15%; margin:0 auto; float:left; background:#99cc99 none; height:600px;}
div.center{
width:70%; margin:0 auto; float:left; background:gray none; height:600px;}
div.right{
width:15%; margin:0 auto; float:left; background:#99cc99 none; height:600px;}
div.foot{
width:100%; clear:both; margin:0 auto; background:#809aff none; height:50px;}
</style>
</head>
<body>
<div class="contain">
<div class="left">
<p>This is left side content.</p>
</div>
<div class="center">
<p>This is center/main div content.</p>
</div>
<div class="right">
<p>This is right side content.</p>
<br style="clear:both;" />
</div>
<div class="foot">
<p>And here is a footer...</p>
</div>
</div>
</body>
</html>


Hope it helps,
Eland don't forget the doctype declaration!Just this question:
I have HEADER and within it , should be two images
<img alt="" src=http://www.webdeveloper.com/forum/archive/index.php/"images/logo.gif" width="304" height="60">
<img alt="" src=http://www.webdeveloper.com/forum/archive/index.php/"images/header.jpg" width="287" height="119">


Code is the following in CSS for HEADER:

div.header { width:100%; margin:0 auto; font-family: Verdana, Arial, Helvetica, sans-serif;
color: #809AFF; height:119px;}


within header there should be two columns with image in each column. How to do it? I'm new to this...

Equal is in case of table:

<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td height="119" align="left" valign="middle" bgcolor="#FFFFFF"> <img alt="" src=http://www.webdeveloper.com/forum/archive/index.php/"images/logo.gif" width="304" height="60">
</td>
<td align="right" width="287"><img alt="" src=http://www.webdeveloper.com/forum/archive/index.php/"images/header.jpg" width="287" height="119"></td>
</tr>

</table>
 
You must log in or register to reply here.
Back
Top