Solved

Making horizontal secondary nav bar "sticky"

Posted on 2000-03-30
14
530 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
  • 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
 
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Suggested Solutions

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

743 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now