Zikula Community

• FirstTracks
  
  

  • Rank: Softmore
  • Registered: Aug 01, 2006
  • Last visit: Jan 20, 2010
  • Posts: 107

  Posted: Jul 19, 2007 - 04:38 AM

  Hi folks,
  
  I'm a CSS noob looking for help, and I'm guessing most of you could solve this with your eyes closed.
  
  I've been trying to link the logo image that appears in the header of our website to the home page. The problem for me is that the image is called within CSS, and then the header block called by the HTML template. I've scoured the Internet for the proper syntax of linking a CSS background image without success.
  
  FYI, the call for the image within CSS is coded as follows in the style sheet:
  

  Code

  #fpic
  {
   width: 686px;
   border: 1px inset #888;
   height: 200px;
   background-color: #999999;
   clear: both;
   background: url('../images/header.jpg') no-repeat;
  }

  
  
  and the call within the HTML template is as follows:
  

  Code

  <!-- This layer contains the pic(background), and a right side menu -->
     <div id="fpic">

  
  
  Help? Thanks a bunch in advance.

  • 
  •  
• nestormateo
  
  

  • Rank: Team Member
  • Registered: Sep 06, 2006
  • Last visit: May 09, 2010
  • Posts: 2446

  Posted: Jul 19, 2007 - 06:26 AM

  Right!
  I understand that you want to use the image in your HTML...
  
  
  you have to know that the paths used in the CSS are relative to the CSS file; if you don't know what it means: "../images" path means that you have to go out of the folder where the style is and search fot a folder called images... and there is the header.jpg
  
  
  Your links must be as:
  

  Code

  <img src="themes/YOURTHEMENAME/images/header.jpg" alt="..." width=".." height=".." />

  
  
  --
  - Mateo T. -
  Mis principios... son mis fines

  • 
  •  
• FirstTracks
  
  

  • Rank: Softmore
  • Registered: Aug 01, 2006
  • Last visit: Jan 20, 2010
  • Posts: 107

  Posted: Jul 19, 2007 - 06:43 AM

  Actually, not quite, but thanks for the reply nonetheless. I understand the relative/absolute path thing. That's not the problem. The photo displays just fine.
  
  What I want to do is activate a URL within the photo, in other words I want the user to go to a different URL when clicking on the image that's displayed via the CSS quoted in my original message above. Normally in HTML I'd code it this way:
  
  

  Code

  <a href="http://www.somedomain.com/"><img src="http://www.somedomain.com/image.jpg"></a>

  
  
  However, I can't figure out how to create the link given that the image is called via CSS, as I'm not familiar enough with CSS and can't find the proper CSS to do so referenced anywhere. If someone clicks on this header image I want them to be re-routed back to our home page.

  • 
  •  
• nestormateo
  
  

  • Rank: Team Member
  • Registered: Sep 06, 2006
  • Last visit: May 09, 2010
  • Posts: 2446

  Posted: Jul 19, 2007 - 07:12 AM

  Ouh, i think there's no solution for what you want.
  CSS is not for define links... may exist a form to do this, but i recommend you to modify the HTML instead use CSS for not-design aims...
  
  
  you may use onclick in your div, or insert a link tag into the div and with CSS expand it with CSS (padding, may be width, height, position, top, left... ), but IMHO an A tag like this:

  Code

  <a href="yoursiteurl">&nbsp;</a>

  with padding or widht/height defined in the CSS can be a solution for you.
  
  
  Good luck
  
  --
  - Mateo T. -
  Mis principios... son mis fines

  • 
  •  
• HalbrookTech
  
  

  • Rank: Developer
  • Registered: Dec 31, 1969
  • Last visit: Jun 01, 2010
  • Posts: 6859

  Posted: Jul 19, 2007 - 07:43 AM

  If you want the image to be a link, it will need to be moved from the CSS to the HTML.
  
  --
  Home Page | Find on Facebook | Follow on Twitter
  

  • 
  •  
• FirstTracks
  
  

  • Rank: Softmore
  • Registered: Aug 01, 2006
  • Last visit: Jan 20, 2010
  • Posts: 107

  Posted: Jul 19, 2007 - 07:44 AM

  Bingo! Thanks for pointing me in the right direction, and I learned a bit of JavaScript event handling in the process.
  
  Here's how I coded it (after googling on how to get the mouse pointer to change to a hand, too):
  
  

  Code

  <!-- This layer contains the pic(background), and a right side menu -->
        <div id="fpic"  onclick='window.location.href="http://www.myhomepage.com/";;'>

  
  

  • 
  •  
• nestormateo
  
  

  • Rank: Team Member
  • Registered: Sep 06, 2006
  • Last visit: May 09, 2010
  • Posts: 2446

  Posted: Jul 19, 2007 - 07:51 AM

  Good!
  you have to search the best practices using JavaScript, and in my experience, after the redirection return false...
  
  Styling the cursor is easy but not cross-browser compatible at all...
  cursor: hand, pointer;
  if i remember good, it's the way to change the cirsor to a hand, and if isn't then use the normal pointer...
  
  See you in the community!
  
  --
  - Mateo T. -
  Mis principios... son mis fines

  • 
  •  
• **unknown user**
  
  

  • Rank: Expert
  • Registered: Mar 16, 2002
  • Last visit: Apr 02, 2010
  • Posts: 1208

  Posted: Jul 19, 2007 - 10:20 AM

  You'd probably be better off moving the image to the HTML as mhalbrook suggested and adding a link. JavaScript is great, but what if someone has it turned off? Plus you won't have the browser incompatibilities as nestormateo pointed out because you wouldn't need the cursor styling at all.

  • 
  •  
• nestormateo
  
  

  • Rank: Team Member
  • Registered: Sep 06, 2006
  • Last visit: May 09, 2010
  • Posts: 2446

  Posted: Jul 19, 2007 - 10:57 AM

  Yes, finally the best solution is move the image to the HTML.
  
  --
  - Mateo T. -
  Mis principios... son mis fines

  • 
  •  
• AmmoDump
  
  

  • Rank: Team Member
  • Registered: Dec 07, 2003
  • Last visit: May 09, 2010
  • Posts: 2703

  Posted: Jul 20, 2007 - 04:58 AM

  Or (not typing out the code this time) use if else...
  
  if javascript is a go....blah...blah
  else old HTML way...
  end if
  
  --
  David Pahl
  Zikula Support Team

  • 
  •  
• hepha
  
  

  • Rank: Registered User
  • Registered: Mar 30, 2009
  • Last visit: Mar 30, 2009
  • Posts: 1

  Posted: Mar 30, 2009 - 11:20 AM

  I am also a noob, but I had the same issue as the person above, except in our situation we had a background image with text on top of it and due to the other factors in our style sheet it would have been very difficult to split the image in half and have half as a background image with text on top and the other half as a front facing image in the HTML.
  
  A really simple solution was just to place a transparent GIF image on top of the desired link area and link the transparent image instead. Of course the transparent image does add some size to the page - but this can be minimized by stretching a very small image over the desired space. This was a really easy solution and it provides another option to javascripting it or chopping up the image.

  • 
  •  
• dl7und
  
  

  • Rank: Softmore
  • Registered: Aug 12, 2003
  • Last visit: Mar 08, 2010
  • Posts: 111

  Posted: Mar 30, 2009 - 12:21 PM

  Why so difficult? In some cases that logo may be empty, but often you have a background image and the site name and sometimes the slogan on top of it, so you could simply put a link to index.php around that, no need to fiddle with the image.
  
  And depending on how wide you wrap the link, it may even include the whole image area, like here.
  
  --
  And out of the chaos sounded a voice and spoke: "Be happy and smile, for it could have come worse."
  And I was happy and smiled - and it came worse...

  • 
  •  
•  
•  

Users on-line

• 0 users

This list is based on users active over the last 60 minutes.