Unable to style jQuery tabs with CSS

Question

I am attempting to style my jQuery tabs with CSS, but am having no success. Perhaps I am not understanding CSS/Jquery enough.

Here is my CSS (I am trying to center the tabs for example)

#tabs-centre .ui-tabs-nav 
{ 
    height: 2.35em; 
    text-align: center; 
} 
#tabs-centre .ui-tabs-nav li 
{ 
    display: inline-block; 
    float: none; 
    top: 0px; 
    margin: 0em; 
}

And here is my html...

<!DOCTYPE html>
<html>
    <head>

        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

        <link rel="stylesheet" type="text/css" href="stylesheets/styles.css"/>
         <script>
            $(function() 
            {
                $( "#tabs" ).tabs();
            });
        </script>

    </head>
    <body>
        <div class="heading">
            <img class="stretchedwidth" src="images/magnolia.jpg" height=300px/>
        </div>
        <div id="tabs" class="#tabs-centre">
            <ul>
                <li><a href="#tabs-1">About Me</a></li>
                <li><a href="#tabs-2">Recipes</a></li>
                <li><a href="#tabs-3">Resources</a></li>
                <li><a href="#tabs-4">Register For Classes</a></li>
            </ul>
            <div id="tabs-1">
                My name is Alyssa. 
            </div>
            <div id="tabs-2">
                Here are some recipies
            </div>
            <div id="tabs-3">
                Here are some great resources
            </div>
            <div id="tabs-4">
                Look a form! <input type="text"/>
            </div>
        </div>
    </body>
</html>

My stylesheet is the "styles.css"

I don't see a class .ui-tabs-nav within your #tabs-centre div. That's most likely the problem. — TylerH
– TylerH, Commented Oct 11, 2014 at 19:52
how should I change my code? I don't know how to make something have multiple classes.... — Matthew
– Matthew, Commented Oct 11, 2014 at 19:55
<div id="tabs" class="tabs-centre class2 class3 andsoon"> and then .tabs-centre .ui-tabs-nav — reyaner
– reyaner, Commented Oct 11, 2014 at 19:56

TylerH · Accepted Answer · 2014-10-11 19:55:08Z

1

I see a couple problems.

I don't see a class .ui-tabs-nav anywhere in your markup. This could be added by jQuery, though.
You have #tabs-centre listed in your CSS, which is looking for an ID of tabs-centre, but you have a class in your markup called #tabs-centre, which is an invalid class name. Class names must start with an underscore, hyphen, or letter.

So change your classname in your markup to: tabs-centre and change your CSS to .tabs-centre.

As per your question about how to add multiple class names to an element, simply add a space in your class declaration, as user @reyaner pointed out:

<div id="tabs" class="tabs-centre class2 class3">

answered Oct 11, 2014 at 19:55

TylerH

21.3k84 gold badges84 silver badges121 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Unable to style jQuery tabs with CSS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related