|
HTML - Ie, Ff Problem With Making A Div Into A Link
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; } Similar TutorialsHi, 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>
Hello, 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, 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 am having problem with links creation. Please have a look at http://www.outsourcingi.com/articles.php you will see there are two link bars one is at top and other one is on left side. now if i click on a link it get disappeared same is the case of top links. One more thing can i give <h1> to my link or not? thanks Hey everyone, i am using 000webhost.com and i am trying to hook up my products link. I made a file called something.html and this is going to be the link that my site goes to afte they click products So in link section of the code that is defaulted to "#" i put something.html but it didnt work... i uploaded the something.html with ftp to my file manager... What do i put in the "#" part to get it to link up to my new filleee thanks.... Hi I would like to know what is wrong with my coding, because for some reason my links doesn't want to work and I can't understand why. This is my code: Code: <div id="container">
<div id="banner">
<h1>
Welcome to the Grada djeri
</h1>
</div>
<div id="nav">
<?php echo $this->page('view');?>
</div>
<div id="content">
</div>
<div id="footer">
<a href="/pages/about_me">About Me</a>
<a href="/pages/contacts">Contacts</a>
</div>
</div>
The links are in the footer section I am having problem with a hyperlink to PDF file with form fields. When I click on the hyperlink the new window opens and says "done" but the PDF file does not open automatically. "Right-click and save target as" works, though. I tried linking PDF file without the form field and worked fine. Definitely something to do with the form on pdf file. Could anybody give me some help? I want this form to be open when I click...Thanks... i'm trying to give a url link to a image...but after i gave the link, that image appears to be bumped up and automaticaly put a blue border around that image. site reference is mahinthan.net46.net plz help me to get rid from this problem thanks In IE this code (not underlined link in table at the end of page) <TABLE width="300" border="1"cellspacing="2" cellpadding="2"> <TR> <TD ALIGN="center"> <style type="text/css"> <!--A:link {text-decoration:none; color="white"} A:visited {text-decoration:none; color="white"} A:hover { text-decoration: none; color="RED"} --></style><font face="ARIAL" size="3" ccolor="white"> <a href="index.html" style="cursor:crosshair"><b>HORARY SPORTS ASTROLOGY</b></a> </TD></tr></table> works fine (regarding colors) but when I look same page in Mozilla Firefox colors does not works. In IE color of "HORARY SPORTS ASTROLOGY" is white in Mozilla color is light green? Page:http://www.astrosport07.webs.com/kimitrue.html Is there something that I could add (and where? I am not expert) to make that colors works in Mozilla too? Thanks for answer. I am having a problem with my anchor links disappearing when I click on one. I don't know what is causing this to happen. Here is the link to the problem. When you click any of the links, it takes you to the right place. But scroll back up and you will see that 2 of them disappear. http://www.white-candle.net/Our-Other-Products.html Relevant Code: HTML Code: <CENTER><p> <a href="#bathnbody">Natural Bath And Body Products</a><br> <a href="#cosmetics">Natural Cosmetics</a><br> <a href="#skincare">Natural Skin Care</a></p></CENTER> and the anchor names: HTML Code: <a name="bathnbody"><hr></a> <a name="cosmetics"><hr></a> <a name="skincare"><hr></a> Hello, I've got the following problem: <a href="webpage.html"><h2>textlink<h2></a> This works! But I need more text links on one line and so I typed: <h2><a href="webpage.html">link to page</a> <a href="webpage2.html">link to page2</a></h2> Result: links are working, they are on one line, BUT the <h2> is not working anymore and the text is default. What Do I have to do now? Cheers! Roy I need help with HTML problem that i am having. I am using Dreamweaver to design a web site. I have created a music link <a href="Reciters/Mishary-Rashid-Alafasy/001-Fatihah.mp3">Al-Fatiha</a> In Browser when I click this link it opens window Media player and starts to play the mp3 file but my main web page is replaced with blank page and i can not understand why the main page is replaced with blank page. Your help in this is very much appreciated. Thanks Ok, what is the code to put in to get this done? I have image at: images/tables/image.jpg and i need to show it at work/portfolio/index.html The problem is if i link to images/tables/image.jpg it will now show it cause the path is wrong at work/portfolio/index.html, how do i set path to the image? do i just put ../images/tables/image.jpg or what is the right code? thanks! Hi all, I am a beginner. I'm using frames and I'm putting a 1 by 1 table inside a link so that the whole cell is a link: <a href="./home.html" target="rt" style="text-decoration: none"> <table style="text-align: left; width: 100%;" border="0" cellpadding="2" cellspacing="2"> <tbody> <tr style="font-weight: bold; color: rgb(255, 255, 255);"> <td style="vertical-align: top; background-color: rgb(0, 102, 0);">   Home </tr> </td> </tbody> </table> </a> Everything works fine in Firefox but the links don't work in Explorer. Any tips? Thank you! The entire .html files are below. The main file (1) index.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <title> Homepage of David Titley-Peloquin </title> </head> <noframes> You need a frames-enabled browser to view this website!!! <meta http-equiv="refresh" content="3;URL=http://www.cs.mcgill.ca/~dtitle/indexold.html"> </noframes> <frameset frameborder="100" framespacing="0" border="0" rows="100,*"> <frame marginheight="20" marginwidth="20" noresize="yes" border="0" scrolling="off" src="./logo.jpg"> <frameset frameborder="100" framespacing="0" border="0" cols="180,*"> <frame marginheight="0" marginwidth="10" noresize="yes" border="0" scrolling="auto" src="./menu.html"> <frame marginheight="0" marginwidth="10" noresize="yes" border="0" scrolling="auto" src="./home.html" name="rt"> </frameset> </frameset> </html> and the menu in the left frame (2) menu.html <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>menu</title> </head> <body> <a href="./home.html" target="rt" style="text-decoration: none"> <table style="text-align: left; width: 100%;" border="0" cellpadding="2" cellspacing="2"> <tbody> <tr style="font-weight: bold; color: rgb(255, 255, 255);"> <td style="vertical-align: top; background-color: rgb(0, 102, 0);">   Home </tr> </td> </tbody> </table> </a> </body> </html> Hey, im making a portfolio site and i am linking my images except when i link them i get a small blue border around it whihc moves it down a bit and it looks outta place i was wondeirng is there anyway to take this border out or not plz help. heres what it looks like be4 and after. hello, i'm having a problem where i have a simple link on my web page, when i click on this link i want a window to open in the center of the screen with simple text and a close button. in a standalone environment, the following code almost does it for me: Code: <html>
<head>
<script>
<!--
function wopen(url, name, w, h)
{
w += 32;
h += 96;
wleft = (screen.width - w) / 2;
wtop = (screen.height - h) / 2;
var win = window.open(url,
name,
'width=' + w + ', height=' + h + ', ' +
'left=' + wleft + ', top=' + wtop + ', ' +
'location=no, menubar=no, ' +
'status=no, toolbar=no, scrollbars=no, resizable=no');
win.focus();
}
// -->
</script>
</head>
<body>
<a href="page1.html" target="popup"
onClick="wopen('page1.html', 'popup', 300, 200); return false;">
Open Window</a>
</body>
</html>
My question is, how do integrate this into my webpage. In the place where I have the link, I obviously have to use the "<a href="page1.html"..." but how do I seperate the function wopen and the html page above. Because the way the above code works is that it gives me a "Open Window" link, when I click on it - the new page also has the "Open Window" link in it. any guidance will be helpful. thanks! Hey all. I'm having a problem with my website's image links. For some reason there are orange bars around all of the images that are in link tags, and when you click on them they turn purple. They're very tacky and I have no idea why they're there. Here's my website's URL: www.populous3.co.nr Here's the code for one of the pictures: Code: <a href="images.htm"><img src="/images/images.jpg" /></a> Any help will be appreciated! Thanks, Suleiman I have taken over a newsletter and was attempting to recreate a menu item using Dreamweaver used by the previous author in the newsletter menu that she created using constant contact and was successful of course on my computer, but when I sent out the newsletter, if one used the a href link instead of being taken to the document a name link as intended it began a search on the recipients computer. Any suggestions. Thanks Hi I have this problem that my comment script is located at public_html/comments but the page that needs it is at public_html/hamburgerbar/fish/dish so in the code when i have the php include pointing at /comments, its not working how do i make the browser understand where the comments its? cause i tried with http://www.mysite.com/comments and it says permission denied. However when i move the target page in the comment folder it works like a dream. So how do i point my include link there? Thanks for help! |
|||||||