button list problems

[shakmbakm]

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.

[ronpat]

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.

[shakmbakm]

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.

[ronpat]

Yep, you got it!

[shakmbakm]

What did I get? The image isn't appearing for me.

[ronpat]

Give me a few minutes. I'll get back to you.

[shakmbakm]

sure, no problem

[ronpat]

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.

[ronpat]

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.

.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;
}
*/

[shakmbakm]

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.

[ronpat]

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.

[shakmbakm]

I know, my partner and I both thought it looked fine up there. Maybe he will reconsider after seeing it.

[shakmbakm]

does all the html code stay the same?

[ronpat]

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.

[shakmbakm]

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.

[shakmbakm]

Can the graybox code be used in other pages as well?

[ronpat]

Is there any difference between these various pages other than the background image?

[shakmbakm]

the games page has the gamesmenu. All the others, besides the background, they each have a different margin for the greybox content.

[ronpat]

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.

<!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>

@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

[shakmbakm]

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

[ronpat]

Yes. One page does [almost] all. And they will all validate squeaky clean

[shakmbakm]

on the home page, the graybox seems to be pushing the slideshow up and I'm not sure why its doing that.

[ronpat]

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?

[shakmbakm]

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?

[ronpat]

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.