SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot west end lane's Avatar
    Join Date
    Mar 2010
    Location
    London, U.K.
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multiple style sheets with Jquery

    Hi,

    I'am trying to work out the best method for adding a second style sheet to control a Jquery Slider i have just added to my mock site here : http://www.cusodesign.com/work.html

    The Jquery tut i am following here: http://cssglobe.com/post/3783/jquery...content-slider

    With the Tut comes a folder of CSS to style the slider. What i would like to do is have this folder saved as a separate stylesheet and point it at the container Div holding the slider.

    Not sure if this is the right practice, and if it is how it should be linked up.

    Open to any suggestions, cheers.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Just add another link in the head to the stylesheet containing the styles that the slider div needs. You can't link to a folder but you can link to the file in question.

    e.g.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Cuso Design</title>
    <link href="cusostyles.css" rel="stylesheet" type="text/css" />
    
    <link href="sliderstyles.css" rel="stylesheet" type="text/css" />
    Is that what you meant?

  3. #3
    SitePoint Zealot west end lane's Avatar
    Join Date
    Mar 2010
    Location
    London, U.K.
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul, thanks for the fast reply.

    I just put in the css link into my head, but unfortunately it restyled my whole page. Should i just rename a few things so the second stylesheet points to the Slider only? Sorry if this is kinda basic, never dealt with more than one style sheet.

    Cheers

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,657
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    say the slider div is called "#slider". In your second style sheet eeverything should start with #slider. EG...

    #slider a {..}

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)

    The Jquery tut i am following here: http://cssglobe.com/post/3783/jquery...content-slider

    With the Tut comes a folder of CSS to style the slider.
    I just downloaded that zip and i didn't see any css files. There are some html pages with embedded css but no actual css files unless I downloaded the wrong zip.
    Code:
    <style>
    body {
        margin:0;
        padding:40px;
        background:#fff;
        font:80&#37; Arial, Helvetica, sans-serif;
        color:#555;
        line-height:180%;
    }
    h1{
        font-size:180%;
        font-weight:normal;
        }
    h2{
        font-size:160%;
        font-weight:normal;
        }    
    h3{
        font-size:140%;
        font-weight:normal;
        }    
    img{border:none;}
    pre{
        display:block;
        font:12px "Courier New", Courier, monospace;
        padding:10px;
        border:1px solid #bae2f0;
        background:#e3f4f9;    
        margin:.5em 0;
        width:500px;
        }        
    
    /* Easy Slider */
    
        #slider ul, #slider li{
            margin:0;
            padding:0;
            list-style:none;
            }
        #slider, #slider li{ 
            /* 
                define width and height of container element and list item (slide)
                list items must be the same size as the slider area
            */ 
            width:696px;
            height:241px;
            overflow:hidden; 
            }
        span#prevBtn{}
        span#nextBtn{}                    
    
    /* // Easy Slider */
    
    </style>
    All you would need from the above is as Eric mentioned and copy all the code that refers only to #slider.

    e.g.

    Code:
    /* Easy Slider */
    
        #slider ul, #slider li{
            margin:0;
            padding:0;
            list-style:none;
            }
        #slider, #slider li{ 
            /* 
                define width and height of container element and list item (slide)
                list items must be the same size as the slider area
            */ 
            width:696px;
            height:241px;
            overflow:hidden; 
            }
        span#prevBtn{}
        span#nextBtn{}                    
    
    /* // Easy Slider */

  6. #6
    SitePoint Zealot west end lane's Avatar
    Join Date
    Mar 2010
    Location
    London, U.K.
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey guys,

    Sorry for disappearing, my phone line went dead. Went through the hassle of getting an engineer out (not easy with BT) to come round Monday morning. Except i just tried the phone and it's now fine. Strange.

    Thanks for the help, shall give it a go now.

    Cheers

  7. #7
    SitePoint Zealot west end lane's Avatar
    Join Date
    Mar 2010
    Location
    London, U.K.
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well i have the Slider sliding thanks to this site and it's looking fine. I've just run into one problem. I'd like to have the numeric slider in action. If i set numeric in the easyslider 1.7 code to true, i spot the numbers flick on to the far left just before the page loads, then it's gone. No numbers appear below the slider like they should.

    I'm guessing this is a CSS issue again. I was told my layout is not ideal as i have used a couple of AP Divs. Is there a way to get the numeric slider going, or am i stuck with the slider on it's own?

    Oh, i have also noticed if you click around where the numbers should be, the slider stops. So there is something there..

    Thanks.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You seem to have copied the demo pages css rather than just the css for the easy slider

    You should also float those elements rather than use relative positioning because relative doesn't move anthing ans shouldn't be used for pushing things around the page because it leaves gaps everywhere. relative position only moves things visually but they actually always take up their original space in the flow. they just appear to be somewhere else but all elements on the page don;t think the element has moved.

    Use floats and not absolute positioning so that the flow of the page is maintained.

    Here is a quick re-jig that shows the numbers now displaying correctly.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Cuso Design</title>
    <link href="cusostyles.css" rel="stylesheet" type="text/css" />
    <link href="slider.css" rel="stylesheet" type="text/css" />
    <style>
    @charset "UTF-8";
    body {
        margin:0;
        padding:0;
    }
    #Master {
        width: 990px;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
        position: relative;
        left: 0px;
        top: 0px;
    }
    #Main1 {
        position: relative;
        min-height: 820px;
        width: 990px;
        border-top-style: none;
        border-right-style: none;
        border-bottom-style: none;
        border-left-style: none;
        overflow: hidden;
    }
    #Header1 {
        position:relative;
        left:0px;
        top:0px;
        width:990px;
        height:90px;
        z-index:100;
        overflow: hidden;
        background-image: url(http://www.cusodesign.com/Images/cuso-header.gif);
    }
    #navbar {
        position: absolute;
        height: 25px;
        width: 455px;
        left: 489px;
        top: 59px;
    }
    #Footer1 {
        position:absolute;
        left:0px;
        top:590px;
        width:990px;
        height:227px;
        z-index:2;
        background-image: url(http://www.cusodesign.com/Images/Cuso-footer.jpg);
    }
    #Master #navbar a {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 16px;
        font-style: normal;
        color: #000;
        text-decoration: none;
        font-weight: normal;
        display: block;
        height: 25px;
        width: 90px;
        float: left;
        line-height: 32px;
        text-align: center;
    }
    #Master #navbar a:hover {
        text-decoration: none;
        background-image: url(http://www.cusodesign.com/Images/navbutton.png);
    }
    #main1bg {
        float:left;
        height: 265px;
        width: 397px;
        margin:20px 0 0 4px;
        background-image: url(http://www.cusodesign.com/Images/quote-box.gif);
        display:inline;
    }
    #Hometext {
        position: absolute;
        height: 147px;
        width: 990px;
        left: 0px;
        top: 408px;
    }
    #contacttext {
        position: absolute;
        height: 147px;
        width: 428px;
        left: 0px;
        top: 408px;
    }
    #Main1 h1 {
        font-family: "Times New Roman", Times, serif;
        font-size: 19px;
        font-style: normal;
        font-weight: 100;
        margin-top: 90px;
        margin-left: 60px;
    }
    #flash {
        position: absolute;
        height: 284px;
        width: 500px;
        left: 469px;
        top: 127px;
        overflow: visible;
        background-color: #999999;
    }
    #contactform {
        position: absolute;
        height: 375px;
        width: 427px;
        left: 502px;
        top: 213px;
        overflow: visible;
    }
    #thankyoutext {
        position: absolute;
        height: 375px;
        width: 427px;
        left: 497px;
        top: 199px;
        overflow: visible;
    }
    #slidewrap {
        width: 500px;
        float:left;
        margin:25px 0 0 25px;
    }
    #slider {
        position: relative;
        height: 200px;
        width: 500px;
        overflow: hidden;
    }
    p {
        margin-top: -10px;
        margin-right: 5px;
        margin-bottom: 5px;
        margin-left: 5px;
        font-family: Georgia, "Times New Roman", Times, serif;
        font-size: 12px;
        padding-top: 0px;
        padding-right: 5px;
        padding-bottom: 5px;
        padding-left: 5px;
    }
    h2 {
        font-size: 15px;
        font-family: Georgia, "Times New Roman", Times, serif;
        color: #333;
        margin: 10px;
        padding: 5px;
        font-weight: normal;
    }
    h3 {
        margin-left: 10px;
        margin-top: 15px;
        font-size: 14px;
    }
    #footertext {
        position: absolute;
        height: 224px;
        width: 500px;
        left: 10px;
        top: 2px;
    }
    #footercontact {
        position: absolute;
        height: 219px;
        width: 274px;
        left: 224px;
        top: 1px;
    }
    a:link {
        text-decoration: none;
        color: #333;
    }
    a:visited {
        text-decoration: none;
        color: #333;
    }
    a:hover {
        text-decoration: none;
        color: #F93;
    }
    a:active {
        text-decoration: none;
    }
    .orangeglow {
        background-image: url(http://www.cusodesign.com/Images/navbutton.png);
    }
    /*........................................................*/
    
    #slider img {
        border:none;
    }
    /* image replacement */
    .graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next {
        margin:0;
        padding:0;
        display:block;
        overflow:hidden;
        text-indent:-8000px;
    }
    /* // image replacement */
                
    /* Easy Slider */
    
    #slider ul, #slider li, #slider2 ul, #slider2 li {
        margin:0;
        padding:0;
        list-style:none;
    }
    #slider2 {
        margin-top:1em;
    }
    #slider li, #slider2 li {
        /* 
                define width and height of list item (slide)
                entire slider area will adjust according to the parameters provided here
            */ 
            width:500px;
        height:200px;
        overflow:hidden;
    }
    #prevBtn, #nextBtn, #slider1next, #slider1prev {
        display:block;
        width:30px;
        height:77px;
        position:absolute;
        left:-30px;
        top:71px;
        z-index:1000;
    }
    #nextBtn, #slider1next {
        left:520px;
    }
    #prevBtn a, #nextBtn a, #slider1next a, #slider1prev a {
        display:block;
        position:relative;
        width:30px;
        height:77px;
        background:url(file:///Macintosh&#37;20HD/Users/robertaris/Downloads/easyslider1.7/images/btn_prev.gif) no-repeat 0 0;
    }
    #nextBtn a, #slider1next a {
        background:url(file:///Macintosh%20HD/Users/robertaris/Downloads/easyslider1.7/images/btn_next.gif) no-repeat 0 0;
    }
    /* numeric controls */    
    
    ol#controls {
        margin:1em 0;
        padding:0;
        height:28px;
        clear:both;
    }
    ol#controls li {
        margin:0 10px 0 0;
        padding:0;
        float:left;
        list-style:none;
        height:28px;
        line-height:28px;
    }
    ol#controls li a {
        float:left;
        height:28px;
        line-height:28px;
        border:1px solid #ccc;
        background:#DAF3F8;
        color:#555;
        padding:0 10px;
        text-decoration:none;
    }
    ol#controls li.current a {
        background:#5DC9E1;
        color:#fff;
    }
    ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus {
        outline:none;
    }
    #slider ul, #slider li {
        margin:0;
        padding:0;
        list-style:none;
    }
    #slider, #slider li {
        width:500px;
        height:200px;
        overflow:hidden;
    }
    span#prevBtn {
    }
    span#nextBtn {
    }    
    
    
    /* // Easy Slider */
    </style>
    <script type="text/javascript" src="http://www.cusodesign.com/jquery.js"></script>
    <script type="text/javascript" src="http://www.cusodesign.com/easySlider1.7.js"></script>
    <script type="text/javascript">$(document).ready(function(){    
        $("#slider").easySlider({
            auto: true,
            continuous: true,
            numeric: true
        });
    });
    
       </script>
    </head>
    <body>
    <div id="Master">
        <div id="Main1">
            <div id="Header1">
                <div id="navbar"><a href="index.html">Home</a> <a href="work.html" class="orangeglow">Work</a> <a href="blog.html">Blog</a> <a href="about.html">About</a> <a href="contact.html">Contact</a></div>
            </div>
            <div id="main1bg">
                <h1>A selection of our most recent work...&quot; </h1>
            </div>
            <div id="slidewrap">
                <div id="slider">
                    <ul>
                        <li><img src="http://www.cusodesign.com/Images/slide1.jpg" width="500" height="200" alt="slide1" /></li>
                        <li><img src="http://www.cusodesign.com/Images/slide2.jpg" width="500" height="200" alt="slide2" /></li>
                        <li><img src="http://www.cusodesign.com/Images/slide3.jpg" width="500" height="200" alt="slide3" /></li>
                    </ul>
                </div>
            </div>
            <div id="Hometext">
                <h2></h2>
            </div>
            <div id="Footer1">
                <div id="footertext">
                    <h3>Connect</h3>
                    <p><a href="mailto:robert@cusodesign.com" target="_blank">E-Mail</a><br />
                        <a href="http://twitter.com/CUSODESIGN" target="_blank">Twitter</a><br />
                        <a href="http://www.facebook.com/pages/manage/#!/pages/Cuso-Design/101341879904661" target="_blank">Facebook</a></p>
                    <h3>Navigation</h3>
                    <p><a href="index.html">Home</a><br />
                        <a href="work.html">Work</a><br />
                        <a href="blog.html">Blog</a><br />
                        <a href="about.html">About</a><br />
                        <a href="contact.html">Contact</a></p>
                    <div id="footercontact">
                        <h3>Services</h3>
                        <p><a href="webdesign.html">Web Design</a><br />
                            <a href="print.html">Print</a><br />
                            <a href="photography.html">Photography</a><br />
                        </p>
                        <h3>Additional Info</h3>
                        <p><a href="faq.html">Frequently Asked Questions</a><br />
                            <a href="termsofservice.html">Terms of Service</a><br />
                            <a href="privacystatement.html">Privacy Statement </a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </body>
    </html>
    You still have the wrong paths to the previous and next buttons.

    Code:
      background:url(file:///Macintosh%20HD/Users/robertaris/Downloads/easyslider1.7/images/btn_prev.gif)  no-repeat 0 0;
    Although you aren't using them anyway but the code should be fixed or removed.

  9. #9
    SitePoint Zealot west end lane's Avatar
    Join Date
    Mar 2010
    Location
    London, U.K.
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul. You are an absolute legend.

    Really appreciate the time you put into explaining why it wasn't working and where i went wrong. I will be using floats from now on for sure.

    It's funny, because i spent 100 on a DVD where part of it taught to lay out your page using AP Divs (this after running from a course teaching tables for layout!). Now in one paragraph here i understand how to do it right!

    I guess AP divs must have their place, but i can see now how they can screw things up quite easily in laying out a page. Will be reading up more on floats over the coming weeks.

    So yeah, the slider is working nice now and I have removed the side button code.

    Thanks again

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    I guess AP divs must have their place, but i can see now how they can screw things up quite easily in laying out a page.
    The problem with absolute elements is that once you use them you cannot regain a normal flow of the page. Normally non positioned elements will start at the top of the page and move logically down the page just like writing text in a word processor.

    If you then insert another couple of paragraphs in the middle all the rest of the content moves down to make room and nothing needs to be changed. However if every word was absolutely positioned there would be no way for you to make a single change without it overlapping everything else.

    You can use absolute elements inside specific height elements (you create a stacking context by using position:relative on the parent) so that the flow is maintained by the parent and you can absolutely place a few icons or whatever into position. The flow outside the parent is not interrupted and you can can then carry on as normal.

    Absolute positioning is good in limited doses but doesn't really have a place in structural layout in all but the simplest of set ups.


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
  •