Interesting. There is more room up top for the bigger image than in the .graybox. Bosses. 
Maybe he’ll reconsider.
I know, my partner and I both thought it looked fine up there. Maybe he will reconsider after seeing it.
does all the html code stay the same?
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.
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.
Can the graybox code be used in other pages as well?
Is there any difference between these various pages other than the background image?
the games page has the gamesmenu. All the others, besides the background, they each have a different margin for the greybox content.
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
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
Yes. One page does [almost] all. And they will all validate squeaky clean
on the home page, the graybox seems to be pushing the slideshow up and I’m not sure why its doing that.
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?
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?
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.
the only thing I changed was adding the greybox. Nothing else was changed to the CSS. I’ll change it back for now.
So I should use this CSS for all pages but the home and games page?
You can use the sfg.css for the:
#gamespage
#aboutpage
#newspage
#contactpage
#mbapage
#ccpage
#cbpage
#smwpage
#acpage
The above id should be assigned to the <body> tag in the respective page.
eg:
games.htm
<body id=“gamespage”>
about.htm
<body id=“aboutpage”>
etc.
I overlooked the home page. It shouldn’t be difficult, though. Will get back to you about it when I think it’s done. May need you to fine tune it.
OK?
Ok thats fine, I gotcha now.
Is the graybox with menus supposed to be visible on the home.html page? At the present time, it is not.
Should the revised home page have the gray menubox or not? I think not, but feel obligated to ask.
Just as a review
- Make 8 copies of the HTML in messge #69. The names should be the same as the pages they will be replacing.
- Assign the prescribed ID to the respective <body> tag.
- All pages will have the same link to the same sfg.css file (css code in message #69).
Do not replace the games.html page. It has already been rewritten. Just link it to the sfg.css file, too.
I am working on the home.html page.
You don’t have to wait for the home.html page to replace the other pages.