[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 250
  • Last Modified:

why is everything in the wrong place in my html?

Hi Cd&, and others,

I have combined some graphics and style sheet a couple of java scripts and the scrolling marquee into an Html page.

The problem is when I display the page in the browser things are not where I would have expected them to be.

For starters I would have expected my marquee to follow more in the bottom but it shows clear at the top.

I also wanted my menu to be dropped down a little. Also I expected the external links to work and none of them did so I had to recombine the code.

What am I basically doing wrong with how I am coding it?

Here is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Dynamic Menu</title>
<script type="text/javascript">
var menuitems = new Array("menuGroup1", "menuGroup2", "menuGroup3", "menuGroup4","menuGroup5");
var sizing = new Array(4,2,3,3,1);
var menulinks = new Array();
menulinks[0] = new Array();
menulinks[0][0]="new_int_sub_acct.htm|Accounting";
menulinks[0][1]="new_int_sub_engineering.htm|Engineering";
menulinks[0][2]="new_int_sub_hr.htm|Human Resources";
menulinks[0][3]="new_int_sub_marketing.htm|Marketing";
menulinks[1]= new Array();
menulinks[1][0]="new_int_sub_mis_it.htm|MIS/IT";
menulinks[1][1]="new_int_sub_purchasing.htm|Purchasing1";
menulinks[2]= new Array();
menulinks[2][0]="new_int_sub_quality.htm|Quality1";
menulinks[2][1]="new_int_sub_service_ops.htm|Service Operations";
menulinks[2][2]="new_int_sub_policy_docs.htm|Policy Documents";
menulinks[3]= new Array();
menulinks[3][0]="new_int_sub_forms_section.htm|Forms Page";
menulinks[3][1]="new_int_sub_projects_schedules.htm|Projects Schedule";
menulinks[3][2]="#|Business Cards";
menulinks[4]= new Array();
menulinks[4][0]="#|Return to home";
var tag;
var target;
var divstr1 = '<div class="cellOut" onmouseover="this.className=\'cellOver\'"';
var divstr2 = ' onmouseout="this.className=\'cellOut\'">';
//  all that would be custom for each departmental menu
//  code below would be the same in every page so it just gets cut and pasted
</script>
<style type="text/css">
<!--
body{
     margin: 0px;
     padding: 0px;
}
/* Elements */
#footerText{
     font-family: Arial, Helvetica, sans-serif;
     font-size: 8pt;
     color: #666666;
     text-align: center;
     width: 875px;
}
#Navigation{
     background-color: #FFFFFF;
     position:absolute;
     left:5px;
     top:200px;
     width: 167px;
}
#menuGroup1{
     border: 1px solid #384F7B;
     border-collapse: collapse;
}
#menuGroup2{
     border: 1px solid #384F7B;
     border-collapse: collapse;
}
#menuGroup3{
     border: 1px solid #384F7B;
     border-collapse: collapse;
}
#menuGroup4{
     border: 1px solid #384F7B;
     border-collapse: collapse;
}
#menuGroup5{
     border: 1px solid #384F7B;
     border-collapse: collapse;
}
/*     Classes */
a.menuLink{
     font-family: Arial, Helvetica, sans-serif;
     font-size: 9pt;
     font-weight: 600;
     text-align: center;
     color: #384F7B;
}
a.menuLink:hover{
     font-family: Arial, Helvetica, sans-serif;
     font-size: 9pt;
     font-weight: 600;
     text-align: center;
     color: #FF3300;    
}
div.cellOut{
     background-color: #FFFFFF;
     border: 1px solid #DDDDDD;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 9pt;
     text-align: center;
}
div.cellOver{
     background-color: #EEEEEE;
     border: 1px solid #AAAAAA;
     color: Red;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 9pt;
     text-align: center;
}
-->
</style>

</head>

<body>

<div id="Navigation">
<script type="text/javascript">
   tag=1;
   str='';
   for (i=0;i<menuitems.length;i++)
   {
      x='menuGroup'+tag;
      str+='<div id="'+x+'">';
      for (j=0;j<sizing[i];j++)
      {
         y=menulinks[i][j].split('|');
         str+=divstr1+divstr2;
         str+='<a class="menuLink" href="'+y[0]+'">'+y[1]+'</a></div>';      
      }
      str+='</div>';
      tag++;
   }
   document.write(str);
</script>
</div>

<p>&nbsp;</p>
<p>&nbsp;</p>
<MARQUEE onMouseOver="this.stop();" onMouseOut="this.start();"> <DIV style="background-color:red;">Don't forget to attend the Thanksgiving dinner on November 17th.  For directions, <A

HREF="link.html" style="color:blue">click here</A>.  Also, check out the rest of the current events by <A HREF="newlink.html"

style="color:blue">clicking here</A>.</DIV></MARQUEE>

<table width="700" border="0">
  <tr>
    <th scope="col"><img src="page_r1_c3b.jpg" width="144" height="60" align="left"></th>
  </tr>
</table>
<table width="700" border="0">
  <tr>
    <th scope="col"><img src="page_r1_c1.jpg" width="167" height="125" align="left"><img src="page_r1_c2.jpg" width="326" height="125" align="left"><img src="r1_fill.jpg" width="238" height="125"></th>
  </tr>
</table>
<table width="50%" border="0">
  <tr>
    <th scope="col"><img src="page_r2_c1.jpg" width="167" height="126" align="left"></th>
  </tr>
</table>

<p>This is for the bottom navigation table: </p>
<table width="50%"  border="0">
  <tr>
    <th scope="col">&nbsp;</th>
  </tr>
</table>
</body>
</html>



thanks in advance,

Don

0
dprice7
Asked:
dprice7
  • 9
  • 4
  • 4
  • +1
1 Solution
 
COBOLdinosaurCommented:
The problem starts with this:

#Navigation{
     background-color: #FFFFFF;
     position:absolute;
     left:5px;
     top:200px;
     width: 167px;
}

Absolute positioning cause it to render outside the normal browser sequence.  The rest of the page is rendered as if the element does not exist.

So the Marquee ends up near the top because there is nothing prior to it in the lsiting order except the empty paragraphs.  If you are going to use absolute positioning you have to code the page as if the eleement dos not exist.  and if anything ends up in the same laocation it will go either behind it or in from of it depending on how the browser has ordered the stacking.

Cd&
0
 
dprice7Author Commented:
The reason for the positioning was I had hoped to put my menu below the logo and top graphic that I used.

Should they also use absolute positioning? I just assumed they would be at the top first on the page. :(

Did I take the wrong approach?
0
 
dprice7Author Commented:
Hi Cd&,

I see now what you mean really good illustration of my problem with positioning on this site.

thanks

http://www.yourhtmlsource.com/stylesheets/
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
COBOLdinosaurCommented:
When you use absolute positioning, you just need to e aware of how it effects its relationship to other elements on the page.  If you are using a relatively static layout where rigidity is desirable, then you can use absolute position for everything and get very fine control.  but it becomes a little more difficult to make changes because yuo are bypassing the natural rendering.  

You can go the opposite direction and let the browser work out the position for everything.  that can create very nice fluid designs, but it might give you some surprises sometimes with how it renders under settings you had not considered.

There is also a mixed approach where you want certain positions or relationships maintained under all conditions.  That seems to be what you are doing.  The best approach in that case it to layout the page without the fixed position eleemnt and leave the spot where you want it empty.  Then adjust the fixed element(s) positioning until it is exactly where you want it.  Then test with various settings to seet whether you are going to have to use scripting to re-position it in some cases.

Take a look at this page:
http://cd-articles.fateback.com/panel3.html

It is an example page for an article I did.  Take a look at how the fieldset get tossed around the page; by both layout changes and by just changing the page size.  Then look at the coding and you will see that the class for the fieldset gets changed to modify the positioning characteristics.  Those kind of dynamics are possible for any element and the coding is not difficult.  The hard part is the time it takes to look ate all the possible renderings you can get from the browsers you are supporting, and make the little fine tuning adjustments in response to the rendering to get an acceptable presentation under all conditions.

Once you move away from the flat two dimensional layouts as you have the possibilities are limitless, but sometimes it just takes a lot of trial and error to get things so they are acceptable.  Sometimes you try someting you don't think will work very well and find that it turns out to be the best rendering.  It's what I like most about CSS layout I can play like a kid with a new toy everytime I ned to do a new layout.

Cd&
0
 
mcdown75Commented:
Rather than using absolute positioning, why don't you try "Float", that allows the material to flow down the page.  You can add <br> or encapsulate it in <DIV>'s to control which goes on top.  In a project we just did we defined the absolute max width and created <Div>'s up to that amount.  We encapsulated the entire page in one big div, then controlled the layout of the Header, Menus, and columns using sub <Div>'s with Float's.  This is all defined in the style sheet so you don't have to change it half a million times.

TekNik
0
 
webwomanCommented:
Actually, the problem starts with this...
<MARQUEE
MS specific code, and to make things worse you're putting a table and javascript in it.

Don't do that.
0
 
dprice7Author Commented:
mcdown,

We encapsulated the entire page in one big div, then controlled the layout of the Header, Menus, and columns using sub <Div>'s with Float's.  This is all defined in the style sheet so you don't have to change it half a million times.

can you give me a short example of how this is done?
0
 
dprice7Author Commented:
Cd&,

If I decide to layout the page with absolute positioning what is the best way to calculate the pixel locations for everything so I know things are falling correctly?

thanks,

Don
0
 
dprice7Author Commented:
webwoman,

Actually,

I purposely am trying different techniques to see what will work best since I have to come up with what our new standards will end up being and want to see how what works well with what and how easy each thing is to maintain.

thanks,

Don
0
 
dprice7Author Commented:
Cd&,

I am trying to replace the table entries with div tags but it seems like it loses the formatting when the code changes but definitely looks cleaner in the code than having all the <table> td tr th etc..

If I am doing it right the only thing I keep from the old code is  the img src tag.

thanks,

Don
0
 
COBOLdinosaurCommented:
If you use absolute positioning, then use pixels for all dimensions and position values.  To work out the position of things it is just straight arithmetic.  Adding widths an height together to deterimen where the next empty slot is.  However, sometimes it may be off a little so you just adjust the top and left propery of the elements to get them where you want them.  

Setting up with absolute positon generally makes it easier to do initial layout but is more difficult to maintain because a change in the size or positon of one element may mean that other elemetns have to be adjusted. It is also more difficult to support high accessibiility requirements and support multiple resolutions.

The big plus for absolute positioning is if your are doing dynmaic effects the require re-positioning and presentation modifications because all the elements are independent of each other and other than resolveing te stacking order with the z-index, things can just be moved and shifted based on events, timing or user preferences.

Cd&
0
 
mcdown75Commented:
On the style sheet define something like this:
//This was our widest div, it encapsulated the whole page
.div762 {
      position: relative;
      height: auto;
      border: none;
      float: none;
      font: normal normal normal 8pt/10pt Verdana, Geneva, Arial, Helvetica, sans-serif;
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      width: 762px;
      voice-family: "\"}\"";
      voice-family:inherit;
}
//This is one of the subdiv's that we put inside the main div to control where it sat
.div375 {
      float: left;
      border: 0px none;
      margin: 0px 0px 0px 1px;
      padding: 1px 1px 1px 1px;
      font: normal normal normal 8pt/10pt Verdana, Geneva, Arial, Helvetica, sans-serif;
      height: auto;
      width: 375px;
      voice-family: "\"}\"";
      voice-family:inherit;
}

After you define all your widths, you put it in the page like this:

...start html
</body>
<div class="div762"><div class="div375"><img src="./images/titleimg.jpg"></div><div class="div375">Put the header text here</div></div>
<div class="div762">
     <div class="div100">Menu here</div>
     <div class="div652"><h3>Put your text in here</h3></div>
</div>
<div class="div752">Put your footer here</div>
</body>
</html>

The max width is 752.  By wrapping your sections in 752 containers and floating everything within those containers you can make things appear where you want them to.  It also works better with the various browsers.  Even Opera can interpert this stuff.

teknik
0
 
dprice7Author Commented:
mcdown75,

I like your approach but what happens when I want to do something like insert a page from one of my users that origainlly was going to be inside an iframe and I already have all the div set to be 762?

Don't I lose that space?

thanks,

Don
0
 
dprice7Author Commented:
Cd& mcdown75,

Sorry I meant to split the points between you although you both gave me much more than the points were worth.

I really have enjoyed both your insights.

I have more questions about my project but this thread probably should have ended already so I will start a new one.

thanks again,

Don
0
 
COBOLdinosaurCommented:
No problem Don; we are just glad to be able to help. :^)

Cd&
0
 
mcdown75Commented:
dprice7,

Sorry for the delay.  I was out of touch yesterday.  The div 762, or whatever you choose to set it to, that was just our specification, expands to hold whatever is inside it.  If you need to add other stuff inside the div, just create a div761 and stick it in there.  Like a baloon it expands.  A developer friend of mine sent me a program that illustrates the div's quiet effectively and makes it much clearer where your div's are floating to.  It is called IE booster, but the site says that it is not available for dowload anymore.  It's a great little shareware and you can probably still locate it on the net.

I'm glad that I could be of help.  Remember me next time in the points. ;)

teknik
0
 
dprice7Author Commented:
mcdown75,

You are actually the one that got the points..

Cd& was the one that got left out..
0
 
mcdown75Commented:
dprice - Thanks a bunch.  Glad to help.

TekNik
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 9
  • 4
  • 4
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now