...

View Full Version : CSS Navigation Help Please..T_T



snowwarrior
07-18-2007, 09:55 AM
Hi, I am attempting to create a navigation bar completely out of CSS.

I have looked at several examples floating on the web and tried to figure it out by myself, yet I had no luck.

The part I kept on getting stuck at was the color part. I want to create a navigation in which each tab has different color. I would also like to have a sub menu when mouse is rolled over.

Here's my Photoshop rendering of the kind of menu bar I want:
http://img487.imageshack.us/img487/3282/navigationrequestwe5.th.gif (http://img487.imageshack.us/my.php?image=navigationrequestwe5.gif)


If anybody can pinpoint me to the right tutorial or help that will be highly appreciated..=]

Of course, it's all the better if someone can just code one for me..x]

Also, I am looking for something not too complicated because I don't want any dirty coding.

I sound very demanding, but it will be great if it works on all browsers..:D


Thanks a bunch for helping me out..=]

_Aerospace_Eng_
07-18-2007, 11:20 AM
Of course, it's all the better if someone can just code one for me..x]
Yeah keep dreaming. :rolleyes:


Also, I am looking for something not too complicated because I don't want any dirty coding.
Then do it yourself.

Decent menu similar to the one you want here: http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm

Finally if you still can't figure it out on your own, post questions that specific to the problem you are having or hire someone who knows what they are doing.

Blekk
07-18-2007, 12:17 PM
It wouldn't be that hard really,

you would just need to have an anchor tag that references a span inside for each button:

CSS:

a.menubutton span{display:none;}
a.menubutton:hover span{display:block;}


HTML:


<a class='menubutton' href="#">Menu Item 1<span><a href="">Login</a> | <a href="">Logout</a></span></a>


That code would make the span appear when hovering over the button with the menubutton class.

I have been doing these very recently (as ahallicks would tell you :P), and only learnt about them about a week ago, so it isn't hard.

Hope that helps.

snowwarrior
07-19-2007, 09:48 AM
Hey guys,

Thanks for helping out. I will go ahead and mess around with the code a bit and see if I can get this right.

I will post my result later and you guys can help me out again (hopefully)..x]

snowwarrior
07-20-2007, 11:09 AM
Hi,

So I found a script that best matched what I wanted to do and I tried modifying it to my need.

The problem occurred though...:(

I don't really understand how to change each tab's color without being overly redundant in coding.

Can anybody please teach me how to change each tab's color as in my Photoshop rendering?


Here is the link to the navigation:
http://mlife.phpnet.us/navigation/


And here's the stylesheet coding for the navigation:

#main {
border: 1px solid #1e75ab;
clear: both;
background: #1e75ab;
padding-top: 2em;
}

#contents {
padding: 1.5em;
background: #FFFDF3;
min-height: 300px;
}

#header {
position: relative;
width: 100%;
height: 3em;
width: 90em; /* a width is required for Opera, older Mozilla browsers, and Konqueror browsers */
}

#header ul#primary {
margin: 0;
padding: 0;
position: absolute;
bottom: -1px;
width: 90em; /* a width is required for Opera, older Mozilla browsers, and Konqueror browsers */
}

#header ul#primary li {
display: inline;
list-style: none;
}

#header ul#primary a,#header ul#primary span,#header ul#primary a.current {
width: 16em;
display: block;
float: left;
padding: 4px 0;
margin: 1px 8px 0 0;
text-align: center;
font-family: tahoma, verdana, sans-serif;
font-size: 85%;
font-weight: bold;
text-decoration: none;
color: #FFF;
}

#header ul#primary span,#header ul#primary a.current,#header ul#primary a.current:hover {
border: 1px solid #1e75ab;
border-bottom: none;
background: #1e75ab;
padding-bottom: 6px;
margin-top: 0;
}

#header ul#primary a {
background: #2382bd;
border-bottom: 1px #FFF;
}

#header ul#primary a:hover {
margin-top: 0;
border-color: #1e75ab;
background: #1e75ab;
padding-bottom: 5px;
}

#header ul#secondary {
position: absolute;
margin: 0;
padding: 0;
bottom: -1.4em;
left: 1px;
width: 50em; /* a width is required for Opera, older Mozilla browsers, and Konqueror browsers */
}

#header ul#secondary li a,#header ul#secondary li span {
width: auto;
display: block;
float: left;
padding: 0 10px;
margin: 0;
text-align: auto;
font-weight: normal;
border: none;
border-right: 1px dotted #FFF;
background: none;

}

#header ul#secondary li a {
color: #c9dce8;
text-decoration: underline;
}

#header ul#secondary li a:hover {
color: #FFF;
background: transparent;
text-decoration: underline overline;
padding: 0 10px;
border: none;
border-right: 1px dotted #FFF;
}

#header ul#secondary li a:active {
color: #000;
background: transparent;
}

#header ul#secondary li:last-child a { border: none; }

_Aerospace_Eng_
07-20-2007, 11:19 AM
You will have to set a class to each tab and give it a specific color. The CSS would look something like this

#header ul#primary a.blue {
background: blue;
border-bottom: 1px #FFF;
}
You would do the same changing the class for each of the other tabs. Look up the term CSS class or CSS id to find out how to use it properly.

snowwarrior
07-22-2007, 04:20 AM
Does that mean I have to do the same for this code as well?


#header ul#primary span,#header ul#primary a.current,#header ul#primary a.current:hover {
border: 1px solid #1e75ab;
border-bottom: none;
background: #1e75ab;
padding-bottom: 6px;
margin-top: 0;

snowwarrior
07-30-2007, 01:17 AM
Hi,, I know it's been a while, but a problem occurred again.

So, now I am trying to center the navigation and the main content according to the page, but I can't seem to accomplish that for some reason.

I tried: <div align="center"></div>, but it didn't work..:(

I don't know what's going on, but usually I was able to center it without doing anything..=\


Here's the link to the page where I am having a problem:
http://mlife.phpnet.us/navigation/

ahallicks
07-30-2007, 01:32 AM
Use the following for the second 'body':



body {
background: #FFFFFF;
color: #333;
padding: 1em 20px 3em 20px;
margin: 0;
}

snowwarrior
07-30-2007, 04:55 AM
Oh wow,, thanks a bunch..x]

Didn't know that was the problem.. haha



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum