SitePoint Sponsor

User Tag List

Page 1 of 5 12345 LastLast
Results 1 to 25 of 123
  1. #1
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    button list problems

    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.
    Code:
    #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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,599
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by shakmbakm View Post
    it affects parts of the main menu list as well.
    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. #3
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,599
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by shakmbakm View Post
    I can take a picture if you need more.
    That would be good, yes.

  5. #5
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    scrn1.pngscrn2.png

    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. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,599
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    What browser is that first image taken in. Your top menu looks OK to me in my browser.

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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:
    Code:
    <div style="overflow:auto; width:1024px; height:1000px">
    Delete lines 51 and 64; a break tag inside a list but outside of a list item is invalid code.
    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)
    Code:
    <ul id="gamesMenu">
    Move #gamesMenu so it sits just beneath #mainMenu
    Code:
    <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 */
    Code:
    </div>     /* add this tag */
    </body>    /* 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:
    Code:
    /*#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:
    Code:
    #gamesMenu {
        clear:both;
        list-style:none;
        padding:150px 0 0 160px;
        margin:0;
    }
    Delete this margin-left:
    Code:
    #gamesMenu li {
        position: relative;
        float:left;  /*--- Make the list go horizontal ---*/
        margin-left:30px;  /*--- Give spacing in between list items ---*/
    }

  8. #8
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll give it a try and see what happens.

  9. #9
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That was exactly what I needed. Thank you so much!

  10. #10
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by shakmbakm View Post
    That was exactly what I needed. Thank you so much!
    You're quite welcome. Glad to know it works for you! Thank you for the feedback.

  11. #11
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #12
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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. #13
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #14
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    {margin-top:650px} ought to put you in the box.

  15. #15
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #16
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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. #17
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    is it possible to fit the links into the box with just one list in the code? Or will multiple be needed?

  18. #18
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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. #19
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #20
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Side-by-side lists.

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

    Code:
    <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>
    <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>
    
    </div>
    </div>
    </div>
    And add the following CSS to your css sheet:

    Code:
    .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 (if needed) */
    .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.

  21. #21
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    along with the other class code correct?

  22. #22
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    I'm sorry, I don't know what other class code and placement you're referring to.

    The HTML includes surrounding code so you can see where the new blue is to be added beneath the existing menus. Nothing has been deleted to "make room" for it. I simply didn't show the existing commented out code.

    The css should be added to the existing css sheet. Nothing is being replaced or deleted. I used a different classname so the demo would not cause any conflicts.

    Does this answer your question?

  23. #23
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i'm sorry, I meant along with the list class code for the bottom menus

  24. #24
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I should ask is the greybox code in addition to the list code or is this to see if it can replace the separate class coding?

  25. #25
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    This code does not replace anything. It is in addition to the existing code. It places a row of vertical lists over the gray box on the games page, per your objective. Just copy and paste into your HTML and CSS files. It should work and nothing else should be disturbed. I even spelled it American "gray" instead of English "grey" to be sure it didn't conflict anywhere


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
  •