0

I am trying to style a page in jquery using CSS but it doesn't seem to work. Currently am using jquery 1.3.0 css however I am unable to align my #navgroup to the centre of the footer and I am also unable to remove the additional counter in white from the slider. My code is below:

<!doctype html>
<html lang="en">
<head>
    <title>Player</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
        <style>

    #navgroup {text-align:center;}
    #navgroup div {display:inline-block;}

        .containing-element .ui-slider-switch
    {
        width: 100%;
    }

    input.ui-slider-input {display: none;}

    .slider-shit .ui-btn
    {
        margin-left: -15px;
        margin-top: -15px;
    }

    .slider-shit .ui-slider
    {
        width: 100%;
        top: 3px;
        margin: 0;
        opacity: 1;
    }

    .slider-shit
    {
        padding: 0 20px;
    }
    </style>
</head>
<body>
    <!--Player for indivdual and playlist songs-->
    <div data-role="page" data-add-back-btn="true" id="player">
        <div data-role="header" data-position="fixed">
            <h1 id="songName">Nothing Playing...</h1>
            <a href="#" id="favourite" data-role="button" data-icon="star" data-iconpos="notext" class="ui-btn-right">mark as favourite</a>
        </div>
        <div data-role="content" style="height: 100%;" id="songPicture">
        </div>
        <div data-role="footer" data-position="fixed">
            <table style="margin-left: 5px; margin-right: 5px;">
                <tr>
                    <td><p id="songCurrentpos">0:00</p></td>
                    <td width="100%" class="slider-shit"><input type="range" name="slider" id="posSlider" value="0" min="0" max="100" width="100%" data-theme="d" data-highlight="true"/></td>
                    <td><p id="songDuration">0:00</p></td>
                </tr>
            </table>
            <div id="navgroup">
                <div data-role="controlgroup" data-type="horizontal">
                    <a data-role="button" data-iconpos="top" data-icon="back" id="previousSong" data-inline="true">Previous</a>
                    <a data-role="button" data-iconpos="top" data-icon="arrow-r" id="playSong" data-inline="true">Play</a>
                    <a data-role="button" data-iconpos="top" data-icon="forward" id="nextSong" data-inline="true">Next</a>
                    <a href="#songOptionsPage" id="songOptionsButton" data-role="button" data-iconpos="top" data-icon="gear" data-iconpos="notext" data-rel="dialog" data-inline="true">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                </div>
            </div>
        </div>
    </div>
</body>

Gajotres
  • 57,309
  • 16
  • 102
  • 130
Kern Elliott
  • 1,659
  • 5
  • 41
  • 65

1 Answers1

0

This should do it.

Working example: http://jsfiddle.net/Gajotres/YKY3y/

#navgroup {text-align:center;}
#navgroup div {display:inline-block;}

    .containing-element .ui-slider-switch
{
    width: 100%;
}

input.ui-slider-input {display: none;}

.slider-shit .ui-btn
{
    margin-left: -15px;
    margin-top: -15px;
}

.slider-shit .ui-slider
{
    width: 100%;
    top: 3px;
    margin: 0;
    opacity: 1;
}

.slider-shit
{
    padding: 0 20px 0 0;
}

.ui-slider div {
    margin:  0 15px 0 38px !important;
}

.ui-slider div div {
    margin:  0 !important;
}

#posSlider {
     display: none;           
}
Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • this works excellent however if I want to move the last button in the group out of the control group and on the far right how can this be done. Also to get the actual buttons bigger in size I will like this to happen also. – Kern Elliott Mar 28 '13 at 16:37