PDA

Click to See Complete Forum and Search --> : Adjust window to resolution

toplisek
10-24-2005, 08:07 AM
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="images/spacerb.gif" width="10"></td>
<td align="left" valign="middle" bgcolor="#809AFF" width="400">
<!--1024x768 is 400x57--><!--800x600 is 340x48-->
<img src="images/head.gif">
</td>
<td align="left" valign="middle" bgcolor="#809AFF"><img alt="" src="images/spacerbheader.gif" width="93"></td>
<td align="right" bgcolor="#809AFF" width="470">
<!--1024x768 is 470x63--><!--800x600 is 368x49-->
<IMG SRC="images/banner1.gif" ALT="Banner1.gif - 9321 Bytes"> </td>
<td align="left" valign="middle" bgcolor="#809AFF"><img alt="" src="images/spacerb.gif" width="10"> </td>
</tr>
<!--End Header-->
</table>


<table border="0" height="1">
<tr>
<td height="1"><img alt="" src="images/spacerw.gif" width="1" height="1"></td>
<td height="1"><img alt="" src="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="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="images/spacerw.gif" width="20" height="10"></td>
</tr>


<!-- #End Main window-->


<tr bgcolor="#809AFF">
<td width="20">&nbsp;</td>
<td height="35" align="center" valign="middle" class="footer">My website
</td>
<td bgcolor="#809AFF"width="20">&nbsp;</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:
JPnyc
10-24-2005, 09:34 AM
Use % for all your values.
toplisek
10-24-2005, 10:19 AM
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?
LiLcRaZyFuZzY
10-24-2005, 10:56 AM
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?
toplisek
10-24-2005, 11:07 AM
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="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="images/spacerw.gif" width="20" height="10"></td>
</tr>


<!-- #End Main window-->


<tr bgcolor="#809AFF">
<td width="20">&nbsp;</td>
<td height="35" align="center" valign="middle" class="footer">My website
</td>
<td bgcolor="#809AFF"width="20">&nbsp;</td>
</tr>
</table>
LiLcRaZyFuZzY
10-24-2005, 11:48 AM
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 like
toplisek
10-24-2005, 04:23 PM
I would like to transform above table to DIV tags. Can you suggest me how to do it?
LiLcRaZyFuZzY
10-24-2005, 05:20 PM
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 (http://www.w3schools.com/tags/default.asp).

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.
LJK
10-24-2005, 05:35 PM
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,
El
LiLcRaZyFuZzY
10-24-2005, 06:57 PM
and don't forget the doctype declaration!
toplisek
10-25-2005, 05:46 AM
Just this question:
I have HEADER and within it , should be two images
<img alt="" src="images/logo.gif" width="304" height="60">
<img alt="" src="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="images/logo.gif" width="304" height="60">
</td>
<td align="right" width="287"><img alt="" src="images/header.jpg" width="287" height="119"></td>
</tr>

</table>