Button list problems

HTML & CSS
1

I have created a button list for the list of our company’s games. The problem is that while it works it effects parts of the main menu list as well. Also It appears on the bottom of the page when I am trying to get it on the top under the main menu list. Here is a link to the page http://superfunproductions.com/games.html
Here is the code on the CSS, I think the margin-top and margin-left are the culprits.

#games{
	width:1100px;  /*---Give our UL a width ---*/
	list-style:none;  /*--- Makes the bullets go away ---*/
	margin:0;  /*--- Take out any default margin on the UL tag ---*/
	margin-top: 250px;
	margin-left: 125px;
	padding:0;  /*--- Take out any default padding on the UL tag ---*/
}

#games li{
	position: relative;
	float:left;  /*--- Make the list go horizontal ---*/
	margin-left:30px;  /*--- Give spacing in between list items ---*/
}

#games li li {
	float:none;
	position:static;
}

#games 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 ---*/
	
}
	
	
#games ul {
	margin-left: -999em;
	top: 100%;
	left: 0;
	position: absolute;

}
#games ul li a {
	width: 95px;
}

#games li:hover ul {
	margin: 0;
}

/*
The following rules place the "normal"
state image as the background for our anchor tags
*/

#games li#mba a{
	background: url(../images/music.png) no-repeat;
	width: 165px;
	height: 25px;
}

#games li#cc a{
	background: url(../images/crystal.png) no-repeat;
	width: 175px;
	height: 25px;
}

#games li#cb a{
	background: url(../images/cuddly.png) no-repeat;
	width: 135px;
	height: 25px;
}

#games li#smw  a{
	background: url(../images/snow.png) no-repeat;
	width: 150px;
	height: 25px;
}

#games li#ac  a{
	background: url(../images/ac.png) no-repeat;
	width: 135px;
	height: 25px;
}

#games li#mba a:hover{
	background: url(../images/music2.png) no-repeat;
	width: 165px;
	height: 25px;
}

#games li#cc a:hover{
	background: url(../images/crystal2.png) no-repeat;
	width: 175px;
	height: 25px;
}

#games li#cb a:hover{
	background: url(../images/cuddly2.png) no-repeat;
	width: 135px;
	height: 25px;
}

#games li#smw a:hover{
	background: url(../images/snow2.png) no-repeat;
	width: 150px;
	height: 25px;
}

#games li#ac a:hover{
	background: url(../images/ac2.png) no-repeat;
	width: 135px;
	height: 25px;
}


.clear{
	clear:both;  /*--- Clears the float of the list items to restore normal document flow ---*/
}

/*
The following rules place the "down"
state image as the background for our anchor tags
when they anchor tag has the class of current
*/


#games li#mba a.current{
	background: url(../images/music.png) no-repeat;
	cursor:default;
}

#games li#cc a.current{
	background: url(../images/crystal.png) no-repeat;
	cursor:default;
}

#games li#cb a.current{
	background: url(../images/cuddly.png) no-repeat;
	cursor:default;
}

#games li#ac a.current{
	background: url(../images/ac.png) no-repeat;
	cursor:default;
}
2

How?

It appears on the bottom of the page when I am trying to get it on the top under the main menu list.
Could you be more specific about where you want it? Perhaps use an image if it’s hard to describe exactly.

3

I have it so it looks normal right now. What it was doing was moving the main menu down because of the margin-top i had in the #games. I want the games list right above where it says open beta in the square. I can take a picture if you need more.

4

That would be good, yes. :slight_smile:

5

in the first image you can see what the main menu is doing, thats about where I want the games list.

in the second image which is below the first image on the page, you can see that the games list is not in the right place.

6

What browser is that first image taken in. Your top menu looks OK to me in my browser.

7

I’m not entirely sure if this is what you want or not. Please give it a try and let us know.

games.html

~ line 34, delete the red property from the middle of this line:


<div style="overflow:auto; [color=red][s]width:1024px;[/s][/color] height:1000px">

Delete lines 51 and 64; a break tag inside a list but outside of a list item is invalid code.


<br class="clear" />

Move the </ul> tag from line 51 up a few lines and put it below line 42.

The commented out junk seems to be junk.

Change the id “games” to “gamesMenu” (the id conflicts with #mainMenu li#games)


<ul id="games[color=blue]Menu[/color]">

Move #gamesMenu so it sits just beneath #mainMenu


<ul id="mainMenu">
    <li id="home"><a href="home.html">Home</a></li>
    <li id="about"><a href="about.html">About</a></li>
    <li id="games"><a href="#">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>
<ul id="gamesMenu">
    <li id="mba"><a href="music_block_attack.html">music block attack</a></li>
    <li id="cc"><a href="CC.html">crystal catacombs</a></li>
    <li id="cb"><a href="cuddlybears.html">cuddly bears</a></li>
    <li id="smw"><a href="snowmanwars.html">snowman wars</a></li>
    <li id="ac"><a href="arrow.html">arrow climber</a></li>
</ul>

At the bottom of the page, add these two missing tags */


[color=blue]</div>[/color]     /* add this tag */
[color=blue]</body>[/color]    /* add this tag */
</html>

games.css

Change all of the unordered list #games in the lower half of the page to #gamesMenu. Conflicts with #mainMenu li#games

At the top of the #gamesMenu code (about line 256)…

Delete this:


/*#games{
    width:1100px;  /*---Give our UL a width ---*/
    /*list-style:none;  /*--- Makes the bullets go away ---*/
    /*margin:0;  /*--- Take out any default margin on the UL tag ---*/
    /*margin-top: 5px;
    margin-left: 125px;
    padding:0;  /*--- Take out any default padding on the UL tag ---*/
}

Add this in its place:


#gamesMenu {
    clear:both;
    list-style:none;
    padding:150px 0 0 160px;
    margin:0;
}

Delete this margin-left:


#gamesMenu li {
    position: relative;
    float:left;  /*--- Make the list go horizontal ---*/
    [color=red][s]margin-left:30px;[/s][/color]  /*--- Give spacing in between list items ---*/
}
8

I’ll give it a try and see what happens.

9

That was exactly what I needed. Thank you so much!

10

You’re quite welcome. Glad to know it works for you! Thank you for the feedback.

11

I have one more question. How did you figure where the list would be placed? i have to do this one more time so knowing that would be helpful.

12

I used the validator to spot the duplicated “#games” ids and, since that was critical, renamed the one on the second menu.

Used my favorite text editor to indent the HTML to make it “Ron readable”. You can also use Firebug or other developer tools to see the structure, but I prefer an old fashioned text editor.

It was easy to see that the gamesMenu was way out of place.

I assigned colored outlines around the divs and the two ul’s so I could see how they were related on the page.

The best place for the gamesMenu seemed to be immediately beneath the mainMenu, so that’s where I put it. (Commented out code in that same position looked like you had tried that position before but changed your mind for some reason.)

One change related the positioning of the buttons.

Incidental changes included deleting the two <br class=“clear” /> tags, adding the missing tags at the bottom of the page that were highlighted by my text editor, and deleting the unnecessary width in the unclassed div a few lines below the open body tag that was spotted through trial and error.

As you noticed, there was only one small change to the CSS. The primary problems were in the structure of the HTML.

13

ok, i see. I need this new list to appear in the grey box at the bottom, so would it be best to just increase the padding?

14

{margin-top:650px} ought to put you in the box.

15

I’m going to have several small vertical lists. Would I have to create different list code for each list to fit in the grey box or would there be a simpler way.

16

The HTML list code would be the same for each list, but the contents of each list would be unique. The css would most likely be the same except for horizontal positioning. The list boxes (ul’s) could be floated, arranged inline, or absolutely positioned (last resort). Your choice.

17

is it possible to fit the links into the box with just one list in the code? Or will multiple be needed?

18

Two or more lists should be coded separately in HTML. It’s not impossible to put everything into one list, but the resulting structure would not be practical to change/maintain. Far better to use separate lists. What are your concerns about using separate lists vs one list? Do you not understand how to put the lists on the page?

19

no concerns, I was just curious if that was possible that is all. I will see how this goes and post if I have any problems.

20

Side-by-side lists.

For test purposes, add div.graybox to the games.html page as follows: (sorry, my classnames aren’t very creative)


<body>
<div id="wrapup">
<div class="container">
<div id="header">
<div style="overflow: auto; height: 1000px">
<ul id="mainMenu">
    <li id="home"><a href="home.html">Home</a></li>
    <li id="about"><a href="about.html">About</a></li>
    <li id="games"><a href="#">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>
<ul id="gamesMenu">
    <li id="mba"><a href="music_block_attack.html">music block attack</a></li>
    <li id="cc"><a href="CC.html">crystal catacombs</a></li>
    <li id="cb"><a href="cuddlybears.html">cuddly bears</a></li>
    <li id="smw"><a href="snowmanwars.html">snowman wars</a></li>
    <li id="ac"><a href="arrow.html">arrow climber</a></li>
</ul>
[color=blue]<div class="graybox">
    <ul>
        <li><a href="#">ListOne item</a></li>
        <li><a href="#">ListOne item</a></li>
        <li><a href="#">ListOne item</a></li>
    </ul>
    <ul>
        <li><a href="#">ListTwo item</a></li>
        <li><a href="#">ListTwo itemm</a></li>
    </ul>
    <ul>
        <li><a href="#">ListThree itemmm</a></li>
        <li><a href="#">ListThree item</a></li>
        <li><a href="#">ListThree item</a></li>
    </ul>
    <ul>
        <li><a href="#">ListFour item</a></li>
        <li><a href="#">ListFour item</a></li>
        <li><a href="#">ListFour itemm</a></li>
    </ul>
    <ul>
        <li><a href="#">ListFive item</a></li>
        <li><a href="#">ListFive item</a></li>
        <li><a href="#">ListFive item</a></li>
    </ul>
    <ul>
        <li><a href="#">ListSix item</a></li>
        <li><a href="#">ListSix item</a></li>
    </ul>
</div>[/color]

</div>
</div>
</div>

And add the following CSS to your css sheet:


.graybox {                   /* THIS CONTAINER div holds the row of lists */
/*    outline:1px solid magenta;    /* TEST OUTLINE ONLY - DELETE */
    text-align:center;       /* centers inline-block objects (the ul's) */
    margin-top:650px;        /* distance from overhead container */
}

.graybox ul {
/*    outline:1px solid cyan;      /* TEST OUTLINE ONLY - DELETE */
    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;               /* removed default padding for bullets */
    margin:0 20px;           /* horizontally separates the list boxes (the ul's) */
}

.graybox li {
    text-align:left;         /* left-aligns text within each list item */
}

/* anchor treatment ([B]if needed[/B]) */
.graybox a {
    line-height:1.5;
    font-size:1.25em;
    text-decoration:none;
}
.graybox a:link,.graybox a:visited {
    color:#000;
}
.graybox a:hover {
    color:#00f;
}
.graybox a:active {
    color:#f00;
}

Tested in FF, IE8, Chrome.