Solved

top nav menu bar is indent to the right

Posted on 2011-09-08
11
221 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 20

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
Ransomware: The New Cyber Threat & How to Stop It

This infographic explains ransomware, type of malware that blocks access to your files or your systems and holds them hostage until a ransom is paid. It also examines the different types of ransomware and explains what you can do to thwart this sinister online threat.  

 
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
 
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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

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.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
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…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

803 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