Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Having trouble setting CSS Layers

    On my navigation bar, the buttons expand down on mouse over. Well, I added in a chat underneath the nav bar, but now when you mouse over, they expand underneath the chat. Any help with this is greatly appreciated.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>                                                                
    <head>
     
                                                                      
      <style type="text/css">
    <!--
    .expand-down {
      font-family:Arial, Helvetica, sans-serif;
      line-height:normal;
      margin-top:190px;
      height:175px;
      width:665px;
      background: url(http://i1228.photobucket.com/albums/ee451/bravo_ATL284/Auction%20League/BarBackground8.png) no-repeat;
      margin-bottom:30px;
    
    }
    /* reset margins and paddings */
    .expand-down * {
      margin: 0;
      padding: 0;
    
    }
    .expand-down ul {
      padding-top:5px;
      margin-left:10px;
    
    }
    .expand-down ul li {
      float:left;
      list-style-type:none;
    
    }
    .expand-down ul li a {
      text-decoration:none;
    
    }
    .expand-down ul li a img {
      width:55px;  /* initial width of images, 50% of width */
      height:50px; /* initial height of images, 50% of height */
      border:none;
    
    }
    /* initially, don't show the label inside <span> tag */
    .expand-down ul li a span {
      display:none;
    
    
    }
    .expand-down ul li:hover a span {
      /* show label on mouse hover */
      display:block;
      font-size:14px;
      text-align:center;
      color:#fff;
      
    }
    /* expand the image to 100% on mouse hover.
    ** an image becomes active when mouse hovers it
    ** ideally, the image should have same width and height as below 
    */
    .expand-down ul li:hover a img {
      width:100px;
      height:100px;
    
    
    }
    /* expand the image next to the right of the active image to 60% using + selector */
    .expand-down ul li:hover + li a img {
      width:60px;
      height:60px;
    
    
    }
    /* expand the image second to the right of the active image to 55% using + selectors */
    .expand-down ul li:hover + li + li a img {
      width:55px;
      height:55px;
    
    
    }
    -->
    </style>
    <style>
     body {
      background-image: url("http://i1228.photobucket.com/albums/ee451/bravo_ATL284/AuctionLeagueChatBackground5.jpg");
        background-repeat: no-repeat;
    }
    </style>
    
    <style type="text/css">
    #wrapper {
       position:absolute;
    left:0px;
    top: 250px;
    }
    </style>
    
    
    
     </head>                                                                 
     <body> 
          <div class="expand-down">
      <ul>
        <li>
          <a href="http://jigsaw.w3.org/css-validator/check/referer">
            <!-- the image -->
            <img src="http://i1228.photobucket.com/albums/ee451/bravo_ATL284/Auction%20League/ChatIconforBar.png" />
            <!-- the label -->
            <span>CHAT</span>
          </a>
        </li>
    <li>
          <a href="http://jigsaw.w3.org/css-validator/check/referer">
            <!-- the image -->
            <img src="http://i1228.photobucket.com/albums/ee451/bravo_ATL284/Auction%20League/TrophyIcon2.png" />
            <!-- the label -->
            <span>TROPHIES</span>
          </a>
        </li>
    <li>
          <a href="http://jigsaw.w3.org/css-validator/check/referer">
            <!-- the image -->
            <img src="http://i1228.photobucket.com/albums/ee451/bravo_ATL284/Auction%20League/FreeAgentsIconForBar3.png" />
            <!-- the label -->
            <span>FREE AGENTS</span>
          </a>
        </li>
    <li>
          <a href="http://jigsaw.w3.org/css-validator/check/referer">
            <!-- the image -->
            <img src="http://i1228.photobucket.com/albums/ee451/bravo_ATL284/Auction%20League/HistoryIcon.png" />
            <!-- the label -->
            <span>HISTORY</span>
          </a>
        </li>
    
    
    
    
    
        <!-- make copies of <li>...</li> block to create more items ... -->
      </ul>
    </div>  
    
    <div id="wrapper">
    <object width="666" height="516" id="obj_1324611700223"><param name="movie" value="http://auction13.chatango.com/group"/><param name="AllowScriptAccess" VALUE="always"/><param name="AllowNetworking" VALUE="all"/><param name="AllowFullScreen" VALUE="true"/><param name="flashvars" value="cid=1324611700223&a=000000&b=100&c=FFFFFF&d=CCCCCC&e=000000&g=F6F6F4&k=FFFFFF&l=333333&m=000000&n=FFFFFF&r=100&s=1&aa=1"/><embed id="emb_1324611700223" src="http://auction13.chatango.com/group" width="666" height="516" allowScriptAccess="always" allowNetworking="all" type="application/x-shockwave-flash" allowFullScreen="true" flashvars="cid=1324611700223&a=000000&b=100&c=FFFFFF&d=CCCCCC&e=000000&g=F6F6F4&k=FFFFFF&l=333333&m=000000&n=FFFFFF&r=100&s=1&aa=1"></embed></div> </div>
    
                                         
     </body>                                                                 
     </html>

  • #2
    New Coder
    Join Date
    Nov 2011
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    b u m p

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello bravo_ATL284,
    A little re-organizing makes it look like this -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	font-family: Arial, Helvetica, sans-serif;
    	line-height: normal;
    }
    #wrapper {
    	width: 666px;
    	margin: 30px auto;
    	background: url("http://i1228.photobucket.com/albums/ee451/bravo_ATL284/AuctionLeagueChatBackground5.jpg") no-repeat;
    	overflow: auto;
    }
    .expand-down {
    	height: 175px;
    	margin: 190px 0 30px;
    	background: url(http://i1228.photobucket.com/albums/ee451/bravo_ATL284/Auction%20League/BarBackground8.png) no-repeat;
    }
    /* reset margins and paddings */
    .expand-down * {
    	margin: 0;
    	padding: 0;
    }
    .expand-down ul {
    	padding-top:5px;
    	margin-left:10px;
    }
    .expand-down ul li {
    	float:left;
    	list-style-type:none;
    }
    .expand-down ul li a { text-decoration:none; }
    .expand-down ul li a img {
    	width:55px;  /* initial width of images, 50% of width */
    	height:50px; /* initial height of images, 50% of height */
    	border:none;
    }
    /* initially, don't show the label inside span tag */
    .expand-down ul li a span { display:none; }
    .expand-down ul li:hover a span {
    	/* show label on mouse hover */
      display:block;
    	font-size:14px;
    	text-align:center;
    	color:#fff;
    }
    /* expand the image to 100% on mouse hover.
    ** an image becomes active when mouse hovers it
    ** ideally, the image should have same width and height as below 
    */
    .expand-down ul li:hover a img {
    	width:100px;
    	height:100px;
    }
    /* expand the image next to the right of the active image to 60% using + selector */
    .expand-down ul li:hover + li a img {
    	width:60px;
    	height:60px;
    }
    /* expand the image second to the right of the active image to 55% using + selectors */
    .expand-down ul li:hover + li + li a img {
    	width:55px;
    	height:55px;
    }
    </style>
    </head>
    <body>
        <div id="wrapper">
    <div class="expand-down">
      <ul>
            <li> 
                <a href="http://jigsaw.w3.org/css-validator/check/referer"> 
                <img src="http://i1228.photobucket.com/albums/ee451/bravo_ATL284/Auction%20League/ChatIconforBar.png" /> 
                <span>CHAT</span> 
                </a> 
            </li>
            <li> 
                <a href="http://jigsaw.w3.org/css-validator/check/referer"> 
                <img src="http://i1228.photobucket.com/albums/ee451/bravo_ATL284/Auction%20League/TrophyIcon2.png" /> 
                <span>TROPHIES</span> 
                </a> 
            </li>
            <li> 
                <a href="http://jigsaw.w3.org/css-validator/check/referer"> 
                <img src="http://i1228.photobucket.com/albums/ee451/bravo_ATL284/Auction%20League/FreeAgentsIconForBar3.png" /> 
                <span>FREE AGENTS</span> 
                </a> 
            </li>
            <li> 
                <a href="http://jigsaw.w3.org/css-validator/check/referer"> 
                <img src="http://i1228.photobucket.com/albums/ee451/bravo_ATL284/Auction%20League/HistoryIcon.png" /> 
                <span>HISTORY</span> 
                </a> 
            </li>
      </ul>
    </div>
    <object width="666" height="516" id="obj_1324611700223">
            <param name="movie" value="http://auction13.chatango.com/group"/>
            <param name="AllowScriptAccess" value="always"/>
            <param name="AllowNetworking" value="all"/>
            <param name="AllowFullScreen" value="true"/>
            <param name="flashvars" value="cid=1324611700223&a=000000&b=100&c=FFFFFF&d=CCCCCC&e=000000&g=F6F6F4&k=FFFFFF&l=333333&m=000000&n=FFFFFF&r=100&s=1&aa=1"/>
    <embed id="emb_1324611700223" src="http://auction13.chatango.com/group" width="666" height="516" allowscriptaccess="always" allownetworking="all" type="application/x-shockwave-flash" allowfullscreen="true" flashvars="cid=1324611700223&a=000000&b=100&c=FFFFFF&d=CCCCCC&e=000000&g=F6F6F4&k=FFFFFF&l=333333&m=000000&n=FFFFFF&r=100&s=1&aa=1"></embed>
    </object>
        <!--end wrapper--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    bravo_ATL284 (12-26-2011)

  • #4
    New Coder
    Join Date
    Nov 2011
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello bravo_ATL284,
    A little re-organizing makes it look like this -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	font-family: Arial, Helvetica, sans-serif;
    	line-height: normal;
    }
    #wrapper {
    	width: 666px;
    	margin: 30px auto;
    	background: url("http://i1228.photobucket.com/albums/ee451/bravo_ATL284/AuctionLeagueChatBackground5.jpg") no-repeat;
    	overflow: auto;
    }
    .expand-down {
    	height: 175px;
    	margin: 190px 0 30px;
    	background: url(http://i1228.photobucket.com/albums/ee451/bravo_ATL284/Auction%20League/BarBackground8.png) no-repeat;
    }
    /* reset margins and paddings */
    .expand-down * {
    	margin: 0;
    	padding: 0;
    }
    .expand-down ul {
    	padding-top:5px;
    	margin-left:10px;
    }
    .expand-down ul li {
    	float:left;
    	list-style-type:none;
    }
    .expand-down ul li a { text-decoration:none; }
    .expand-down ul li a img {
    	width:55px;  /* initial width of images, 50% of width */
    	height:50px; /* initial height of images, 50% of height */
    	border:none;
    }
    /* initially, don't show the label inside span tag */
    .expand-down ul li a span { display:none; }
    .expand-down ul li:hover a span {
    	/* show label on mouse hover */
      display:block;
    	font-size:14px;
    	text-align:center;
    	color:#fff;
    }
    /* expand the image to 100% on mouse hover.
    ** an image becomes active when mouse hovers it
    ** ideally, the image should have same width and height as below 
    */
    .expand-down ul li:hover a img {
    	width:100px;
    	height:100px;
    }
    /* expand the image next to the right of the active image to 60% using + selector */
    .expand-down ul li:hover + li a img {
    	width:60px;
    	height:60px;
    }
    /* expand the image second to the right of the active image to 55% using + selectors */
    .expand-down ul li:hover + li + li a img {
    	width:55px;
    	height:55px;
    }
    </style>
    </head>
    <body>
        <div id="wrapper">
    <div class="expand-down">
      <ul>
            <li> 
                <a href="http://jigsaw.w3.org/css-validator/check/referer"> 
                <img src="http://i1228.photobucket.com/albums/ee451/bravo_ATL284/Auction%20League/ChatIconforBar.png" /> 
                <span>CHAT</span> 
                </a> 
            </li>
            <li> 
                <a href="http://jigsaw.w3.org/css-validator/check/referer"> 
                <img src="http://i1228.photobucket.com/albums/ee451/bravo_ATL284/Auction%20League/TrophyIcon2.png" /> 
                <span>TROPHIES</span> 
                </a> 
            </li>
            <li> 
                <a href="http://jigsaw.w3.org/css-validator/check/referer"> 
                <img src="http://i1228.photobucket.com/albums/ee451/bravo_ATL284/Auction%20League/FreeAgentsIconForBar3.png" /> 
                <span>FREE AGENTS</span> 
                </a> 
            </li>
            <li> 
                <a href="http://jigsaw.w3.org/css-validator/check/referer"> 
                <img src="http://i1228.photobucket.com/albums/ee451/bravo_ATL284/Auction%20League/HistoryIcon.png" /> 
                <span>HISTORY</span> 
                </a> 
            </li>
      </ul>
    </div>
    <object width="666" height="516" id="obj_1324611700223">
            <param name="movie" value="http://auction13.chatango.com/group"/>
            <param name="AllowScriptAccess" value="always"/>
            <param name="AllowNetworking" value="all"/>
            <param name="AllowFullScreen" value="true"/>
            <param name="flashvars" value="cid=1324611700223&a=000000&b=100&c=FFFFFF&d=CCCCCC&e=000000&g=F6F6F4&k=FFFFFF&l=333333&m=000000&n=FFFFFF&r=100&s=1&aa=1"/>
    <embed id="emb_1324611700223" src="http://auction13.chatango.com/group" width="666" height="516" allowscriptaccess="always" allownetworking="all" type="application/x-shockwave-flash" allowfullscreen="true" flashvars="cid=1324611700223&a=000000&b=100&c=FFFFFF&d=CCCCCC&e=000000&g=F6F6F4&k=FFFFFF&l=333333&m=000000&n=FFFFFF&r=100&s=1&aa=1"></embed>
    </object>
        <!--end wrapper--></div>
    </body>
    </html>
    Thanks a bunch!!

  • #5
    New Coder
    Join Date
    Nov 2011
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    If I wanted to adjust the chats location up and down, would I just put that in the wrapper?

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Adjust the height of the element above it, remember to leave room for you menu items to expand.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •