XOOPS 
Forum
Forum Index General Forums Community Support Modules Support Themes Support Development International Support Module Hack Reviews Theme Designer Talk
  1. Board index / 
  2. XOOPS Themes and Templates Support forums / 
  3. Theme stylesheets (CSS) help 
  4.  / how to do a little color bar beside main menu?
Register
1
irmtfan
how to do a little color bar beside main menu?

  • 2006/9/4 9:22

  • irmtfan

  • Module Developer

  • Posts: 3419

  • Since: 2003/12/7


i want to have a main menu like menu in this site:
http://www.stylingnoord.nl/

it is used a different css code like this:
/* News Block Start */
.news{
        background-color: #3F467C;
        width: 3%;

}
.newslink {
        vertical-align: middle;
        color: #3F467C;
        text-decoration: none;
        
}    
td.newslink :hover{
        
        color: #ff6600;
        text-decoration: none;
}
.newsarchivelink a{
        
        color: #FF6600;
        text-decoration: none;
        
}    
td.newsarchivelink :hover{
        
        color: #3f467c;
        text-decoration: none;


}
/* News Block End */


i dont know how to do this with css for main menu in the code like #mainmenu a

i can do it with image but i want to found a way to do it with css.
2
homergz
Re: how to do a little color bar beside main menu?

  • 2006/9/4 11:01

  • homergz

  • Just popping in

  • Posts: 80

  • Since: 2006/5/21


That uses a border tag like this:

border-right: medium dashed white;
3
Daigoro
Re: how to do a little color bar beside main menu?

  • 2006/9/4 13:12

  • Daigoro

  • Quite a regular

  • Posts: 223

  • Since: 2003/7/3 2


Here's some quick code, written in notepad and only testet in IE, that makes that vertical bar you want.
I don't have access to an installed XOOPS to try to integrate it, but I'm sure you can do that yourself.

Here we go:

<html>
<head>
<style>
.test {
 background:#eee;
 padding: 5px 15px 5px 5px;
 margin: 0px 0px 5px 0px; 
 height:1;

 border-color:#fff;
 border-right-color:#000;
 
 border-width:0px;
 border-right-width:4px;
 border-style:solid;
}
</style>
</head>
<body>
</body>
<a href="test" class="test">test</a>
<br>
<a href="test" class="test">test</a>
<br>
<a href="test" class="test">test</a>

</html>


Happy coding...
Best regards,
Daigoro
4
irmtfan
Re: how to do a little color bar beside main menu?

  • 2006/9/4 21:34

  • irmtfan

  • Module Developer

  • Posts: 3419

  • Since: 2003/12/7


Thank you
i failed to do it by border because i didnt put margin and border-color:#000;

border-right-color:#000; doesnt work for this purpose.
also margin is important.
Thanks agian.now it show bar exactly like that i want.
always learn a new thing.
5
Daigoro
Re: how to do a little color bar beside main menu?

  • 2006/9/4 21:43

  • Daigoro

  • Quite a regular

  • Posts: 223

  • Since: 2003/7/3 2


Glad to hear it worked out for you.

Did you check if it renders correctly in both IE 5, 6 and Firefox?

As you probably allready know, IE implemented the box-model in a different way to the rest of the world, so you may run into trouble with this implementation - especially on IE 5.
Best regards,
Daigoro

Login

Register now!  |  Lost Password?

Search

Advanced Search

Recent Posts

Who's Online

246 user(s) are online (135 user(s) are browsing Support Forums)

Members: 0

Guests: 246

more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: May 31
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits