|
HTML - Making A Div A Link?
Hi, I made a div into a link by making the "a" tag into a block element. Now that I did that, I added text and images to the div, and now the link only works around the text, but fine over the image. How do I get the link to work over the entire div?
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Website</title>
<style type="text/css">
.bbodytext {
margin:0;
position:absolute;
left:90px;
top:40px;
font-family:Arial;
font-size:9pt;
color:#7B7B7B;
width:212px;
height:43px;
}
.bheadtext {
width:200px;
height:20px;
left:90px;
position:absolute;
top:17px;
font-family:Arial;
font-weight:bold;
font-size:10pt;
color:#404040;
margin:0;
}
.link {
display:block;
top:0;
left:0;
width:333px;
height:100px;
position:absolute;
}
#bright {
top:0;
left:666px;
position:absolute;
background-color:#FFFFFF;
width:299px;
height:66px;
padding:17px;
}
#bright:hover {
background-color:#ECEFEF;
}
#bcenter {
top:0;
position:absolute;
background-color:#FFFFFF;
left:333px;
width:298px;
height:66px;
border-right:1px solid #DBDEDE;
padding:17px;
}
#bcenter:hover {
background-color:#ECEFEF;
}
#bleft {
top:0;
left:0;
position:absolute;
background-color:#FFFFFF;
width:298px;
height:66px;
border-right:1px solid #DBDEDE;
padding:17px;
}
#bleft:hover {
background-color:#ECEFEF;
}
#bottom {
height:100px;
width:999px;
position:relative;
box-shadow:rgb(168, 171, 171) 0px 2px 5px;
-webkit-box-shadow:rgb(168, 171, 171) 0px 2px 5px;
-o-box-shadow:rgb(168, 171, 171) 0px 2px 5px;
-ms-box-shadow:rgb(168, 171, 171) 0px 2px 5px;
-moz-box-shadow:rgb(168, 171, 171) 0px 2px 5px;
top:128px;
}
#wrapper {
height:635px;
width:999px;
top:0;
position:absolute;
left:50%;
margin-left:-499.5px;
}
body {
background-color:#DEE1E1;
margin:0;
padding:0;
}
</style>
</head>
<body>
<div id="wrapper" >
<div id="bottom" >
<div id="bleft" >
<a class="link" href="http://www.google.com" ></a>
<img src="images/icon.png" alt="" >
<p class="bheadtext" >Lorem Ipsum Dolor</p>
<p class="bbodytext" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec dapibus odio.</p>
</div>
<div id="bcenter" >
<a class="link" href="http://www.google.com" ></a>
<img src="images/icon.png" alt="" >
<p class="bheadtext" >Lorem Ipsum Dolor</p>
<p class="bbodytext" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec dapibus odio.</p>
</div>
<div id="bright" >
<a class="link" href="http://www.google.com" ></a>
<img src="images/icon.png" alt="" >
<p class="bheadtext" >Lorem Ipsum Dolor</p>
<p class="bbodytext" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec dapibus odio.</p>
</div>
</div>
</div>
</body>
</html>
Similar TutorialsHello, I posted this on another forum, but didn't get a conclusive response... Is it possible to make an HTML <button> act as a link without using Javascript's onClick handler, or indeed any Javascript at all? I was thinking something like: <a href="some link"><button>GO!</button></a> would work, but it doesn't seem to. Thanks, http://alexc.awardspace.com/index.htm I made a div box into a link and in IE it works fine, only the outlined div is clickable. However in FF not only is the outlined div clickable, but the whole top part is. Its weird and I don't know whats wrong with it. Heres the code: html <body> <div id="main"> <a href="index.htm"><div id="logo"></div></a> </div> </body> </html> CSS body { background:url(images/cork.png); margin:0; padding:0; } #main { width:950px; height:750px; background:url(images/bg.jpg); margin:0px auto; } #logo { width:480px; height:90px; margin-left:45px; cursor:pointer; border:1px solid #000000; } Im having an issue in some browsers with making a whole cell in a table a link. I have simplified my code to that below for ease of troubleshooting here. Using the code below, and assuming you have two image files named AlphaThumb.jpg (approx 80x100 px) and Alpha.jpg (A larger version of AlphaThumb.jpg) in a folder with the html and css files I achieve the desired result in IE7, IE8 & in Lunascape6 (Ver 6.3.4). However Firefox (Ver 3.6.13), Safari (Ver 5.0.3) & Opera (Ver 11.00) all have the same issue, in that the link doesn't work. If anyone has any ideas I'd be grateful for some input. Regards, Stoney ------------- The Html code ------------- <html> <link rel="stylesheet" type="text/css" href="Stylesheet1.css" /> <body> <table border="1" class="aggregatestable"> <tr> <a href="Alpha.jpg" target=_blank> <td class="productalpha"> </td> </a> <td class="productname">Alpha</td> <td>Some random text about our product Alpha.</td> </tr> </table> </body> </html> ------------ The css code ------------ td.productname { width: 100px; height: 80px; } td.productalpha { background-image: url(AlphaThumb.jpg); background-repeat: no-repeat; background-position: center; width: 100px; height: 80px; cursor: pointer; } Hi, I am working on adding non java-script buttons on my website using CSS style sheets. I used a technique given at http://builder.com.com/5100-6371-5323375-2.html. I modified the colors a little but it is basically using technique 2 at this link. Everything works well with the exception of one issue. In Internet Explorer, when I press a link and then use the back button on the browser to return to the previous page, the link for the previous page is still selected and the button appears to still be "pressed". You can see this by going to http://www.apexmoves.com with internet explorer, clicking one of the buttons on the left side of the site, and then using the browser's back button. You will see that the link that was clicked is still selected and this button appears to be stuck in the down position. If you click anywhere else on the screen, the button is released. This is because the link for the pressed button is has the status of active. Does anyone have any ideas on how to solve this. Is that a way to make the status of this link "visited"? Any Ideas would be greatly appreciated. Thanks Brad I have several links on my site, all in the form of <a href="http://www.mywebsite.com">mywebsite</a> How do I need to change it such that a new instance of the browser is used in which the linked site is displayed. Ive been working on a website in my free time, and I have been wondering if it's possible to hover over a link, and change the text color of another link. A picture of one of my web pages is shown in the link below. http://i223.photobucket.com/albums/d...screenshot.jpg I want to be able to hover over something from the side navigation bars and have various links in the bottom naviational bar change color. So like hovering over Blood Elf, would make Death Knight, Mage, Paladin, Warlock, Priest, Rogue, Hunter turn red Does anyone know how to do this? or even know if it is possible? Hi, I'm newly registered and seeking some assistance. I'm working on a website for a client and come across an issue. The following is my iFrame code: Code: <div id="iframez"> <iframe src="main.html" width="100%" height="400px" name="framez"></iframe> </div> I have a link that is at the bottom of the page that is supposed to load in the iFrame when clicked upon. The code is as follows: Code: <a href="somelink.html" target="framez">some link</a> What I want is when the link is clicked that it loads in the iframe (this works as intended) AND I want the page to scroll up to the iframe. I tried doing this without success: Code: <a href="somelink.html#iframez" target="framez">some link</a> This is interpreted as #iframez in somelink.html, and not the page its on. Is there any way around this? Thanks for your patience. Hi im not sure if this can be done i have created some buttons to use as links and once i put the a href code in a box appears around the button can i remove this and how plz you can see example of what i mean on my website i have made Home and Contact clickable but i want to remove the box thats around the button if possible http://dreamteam0708.co.uk/ for info: im coding my own html in notepad, not using any programs or anything and my hosting doesnt support php etc I've been working for a long while on this script, and I can't get it to work. I'm mostly doing it to learn, because I stink at HTML and pretty much any scripts.. What I'm basically trying to do is make a page with two screens on at once, like a split browser. Since I have practically no experience in HTML, I still haven't figured out how to make the top bar (address bar) stay no matter what site I am on. Help.. please? Address bar code below, may need some work Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>ItsJareds</title>
<script language="javascript">
<!--//
function findworld(form)
{
server = '<frame src="' + form.server.value + '">'
document.write('<html>')
document.write('<frameset cols=* rows=" frameborder=0 border=0>')
document.write(server)
document.write('</frameset>')
document.write('</html>')
}
//-->
</script>
</head>
<body bgcolor="748269">
<div style="position:fixed">
<form name="worldselector">
<TABLE WIDTH="100%">
<right>
<TR>
<TD valign="middle"><font color="3B5E2B" size="4"><strong>Address: </strong></font></TD>
<TD valign="middle">
<input type="input" name="server" size="40">
<input type="button" value="Load Page" onclick="findworld(this.form)">
</TD>
</TR>
</right>
</table>
</form>
</body>
</html>
I know about tables, but are there advance programming for certain condition? I mean if I want certain cells to certain lengths and so on? Hi there, I am building a website for my products and want to create some tap-like buttons for the product description. Please see the details on this sample site: http://www.christiedigital.com/AMEN/...stieHD10KM.htm So the content has been classfied into "Description", "Overview", "Specifcation", etc on the same HTML page. Does everyone know how to create this feature in HTML coding? Or is there any tool to make this feature? Any suggestions are very welcome. Thanks. Hi I've found a nice template of a website online (free). But i couldn't find a way to fully make the template RTL. Could anyone assist be with some basics? I could even upload the template. Thanks, I was wondering if there was any specific code that i could use to mkae a thumbnail of an image that leads to a larger image, without having to make 2 separate images. Hello, I am making a template for a website and now with a lot of updates being done I was hoping to create a template thats based on a table structure with just the center portion to change depending on the link that was pressed to access that page. Can this be done with an HTML script? Basically it is like the forum page here where the top portion stays the same just the portion below changes. Is there a way to make an image or image map link to 2 different places when clicked? Thanks in advance im just wondering if any1 uses programs other then google adsense... i have seen a few not many that look too promising... does any1 know any CPM (cost per 1000 hits) sites... i would like to have @ least 1 of those if i could find a decent site for them... Thanks... On my HTML file i am trying to get the border to stay as it is and only get the middle bit to change when i click. The reason for this is that in the border there is alot of information which will be changed often and if i dont single pages it would require me to change each and everypage correct? So i was wondering weather i can make a panel to go in the middle which would change everyimime the user clicks on a new Link from the top bar. This Is What It Looks Like: Thanks Well i'm a total newby at this and i was wondering if you guys could help me out with this i want a form with a textbox so someone can put something in the textbox and click a sumbit button and then what ever they put in the textbox can be stored and the submit button redirects them to another page... is this possible? is it possible to have div #1 which is 500 x 500 and div #2 which is also 500 x 500 directly above div #2 (rather than below or next to it)? i am thinking of using the z-index to making this happen... am i on the right track? so div #2 will have a z-index which is greater than that of div #1 Hello knowledgable HTMLforum gurus. I have a client that would like a blog feature on her site, so that she can update one of the pages with announcements, etc. Is there some free code anywhere that I can use to accomplish this? I'd like the code to be able to archive old entries and have a search function if possible... Also, I need to have the blog section fit into the same design scheme as the rest of the site that I will be creating, so outsourcing to blogspot or something like that is out of the question. Does anyone know of any freeware that can accomplish this? Thanks in advance, hous edit: please forgive the placement of this thread - not sure where this belongs. |
|||||||