PDA

View Full Version : problem

comicw
09-15-2002, 01:31 PM
Hi,

Once again, I have a table problem. I've made a table with some kind of menu in a cell on the right. The problem is: when the screen resolution changes, the table moves down. How can I prevent this?

Here you'll find the code for the layout of my page, so you can take a look and maybe 'streamline' it a bit to help me out, so that there aren't any of the problems mentioned above.
(I'm from Belgium so the text in the java menu is in dutch)




<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Beleggingsvisie</title>

<style type="text/css">
<!--
.menu {font-family:Verdana; font-weight: bold; text-align:right}

.menu a{text-decoration:none; color: white; font-size: 8pt}
-->
A.text:link {font-family: "Tahoma"; color: #003399; font-size: 10pt}
A.text:visited {font-family: "Tahoma"; color: #003399; font-size: 10pt}
A.text:hover {font-family: "Tahoma"; color: #0099FF; font-size: 10pt}
A.text:active {font-family: "Tahoma"; color: #003399; font-size: 10pt}

P.txt {font-family: "Tahoma"; font-size: 10pt; text-align: justify}

</style>
<script language="javascript">
<!--

function movein(which,html){
which.style.background="#C0C0C0"
if (document.getElementById)
document.getElementById("boxdescription").innerHTML=html
else
boxdescription.innerHTML=html
}

function moveout(which){
which.style.background='gray'
if (document.getElementById)
document.getElementById("boxdescription").innerHTML='&nbsp;'
else
boxdescription.innerHTML='&nbsp;'
}

//-->
</script>

</head>



<body bgcolor="#EBEBEB">

<table bgcolor="#FFFFFF" width="100%" cellspacing="0" cellpadding="0" border="1" bordercolor="#000000">
<tr>
<td>

<table width="100%" bgcolor="#FFFFFF" cellspacing="5" cellpadding="0">
<tr>
<td>
<table align="center" cellspacing="0" cellpadding="0">
<tr>
<td>
<img border="0" src="images/BVLbig.gif" width="533" height="66" align="center">
</td>
</tr>
</table>
</td>
</tr>
</table>

<table bgcolor="#FFFFFF" width="100%" cellspacing="0" cellpadding="0" height="30">
<tr>
<td>
</td>
</tr>
</table>

<table bgcolor="#FFFFFF" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="22">
</td>
<td width="950">
plaats hier je tekst
</td>
<td width="225">

<table align="right" bgcolor="gray">
<tr>
<td>
<table bgcolor="gray" cellpadding="3" cellspacing="0" width="180">
<tr>
<td class="menu" bordercolor="gray" id="choice1" style="background-color:gray; cursor:hand" onmouseover="movein(this,'Beginpagina')" onmouseout="moveout(this)">
<a href="index.htm">Home</a></td></tr>
<td class="menu" bordercolor="gray" id="choice2" style="background-color:gray; cursor:hand" onmouseover="movein(this,'Wordt nu lid!')" onmouseout="moveout(this)">
<a href="leden.htm">Leden</a></td><tr>
<td class="menu" bordercolor="gray" id="choice3" style="background-color:gray; cursor:hand" onmouseover="movein(this,'Onze gids')" onmouseout="moveout(this)">
<a href="elliott_wave.htm">Elliott Wave</a></td><tr>
<td class="menu" bordercolor="gray" id="choice4" style="background-color:gray; cursor:hand" onmouseover="movein(this,'Ons portefeuillebeheer')" onmouseout="moveout(this)">
<a href="persoonlijke_begeleiding.htm">Persoonlijke Begeleiding</a></td><tr>
<td class="menu" bordercolor="gray" id="choice5" style="background-color:gray; cursor:hand" onmouseover="movein(this,'Vertel het verder')" onmouseout="moveout(this)">
<a href="tell_a_friend.htm">Tell a Friend</a></td><tr>
<td class="menu" bordercolor="gray" id="choice6" style="background-color:gray; cursor:hand" onmouseover="movein(this,'Onze doelstelling')" onmouseout="moveout(this)">
<a href="hedge_fund.htm">Hedge Fund</a></td><tr>
<td class="menu" bordercolor="gray" id="choice7" style="background-color:gray; cursor:hand" onmouseover="movein(this,'Abonnementen en adres')" onmouseout="moveout(this)">
<a href="contact.htm">Contact</a></td>
<tr>
<td bordercolor="gray" bgcolor="white" height="18"><font id="boxdescription" face="Verdana" color="#003399" size="1"></font></td></tr>
</table>

<table align="center" bgcolor="gray" height="2600">
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>

</td>
</tr>
</table>

<table bgcolor="#FFFFFF" width="100%" cellspacing="0" cellpadding="0" height="20">
<tr>
<td>
</td>
</tr>
</table>

</td>
</tr>
</table>

</body>

</html>




That's it ! :o
Thanks!!!
Mr J
09-15-2002, 01:52 PM
See if using fixed widths helps instead of %
comicw
09-15-2002, 02:11 PM
But what do I do with the different screen resolutions of the visitors of my site?
comicw
09-15-2002, 02:29 PM
The fixed sizes instead of % don't work, because when I tried, my cell containing the menu shifts to the left and I get a white area on the right side next to it.
umm
09-15-2002, 10:16 PM
Personally, I plan for an 'average' resolution (600x800). Even so, some authors suggest designing the site in 640x480.
Have a look at this article for more info.

http://www.evolt.org/article/Liquid_Design_for_the_Web/20/15177/index.html

As a general comment, the web is a meduim where absolute design control is really not possible. For example, a user can turn your style sheets off and use their own if they choose It's simply the nature of the beast.