|
HTML - Li Item With Background Image - Clickable
Hi guys!
I'm having issues getting a <li> element clickable. It only makes the text inside the <li> element clickable. i would like the whole <li> div to be clickable (so that if i click on the background image, it clicks, and not only if i click the text) I have the following HTML-code: Code:
<ul>
<li1><a href="index.html">THISisTHEtextTHATgetsLINKED</a></li1>
</ul>
And it is uses this CSS code: Code: ul {
display:block;
padding-left: 0;
padding-right: 0;
margin: 0px 0px;
list-style-type:none;
}
ul li1 {
margin: 0px 0px;
height: 35px;
width: 170px;
display: block;
float:left;
text-align: center;
background-image:url(../pictures/hjemknapp.png)
}
can you guys please help me? Similar TutorialsHi all, I'm trying to make my background (which contains my logo and site name) to be clickable to my site's URL. Seem to be having difficulty because I am using a modified WordPress template along with linking to a stylesheet. Not very good or familiar with php and css, unfortunately. Anyone have some energy to crank this one out with me? sorry for being vague in my initial post. Here is the header php code: <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>[TITLE]</title> <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> </head> Here is the css code: .header{margin:20px 0;} .header .top{background:url(images/logo-graphic.jpg) top left no-repeat; height:120px; width:960px; margin:20px auto;} .header .top #secondary{float:right; width:468px; height:60px; margin:20px 0 0 0; border:1px solid red;} .header .navigation{background:url(images/navigation-bar-bg.png) top left repeat-x; height:61px;} .header .navigation .nav-wrapper{width:960px; margin:0 auto; height:49px;} .header #searchform{float:right; width:325px; height:40px; margin-top:6px;} .header #searchform #s{font-size:14px; padding:6px 4px; border:1px solid #666; outline:none; -webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px; -moz-box-shadow: inset 0px 1px 3px #888;-webkit-box-shadow: inset 0px 1px 3px #888;box-shadow: inset 0px 1px 3px #888; } Hi, I'm pretty sure there is a simple way of doing this but I have tried and cannot get great results. I want to be able to have the lower right logo on this page be clickable to a webpage. Thanks! http://www.grannysoycandles.com The menu links on the left side are working in IE but not in FF. Its only when they are in the "buttons" div. I put one in the "body" div and it worked fine. Any ideas why? Internet Explorer works fine Firefox does not weird...usually its the other way around... Quote: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Granny Soy Candles</title> <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" /> <style type="text/css"> :active, :focus{ outline:none; } </style> </head> <body bgcolor=#E0E0E0> <div id="div1"> <div id="banner"> <img src="http://www.grannysoycandles.com/images/banner.jpg"> </div> </div> <div id="div2"> <div id="body"> <center><b><h3>Welcome To Granny Soy Candles</h3></b></center> Welcome to the new home of Granny Soy Candles. Please be patient while the site is updated and created. We will be up and running within the next few weeks. Very soon we will be providing you with quality soy candles that are better for your home and your family. Please come back and visit us soon! <br> </div> <div id="buttons"> <a href="http://www.grannysoycandles.com/"><img src="http://www.grannysoycandles.com/images/home1.jpg" border="0"></a> <br> <a href="http://www.grannysoycandles.com/candles.html"><img src="http://www.grannysoycandles.com/images/candles0.jpg" border="0"></a> <br> <img src="http://www.grannysoycandles.com/images/button0.jpg" border="0"> <br> <img src="http://www.grannysoycandles.com/images/button0.jpg" border="0"> <br> <img src="http://www.grannysoycandles.com/images/button0.jpg" border="0"> <br> </div> <div id="div3"> </div> </body> </html> Quote: #div1 { background: url(images/bgheader.jpg) repeat-x; float: left; width: 915px; height: 165px; } #div2 { background: url(images/bgmiddle.jpg); background-repeat: repeat; float: left; width: 915px; } #div3 { background: url(images/bgfooter.jpg) repeat-x; float: left; width: 915px; height: 51px; } #banner { padding-top: 30px; padding-left: 1px; } #buttons { padding-top: 30px; } #body { position: absolute; width: 675px; padding-left: 220px; padding-top: 15px; } Hey folks, I'm having an issue with an image map, on some pages the areas I've mapped are not able to be clicked. It has something to do with the code above the image map, but I'm not sure exactly what is causing the issue. Here's the full page code: <html xmlns:v="urn:schemas-microsoft-com:vml" xmlns="urn:schemas-microsoft-comfficeffice" xmlns="http://www.w3.org/TR/REC-html40"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>DIVINEDESIGNJEWELRY.COM</title> </head> <body> <p align="center"> <img id="Image-Maps_1201007190938159" src="DD_Logo.jpg" usemap="#Image-Maps_1201007190938159" border="0" width="725" height="235" alt="" /> <map id="_Image-Maps_1201007190938159" name="Image-Maps_1201007190938159"> <area shape="rect" coords="6,179,105,215" href="http://www.divinedesignsjewelry.com/philosophy.htm" alt="" title="" /> <area shape="rect" coords="118,180,217,216" href="http://www.divinedesignsjewelry.com/givingback.htm" alt="" title="" /> <area shape="rect" coords="226,179,325,215" href="http://www.divinedesignsjewelry.com/collections.htm" alt="" title="" /> <area shape="rect" coords="331,180,416,216" href="http://www.divinedesignsjewelry.com/artisans.htm" alt="" title="" /> <area shape="rect" coords="420,180,500,216" href="http://www.divinedesignsjewelry.com/events.htm" alt="" title="" /> <area shape="rect" coords="506,180,586,216" href="http://www.divinedesignsjewelry.com/boutique.htm" alt="" title="" /> <area shape="rect" coords="602,179,700,215" href="http://www.divinedesignsjewelry.com/mailinglist.htm" alt="" title="" /> </map> </p> <div align="center"> <table border="1" width="57%" cellspacing="0" bordercolor="#DADADA"> <td> <p class="MsoNormal"><font color="#808080" face="Verdana"><b><u>EVENTS</u></b></font></p> <p class="MsoNormal"><font face="Verdana"><font color="#808080">Visit Divine Designs in Louisville, KY, September 12<sup>th</sup>-18th at </font> <a style="color: #808080; text-decoration: underline; text-underline: single" href="http://www.natqc.org/"> www.natqc.org</a></font></td> </table> <div> <p align=center> <img id="Image-Maps_1201007190938159" src="bottommenu.jpg" usemap="#Image-Maps_1201007190938159" border="0" width="710" height="46" alt="" /> <map id="_Image-Maps_1201007190938159" name="Image-Maps_1201007190938159"> <area shape="rect" coords="503,2,569,41" href="http://www.divinedesignsjewelry.com/press.htm" alt="" title="" /> <area shape="rect" coords="584,2,670,41" href="http://www.divinedesignsjewelry.com/contactus.htm" alt="" title="" /> </map></p></div> </body> </html> Any help would be greatly appreciated. The image map on the top works fine, the one on the bottom is the one that is not working at all. Thank you! It works in my editor, but when I paste it into my blogger account, it says its not complete because of the IMG tag. <A HREF="http://www.trueprotein.com/"><IMG SRC="http://i10.tinypic.com/4tqy6ux.jpg"</A> Thanks Hiya, I was wondering if there's a way to make various sections of the image clickable? The sections on the image are not rectangular so I can't make divs. I don't think I can use imagemap either since that only works for making one clickable area right? I already cut out these sections in photoshop and saved them with alpha background, and created a "glowing" version of each section, since I want to make it so that when mouse hovers over it, it will glow. But I can't stack them on top of each other, since if I do that only the topmost layer will be clickable for those areas where they will overlap with rectangular divs. This is example of what I mean: Thanks I've got some hyperlinks underneath a (transparent) image. Because of this, they're not clickable. Mouse hover isn't even detected. Is there any way round this without placing the image beneath the hyperlinks? Hello all, I am so stuck , after spending all of last night reading and crawling across google to find coding for my problem, I am still so lost! Basically, I have a webpage which is going to have lots of small clickable images on it, and each image is going to be linked to bring up a pop up window that opens up full screen (without scroll bars, no searchbar, etc, just a window thats resizeable), which will have the image click on as a larger view. I know this is javascript coding, but each time I found solutions across the net, it was usually only for if the page had one image that was going to be made larger. If you click on this site, this shows what I'm after (and click on one of the little images).... any ideas??? Everything is working expect the list such as Happy Birthday Card etc should display image on another place when selected an item. Look at my java code (red). It is not working. <head> <style> body { margin: 20px; } select { float: left; } optgroup { text-indent: 5px; } option { padding: 0 10px 0 15px; } table { border-spacing: 20px 2px; } th { text-align: left; text-decoration: underline; } td:last-child { text-align: right; } </style> <script> window.onload = function() { document.getElementById("dlist1").onchange = function() { var option = this.options[this.selectedIndex]; document.getElementById("price_card").innerHTML = option.getAttribute("data-card") ? option.getAttribute("data-card") : ""; document.getElementById("price_memo").innerHTML = option.getAttribute("data-memo") ? option.getAttribute("data-memo") : ""; document.getElementById("price_tags1").innerHTML = option.getAttribute("data-tags1") ? option.getAttribute("data-tags1") : ""; document.getElementById("price_tags4").innerHTML = option.getAttribute("data-tags4") ? option.getAttribute("data-tags4") : ""; document.getElementById("price_key").innerHTML = option.getAttribute("data-key") ? option.getAttribute("data-key") : ""; document.getElementById("price_fridge").innerHTML = option.getAttribute("data-fridge") ? option.getAttribute("data-fridge") : ""; } } </script> <script type="text/javascript"> function swapImage1() { var image = document.getElementById("imageToSwap1"); var dropd = document.getElementById("dlist1"); image.src = dropd.value; }; </script> </head> <body> <select name="ORDER1" size="12" multiple="multiple" id="dlist1" onchange="swapImage1() "> <optgroup label="Sow Seeds of Love"> <option value="None">None</option> <option data-card="32.00" data-memo="62.00" data-tags1="8.50" data-tags4="1.80" data-key="30.00" data-fridge="40.00" value="Images/photo1.jpg">Happy Birthday Card</option> <option data-card="35.00" data-memo="65.00" data-tags1="9.50" data-tags4="1.80" data-key="20.00" data-fridge="40.00" value="Images/photo2.jpg">Get well soon Card</option> <option data-card="1.00" data-memo="2.00" data-tags1="3.00" data-tags4="4.00" data-key="5.00" data-fridge="6.00" value="Images/photo3.jpg">Wedding Card</option> <option data-card="6.00" data-memo="5.00" data-tags1="4.00" data-tags4="3.00" data-key="2.00" data-fridge="1.00" value="Images/photo4.jpg">New Baby Card</option> <option data-card="21.00" data-memo="22.00" data-tags1="23.00" data-tags4="24.00" data-key="25.00" data-fridge="26.00" value="Images/photo1.jpg">Thank you Card</option> </optgroup> </select> <table width="700"> <tr> <td> <img class="ImageToSwap" id="imageToSwap1" src="Images/Card.jpg" width="147" height="207" /> </td> </tr> </table> <table> <tr> <th>Description</th> <th>Price</th> </tr> <tr> <td><label><input type="radio" name="medium" value="card" /> Card A6 (blank)</label></td> <td id="price_card"></td> </tr> <tr> <td><label><input type="radio" name="medium" value="memo" /> Memo Book A6</label></td> <td id="price_memo"></td> </tr> <tr> <td><label><input type="radio" name="medium" value="tags4" /> Gift Tags (4 designs per packet)</label></td> <td id="price_tags4"></td> </tr> <tr> <td><label><input type="radio" name="medium" value="tags1" /> Gift Tags - Single - Assorted</label></td> <td id="price_tags1"></td> </tr> <tr> <td><label><input type="radio" name="medium" value="key" /> Key Rings Perspex</label></td> <td id="price_key"></td> </tr> <tr> <td><label><input type="radio" name="medium" value="fridge" /> Fridge Art</label></td> <td id="price_fridge"></td> </tr> </table> </body> </html> Is it possible to put a smaller background image on top (like in layers) of my old background image? I have a background image, but I want to put a smaller image on top of that one, but for it to be treated also as background image. This image is a black vertical rectangle, but is faded on the edges to give a transparency, so its a .png. So ultimately what I am trying to do is put this black rectanlge on top of my original background image and with the transparency on the edges of this image, be able to see my original background image. How can I do so? Also what I was thinking was that this faded background would be scaled to fit different screen sizes, so do "width: 75%"? Just so that it ALWAYS stays at 75% no matter what screen size it is viewed on. Is this the right approach towards getting this result? Hi, I'm a complete newb and html-challenged, so please forgive my stupid questions. This is what I want for the personal website I'm making: a fixed image as the background that covers the entire screen regardless of what screen resolution a user's computer has - this much I've managed with CSS...I think (like this right? http://www.geocities.com/serenamonster/index.htm ) clickable regions on this background image to use for navigation to various parts of the site. Or in other words, the background image as an image map. - this I'm having trouble with, because you have to designate the picture as a set # of pixels in dimension to make an image map right? and if I do that to my background image, then it may display too big or too small depending on the person's screen resolution right? So does anyone know how I can have clickable regions on my fixed background image without the image being too big for low resolutions or too small for high resolutions? (he http://www.geocities.com/serenamonster/map.html the background image is fixed at 800x400. I want to make each star on the image a hyperlink to a different part of the site). I read somewhere that standard is 800x600 to fill a person's browser right? But on my computer the image only covers about 2/3 of the browser screen which is too small. How can I make it so that it fills 100% of any viewer's screen regardless of resolution? How does it look on your computer? I know these are probably just really stupid questions because I'm missing something really fundamental...but any help would be greatly appreciated! Thanks! ~Serena P.S. is it possible to do mouseovers for certain coordinates on an image map? Hello, Well im trying to make a web page type thing and i was wondering if there is a way to make the background change as if it were an image when you shrink the page down. http://www.legouniverseforums.com/radio.html thats the link. i want the video chat to be on the orange part box and the chat to be in its box but on some computers they go in there boxes but on other computers they dont. Here is how it looks on mine i would like it to look like this on every computer. http://www.legouniverseforums.com/Sc...34.34%20PM.png Hi Guys, Firstly i apologise if this in the wrong section of the forum, please let me know. My problem: I have designed a webpage for my DJ services in Photoshop and plan to slice it up. The first problem is my background. I designed it myself so its not simple. Basically i dont have a clue on how i should export the background from CS5 or how to implement it into my website on dreamweaver cs5. Also i want to export my images once sliced from Photoshop with a transparent background, how would i do this? Thanks for any help Raver910 Can somebody give me a full code <div style=""> for putting background images in divs... thanks in advance for you're help! Hey, I'm wanting to use a larger background image with a height of around 810pixels. Currently when i implement it, only around half the image appears and there is no scroll bar to use to view the whole image. And currently when i put a css box into it, when i scroll down it will still only show the top section of the image. Can anyone assist in what code to put into the CSS to allow the scroll bar to appear so i can view the whole background image? Thanks (sorry, meant to put this in the CSS section, only just realised) This is the current script I am using for background change upon a timer, does anyone know how and where I can add a no bg repeat and position the image on the bottom left? Any help would be great! Thanks <script type="text/javascript"> var bgImages = new Array(); bgImages.push("/image/girl.gif"); bgImages.push("/image/girl2.gif"); bgImages.push("/image/girl3.gif"); //bgImages.push("URL HERE"); function LoadRandomBackground() { var randomImageIndex = Math.floor(Math.random()*bgImages.length) document.body.background = bgImages[randomImageIndex]; } function StartBackgroundRefreshTimer() { var timer = setInterval('LoadRandomBackground()',10000); // 10 seconds } </script> </head> <body onload="LoadRandomBackground(); StartBackgroundRefreshTimer()"> Hey everyone. I'm not too experienced in HTML and I'm having a problem with displaying a background image on this site I'm building. I know this probably isn't the best way to be doing what I'm trying to do, but I'm using a Frameset with 3 columns. The left and right I just want to display the background image and the main to be another frameset containing the main website content. It looks perfectly fine in Firefox, but in Internet Explorer the background images in leftMargin and rightMargin don't show; it's just blank. Here is my index.html file: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>| Totaro's Restaurant |</title> </head> <frameset cols="15%, 70%, 15%" border=0> <frame name="left" src="leftMargin.html" /> <frame name="main" src="main.html" /> <frame name="right" src="rightMargin.html" /> </frameset> <noframes> I'm sorry, it seems your browser doesn't support frames! x( </noframes> </html> and here is the code of one of the margins: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
body {
background-image:url(images/bg.jpg);
background-repeat: repeat;
}
</style>
</head>
<body>
</body>
</html>
Here it is in Firefox: http://i34.photobucket.com/albums/d1...itefirefox.jpg And in IE: http://i34.photobucket.com/albums/d1.../websiteie.jpg Any help would be appreciated. i'm trying to set an image from my harddrive as the background but it doesn't seem to be working. I've been trying <body background="image location.jpg"> but it doesn't work. Any thoughts or solutions? thanks Hello All, I hope this is a good place to ask my question. I was working on a a webpage and tinkering with two different screen capturing software to capture my website then all of a sudden I realized I can no longer see the background of my webpage. I can go online and see background images of someone else webpage but no the webpages stored on my computer. If anyone has any idea about the cause of the problem please help. Hello, 1) I need to know how to make my background image the size of every monitor that will view it in any browser? Any idea? OR at least the size of most monitors 2) Also, how do I make is stick so it doesn't scroll, everything scrolls above it or on it. If the answer is CSS could you please write out a bit of code for me and tell me where to put it. Pretty please, with sugar on top. I know it sounds lazy, but I use to now CSS can't remember anything now and I'm suffering from short term memory loss which is new for me. I have to relearn everything and remember it - hard to do when you can't remember what you did 5 minutes ago. ~eDee |
|||||||