problem css menu

[ninowebs]

i have problem in my site phpbb, when copy this code menù in my css

<style>

ul{
margin:0;
padding:0;
}

li{
display:inline;
list-type:none;
}

a.glidebutton{
display: inline-block;
position: relative;
color: #4A4A4A; /* default color */
background: #ececec; /* default bg color */
text-decoration: none;
font: bold 14px Arial; /* font settings */
letter-spacing: 2px; /* font settings */
overflow: hidden;
height: 30px; /* height of each button */
text-align: center;
border-radius: 5px; /* border radius */
-moz-transition: all 0.3s ease-in-out; /* Enable CSS transition between property changes */
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

a.glidebutton > span:first-child{ /* first span inside button */
position: relative;
display: block;
height: 100%;
padding: 6px; /* padding of button */
-moz-box-sizing: border-box;
box-sizing: border-box;
-moz-transition: all 0.3s ease-in-out; /* Enable CSS transition between property changes */
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

a.glidebutton > span:first-child:after{ /* CSS generated content */
content: attr(data-text); /* Duplicate text of span markup */
display: block;
width: 100%;
height: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: inherit;
position: absolute;
top:100%;
left:0;
}

a.glidebutton:hover{
color: black; /* color of button on hover */
background: #72cb47; /* bg color of button on hover */
box-shadow: 0 0 4px green inset;
}

a.glidebutton:hover > span:first-child{
-moz-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
</style>

the proble is this is

ul{
margin:0;
padding:0;
}

li{
display:inline;
list-type:none;
}

me from this issue https://www.phpbb.com/community/view...t=90#p13971836


thank you.

[Beverleyh]

It's very difficult to help you without a link to your site, a clear description of the problem, and a standalone demo of the menu (CSS and HTML markup) you are trying to incorporate.

[ninowebs]

as I said before , I have a phpbb forum , I wanted to enrich it using your menu http://www.dynamicdrive.com/style/cs...ver_text_menu/ just do not just use it it works correctly , but in my site phpbb the bbcode list does not work , causing me this problem ,
bbcode list error



list instead should see proper , so


thank you

[Beverleyh]

Sorry, I don't understand what you're saying. Are you trying to paste the menu markup as bbcode in a forum post?

Please provide a link to your site so we can see the problematic code, then maybe somebody can help you.

[Puchahawa]

Hi Beverleyh, I have been trying to help minowebs with his challenge on the phpbb.com site. He is using phpbb v 3.1.2 and the Aeroblack theme which is a child theme of Aero . The problem he was having is when he added the css code above, it caused some of the bbcodes not to function.

The particular one he is trying to show you in the pics is the list bbcode. When he used the list bbcode it failed to function. You can see in the first attachment that instead of making a list like the second attachment shows, it just put the list items one after the other on the same line.

We were doing a process of elimination to try and figure out what was causing the bbcode not to function and when he removed the css code the list bbcode started to work again.

What he is wanting to know is how to get the css code to play nice with the boards bbcode. I don't know enough about css to help him with that. I am not sure if the css code needs to be in a specific location within the file or edited in some way? Perhaps it a question of what css file it should be in?

His board is here: http://www.ninowebs.it/viewtopic.php?f=2&t=8466 This is the specific topic that was showing the dysfunctional list code. I'm guessing that with the css code removed that you won't see any issue. I'm hoping that my sharing this info you will better be able to understand what he needs and be able to help him.

I just looked at the code in question and I'm wondering if he used the html or not and what files the codes should be in?

[Beverleyh]

Ah, I think I understand. So pasting the menu markup/CSS into the Aero template file is having a knock-on effect with the formatting of bbcode lists in forum posts? Did I understand that correctly?

If this is the case, try adding a class to the <ul> in the menu markup;

<ul class="glidemenu">
<li><a class="glidebutton" href="http://www.dynamicdrive.com"><span data-text="Home">Home</span></a></li>
<li><a class="glidebutton" href="http://www.dynamicdrive.com/new.htm"><span data-text="New">New</span></a></li>
<li><a class="glidebutton" href="http://www.dynamicdrive.com/revised.htm"><span data-text="Revised">Revised</span></a></li>
<li><a class="glidebutton" href="http://www.dynamicdrive.com/style/"><span data-text="CSS Library">CSS Library</span></a></li>
<li><a class="glidebutton" href="http://www.javascriptkit.com"><span data-text="JavaScript Ref">JavaScript Ref</span></a></li>
<li><a class="glidebutton" href="http://www.cssdrive.com"><span data-text="CSS Gallery">CSS Gallery</span></a></li>
</ul>

And target it in the menu CSS like this;

ul.glidemenu{
margin:0;
padding:0;
}

ul.glidemenu li{
display:inline;
list-type:none;
}

This should now only affect the glidemenu list markup and leave the bbcode list formatting alone.

[marckstate]

during implantation there is a problem in the second line: /

[Puchahawa]

That looks like an effective workaround. Guess It's up to minowebs to give it a try and see if it works for him. Thank you for your assistance.

[ninowebs]

I thank you infinitely , but now I see the menu so ..

[Beverleyh]

It is unclear what your screen capture image represents. Is that an image of the list items posted in a forum post OR the menu in a template header file?

Please try to be very clear because nobody can help you if you continue to post vague responses with cryptic images.

You can use the developer tools console to help you troubleshoot the CSS. You can access that by pressing F12 in your browser while viewing the page, or, (depending on the browser) right-click and inspect the problematic element.

Tip: list items stacked vertically can usually be made to sit in a row by applying display:inline; or float:left; to their CSS.

If you want further help, please provide a link to your site so we can see the problem (this is the 3rd time I've asked), along with a clear description of what you expect to happen versus what is actually happening. Hopefully somebody can then pick up and help you.