Vertical Navigation

[Dobby]

Hey i am trying to make a vertical navigation. I want the background of it to stretch all the way to the bottom of the page if that makes sense. I am having some trouble doing this and i cannot find any tutorials or anything. Someone help?

 

[Markshall]

It depends how you do it, are you having your links in <ul><li> format, or just plan <a> links?

 

[IntactDev]

It depends how you do it, are you having your links in <ul><li> format, or just plan <a> links?

I dont think he has any idea on how to start it

 

[academic]

Hey i am trying to make a vertical navigation. I want the background of it to stretch all the way to the bottom of the page if that makes sense. I am having some trouble doing this and i cannot find any tutorials or anything. Someone help?

Draw something up in paint on how you would like it, (I know you want a vertical navigation, but how you want it exactly confuses me) and I'll explain how you would go about this.

 

[Dobby]

Its hard to explain but i am trying to get an image to repeat all the way down the left so i can add a navigation to it. Kinda like a navigation bar on the top of a page but down the left hand side. Any ideas what im on about?

 

[academic]

Like this?

 

[Dobby]

YES! Exactly like that

 

[academic]

Here's the CSS

body {
    font-family: Georgia;
    background-color: #FFF;
}
ul, li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.navbar ul {
    background-color: #FE9A2E;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}
.navbar li {
    background-color: #FE642E;
    margin: 15px 0px 15px 0px;
    padding: 5px 100px 5px 5px;
}

And you use it like this..

<div class="navbar">
    <ul>
        <li>List Item 1</li>
        <li>Homepage</li>
    </ul>
</div>

 

[Dobby]

Thank you so much man. one more thing. How would i get a content box beside that? Thanks again.

 

[academic]

In the CSS, change the body element, add this line under "background-color: #FFF;"

margin-left: 190px;

And alter the "190px" to what ever value you need that to be.

 

[Dobby]

Thank you so much man

 

[Heaplink]

By the way if you wan't links you should have HTML like this

<ul class="navigation">
    <li><a href="#">Home</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Nother</a></li>
</ul>

and style the a tags instead of li tags to keep the click area

.navigation ul { ... }
.navigation ul li a {
    background-color: #FE642E;
    margin: 15px 0px 15px 0px;
    padding: 5px 100px 5px 5px;
}
.navigation ul li a:hover { /* Style hover */ }
.navigation ul li a:active { /* Style active */ }

EDIT:
By the way, never ever style a tag directly. If you do so it will loose its default style and when you wan't to make a real list it will look like the navigation, and you don't want that, so that's why you should make a class (NOT IDs, EVER)

 

[Markshall]

Problem positively resolved. Closed.