How Can I make a Icon???????

Discussion in 'HTML & Website Design' started by dark_devil828, Nov 13, 2007.

  1. #1
    How Can I Put My Own image and make a list like this

    [​IMG]

    i tryed this code for a list

    <ul>
    <li>Apples are green</li>
    <li>Bananas are yellow</li>
    <li>Oranges are orange</li>
    </ul>

    but didnt work the way i wanted it to :D
     
    dark_devil828, Nov 13, 2007 IP
  2. jaaahn

    jaaahn Peon

    Messages:
    188
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I'm not sure I understand your question very clearly, but to replicate that you can use the code you posted, putting and image tag either side of the text in your links. The list in your picture is also aligned centrally.
     
    jaaahn, Nov 14, 2007 IP
  3. dark_devil828

    dark_devil828 Peon

    Messages:
    25
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    is there like a code for the icon thing like like <icon>http://i19.servimg.com/u/f19/11/46/09/98/untitl15.jpg</icon>

    and the list thingy but not with # or letters or whatever just plan list only
     
    dark_devil828, Nov 14, 2007 IP
  4. jaaahn

    jaaahn Peon

    Messages:
    188
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #4
    There is not a code for 'icon' as you call it unless you are running in a managed coding environment (such as this forum)
    in html you would use the img tag
    <img src="URL">
    Code (markup):
    where URL is the location of the image.
    so you could either do
    <center>
    <ul>
    <li><img src="http://blahblahblah.com/apple.gif">Apples are green<img src="http://blahblahblah.com/apple.gif"></li>
    <li><img src="http://blahblahblah.com/banana.gif">Bananas are yellow<img src="http://blahblahblah.com/banana.gif"></li>
    <li><img src="http://blahblahblah.com/orange.gif">Oranges are orange<img src="http://blahblahblah.com/orange.gif"></li>
    </ul> 
    </center>
    Code (markup):
    or just
    
    <center><img src="http://blahblahblah.com/apple.gif">Apples are green<img src="http://blahblahblah.com/apple.gif"><br>
    <img src="http://blahblahblah.com/banana.gif">Bananas are yellow<img src="http://blahblahblah.com/banana.gif"><br>
    <img src="http://blahblahblah.com/orange.gif">Oranges are orange<img src="http://blahblahblah.com/orange.gif"><br></center>
    Code (markup):
     
    jaaahn, Nov 14, 2007 IP
  5. dark_devil828

    dark_devil828 Peon

    Messages:
    25
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Na Man I dont want Oranges are orange thingy it well show like this [​IMG] i dont want with the dots ? how can i do that man
     
    dark_devil828, Nov 14, 2007 IP
  6. jaaahn

    jaaahn Peon

    Messages:
    188
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Ok I get it now.
    You need to add
    
    ul {
    	list-style: none;
    }
    
    Code (markup):
    to your css.
     
    jaaahn, Nov 14, 2007 IP
  7. dark_devil828

    dark_devil828 Peon

    Messages:
    25
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    ok thank u man ill try and see if it works
     
    dark_devil828, Nov 15, 2007 IP
  8. dark_devil828

    dark_devil828 Peon

    Messages:
    25
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    i did try it but still came out with the dots
     
    dark_devil828, Nov 15, 2007 IP
  9. jaaahn

    jaaahn Peon

    Messages:
    188
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #9
    post your code!
     
    jaaahn, Nov 15, 2007 IP
  10. joebert

    joebert Well-Known Member

    Messages:
    2,150
    Likes Received:
    88
    Best Answers:
    0
    Trophy Points:
    145
    #10
    <!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" xml:lang="en" lang="en">
    <head>
    	<title>Title</title>
    	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
    	<meta http-equiv="Content-Style-Type" content="text/css" />
    	<style type="text/css">
    	*{margin:0; padding:0;}
    	a:hover{color:#f00;}
    	#menu, #menu * {
    		list-style: none;
    		width: 100px;
    		text-align: center;
    		background: #fff no-repeat scroll top left;
    	}
    	#one, #one a {
    		background-image: url("one.png");
    	}
    	#two, #two a {
    		background-image: url("two.png");
    	}
    	#three, #three a {
    		background-image: url("three.png");
    	}
    	#four, #four a {
    		background-image: url("four.png")
    	}
    	#five, #five a {
    		background-image: url("five.png");
    	}
    	#six, #six a {
    		background-image: url("six.png");
    	}
    	#menu li a {
    		display: block;
    		background-color: transparent;
    		background-position: top right;
    	}
    	</style>
    </head>
    	<body>
    		<ul id="menu">
    			<li id="one"><a href="#">One</a></li>
    			<li id="two"><a href="#">Two</a></li>
    			<li id="three"><a href="#">Three</a></li>
    			<li id="four"><a href="#">Four</a></li>
    			<li id="five"><a href="#">Five</a></li>
    			<li id="six"><a href="#">Six</a></li>
    		</ul>
    	</body>
    </html>
    Code (markup):
     
    joebert, Nov 15, 2007 IP
  11. britain

    britain Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    you could just make images of the normal text like this

    <a href="#" ><img src="one_normal" onmouseover="this.src='one_mouseover'" onmouseout="this.src='one_normal'" alt="one"><a/> <br>
    <a href="#" ><img src="two_normal" onmouseover="this.src='two_mouseover'" onmouseout="this.src='two_normal'" alt="one"><a/> <br>
    etc etc

    [edit reason=extra info] it does mean you can make them stand out more
    bb code tags because its easier to know where i editted it :)
    [/edit]
     
    britain, Nov 16, 2007 IP
  12. ezrapound

    ezrapound Peon

    Messages:
    67
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    weird the code looks right
     
    ezrapound, Nov 16, 2007 IP