Overclock.net banner

1 - 11 of 11 Posts

·
Banned
Joined
·
5,061 Posts
Discussion Starter #1
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.
 

·
Registered
Joined
·
988 Posts
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.
 

·
Registered
Joined
·
523 Posts
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.
 

·
Banned
Joined
·
5,061 Posts
Discussion Starter #4
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
frown.gif
 

·
Banned
Joined
·
5,061 Posts
Discussion Starter #8
Does anyone know how I could get the nav bar text in the middle of the top div? Looks kinda silly atm.
 

·
Registered
Joined
·
988 Posts
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.
 

·
Banned
Joined
·
5,061 Posts
Discussion Starter #11
Quote:
Originally Posted by Warfarin88 View Post

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
biggrin.gif


It is appreciated.

Josh
 
1 - 11 of 11 Posts
Top