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 9 of 9
  1. #1
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts

    Graphics only ul menu

    Just started looking at this this morning and thought I should start a new thread so as not to hijack the original.




    Quote Originally Posted by ronaldb66 View Post
    That is not what was suggested above; since the images in this case should be considered presentational in nature, including them as content in the document is not the preferred method.
    I didn't realize that. I've done this before with divs but never with an unordered list. It makes sense to prefer CSS background.

    It is more appropriate to use CSS background images as HarbingerOTV suggested, which would also make the use of ordinary link text instead of images for text possible.
    So I'm having problems getting the li to be a link with no text.
    Here is what's not working so far:
    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=iso-8859-1" />
    <title>vertical ul menu with buttons</title>
    <meta name="" content="authored by http://www.nopeople.com" />
    <style type="text/css">
    html, body {
    	background-color: #CCCCCC;
    	margin: 0px;
    	padding: 0px;
    }
    * {
    	margin: 0px;
    	padding: 0px;
    }
    #menu_left {
    	padding: 0px;
    	width: 147px;
    	margin: 10px 0 0 10px;
    }
    #menu_left ul {
    	list-style-type: none;
    	text-align: left;
    }
    #menu_left li {
    	width: 147px;
    	height: 21px;
    	display: block;
    }
    #menu_left li a{
    	width: 147px;
    	height: 21px;
    }
    #menu_left li a:hover {
    	width: 147px;
    	height: 21px;
    	margin-left: 3px;
    	background-position: 3px;
    }
    .button1 {
    	border: 1px solid #00FF00;
    	background-image: url(button1.gif);
    	height: 21px;
    	width: 147px;
    }
    .button2 {
    	border: 1px solid #00FF00;
    	background-image: url(button2.gif);
    	height: 21px;
    	width: 147px;
    }
    .button3 {
    	border: 1px solid #00FF00;
    	background-image: url(button3.gif);
    	height: 21px;
    	width: 147px;
    }
    .button4 {
    	border: 1px solid #00FF00;
    	background-image: url(button4.gif);
    	height: 21px;
    	width: 147px;
    }
    .button5 {
    	border: 1px solid #00FF00;
    	background-image: url(button5.gif);
    	height: 21px;
    	width: 147px;
    }
    .button6 {
    	border: 1px solid #00FF00;
    	background-image: url(button6.gif);
    	height: 21px;
    	width: 147px;
    }
    </style>
    </head>
    
    <body>
    
    <div id="menu_left">
    <ul>
    <li class="button1"><a href="http://www.nopeople.com"></a></li>
    <li class="button2"><a href="http://www.nopeople.com"></a></li>
    <li class="button3"><a href="http://www.nopeople.com"></a></li>
    <li class="button4"><a href="http://www.nopeople.com"></a></li>
    <li class="button5"><a href="http://www.nopeople.com"></a></li>
    <li class="button6"><a href="http://www.nopeople.com"></a></li>
    </ul>
    <div class="button1"><a href="http://www.nopeople.com"></a></div>
    </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

  • #2
    zk0
    zk0 is offline
    New Coder
    Join Date
    Dec 2006
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Why dont you make the text as a special id and then in the CSS use display:none; for the text?

    Could work. I haven't tested it.

  • #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
    I thought of that but, since ronaldb66 seemed to think that adding the graphic via markup is not the way to go, I didn't think that was a very elegant solution. I haven't tried it yet either...
    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

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,777
    Thanks
    6
    Thanked 1,021 Times in 994 Posts
    Firstly: You can't set height and width to links if they aren't floated or set to display: block;.

    I always do it this way:
    Code:
    <ul>
      <li class="home"><a href="#">Home</a>
      <li class="gallery"><a href="#">Gallery</a>
      <li class="contact"><a href="#">Contact</a>
    </ul>
    Code:
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    ul a {
      display: block;
      text-indent: -999em;
      /* if all links are the same size you can put width and height here, otherwise set it separately for each link (iin the rules below below) */
    }
    .home a {background: url(path/to/image1.gif);}
    .gallery a {background: url(path/to/image2.gif);}
    .contact a {background: url(path/to/image3.gif);}
    ul a:hover {background-position: 0 3px; /* just an example */}
    This is just a very basic example for text links and image replacement. There are several approaches/methods to replace text with a background image: http://www.mezzoblue.com/tests/revis...e-replacement/

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    That works well but I can't seem to get the 3px shift to the right to work...
    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

  • #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
    Well, I finally got a chance to work on these a bit.
    Still can't figure out how to get the image to shift over 3px and show the background color when you hover on it so I did it another way.
    I added the 3px border to the top and left of the buttons, so they can be used in a vertical or horizontal menu. Then just shift the background image enough to hide or show the extra border on mouseover.

    See them at
    http://www.nopeople.com/CSS/menu_buttons_horizontal/
    and
    http://www.nopeople.com/CSS/menu_buttons_vertical/
    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

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    What are you going to do if the user has background images disabled?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    This menu is not going to work with background images disabled.
    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

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    .smallfonts {
    	font-family: "Comic Sans MS";
    	font-size: .6em;
    	color: #CC0066;
    }
    #footer {
    	text-align: center;
    	height: 25px;
    	width: 100%;
    }
    </style>
    </head>
    
    <body>
    <div id="footer">
    <a href="http://www.nopeople.com" class="smallfonts">first link</a> | <a href="http://www.nopeople.com" class="smallfonts">second link</a> | <a href="http://www.nopeople.com" class="smallfonts">third link</a> | <a href="http://www.nopeople.com" class="smallfonts">fourth link</a> | <a href="http://www.nopeople.com" class="smallfonts">fifth link</a> | <a href="http://www.nopeople.com" class="smallfonts">last link</a>
    </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


  •  

    Posting Permissions

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