Results 1 to 6 of 6

Thread: CSS Content Attribute

  1. #1
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    381
    Thanks
    6
    Thanked 35 Times in 33 Posts

    Default CSS Content Attribute

    Im currently making a drop down menu which will have multiple levels to it. However, I'm running into a unique problem. Im using the content tag to make parent elements have a down arrow that contain child elements. Here is my css.
    Code:
    #link_wrapper {
    	border:1px solid black;
    	background-color: #FFC;
    	width:60%;
    	margin:auto;	
    }
    
    .expand {
    	clear:both;	
    }
    
    /* Link Content */
    #nav_wrapper{
    	background-color: #666;
    	border-top:1px solid white;
    }
    
    #menu, #menu ul { /* Effects everything inside the menu */
    	color:#fff;
    	font-weight:bold;
    	letter-spacing:1px;
    	padding:0;
    	margin:0;
    }
    
    #menu li { /* Effects all LI's inside the menu */
    	list-style: none;
    }
    
    #menu > li > a:after{
    	content: "V";	
    }
    
    #menu li > a:only-child:after{
    	content: '';
    }
    
    #menu > li { /* Effects every LI's in the menu UL */
    	float:left;
    	padding: 2px 5px;
    	border-right:1px solid white;
    	position:relative;
    }
    
    #menu li:hover {
    	cursor:pointer;
    	color:red;
    	background-color:black;
    }
    
    #menu > li > ul.drop {
    	position:absolute;
    	display:none;	
    	background-color: #666;
    	width:170px;
    }
    and here is my html
    HTML Code:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Awesome drop down</title>
    
    <link rel="stylesheet" type="text/css" href="foch_new.css"/> 
    <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
    <script>
    $(document).ready(function() {
    	$('ul#menu li').hover(function(){
    		 $(this).children('ul').delay(20).slideDown(300);
    	}, function(){
    		 $(this).children('ul').delay(20).slideUp(200);
    	});
    });
    
    </script>
    
    </head>
    <body>
    
    <div id="link_wrapper">
    <h2>Title</h2>
    <div id="nav_wrapper">
    
    <ul id="menu">
    	<li><a herf="#">Link 1</a></li>
        <li><a herf="#">Link 2</a></li>
        <li><a herf="#">Link 3</a>
        	<ul class="drop">
            	<li><a herf="#">Sub link 3.1</a></li>
                <li><a herf="#">Sub link 3.2</a></li>
                <li><a herf="#">Sub link 3.3</a></li>
            </ul>
        </li>
        <li><a herf="#">Link 4</li>
        <li><a herf="#">Link 5</li>
    </ul>
    
    <div class="expand"></div>
    </div>
    </div>
    
    </body>
    </html>
    The error is that the last link for some odd reason contains two 'V' arrows (one at the beginning and one at the end). It should contain none. Does anyone know why this is appearing?
    Last edited by Deadweight; 10-06-2013 at 07:03 PM.
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,072
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Two missing </a> in the last two links:

    Code:
        <li><a herf="#">Link 4</a></li>
        <li><a herf="#">Link 5</a></li>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    381
    Thanks
    6
    Thanked 35 Times in 33 Posts

    Default

    Wowowow i feel kinda stupid now. Thanks.
    how do you set this as resolved?
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,072
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Go to your first post in the thread, hit:

    Edit

    Then in the lower right hit:

    Go Advanced

    Then in the top portion of the advanced editor "Your Message" section find the drop down for:

    Prefix

    Change it to Resolved.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 517 Times in 503 Posts
    Blog Entries
    5

    Default

    just so you're aware, you've written herf in all of your anchors.

  6. #6
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    381
    Thanks
    6
    Thanked 35 Times in 33 Posts

    Default

    Omfg that has made me laugh so hard! xD NO i wasnt aware of that and thanks for telling me xD.
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

Similar Threads

  1. Set the bgcolor attribute value
    By Rain Lover in forum JavaScript
    Replies: 14
    Last Post: 07-27-2011, 02:41 PM
  2. Replace <img> tag with it's alt attribute ?
    By PhillyPhanatic in forum JavaScript
    Replies: 7
    Last Post: 10-09-2009, 12:15 PM
  3. Replies: 0
    Last Post: 08-05-2009, 09:05 PM
  4. Javascript and the rel attribute
    By drmeisner in forum JavaScript
    Replies: 4
    Last Post: 03-28-2009, 03:28 AM
  5. 'for' attribute
    By hmsnacker123 in forum The lounge
    Replies: 9
    Last Post: 04-13-2008, 11:52 PM

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
  •