www.webdeveloper.com
Results 1 to 9 of 9

Thread: Displaying Icons on a webpage

  1. #1
    Join Date
    May 2010
    Posts
    36

    Displaying Icons on a webpage

    Hello I need to have three icons on my page.
    1:mail icon 2:pdf icon 3: print icon.

    I have written the following HTML for three icons. Remember I want these three icons to remain fixed and should not move with the page scroll.

    I have created a div tag to hold these icons. This div rests inside a top level div element which holds the rest of the page(Main content, which can be printed).

    My(part of) HTML content is below:

    Code:
    <div id="topmenu">
    		<ul>
    			<li><a href="#" title="pdf">pdf</a></li>
    			<li><a href="mailto:refhat2@Gmail.com" title = "email">email</a></li>
    			<li><a href="#" title="print">Print</a></li>
    		</ul>
    	</div>

    And my CSS goes below:

    Code:
    #topMenu {
    	height: 22px;
    	overflow: visible;
    	padding: 23px 20px 0 0;
    	width: 695px;
    }
    
    #topmenu ul {
    	float: right;
    }
    
    #topmenu ul li {
    	float: left;
    	margin-left: 8px;
    	text-indent: -9999px;
    }
    
    #topmenu ul li a {
    	background: url("images/icon_pdf.jpg") no-repeat top left;
    	display: block;
    	height: 20px;
    	width: 20px;
    }
    
    #topmenu ul li a[title="email"] {
    	background: url("images/icon_mail.jpg") no-repeat top left;
    }
    
    #topmenu ul li a[title="print"] {
    	background: url("images/icon_print.jpg") no-repeat top left;
    }
    First I need to sort out how to display these icons and second I want this div tag to remain static so that icons dont move as the page scrolls as it is a one web page.
    When I run this page , I dont find my icons anywhere on the page.Do you have any Idea as to where I am doing wrong here.

    Thanks


    Edit: In FF I am seeing three dots(I guess because of li) but Chrome doesn't display anything.
    Last edited by refhat; 07-20-2010 at 09:21 AM. Reason: More Information

  2. #2
    Join Date
    Nov 2006
    Location
    Springfield, MO
    Posts
    1,541
    Regarding your images showing up, are the images in the images directory and is the path correct? Continuing, regarding the bullets showing up, add the following to this existing rule:

    Code:
    #topmenu ul li {
    	float: left;
    	margin-left: 8px;
    	text-indent: -9999px;
            list-style-type:none;
    }
    For the elements not scrolling with the page, you'll have to set your div that contains your content to:

    Code:
    #mycontent{
       position:fixed;
    }

  3. #3
    Join Date
    May 2010
    Posts
    36
    Quote Originally Posted by ryanbutler View Post
    Regarding your images showing up, are the images in the images directory and is the path correct? Continuing, regarding the bullets showing up, add the following to this existing rule:

    Code:
    #topmenu ul li {
    	float: left;
    	margin-left: 8px;
    	text-indent: -9999px;
            list-style-type:none;
    }
    For the elements not scrolling with the page, you'll have to set your div that contains your content to:

    Code:
    #mycontent{
       position:fixed;
    }

    Thanks for the reply.

    Offcourse the icons are in the images folder, I have tried putting them in a parent directory(where my page exists) and changed the relative path. still it doesn't work.

    Regarding bullets showing up, I am not worried about that as they dont appear in chrome. They just appear in FF and the text doesn't.

    Thanks

  4. #4
    Join Date
    Jan 2009
    Posts
    3,346
    I'm betting your disappearing text has something to do with:
    text-indent: -9999px;
    Try 0 and see if your text comes back.

  5. #5
    Join Date
    May 2010
    Posts
    36
    Quote Originally Posted by criterion9 View Post
    I'm betting your disappearing text has something to do with:

    Try 0 and see if your text comes back.
    Thank You, Ya it does But I dont want the text there rather I want my Icons there.

  6. #6
    Join Date
    Jan 2009
    Posts
    3,346
    Perhaps an image tag or an empty tag? If you move the indention the background image will also move.

  7. #7
    Join Date
    May 2010
    Posts
    36
    Quote Originally Posted by criterion9 View Post
    If you move the indention the background image will also move.
    But I do no where see my image on the page

  8. #8
    Join Date
    Jan 2009
    Posts
    3,346
    I would classes (or IDs) rather than advanced selectors (a[title="email"]) since that is not the most reliable across browsers.

    Code:
    <li>
       <a class="email">&nbsp;</a>
    </li>
    #topmenu ul li a.email {
    //set background image here
    }
    Semantically it would make more sense to me for the img to be within the a tags and make use of the alt attribute as that would handle odd cases like text readers and such plus you wouldn't have to mess with negative indentions (which doesn't always work the same across rendering engines).
    Code:
    <li>
        <a href="whatever"><img src="email" alt="Email Icon" /></a>
    </li>

  9. #9
    Join Date
    May 2010
    Posts
    36
    Thanks Dude, I finally got over it. Also can I have a div fixed, i-e it should not scroll with the page. Actually My icons are in top level div, These icons will print the contents of the page that are in the second div(main central). I want the top div that holds the icons to remain static so that I can use icons to do their task, because my central div is scoll page.

    I hope I am clear enough.

    Thanks
    Last edited by refhat; 07-21-2010 at 10:28 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles