Navigation Bar Customization

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter rodent16

    (@rodent16)

    16 years, 3 months ago

    The address for my blog is http://www.djripe.com/blog/

    I want the navigation bar to look like this: http://djripe.com/blog/wp-content/uploads/2010/01/Screen-shot-2010-01-23-at-9.28.32-PM.png

    The screenshot is of http://www.djatrak.com

    Thanks

    transformer617

    (@transformer617)

    16 years, 3 months ago

    Hi there rodent,
    This might help get you on the right tract. I haven’t styled the active and current states for the menu, but so far it should look pretty close to what you’re looking for:

    The HTML:

    <div id="navmenu">
<ul>
<li><a href="">blog</a></li>
<li><a href="">about</a></li>
<li><a href="">upcoming</a></li>
<li><a href="">downloads</a></li>
<li><a href="">contact</a></li>
</ul>
</div>

    The CSS:

    #navmenu ul {
	margin: 0;
	list-style-type: none;
	list-style-image: none;
	background: #01000a;
	float: left;
}
#navmenu li {
	display: inline;
	font-size: 1.5em;
}
#navmenu a {
	text-decoration:none;
	padding: 15px 45px 15px 45px;
	float: left;
	color:#a19060;
}
#navmenu a:hover {
	color: red;
}

    HTH,
    Bill

    transformer617

    (@transformer617)

    16 years, 3 months ago

    PS to my post: A-Trak uses a background image positioned right for his vertical spacer and then gives a special style to the last link to eliminate it.
    –b

    Thread Starter rodent16

    (@rodent16)

    16 years, 3 months ago

    Thanks for your help,

    I tried to make the above changes, however the bar ended up on the top of the screen!

    I am fairly new to CSS so I could just be my fault.

    About, your last post. What does this mean? How would I do the same?

    Thanks,

    Rob

    Thread Starter rodent16

    (@rodent16)

    16 years, 3 months ago

    Also, on A-Trak’s site the Navigation bar is not in any border.

    In addition, the top of the page closes off!

    How could I do these things?

    I really appreciate it,

    Robert

    Galaxy_High

    (@galaxy_high)

    16 years ago

    If you’re using WordPress style the class page_item and current_page_item.

    /*Work around for IE*/
#navigation ul li{
width: 120px;
float: left;}

#navigation ul li a:hover{
display: block;
color: #000;
background-color: #fff;}

.page_item a:link, .page_item a:visited, .page_item a:hover, .page_item a:active{
display: block;
width: 120px;
float: left;
color: #fff;
background-color: #000;}

.current_page_item a:link, .current_page_item a:visited, .current_page_item a:hover , .current_page_item a:active {
display: block;
color: #000;
background-color: #fff;}
Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Navigation Bar Customization’ is closed to new replies.