Solved

Menu bar location

Posted on 2012-04-09
7
199 Views
Last Modified: 2012-04-09
In the attached webpage I have a table with two columns.

Left narrow columns holds a fixed menu bar (see ID="leftnav").

#leftnav
{
      float: left;
      width: 140px;
      margin: 0;
      position:fixed;
}      

and:

    <div id="leftnav">
        <div id="navcontainer">
          <ul>
            <li><a href="index.htm">home</a></li>
            <li><a href="product.htm">product</a></li>
            <li><a href="designer.htm">designer</a></li>
            <li class="current"><a href="aboutus.htm">about us</a></li>
          </ul>
            </div> <!-- end navcontainer div -->
    </div> <!-- end leftnav div -->

Problem: The vertical fixed menu bar doesn't stay in the left column, How can I make not overlap the second column at its right?

I am trying it with e7.

Thank you.
finalProject.zip
0
Comment
Question by:Mike Eghtebas
  • 4
  • 3
7 Comments
 
LVL 16

Expert Comment

by:s8web
Comment Utility
Try replacing float:left; with left:0;
0
 
LVL 33

Author Comment

by:Mike Eghtebas
Comment Utility
s8web,

That put partially on the first column and partially outside to the left, like:


                  1st column                                2nd column
              |                         |                                                                                       |
              |                         |                                                                                       |
              |                         |                                                                                       |
     |                    |            |                                                                                       |
     |    menu     |            |                                                                                       |
     |                    |            |                                                                                       |
     |                    |            |                                                                                       |
             |                         |                                                                                       |
             |                         |                                                                                       |
             |                         |                                                                                       |
             |                         |                                                                                       |
             |                         |                                                                                       |
             |                         |                                                                                       |

 how can I make it relative to the first column?

Thx
0
 
LVL 16

Expert Comment

by:s8web
Comment Utility
Do you have a link to where your work is running?
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 33

Author Comment

by:Mike Eghtebas
Comment Utility
It is not uploaded to web. But, it is attached as zip with the original question.
0
 
LVL 16

Accepted Solution

by:
s8web earned 500 total points
Comment Utility
Got it. This isn't the most elegant solution as it uses a hack (you should probably load it conditionally instead), but try the following changes:

#leftnav 
{
	left:76px;
	left:50px\9;
	width: 140px;
	margin: 0;
	position:fixed;
}

#navcontainer 
{
	padding: 30px;
	border-style: solid;
	border-width: 0px;/*2px;*/
	border-color: #000000;
	width:70%;
}

Open in new window

0
 
LVL 33

Author Comment

by:Mike Eghtebas
Comment Utility
Thank you very much.

I have a follow up question about replacing the menu buttons with two list boxes with hard coded data shown below.

this what I have:

[   Home     ]
[   Product  ]
[   designer ]
[   about us ]

This to be relaced with:
________________
| Group 1       |
| Group 2       |
| Group 3       |
| Group 4       |
----------------------
________________
| Sub G 1       |
| Sub G 2       |
| Sub G 3       |
| Sub G 4       |
----------------------

I will post this shortly with a link here.

Thank you.
0
 
LVL 33

Author Comment

by:Mike Eghtebas
Comment Utility
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Suggested Solutions

This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
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)

763 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

7 Experts available now in Live!

Get 1:1 Help Now