Help With Navbar.

joshd · May 19, 2012

I'm doing a website for a small PC firm in my local community. As you can see it will be clean and simple. I'm having trouble with the navigation bar for it. I want it to be in the top dark grey area at the top of the screen but have no idea how to do it. I've looked at guides and code and tried lots of things but most come out wrong and still have the bullet etc.

Here's the code I've got so far:

Code:

Code:

<!DOCTYPE html>

         Hago Computers (Glenrothes)

    <text class="copyright">[CENTER]© Hago Computers 2012[/CENTER]</text>

Basically I just want it to be a vertical navbar, no drop down menu's, with boxes so when the user hover's over the name I can change the text color and have it only affect that area.

Thanks in advance.

Warfarin88 · May 19, 2012

Most of your css uses classes, but your nav reference has an id hash. Were you identifying the navigation with an id or a class in your html?

try this css:

Code:

Code:

            .nav ul
            {
                padding-top: 10px;
            }
            .nav li
            {
                display: inline;
                list-style-type: none;
                padding-right: 20px;
            }
            .nav a
            {
                font-family: 'open sans', arial, sans-serif;
                font-size: 14px;
                color: white;
                text-decoration: none;

            }

on this html:

Code:

Code:

                    [LIST]
                        [*][URL=#]link[/URL]
                        [*][URL=#]link[/URL]
                        [*][URL=#]link[/URL]
                    [/LIST]

That should get you started. Just nest that "nav" div in your "header" div if you want the list in the grey at the top.

_Nikhil · May 19, 2012

You have lot of border-... :none in your css which are not really adding anything. border none is the default. So you can take them off.

joshd · May 19, 2012

I have kind of done it:

Problems
- Nav bar isn't at the top of the page

Code:

Code:

<!DOCTYPE html>

         Hago Computers (Glenrothes)

            [LIST]
                [*][URL=#]Home[/URL]
                [*][URL=#]Repairs[/URL]
                [*][URL=#]Tune up/ Viruses[/URL]
                [*][URL=#]System Builds[/URL]
                [*][URL=#]Cables[/URL]
                [*][URL=#]Contact us[/URL]
                [*][URL=#]Find us[/URL]
                [*][URL=#]Links[/URL]
            [/LIST]

    <text class="copyright">[CENTER]© Hago Computers 2012[/CENTER]</text>

+rep to Warfarin88

And yes, _nikhil I know that, it's just a bad habit

joshd · May 19, 2012

Bump.

_Nikhil · May 19, 2012

Add this

Code:

Code:

.header ul { margin:0px;}

joshd · May 19, 2012

Quote:

Code:
Originally Posted by _Nikhil

Add this

Code:

Code:

.header ul { margin:0px;}

THANK YOU SO MUCH! +REP

joshd · May 19, 2012

Does anyone know how I could get the nav bar text in the middle of the top div? Looks kinda silly atm.

joshd · May 19, 2012

Bumpity bump.

Warfarin88 · May 20, 2012

You should be able to just establish a fixed width on a containing block element (like a div), and then set the right and left margins for that div to auto.

joshd · May 20, 2012

Quote:

Originally Posted by Warfarin88

You should be able to just establish a fixed width on a containing block element (like a div), and then set the right and left margins for that div to auto.

I actually just got it fixed. I posted it on stackoverflow and someone gave me the right code. Thanks for trying to help, though

It is appreciated.

Josh

Help With Navbar.

joshd

Banned

Warfarin88

Registered

_Nikhil

Registered

joshd

Banned

joshd

Banned

_Nikhil

Registered

joshd

Banned

joshd

Banned

joshd

Banned

Warfarin88

Registered

joshd

Banned