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
Solved

Menu bar location

Posted on 2012-04-09
7
202 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
ID: 37824117
Try replacing float:left; with left:0;
0
 
LVL 34

Author Comment

by:Mike Eghtebas
ID: 37824149
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
ID: 37824182
Do you have a link to where your work is running?
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LVL 34

Author Comment

by:Mike Eghtebas
ID: 37824220
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
ID: 37824302
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 34

Author Comment

by:Mike Eghtebas
ID: 37824732
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 34

Author Comment

by:Mike Eghtebas
ID: 37824797
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

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.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
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 how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

809 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