Solved

Making horizontal secondary nav bar "sticky"

Posted on 2000-03-30
14
561 Views
Last Modified: 2010-05-18
I need to make my secondary navigation bars "sticky", meaning when the browser window is widened, the nav bar sticks to the right edge of the window and resizes with it.  I'd like the text to wrap according to the window size as well, with at least a 10 pixel margin.

Using the <td width=100%> tags seems to work in Netscape, but not in IE and I can't get the margin I want either.

I'm a rookie with HTML, can anyone give me sample code that provides this funtionality in IE and Netscape?

0
Comment
Question by:curldog
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 7
14 Comments
 
LVL 3

Expert Comment

by:MHQ
ID: 2671086
why not place the navigationbar in a layer and then adjust the position of the layer as soon as the page resizes?

If you post an URL or the code here I would gladly help you out.
0
 

Author Comment

by:curldog
ID: 2671246
Go to http://www.infogrp.com/test/company.html

Thank you VERY much!
0
 
LVL 3

Expert Comment

by:MHQ
ID: 2671262
Ok, If I'm right, it's the images with the "InfoCall" link and the three next to it?

I'll start working on it, tell me if i make a false assumpion.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 3

Expert Comment

by:MHQ
ID: 2671325
If you get this I would appreciate some short notification that I have understood you correctly. And about the textwrap, that is for the page content?
0
 

Author Comment

by:curldog
ID: 2673136
thanks MHQ...I had gone home for the evening.

So I think it is the first part of the body, with the secondary nav bar links, as follows:

<body bgcolor="#ffffff" TOPMARGIN="0" LEFTMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0" onLoad="MM_preloadImages('pd1.jpg','#951937859890');MM_preloadImages('pa1.jpg','#951937923600');MM_preloadImages('lr1.jpg','#951938228440');MM_preloadImages('st1.jpg','#951938263150');MM_preloadImages('pi1.jpg','#951938993710');MM_preloadImages('pd1.jpg','#951939033640');MM_preloadImages('pa1.jpg','#951939398620');MM_preloadImages('cog1.jpg','#951940777420');MM_preloadImages('1d1.jpg','#952100588910');MM_preloadImages('1c1.jpg','#952100608080');MM_preloadImages('1b1.jpg','#952100634560');MM_preloadImages('1a1.jpg','#952100651860')">
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100">
  <tr valign=top align=left>
    <td colspan="3" align="left" background="topbkg.jpg" valign="top" height="75"><IMG border=0 height=77 src="top.jpg" useMap=#topmap width=800></td>
  </tr>
  <tr>
    <td colspan="3" bgcolor="#cc0033" align="right" valign="top"><A href="companyoverview.html" onmouseout=MM_swapImgRestore() onmouseover="MM_swapImage('document.Image19','document.Image19','1a1.jpg','#952100651860')"><IMG border=0 height=37 name=Image19 src="1a.jpg" width=92></a><A href="#challenge" onmouseout=MM_swapImgRestore() onmouseover="MM_swapImage('document.Image18','document.Image18','challenge2.jpg','#952100634560')"><IMG border=0 height=37 name=Image18 src="challenge1.jpg" width=115></a><A href="#solution" onmouseout=MM_swapImgRestore() onmouseover="MM_swapImage('document.Image13','document.Image13','co_solution2.jpg','#952100608080')"><IMG border=0 height=37 name=Image13 src="co_solution1.jpg" width=110></a> <A href="#infocall" onmouseout=MM_swapImgRestore() onmouseover="MM_swapImage('document.Image10','document.Image10','co_infocall2.jpg','#952100608080')"><IMG border=0 height=37 name=Image10 src="co_infocall1.jpg" width=75></a> <A href="#outlook" onmouseout=MM_swapImgRestore() onmouseover="MM_swapImage('document.Image11','document.Image11','co_outlook2.jpg','#952100608080')"><IMG border=0 height=37 name=Image11 src="co_outlook1.jpg" width=75></a>
      </td>
  </tr>

Then we get into the left main vertical nav bar, as follows:

<tr>    <td width="144" align="left" valign="top" rowspan="3"><A href="company.html" onmouseout=MM_swapImgRestore() onmouseover="MM_swapImage('document.Image14','document.Image14','cog1.jpg','#951940777420')"><IMG border=0 height=54 name=Image14 src="cog.jpg" width=144></a><br>
      <A href="productinfo.html" onmouseout=MM_swapImgRestore() onmouseover="MM_swapImage('document.Image15','document.Image15','pi1.jpg','#951938993710')"><IMG border=0 height=52 name=Image15 src="pi.jpg" width=144></a><A href="#" onmouseout=MM_swapImgRestore() onmouseover="MM_swapImage('document.Image10','document.Image10','pd1.jpg','#951937859890')"><br>
      </a><A href="productdemo.html" onmouseout=MM_swapImgRestore() onmouseover="MM_swapImage('document.Image16','document.Image16','pd1.jpg','#951939033640')"><IMG border=0 height=55 name=Image16 src="pd.jpg" width=144></a><A href="#" onmouseout=MM_swapImgRestore() onmouseover="MM_swapImage('document.Image10','document.Image10','pd1.jpg','#951937859890')"><br>
      </a><A href="partnerinfo.html" onmouseout=MM_swapImgRestore() onmouseover="MM_swapImage('document.Image17','document.Image17','pa1.jpg','#951939398620')"><IMG border=0 height=53 name=Image17 src="pa.jpg" width=144></a><A href="#" onmouseout=MM_swapImgRestore() onmouseover="MM_swapImage('document.Image11','document.Image11','pa1.jpg','#951937923600')"><br>
      </a><A href="#" onmouseout=MM_swapImgRestore() onmouseover="MM_swapImage('document.Image11','document.Image11','pa1.jpg','#951937923600')">
      </a><A href="#" onmouseout=MM_swapImgRestore() onmouseover="MM_swapImage('document.Image10','document.Image10','pd1.jpg','#951937859890')">
      </a><A href="literaturerequest.html" onmouseout=MM_swapImgRestore() onmouseover="MM_swapImage('document.Image12','document.Image12','lr1.jpg','#951938228440')"><IMG border=0 height=73 name=Image12 src="lr.jpg" width=144><br>
      </a><A href="supporttraining.html" onmouseout=MM_swapImgRestore() onmouseover="MM_swapImage('document.support','document.support','st1.jpg','#951938263150')"><IMG border=0 height=72 name=support src="st.jpg" width=144></a><br>
      <IMG align=top height=128 src="leftbottom.jpg" width=144> </td>
    <td width="150" align="left" valign="top" rowspan="3"><IMG height=486 src="buttonright.jpg" width=150></td>
    <td width="100%" height="7" align="right" valign="top" background="shadow.jpg"><IMG height=8 src="pixel.jpg" width=1></td>
  </tr>
 
  <tr>
    <td width="500" align="left" valign="top" height="764">


Then the page content begins, as follows:


      <p><br>
<p><center><h1><FONT color=#000099 face="">Corporate Background</Font></h1></center>
<FONT size=2 face="Arial">
<p>INFO GROUP is a leading provider of telecommunications management software. The company's
founders saw the opportunity to help organizations better manage telecommunications in a new,
converged environment.<br><br>

You are correct about the text wrap for the page content.  I'd like it to expand with the window, keeping a decent margin.  But if we can't do that I don't mind keeping the text a fixed width.

The main goal is to have the top blue checkered background and the red nav bar underneath it to expand and contract with the browser window.  Contracting, of course, to a certain minimum width like 600 pixels or so.

Sorry for the delay in answering your question, I really appreciate your help.

Chris
0
 
LVL 3

Expert Comment

by:MHQ
ID: 2673347
I have read your posting and will get back to you as soon as I've had time to do the full code. Have something similar already so it will hopefullt not take that long time.

Btw, must complement you on the design!
0
 

Author Comment

by:curldog
ID: 2673618
thanks so much...but I must admit that I did not do the artwork for it.  I just put it together.  I also did not do the Java, but I edit and add and remove, as needed.  Learning alot.  I eagerly await your next comments!
0
 

Author Comment

by:curldog
ID: 2673914
thanks so much...but I must admit that I did not do the artwork for it.  I just put it together.  I also did not do the Java, but I edit and add and remove, as needed.  Learning alot.  I eagerly await your next comments!
0
 
LVL 3

Accepted Solution

by:
MHQ earned 300 total points
ID: 2681674
I have what you are looking for now. I guess my brain was kinda "overly ambisious" since I figured out how to do it using regular HTML. And for the margin, I just added a small stylesheet.

I took a look on your table and made some adjustments here and there.

I must recomend you thogh, that if you have the time, knowledge and resources, you should redo the page using styleshees and layers, thus opening up many more possibilities, and also resulting in a "cleaner" code.

Post you e-mail or write to me martenh@swipnet.se and I'll send you the new HTML file.
0
 
LVL 3

Expert Comment

by:MHQ
ID: 2684789
you should have the file by now.
0
 

Author Comment

by:curldog
ID: 2685133
Marten, thanks again.  I'd like to use stylesheets and layers, but I haven't had the time to learn them yet.  can you recommend a location where I could teach myself?  Or, if you have the time, you could send me an email explaining the code and functions.  But that's only if you have the desire and the time.  I can't thank you enough for the time you've spent already.

I've learned what I know so far by trial and error!

Chris
0
 

Author Comment

by:curldog
ID: 2685142
Adjusted points from 200 to 300
0
 

Author Comment

by:curldog
ID: 2685143
I can't give Marten enough thanks.  He put a lot of time into it.  I'm gracious.
0
 
LVL 3

Expert Comment

by:MHQ
ID: 2685281
I'm truly grateful for the extra points!
Happy I could help!
If you ever have more question, you know where to find me! =)

/MHQ
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question