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
    New Coder
    Join Date
    Nov 2008
    Posts
    14
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Question Images with links in css???

    I have my header.png (header image) in my css, i have now edited this image in fireworks to include built in links. If I open this image stand alone in IE, I can use the links, but as soon as i try to use it in the css, it displays but i cannot use this links.

    Is this possible???

    I have pasted the css code below.

    Code:
    #container {
    	width: 800px;
    	margin-right: auto;
    	margin-left: auto;
    }
    #header {
    	height: 160px;
    	width: 800px;
    	background-image: url(images/header.png);
    	
    }
    
    #content {
    	width: 500px;
    	padding: 10px;
    	margin-right: 160px;
    	margin-left: 160px;
    }
    #leftnav {
    	float: left;
    	width: 140px;
    	height: 400px;
    	background-color: #ffffff;
    	padding: 5px;
    		
    }
    
    #leftnav ul
    {
    	margin-left: 0;
    	padding-left: 0;
    	list-style-type: none;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    }
    
    #leftnav a
    {
    	display: block;
    	width: 130px;
    	padding-top: 3px;
    	padding-right: 3px;
    	padding-bottom: 3px;
    	padding-left: 3px;
    	border-bottom-width: 1px;
    }
    
    #leftnav a:link, .navlist a:visited
    {
    color: #000000;
    text-decoration: underline;
    font-weight: bold;
    }
    
    #leftnav a:visited
    {
       color: #000000;
       text-decoration: underline;
       font-weight: bold;
    }
    
    #leftnav a:hover
    {
    	text-decoration: none;
    	color: #0000ff;
    }
    
    #sidebar {
    	padding: 10px;
    	float: right;
    	width: 130px;
    	background-color: #ffffff;
    	height: 390px;
    
    }
    
    #footer {
    	background-color: #ffffff;
    	padding: 10px;
    	clear: both;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	font-weight: bold;
    }
    
    
    h1 {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 22px;
    	font-weight: bold;
    	color: #000000;
    	line-height: 24px;
    }
    h2 {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 17px;
    	font-weight: bold;
    	color: #000000;
    	line-height: 20px;
    }
    h3 {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	font-weight: bolder;
    	color: #000000;
    	line-height: 20px;
    }
    
    p {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	line-height: 11pt;
    	margin-top: 3px;
    	margin-right: 0;
    	margin-bottom: 3px;
    	margin-left: 0;
    	padding-bottom: 9px;
    }
    
    a {
    	color: #E82525;
    	font-weight: bold;
    	text-decoration: underline;
    }
    a:visited {
    	color: #E82525;
    	text-decoration: underline;
    	font-weight : bold;
    }
    a:hover {
    	color: #901BBE;
    	text-decoration: none;
    }
    
    
    .box1 {
    	background:#ffffff;
    	color: #000;
    	border:1px solid #00ffff;
    	width: 400px;
    	height: 165px;
    	padding-top: 5;
    	padding-right: 6px;
    	padding-bottom: 0;
    	padding-left: 6px;
    	line-height: 16px;
    }
    
    .smalltext {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	padding: 3px 0;
        margin: 3px 0;
    	line-height: 12pt
    }
    Thanks

    G
    Last edited by gg_online; 11-17-2009 at 10:51 PM.

  • #2
    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 gg_online,
    That's really not enough info. The CSS you posted looks valid (except for padding-top: 5;) but we'd need to see your markup and your image to figure out what's not working and how to fix it.

    A link to the test site would be best.

    One more thing, please use the code tags, - available with the # button in the post edit window.
    This will wrap your code in a scroll box which greatly helps the readability of your post.
    Your post seems to be missing the closing /
    Last edited by Excavator; 11-17-2009 at 11:09 PM. Reason: spelling and gramar
    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:

    gg_online (11-17-2009)

  • #3
    New Coder
    Join Date
    Nov 2008
    Posts
    14
    Thanks
    4
    Thanked 0 Times in 0 Posts

    url

    Thanks for the response,


    I have now uploaded to http://www.pc-technician.co.uk to test.

    Thanks

  • #4
    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's a good start...
    I'm not sure what you mean by this -
    If I open this image stand alone in IE, I can use the links, but as soon as i try to use it in the css, it displays but i cannot use this links.
    There are no links in that website, so nothing for that menu to do or link to. I don't know what opening an image in IE would do different.

    I do have a few examples of menus you could look at. Check out the Menus section at http://nopeople.com/design/CSS%20tips/index.html
    There is one in particular that would work for what your doing at http://nopeople.com/CSS/anotherNavBar/index.html It would require your editing your header.png a bit.
    On all of those, view the source to see how it's coded.
    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:

    gg_online (11-17-2009)

  • #5
    New Coder
    Join Date
    Nov 2008
    Posts
    14
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I have created the image in fireworks and created it with links built into the image. when i preview the image in fireworks the links work fine.

    But when i implement it into the code the links no longer work.

    Is there alternative way that i can get this to work or get a similar look.


    thanks

  • #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
    This image with links built-in, what is the filename extension? Can't be a .jpg, .png or .bmp like a normal image, not if the links work. It must be a ... hmm, I don't know.
    Can you upload the image that has working links?

    Hopefully someone more familiar with FireWorks will jump in here.
    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
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by gg_online View Post
    Is there alternative way that i can get this to work or get a similar look.
    http://nopeople.com/CSS/anotherNavBar/index.html
    The layout and functionality are all there, you would just need to add some links and adjust the CSS to your pages sizes and colors.
    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

  • #8
    New Coder
    Join Date
    Nov 2008
    Posts
    14
    Thanks
    4
    Thanked 0 Times in 0 Posts

    This might be why?

    Just missed a big clue, when i previewed the image in IE i decided to view source and this is what i found.

    Code:
    <!--To put this html into an existing HTML document, you must copy the JavaScript and-->
    <!--paste it in a specific location within the destination HTML document. You must then copy-->
    <!--and paste code for the image with map in a different location.-->
     
    <html>
     
    <head>
     
    <title>00000001.gif</title>
     
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="description" content="Fireworks Image Map">
     
    <!-- Fireworks 2.0  Generic target.  
        Created Tue Nov 17 23:32:24 GMT+0000 (GMT Standard Time) 2009 -->
     
    </head>
     
    <body bgcolor="#ffffff">
     
    <!---- Copy the image and map code, and paste the data where -->
    <!--you want the image to appear in the destination document. ---->
     
    <!---------------------------- BEGIN COPYING HERE ---------------------------->
     
    <img src="00000001.gif" width="850" height="160" usemap="#00000001" border="0" >
     
    <map name="00000001">
    <area shape="rect" coords="747,144,781,156" href="links.htm" >
    <area shape="rect" coords="642,144,724,156" href="testimonials.htm" >
    <area shape="rect" coords="581,144,621,156" href="faqs.htm" >
    <area shape="rect" coords="513,144,560,158" href="gallery.htm" >
    <area shape="rect" coords="417,144,490,156" href="contact.htm" >
    <area shape="rect" coords="255,144,392,158" href="packages.htm" >
    <area shape="rect" coords="159,144,230,156" href="studio.htm" >
    <area shape="rect" coords="72,144,137,156" href="team.htm" target="_blank" >
    <area shape="rect" coords="9,144,47,156" href="index.htm" >
    </map>
     
    <!--   Image Map created with Macromedia Fireworks 2.0   -->
     
    <!------------------------------- STOP COPYING HERE ------------------------------>
     
    </body>
     
    </html>

    Not sure if this is possible, but if i am able to leave this header image in the css, where would i paste the above in the html?

    00000001.gif would be changed to header.png.

    Thanks again,

    G

  • #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
    That html bit would go in your #header. Like this maybe...
    Code:
     
    
    <div id="container">
    
    <div id="header">
    <img src="00000001.gif" width="850" height="160" usemap="#00000001" border="0" >
     
    <map name="00000001">
    <area shape="rect" coords="747,144,781,156" href="links.htm" >
    <area shape="rect" coords="642,144,724,156" href="testimonials.htm" >
    <area shape="rect" coords="581,144,621,156" href="faqs.htm" >
    <area shape="rect" coords="513,144,560,158" href="gallery.htm" >
    <area shape="rect" coords="417,144,490,156" href="contact.htm" >
    <area shape="rect" coords="255,144,392,158" href="packages.htm" >
    <area shape="rect" coords="159,144,230,156" href="studio.htm" >
    <area shape="rect" coords="72,144,137,156" href="team.htm" target="_blank" >
    <area shape="rect" coords="9,144,47,156" href="index.htm" >
    </map>
     
    
    </div>
    
    <div id="leftnav">
    Your quote doesn't show the js and you would need that too, it would go in the head of your document.
    Something 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>Title of your site</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript"><!--
    function ShiftTo(DivID){
      Base=document.getElementById(DivID).parentNode;
      Sub=Base.getElementsByTagName('div');
      for (x=0;x<Sub.length;x++){
        if (Sub[x].parentNode==Base){
          if (Sub[x].id==DivID){
            Sub[x].style.display="block";
          }else{
            Sub[x].style.display="none";
          }
        }
      }
    }
    //--></script>
    </head>
    <body>
        <div id="container">
    Of course, that bit of js does nothing for you. It's just a site I copied the head off of.

    Have a look at a step by step tutorial that may help you more than I have been able to - http://www.irt.org/articles/js186/index.htm


    .
    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:

    gg_online (11-18-2009)


  •  

    Posting Permissions

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