SitePoint Sponsor

User Tag List

Page 3 of 5 FirstFirst 12345 LastLast
Results 51 to 75 of 123
  1. #51
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I must be putting it in the wrong place or something. It still seems to be anchored to the word Home. Take a look at the page to see what I mean.

  2. #52
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,534
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    The id for that list item must be unique, because IDs can only be used once on a page.

    Looks like you are making headway. Give that id the same dimensions as the image and the image should fit nicely.

  3. #53
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am using the code you sent. I just need an the company logo image where it says home in the graybox. I must be confused on where to put that, it is still anchored to the text and I am using a different Id for it. All the rest of the page is fine and doesn't need anymore change.

  4. #54
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,534
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Yep, you got it!

  5. #55
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What did I get? The image isn't appearing for me.

  6. #56
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,534
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Give me a few minutes. I'll get back to you.

  7. #57
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sure, no problem

  8. #58
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,534
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    The logo image, superfungames.png, really crowds the .graybar. Would you consider using a slightly scaled down version of the sfg.png image (63x63) instead? It would give about 6 more pixels of "breathing room" between the lists.

  9. #59
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,534
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    I changed the way the space is set between the list boxes in .graybox. The new method is simpler and gives more accurate control over the spacing.

    The code is set up to use the superfungames.png image as requested. The bar seems a bit crowded to me, though, so I made up a smaller, square image for you to try.

    Code for the smaller, square image, sfg63.png, is also included... commented out, of course.
    I recommend trying it when you get the smaller image and see what you think. Just swap the closing comment marks around and set the ul spacing as indicated.

    sfg63.png

    Replace ALL of the .graybox code on your stylesheet with this new version.

    Code:
    .graybox {                   /* THIS CONTAINER div holds the row of lists */
    /*    outline:1px solid magenta;   /* TEST OUTLINE ONLY - DELETE or comment out */
        text-align:center;       /* centers inline-block objects (the ul's) */
        padding-right:12px;      /* offsets the lists in .graybox just a tad */
        margin-top:620px;        /* distance from overhead container */
    }
    
    .graybox ul {
    /*    outline:1px solid yellow;    /* TEST OUTLINE ONLY - DELETE or comment out */
        display:inline-block;    /* sets the ul to an inline-block object so they will align in a row */
        vertical-align:top;      /* top-aligns the ul boxes */
        list-style-type:none;    /* removes the bullets */
        padding:0;               /* removes default padding for bullets */
        margin:0;                /* removes default margins above and below lists */
    }
    .graybox ul + ul {
        margin-left:18px;        /* horizontally separates the list boxes (the ul's) */
    }
    .graybox li {
        text-align:left;         /* left-aligns text within each list item */
    }
    
    /* anchor treatment (if needed) */
    .graybox a {
        line-height:1.6;         /* height of the list items */
        font-size:1.25em;
        text-decoration:none;
        text-indent:-9999px;     /* --- Push the text off screen to hide text --- */
        overflow:hidden;         /* Stops anchor outline from extending left off-screen */
    }
    .graybox a:link,
    .graybox a:visited {
        color:#000;
    }
    .graybox a:hover {
        color:#533996;
    }
    .graybox a:active {
        color:#f00;
    }
    /* --- REQUIRES: .graybox ul + ul {margin-left:18px;} --- */
    .graybox li#home2 a {
        display:block;
        background:url(../images/superfungames.png) no-repeat;
        width:128px;
        height:63px;
        margin-top:-1px;
    }
    
    /* --- REQUIRES: .graybox ul + ul {margin-left:24px;} ---
    .graybox li#home2 a {
        display:block;
        background:url(../images/sfg63.png) no-repeat;
        width:63px;
        height:63px;
        margin-top:-1px;
    }
    */

  10. #60
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The image is up to the boss man. That image was on the main menu before but he said it was too big, but he does want people to know what SFG stands for so he still wants to use the image. I'll take a look at it and see what it looks like.

  11. #61
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,534
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by shakmbakm View Post
    That image was on the main menu before but he said it was too big, but he does want people to know what SFG stands for so he still wants to use the image.
    Interesting. There is more room up top for the bigger image than in the .graybox. Bosses.
    Maybe he'll reconsider.

  12. #62
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know, my partner and I both thought it looked fine up there. Maybe he will reconsider after seeing it.

  13. #63
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    does all the html code stay the same?

  14. #64
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,534
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    I'm pretty sure the answer is "Yes". I'm just not sure what the question is

    If you mean in connection with that last .graybox css change, the answer is "yes", there were no HTML changes.

  15. #65
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got it, it looks good, I'll run it by the boss. What did you do to remove the bottom scrollbar? I'd like to do that on the other pages.

  16. #66
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can the graybox code be used in other pages as well?

  17. #67
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,534
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Is there any difference between these various pages other than the background image?

  18. #68
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the games page has the gamesmenu. All the others, besides the background, they each have a different margin for the greybox content.

  19. #69
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,534
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    OK, well, this should fix you up for the time being.

    THIS IS A NEAT TRICK.
    This one HTML page can be duplicated and can be used for ALL of the pages except the games page.
    The only things you need to do are give each page a unique filename AND a unique ID in the body tag. Notice that the body tag for this page says <body id="aboutpage">. You can guess that the name of this page should be about.html. See the bottom of the included CSS for the other known body ID names.

    ALL of the pages will be served by the included CSS sheet.

    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">
    <!-- Mirrored from superfunproductions.com/about.html by HTTrack Website Copier/3.x [XR&CO'2010], Fri, 23 Mar 2012 00:40:21 GMT -->
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta http-equiv="content-language" content="en-us" />
        <meta name="author" content="Rosalynne Chan" />
        <meta name="contact" content="webmaster@superfunproductions.com" />
        <meta name="copyright" content="Copyright (c)2013 Super Fun Productions. All Rights Reserved." />
        <meta name="description" content="Super Fun Games formed around the idea of quality game apps for all major mobile markets." />
        <meta name="keywords" content="super fun games, puzzle, fun games, games, puzzle games, apps, puzzle apps, music block attack, cuddly bears, game apps" />
        <title>Super Fun Games</title>
        <link rel="stylesheet" type="text/css" href="css/sfg.css" />
        <script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-26578422-1']);
    _gaq.push(['_trackPageview']);
    
    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
        </script>
    </head>
    <body id="aboutpage">
    <div id="wrapup">
        <ul id="mainMenu">
            <li id="home"><a href="home.html">Home</a></li>
            <li id="about"><a href="#">About</a></li>
            <li id="games"><a href="games.html">Games</a></li>
            <li id="news"><a href="news.html">News</a></li>
            <li id="presskits"><a href="presskits.html">Press Kits</a></li>
            <li id="faq"><a href="faq.html">FAQ</a></li>
            <li id="contact"><a href="contact.html">Contact</a></li>
        </ul>
        <div class="graybox">
            <ul>
                <li id="home2"><a href="home.html">HOME</a></li>
            </ul>
            <ul>
                <li><b>Games</b></li>
                <li><a href="cuddlybears.html">Cuddly Bears</a></li>
                <li><a href="arrow.html">Arrow Climber</a></li>
            </ul>
            <ul>
                <li><a href="CC.html">Crystal Catacombs</a></li>
                <li><a href="music_block_attack.html">Music Block Attack</a></li>
                <li><a href="snowmanwars.html">Snowman Wars</a></li>
            </ul>
            <ul>
                <li><b>Technology</b></li>
                <li><a href="games.html">Games</a></li>
            </ul>
            <ul>
                <li><a href="about.html">About<br/>SFG<br/>Team</a></li>
            </ul>
            <ul>
                <li><a href="about.html">Special Thanks</a></li>
                <li><a href="about.html">Who we Support</a></li>
                <li><a href="presskits.html">Press Kits</a></li>
            </ul>
            <ul>
                <li><a href="news.html">Recognition<br/>and Awards</a></li>
            </ul>
            <ul>
                <li><b>Other</b></li>
                <li><a href="careers.html">Careers</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
            <ul>
                <li><a href="news.html">News</a></li>
                <li><a href="faq.html">FAQ</a></li>
            </ul>
        </div>
    </div>
    </body>
    </html>
    Code:
    @charset "UTF-8";
    
    body {
        width:100%;
        font:10px normal Arial, Helvetica, sans-serif;
        padding:0;
        margin:0;
    }
    
    #wrapup {
        width:1024px;
        padding-bottom:20px;    /* space added below the given image height */
        margin:0 auto;
    }
    
    #mainMenu {
    /*    outline:1px solid magenta;  /* TEST OUTLINE ONLY - DELETE or comment out */
        list-style:none;  /* --- Makes the bullets go away --- */
        overflow:hidden;
        padding:20px 0 0 140px;  /* --- Take out any default padding and margin on the UL tag --- */
        margin:0;
    }
    
    #mainMenu li {
        position:relative;
        float:left;  /* --- Make the list go horizontal --- */
    }
    
    #mainMenu li + li {
        margin-left:30px;  /* --- Spacing between list items --- */
    }
    
    #mainMenu li li {
        float:none;
        position:static;
    }
    
    #mainMenu li a {
        display:block;  /* --- Make the entire button are clickable rather than the text alone --- */
        width:185px;  /* --- Height of buttons --- */
        height:78px;  /* --- Width of buttons --- */
        text-indent: -9999px; /* --- Push the text off screen to hide text --- */
        overflow: hidden; /* --- Makes text outside of bounding box hidden --- */
    }
    
    /*
    #mainMenu li#games ul li a.mba {
        background: url(../images/mbagames.jpg) no-repeat;
        width: 88px;
        height: 40px;
    }
    
    #mainMenu li#games ul li a.cb {
        background: url(../images/cb.jpg) no-repeat;
        width: 88px;
        height: 25px;
    }
    
    #mainMenu li#games ul li a.snowmanwars {
        background: url(../images/snoman.jpg) no-repeat;
        width: 88px;
        height: 40px;
    }
    
    #mainMenu li#games ul li a.arrowclimber {
        background: url(../images/ac.jpg) no-repeat;
        width: 88px;
        height: 40px;
    }
    
    #mainMenu li#games ul li a.crystalcatacombs {
        background: url(../images/crystalcatacombs.jpg) no-repeat;
        width: 88px;
        height: 40px;
    }
    */
    
    #mainMenu ul {
        margin-left:-999em;
        top:100%;
        left:0;
        position:absolute;
    }
    
    #mainMenu ul li a {
        width: 95px;
    }
    
    #mainMenu li:hover ul {
        margin: 0;
    }
    
    /*
    The following rules place the "normal"
    state image as the background for our anchor tags
    */
    
    #mainMenu li#home a {
        background: url(../images/sfg.png) no-repeat;
        width: 68px;
        height: 74px;
    }
    
    #mainMenu li#about a {
        background: url(../images/a1.png) no-repeat;
        width: 60px;
        height: 24px;
    }
    
    #mainMenu li#games a {
        background: url(../images/g1.png) no-repeat;
        width: 70px;
        height: 24px;
    }
    
    #mainMenu li#news  a {
        background: url(../images/n1.png) no-repeat;
        width: 60px;
        height: 24px;
    }
    
    #mainMenu li#presskits  a {
        background: url(../images/press.png) no-repeat;
        width: 76px;
        height: 24px;
    }
    
    #mainMenu li#faq  a {
        background: url(../images/faq.png) no-repeat;
        width: 60px;
        height: 24px;
    }
    
    #mainMenu li#contact a {
        background: url(../images/c1.png) no-repeat;
        width: 80px;
        height: 24px;
    }
    /*
    #mainMenu li#careers a {
        background: url(../images/careers.png) no-repeat;
        width: 88px;
        height: 24px;
    }
    */
    /*
    #mainMenu li#beta a {
        background: url(../images/b1.png) no-repeat;
        width: 88px;
        height: 35px;
    }
    */
    
    /*
    The following rules place the "over"
    state image as the background for our anchor tags
    when they are hovered over by the mouse
    */
    
    #mainMenu li#home a:hover {
    }
    
    #mainMenu li#about a:hover {
        background: url(../images/about2.png) no-repeat;
        width: 60px;
        height: 24px;
    }
    
    #mainMenu li#games a:hover {
        background: url(../images/games2.png) no-repeat;
        width: 70px;
        height: 24px;
    }
    
    /*
    #mainMenu li#careers a:hover {
        background: url(../images/careers2.png) no-repeat;
        width: 88px;
        height: 24px;
    }
    */
    
    #mainMenu li#contact a:hover {
        background: url(../images/contact2.png) no-repeat;
        width: 80px;
        height: 24px;
    }
    
    #mainMenu li#news a:hover {
        background: url(../images/news2.png) no-repeat;
        width: 60px;
        height: 24px;
    }
    
    /*
    The following rules place the "down"
    state image as the background for our anchor tags
    when they anchor tag has the class of current
    */
    
    #mainMenu li#home a.current {
        cursor:default;  /*--- Show pointer instead of hand cursor for the current page ---*/
    }
    
    #mainMenu li#about a.current {
        background: url(../images/about.png) no-repeat;
        cursor:default;
    }
    
    #mainMenu li#games a.current {
        background: url(../images/games.png) no-repeat;
        cursor:default;
    }
    
    #mainMenu li#careers a.current {
        background: url(../images/careers.png) no-repeat;
        cursor:default;
    }
    
    #mainMenu li#contact a.current {
        background: url(../images/contact.png) no-repeat;
        cursor:default;
    }
    
    
    #gamesMenu {
    /*    outline:1px solid magenta;   /* TEST OUTLINE ONLY - DELETE or comment out */
        list-style:none;  /*--- Makes the bullets go away ---*/
        overflow:hidden;
        padding:0 0 0 136px;    /* left padding changed from:160px to 136px */
        margin:150px 0 0;
    }
    
    #gamesMenu li {
        position:relative;
        float:left;  /*--- Make the list go horizontal ---*/
    }
    
    #gamesMenu li li {
        float:none;
        position:static;
    }
    
    #gamesMenu li a {
        display:block;  /*--- Make the entire button are clickable rather than the text alone ---*/
        width:165px;  /*--- Height of buttons ---*/
        height:25px;  /*--- Width of buttons ---*/
        text-indent: -9999px; /*--- Push the text off screen to hide text---*/
        overflow: hidden; /*--- Makes text outside of bounding box hidden ---*/
    
    }
    
    
    #gamesMenu ul {
        margin-left: -999em;
        top: 100%;
        left: 0;
        position: absolute;
    
    }
    
    #gamesMenu ul li a {
        width: 95px;
    }
    
    #gameMenu s li:hover ul {    /* IS THIS A VALID SELECTOR?  "s" ? */
        margin: 0;
    }
    
    /*
    The following rules place the "normal"
    state image as the background for our anchor tags
    */
    
    #gamesMenu li#mba a {
        background: url(../images/music.png) no-repeat;
        width: 165px;
        height: 25px;
    }
    
    #gamesMenu li#cc a {
        background: url(../images/crystal.png) no-repeat;
        width: 175px;
        height: 25px;
    }
    
    #gamesMenu li#cb a {
        background: url(../images/cuddly.png) no-repeat;
        width: 135px;
        height: 25px;
    }
    
    #gamesMenu li#smw  a {
        background: url(../images/snow.png) no-repeat;
        width: 150px;
        height: 25px;
    }
    
    #gamesMenu li#ac  a {
        background: url(../images/climber.png) no-repeat;
        width: 135px;
        height: 25px;
    }
    
    #gamesMenu li#mba a:hover {
        background: url(../images/music2.png) no-repeat;
        width: 165px;
        height: 25px;
    }
    
    #gamesMenu li#cc a:hover {
        background: url(../images/crystal2.png) no-repeat;
        width: 175px;
        height: 25px;
    }
    
    #gamesMenu li#cb a:hover {
        background: url(../images/cuddly2.png) no-repeat;
        width: 135px;
        height: 25px;
    }
    
    #gamesMenu li#smw a:hover {
        background: url(../images/snow2.png) no-repeat;
        width: 150px;
        height: 25px;
    }
    
    #gamesMenu li#ac a:hover {
        background: url(../images/climber2.png) no-repeat;
        width: 135px;
        height: 25px;
    }
    
    /*
    The following rules place the "down"
    state image as the background for our anchor tags
    when they anchor tag has the class of current
    */
    
    #gamesMenu li#mba a.current {
        background: url(../images/music.png) no-repeat;
        cursor:default;
    }
    
    #gamesMenu li#cc a.current {
        background: url(../images/crystal.png) no-repeat;
        cursor:default;
    }
    
    #gamesMenu li#cb a.current {
        background: url(../images/cuddly.png) no-repeat;
        cursor:default;
    }
    
    #gamesMenu li#ac a.current {
        background: url(../images/climber.png) no-repeat;
        cursor:default;
    }
    
    .graybox {                   /* THIS CONTAINER div holds the row of lists */
    /*    outline:1px solid magenta;   /* TEST OUTLINE ONLY - DELETE or comment out */
        text-align:center;       /* centers inline-block objects (the ul's) */
        padding-right:12px;      /* offsets the lists in .graybox just a tad */
        margin-top:620px;        /* distance from overhead container */
    }
    
    .graybox ul {
    /*    outline:1px solid yellow;    /* TEST OUTLINE ONLY - DELETE or comment out */
        display:inline-block;    /* sets the ul to an inline-block object so they will align in a row */
        vertical-align:top;      /* top-aligns the ul boxes */
        list-style-type:none;    /* removes the bullets */
        padding:0;               /* removes default padding for bullets */
        margin:0;                /* removes default margins above and below lists */
    }
    .graybox ul + ul {
        margin-left:18px;        /* horizontally separates the list boxes (the ul's) */
    }
    .graybox li {
        text-align:left;         /* left-aligns text within each list item */
    }
    
    /* anchor treatment (if needed) */
    .graybox a {
        line-height:1.6;         /* height of the list items */
        font-size:1.25em;
        text-decoration:none;
        text-indent:-9999px;     /* --- Push the text off screen to hide text --- */
        overflow:hidden;         /* Stops anchor outline from extending left off-screen */
    }
    .graybox a:link,
    .graybox a:visited {
        color:#000;
    }
    .graybox a:hover {
        color:#533996;
    }
    .graybox a:active {
        color:#f00;
    }
    /* --- REQUIRES: .graybox ul + ul {margin-left:18px;} --- */
    .graybox li#home2 a {
        display:block;
        background:url(../images/superfungames.png) no-repeat;
        width:128px;
        height:63px;
        margin-top:-1px;
    }
    
    /* --- REQUIRES: .graybox ul + ul {margin-left:24px;} ---
    .graybox li#home2 a {
        display:block;
        background:url(../images/sfg63.png) no-repeat;
        width:63px;
        height:63px;
        margin-top:-1px;
    }
    */
    
    #gamespage {background:#533996 url(../images/games.png) no-repeat scroll 50% 0;}
    #gamespage #wrapup {height:994px;padding-bottom:60px;}
    #gamespage .graybox {margin-top:620px;}
    
    #aboutpage {background:#533996 url(../images/about.png) no-repeat scroll 50% 0;}
    #aboutpage #wrapup {height:1032px;}
    #aboutpage .graybox {margin-top:823px;}
    
    #newspage {background:#533996 url(../images/news.png) no-repeat scroll 50% 0;}
    #newspage #wrapup {height:610px;}
    #newspage .graybox {margin-top:418px;}
    
    #contactpage {background:#533996 url(../images/Contact.png) no-repeat scroll 50% 0;}
    #contactpage #wrapup {height:655px;}
    #contactpage .graybox {margin-top:462px;}
    
    #mbapage {background:#533996 url(../images/mba.png) no-repeat scroll 50% 0;}
    #mbapage #wrapup {height:1226px;}
    #mbapage .graybox {margin-top:1034px;}
    
    #ccpage {background:#533996 url(../images/CC.png) no-repeat scroll 50% 0;}
    #ccpage #wrapup {height:911px;}
    #ccpage .graybox {margin-top:716px;}
    
    #cbpage {background:#533996 url(../images/cb.png) no-repeat scroll 50% 0;}
    #cbpage #wrapup {height:865px;}
    #cbpage .graybox {margin-top:673px;}
    
    #smwpage {background:#533996 url(../images/smw.png) no-repeat scroll 50% 0;}
    #smwpage #wrapup {height:1506px;}
    #smwpage .graybox {margin-top:1318px;}
    
    #acpage {background:#533996 url(../images/ac.png) no-repeat scroll 50% 0;}
    #acpage #wrapup {height:840px;}
    #acpage .graybox {margin-top:656px;}
    
    /* ...etc... */
    The height value in #wrapup is the height of the background image.

    I hope you are learning something from all of this

  20. #70
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh yeah I'm definitely know a lot more that I did! So the html pages can all use this on CSS then? That is a neat trick

  21. #71
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,534
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Yes. One page does [almost] all. And they will all validate squeaky clean

  22. #72
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    on the home page, the graybox seems to be pushing the slideshow up and I'm not sure why its doing that.

  23. #73
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,534
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Oops, that's my fault. I didn't know there was a slide show on that page. Skip the home page for the time being. I'll look at it.

    You need to keep your original css file active and link the new pages to the new css file. There is NO css for the "home" page in the new css file. That was a page whose dimensions were unknown and I must have skipped it by mistake. It will still work, but it has to use the original css file until I can determine the dimensions used by the slideshow.

    So link the new pages to a new css name and you'll be OK.

    Is that too complicated?

  24. #74
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well it is still connected to the original CSS so it doesn't have to do with that page, But thank you for telling me in advance. I think it has to do with the graybox margin going from the slideshow container, but I don't know why that would push it up?

  25. #75
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,534
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Did you change anything on that original css?

    Lets get the other pages working, then we can fix the home page. Like the games page, it will need some special css.

    It won't be hard to fix, but you need to restore the original css without the graybox code on it.


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
  •