|
| |
|
|
paul rayner
Posts: 211
Joined: 3/15/2001
From: yeppoon, qld, aus
Status: offline
 |
Can't force nav bar downHi - 5/24/2004 7:29:15
Hi
I downloaded this CSS nav menu. In trying to complete a web page without tables, I cn't seem to force the menu down the page. I admit I'm not really clued up - your help would be appreciated.
Here's the CSS:
#nav{
font: 12px Verdana, Arial, Helvetica, sans-serif;
width: 120px;
margin: 0%;
padding: 0px 0px 0px 5px;
margin-top:0px;
}
#nav a{
padding: 0px 0px 0px 5px;
display: block;
color: #fff;
border: 1px solid #999900;
border-left: 10px solid #287f3f;
background-color:#D5D500;
text-decoration: none;
line-height:18px;
border-top-color: #D5D500;
}
#nav a:hover{
border: 1px solid #999900;
border-left: 10px solid #D5D500;
background-color:#999900;
color:#000;
text-decoration: none;
}
#banner{
width :760px
}
#main
{
border : 0px;
width : 670px;
padding : 0px;
margin-left : 130px;
font-family : verdana, sans-serif;
font-size : 12px;
border-top : 2px solid #000;
margin-top : 0px;
}
And here's the page at development stage:
<html>
<link href="nav5.css" rel="stylesheet" type="text/css" />
<body>
<div id="nav"><a href="Menus/nav1.zip">Zip1</a></div>
<div id="nav"><a href="Menus/nav2.zip">Zip2</a></div>
<div id="nav"><a href="Menus/nav3.zip">Zip3</a></div>
<div id="nav"><a href="Menus/nav4.zip">Zip4</a></div>
<div id="nav"><a href="Menus/nav5.zip">Zip5</a></div>
<div id="main">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.Lorem ipsum feugifacilisi.</div>
</body>
</html>
Cheers
_____________________________
" In theory, there is no difference between theory and practice. But, in practice, there is!"
|
|
|
|
Giomanach
Posts: 6128
Joined: 11/19/2003
From: England
Status: offline
|
RE: Can't force nav bar downHi - 5/24/2004 7:38:39
quote:
cn't seem to force the menu down the page
Can you define this please? Do you want the menu to stay where it is on the screen, whilst the content moves? Or do you just want it to move further down the page and stay there?
Dan
_____________________________
| |
|
|
|
c1sissy
Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline
|
RE: Can't force nav bar downHi - 5/24/2004 7:42:49
Hi Paul how are you.
Looking at you html that you have posted, have you put this into a div? If not, try doing so, Also there is a link for navigation that shows you how to set this up. You could use a list for this. Works much better, and you don't have to use the id for each navigation link in the navigation.
< Message edited by c1sissy -- 5/24/2004 7:45:19 >
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
paul rayner
Posts: 211
Joined: 3/15/2001
From: yeppoon, qld, aus
Status: offline
|
RE: Can't force nav bar downHi - 5/24/2004 18:14:23
Yes, I'd like to push the nav bar down, and ideally keep the main area level with the top of the nav bar. SHould I have a <div> that says there'll be a nav bar below? How would I do that?
Cheers
_____________________________
" In theory, there is no difference between theory and practice. But, in practice, there is!"
| |
|
|
|
c1sissy
Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline
|
RE: Can't force nav bar downHi - 5/24/2004 21:03:37
Ok, if you put your navigation into a div, you would use display:block for vertical navigation and display:inline for horizontal navigation.
Here is a sample of coding from one that I did, this is for a horizontal navigation that is across the top of the page. I'm sure you could experiment around with this if you wish for a vertical navigation.
#nav ul {
background-color: #FFFF99;/*color is bright yellow*/
width: 98%;
height: 25px;
padding-top: 2px;
padding-left: 4px;
margin-left: 5px;
font-size: 10pt;
font-weight: bold;
font-family: arial, Verdana, Serif;
border-bottom: 4px solid #D3D3D3; /*color is light grey*/
}
#nav ul li {
display: inline;/*navigation*/
}
#nav ul li a {/*navigation*/
list-style-type: none;
padding-right: 25px;
padding-left: 20px;
}
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
paul rayner
Posts: 211
Joined: 3/15/2001
From: yeppoon, qld, aus
Status: offline
|
RE: Can't force nav bar downHi - 5/25/2004 5:37:10
Hi
managed to solve it. Found a thread on Outfront that took me to another sample site.
I simply added :
top: 86px;
to the CSS.
I did say I wasn't real clued up!!!!!!!!
Thanks for your help all!!!!
Cheers
_____________________________
" In theory, there is no difference between theory and practice. But, in practice, there is!"
| |
|
|
|
c1sissy
Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline
|
RE: Can't force nav bar downHi - 5/25/2004 5:42:48
Hi Paul, I wasn't too sure how you wanted to place it, so am glad that you found what you were looking for! Good luck!
Also, there are many links in the top thread in this section with css information as well as a tutorial offered through outfront, and don't forget about the w3c site as well.
Don't hesitate to come back with questions. We are all learning.
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
