Solved

top nav menu bar is indent to the right

Posted on 2011-09-08
11
219 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:knowlton
11 Comments
 
LVL 19

Assisted Solution

by:Daniel Van Der Werken
Daniel Van Der Werken earned 166 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:gurvinder372
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: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
 
LVL 40

Expert Comment

by:gurvinder372
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: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
Highfive Gives IT Their Time Back

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 5

Author Comment

by: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:gurvinder372
ID: 36506161
I am seeing this in my debugger
0
 
LVL 5

Author Comment

by: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:gurvinder372
gurvinder372 earned 167 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 167 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:knowlton
ID: 36511862
Long story short...it's fixed now.

Thank you for the suggestions!
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
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.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
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…

707 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

13 Experts available now in Live!

Get 1:1 Help Now