Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

top nav menu bar is indent to the right

Posted on 2011-09-08
11
Medium Priority
?
228 Views
Last Modified: 2012-05-12
If you are able to go here:

http://utenn.dev.campuswebstore.mobi/

notice how the orange colored top nav bar (the one that has "Accessories, Hats, TShirts..." etc.) is pushed over about one inch?

It should be aligned with the T in Tennessee on the left of the main content area.

Same goes for everything below...the catalog items, etc.


I've tried finding the indent using firebug but have not been able to figure it out.

Any help would be appreciated.
0
Comment
Question by:Tom Knowlton
[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
11 Comments
 
LVL 20

Assisted Solution

by:Daniel Van Der Werken
Daniel Van Der Werken earned 664 total points
ID: 36505880
Just move the DIV with the id Container over to the left some pixels.

style="position: relative; left: -60px;"

the -60px could be something else.  You may have to fiddle with it.

<div id="container" style="position: relative; left: -60px;">

You can put that into the stylesheet too.
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36505916
in utenn.css line 20
you need to remove margin:0px; from here or try giving it some value like 1 or 2
0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 36506019
>>>you need to remove margin:0px; from here or try giving it some value like 1 or 2


all that does is bump the menu down about 10 pixels.

it does not correct the indent.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36506088
you need to add
#main-nav
{
    margin-right:250px; //currently the value is 190px
}

#container
{
   margin-left:180px;
}
0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 36506091
Just move the DIV with the id Container over to the left some pixels.
style="position: relative; left: -60px;"
the -60px could be something else.  You may have to fiddle with it.
<div id="container" style="position: relative; left: -60px;">
You can put that into the stylesheet too.

=======================================


This suggestion works - but I'd rather not have to do a hack in order to get this work.


In other words -- I'd rather understand why the left:-95px is necessary -- what is making this have to be added in?  Then I can correct the underlying problem.



#container #main-nav {
    width: 960px;
    position: relative;
    background: #F77F00;
    left:-95px;
}
0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 36506146
#main-nav
{
    margin-right:250px; //currently the value is 190px
}


:::: completely lost ::::::

Where do you see a margin-right value of 190px   ???

Copy and paste the CSS rule you are seeing.  My current rule looks like this:


#container #main-nav {
    width: 960px;
    position: relative;
    background: #F77F00;
    left:-95px;
}



There is no #main-nav all by itself.
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36506161
I am seeing this in my debugger
0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 36506227
Please post a screenshot of what you are seeing in your debugger.

I see no such CSS rule defined.
0
 
LVL 40

Assisted Solution

by:Gurvinder Pal Singh
Gurvinder Pal Singh earned 668 total points
ID: 36506254
Its not defined as a rule ...but its the computed value of the rules which is ultimately used
0
 
LVL 16

Accepted Solution

by:
HagayMandel earned 668 total points
ID: 36509299
2 changes:
Make the #container width: 960px instead of the 770px
Add to #content:
width: 770px;
margin-left: auto;
margin-right: auto;
You can do it directly in the element style
<div id="content" style="width:770px; margin-right:auto; margin-left:auto;" role="main">
0
 
LVL 5

Author Closing Comment

by:Tom Knowlton
ID: 36511862
Long story short...it's fixed now.

Thank you for the suggestions!
0

Featured Post

Technology Partners: 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!

Question has a verified solution.

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

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

705 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