Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: problem css menu

  1. #1
    Join Date
    Mar 2015
    Posts
    5
    Thanks
    3
    Thanked 1 Time in 1 Post

    Default problem css menu

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

    Code:
    <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

    Code:
    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.

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,422
    Thanks
    16
    Thanked 416 Times in 414 Posts
    Blog Entries
    19

    Default

    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.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    Mar 2015
    Posts
    5
    Thanks
    3
    Thanked 1 Time in 1 Post

    Default

    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
    Click image for larger version. 

Name:	Cattura.PNG 
Views:	49 
Size:	3.4 KB 
ID:	5616


    list instead should see proper , so
    Click image for larger version. 

Name:	2.PNG 
Views:	50 
Size:	3.2 KB 
ID:	5617

    thank you

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,422
    Thanks
    16
    Thanked 416 Times in 414 Posts
    Blog Entries
    19

    Default

    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.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  5. The Following User Says Thank You to Beverleyh For This Useful Post:

    ninowebs (03-03-2015)

  6. #5
    Join Date
    Mar 2015
    Location
    SW Oregon
    Posts
    2
    Thanks
    1
    Thanked 1 Time in 1 Post

    Default

    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?
    Last edited by Puchahawa; 03-03-2015 at 08:08 PM. Reason: additional info

  7. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,422
    Thanks
    16
    Thanked 416 Times in 414 Posts
    Blog Entries
    19

    Default

    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;
    Code:
    <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;
    Code:
    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.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  8. #7
    Join Date
    Feb 2015
    Location
    Lonodn
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  9. #8
    Join Date
    Mar 2015
    Location
    SW Oregon
    Posts
    2
    Thanks
    1
    Thanked 1 Time in 1 Post

    Default

    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.

  10. The Following User Says Thank You to Puchahawa For This Useful Post:

    ninowebs (03-04-2015)

  11. #9
    Join Date
    Mar 2015
    Posts
    5
    Thanks
    3
    Thanked 1 Time in 1 Post

    Default thank you

    I thank you infinitely , but now I see the menu so ..
    Click image for larger version. 

Name:	Cattura63.jpg 
Views:	44 
Size:	8.4 KB 
ID:	5621

  12. #10
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,422
    Thanks
    16
    Thanked 416 Times in 414 Posts
    Blog Entries
    19

    Default

    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.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

Similar Threads

  1. Replies: 0
    Last Post: 11-20-2011, 08:54 PM
  2. Smooth Menu Sub Menu style problem in IE
    By dipper85 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 09-18-2011, 09:46 PM
  3. Smooth Nav Menu, problem with vertical menu in IE6
    By spyd3r0x in forum Bug reports
    Replies: 0
    Last Post: 07-20-2009, 06:05 PM
  4. Replies: 0
    Last Post: 02-17-2009, 07:08 PM
  5. Jim's DHTML Menu v5.7 problem with vertical float menu
    By msandi in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 11-06-2004, 08:46 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •