The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Css Menu on Forumotion

View previous topic View next topic Go down

Solved Css Menu on Forumotion

Post by muhaymin123123 on May 26th 2010, 10:15 am

Hey,

I need help in putting a css Style menu For my Forums.

Code:


<style>
ul.menu {
list-style-type:none;
width:auto;
position:relative;
display:block;
height:33px;
font-size:.6em;
background:url(http://i49.tinypic.com/29qhxmd.jpg) repeat-x top left;
font-family:Verdana,Helvetica,Arial,sans-serif;
border:1px solid #000;
margin:0;
padding:0;
}

ul.menu li {
display:block;
float:left;
margin:0;
padding:0;
}

ul.menu li a {
float:left;
color:#A79787;
text-decoration:none;
height:24px;
padding:9px 15px 0;
}

ul.menu li a:hover,.current {
color:#fff;
background:url(http://i49.tinypic.com/29qhxmd.jpg) repeat-x top left;
}

ul.menu .current a {
color:#fff;
font-weight:700;
}


/*RED*/
ul.menu.red{
background-color:#B11718;
}
ul.menu.red li a:hover, .menu.red li.current {
background-color:#DE3330;
}
</style>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />
<link rel='stylesheet' type='text/css' href='menu_style.css' />
<title></title>

</head>
<body>
<ul class="menu red">
  <li><a href="#" title="">Home</a></li>
  <li class="current"><a href="#" title="">Products</a></li>
  <li><a href="#" title="" >Downloads</a></li>
  <li><a href="#" title="">Contact</a></li>
  <li><a href="#" title="">About Us</a></li>
</ul>
<style>
</body>
</html>

What i have already tried
1) made a widget copied the code over there didn't work
2) edit my CSS in my Style CSS Spreadsheet didn't work


So any other way ?
or is there something wrong with the code ?


About my Forums::
www.snipegen.com
Domain: registered
Space: 20mb
phpBB2
Portal Activated::


Thanks for you help
~Momo

muhaymin123123
New Member

Posts : 22
Reputation : 0
Language : english

Back to top Go down

Solved Re: Css Menu on Forumotion

Post by harvengure on May 26th 2010, 11:26 am

Well, for starters the extra style tag in the body is useless. :p But as far as I can tell....you should try removing the width and see if that does the trick.

harvengure
Forumember

Posts : 86
Reputation : 0
Language : English

Back to top Go down

Solved Re: Css Menu on Forumotion

Post by Japorized on May 26th 2010, 12:08 pm

Perhaps this is what you are searching for.
Spoiler:

Video prepared by Jalokim.

Japorized
Forumember

Male Posts : 310
Reputation : 3
Language : English
Location : Malaysia

http://infinityhub.ace.st

Back to top Go down

Solved Re: Css Menu on Forumotion

Post by muhaymin123123 on May 26th 2010, 2:19 pm

Thanks guys, but this is not what i am looking for
i highly appreciate your help

but i am looking for steps how can i put my menu up on my site,
Simply i am a noob at HTML and CSS..

so please provide me some basic Steps - so that i can follow it Smile


Cheers,
momo

muhaymin123123
New Member

Posts : 22
Reputation : 0
Language : english

Back to top Go down

Solved Re: Css Menu on Forumotion

Post by Kiekeboe on May 26th 2010, 6:27 pm

Allright, I think i'm gonna say something stupid now, but shouldn't the first tag [<style>] be this:
Code:

<style type="text/css">

So that you would get this:

Code:

<style type="text/css">
ul.menu {
list-style-type:none;
width:auto;
position:relative;
display:block;
height:33px;
font-size:.6em;
background:url(http://i49.tinypic.com/29qhxmd.jpg) repeat-x top left;
font-family:Verdana,Helvetica,Arial,sans-serif;
border:1px solid #000;
margin:0;
padding:0;
}

ul.menu li {
display:block;
float:left;
margin:0;
padding:0;
}

ul.menu li a {
float:left;
color:#A79787;
text-decoration:none;
height:24px;
padding:9px 15px 0;
}

ul.menu li a:hover,.current {
color:#fff;
background:url(http://i49.tinypic.com/29qhxmd.jpg) repeat-x top left;
}

ul.menu .current a {
color:#fff;
font-weight:700;
}


/*RED*/
ul.menu.red{
background-color:#B11718;
}
ul.menu.red li a:hover, .menu.red li.current {
background-color:#DE3330;
}
</style>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />
<link rel='stylesheet' type='text/css' href='menu_style.css' />
<title></title>

</head>
<body>
<ul class="menu red">
  <li><a href="#" title="">Home</a></li>
  <li class="current"><a href="#" title="">Products</a></li>
  <li><a href="#" title="" >Downloads</a></li>
  <li><a href="#" title="">Contact</a></li>
  <li><a href="#" title="">About Us</a></li>
</ul>
<style>
</body>
</html>

Kiekeboe
Forumember

Female Posts : 250
Reputation : -1
Language : Dutch, english, german and a little bit french, guitar chords, html, a bit CSS
Location : Maastricht (Holland)

http://wolfstory.clicboard.com

Back to top Go down

Solved Re: Css Menu on Forumotion

Post by harvengure on May 27th 2010, 12:05 am

Generally, Kiekeboe, I agree...but the style and the style type tags are the exact same thing. It's simply a better practice to specify what type the style tag is given that though the style tag is supported by all major browsers, there are those who still need the specification....even some builds of the major browsers.

Regardless though, the only serious problem I found that prevented the css menu from working correctly was the width. Hopefully the OP will confirm that it worked for them.

harvengure
Forumember

Posts : 86
Reputation : 0
Language : English

Back to top Go down

Solved Re: Css Menu on Forumotion

Post by Japorized on May 27th 2010, 10:55 am

Sorry for not fully understanding the message.

I'm using PunBB so this my how I do it.

First:
Admin panel -> Display -> Templates -> overall_header_new

Second:
Search for {GENERATED_NAV_BAR}

Below is what is around my code
Code:
<div id="pun-navlinks">
                     <ul class="clearfix">
                        <li>{GENERATED_NAV_BAR}</li>
                     </ul>
                  </div>

Third:
Change the {GENERATED_NAV_BAR} and add this into it and make it look like this.

Code:
<div id="pun-navlinks">
                     <ul class="menu red">
                        <li><a href="#" title="">Home</a></li>
  <li class="current"><a href="#" title="">Products</a></li>
  <li><a href="#" title="" >Downloads</a></li>
  <li><a href="#" title="">Contact</a></li>
  <li><a href="#" title="">About Us</a></li>
                     </ul>
                  </div>

Don't publish your code yet! Preview it and if there's any trouble, post it here.

PS: I did not try it anywhere and I just posted this up so it can fail easily. I don't know if it'll work so let me know.

Sorry if I'm rude or this fails. And remember to not publish it yet!

Japorized
Forumember

Male Posts : 310
Reputation : 3
Language : English
Location : Malaysia

http://infinityhub.ace.st

Back to top Go down

Solved Re: Css Menu on Forumotion

Post by muhaymin123123 on May 27th 2010, 10:22 pm

issue is solved, i know how to do it

all thanks to you guys ,

love ya

Thanks soo MUCH!!!


!~MOMO

ISSUE SOLVED ,

i guess sanket can lock the post now Razz XD

muhaymin123123
New Member

Posts : 22
Reputation : 0
Language : english

Back to top Go down

Solved Re: Css Menu on Forumotion

Post by Sanket on May 28th 2010, 5:42 am

Since this thread is marked solved, I will lock this thread.


Sanket Smile

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum