Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

top nav menu bar is indent to the right

Posted on 2011-09-08
11
Medium Priority
?
231 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
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
Independent Software Vendors: 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 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

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses

971 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