What is wrong?!

Discussion in 'HTML & Website Design' started by stephen421, Jul 15, 2009.

0
  1. #1
    Im trying to edit this page of my site and I want to add a simple hyperlink under the image and for some reason the hyperlink text shows up but not as a link. I cannot find what is wrong with it. Can someone please help me out. The last line of code is the problem line.


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Jalee Designs l Spray Tan</title>
<meta name="keywords" content="environmentally green, american sport, zinc,chemical free, best quality moisturizing, face and body sunscreen, sunscreen, certified organic, sun protection" />
<meta name="description" content="COOLA Suncare best organic natural sunblock sunscreen with anti aging moisturizing quality spf" />
<meta name="robots" content="index,follow" />
<meta name="REVISIT-AFTER" content="7 days" />

<link rel="stylesheet" type="text/css" media="screen, print, projection"  href="newcommon.css"></link>

<script type="text/javascript"  src="popmenu.js"></script>

<style type="text/css" media="screen, print, projection">
#locatorbutton,
#id283environmentbutton  {
   z-index: 3;
}

#efecomlogo  {
   background-image: url(newenvironment/earthfriendlylogo.png);
   left: 11px;
   top: 181px;
}

#copyrighttext2  {
   visibility: visible;
   position: absolute;
   left: 253px;
   top: 980px;
   z-index: 2;
   width: 400px;
}
#copyrighttext2 p  {
   font: 8px/54px Arial;
   margin: 0px;
   color: #A6A3A1;
   text-align: left;
}

#environmenttextscroll  {
   position: absolute;
   left: 5px;
   top: 80px;
   z-index: 2;
   width: 550px;
   height: 385px;

   

}
#environmentbackground2  {
   background: url(newenvironment/aboutcoola.png) no-repeat;
   position: absolute;
   left: 0px;
   top: 75px;
   z-index: 2;
   width: 897px;
   height: 733px;
}
    

#bambooinglass  {
   background: url(newenvironment/tag.png) no-repeat;
   visibility: visible;
   position: absolute;
   left: 361px;
   top: 561px;
   z-index: 2;
   width: 329px;
   height: 49px;
}
#privacybutton {
   visibility: visible;
   position: absolute;
   left: 2px;
   top: 845px;
   z-index: 2;
   width: 100px;
}

#privacybutton a  {
   font: 8px Arial;
   margin: 0px;
   color: #A6A3A1;
   text-align: left;
}
#privacybutton p  {
   font: 8px Arial;
   margin: 0px;
   color: #A6A3A1;
   text-align: left;
}
#termsbutton {
   visibility: visible;
   position: absolute;
   left: 75px;
   top: 845px;
   z-index: 2;
   width: 100px;
}

#termsbutton a  {
   font: 8px Arial;
   margin: 0px;
   color: #A6A3A1;
   text-align: left;
}
#termsbutton p  {
   font: 8px Arial;
   margin: 0px;
   color: #A6A3A1;
   text-align: left;
}

#privacybutton a:hover,
#termsbutton a:hover  {
   color: #68B6BE;
}
#newsletter  {
   visibility: visible;
   position: absolute;
   left: 0px;
   top: 810px;
   z-index: 2;
   width: 180px;
}
#bottomtag  {
   left: 595px;
   top: 807px;
}

#bottomtag  {
   background: url(new_side/bottomtag.png) no-repeat;
   visibility: visible;
   position: absolute;
   z-index: 3;
   width: 220px;
   height: 40px;
}

#copyrighttextnew  {
   visibility: visible;
   position: absolute;
   left: 620px;
   top: 820px;
   z-index: 2;
   width: 400px;
}
#copyrighttextnew p  {
   font: 8px/54px Arial;
   margin: 0px;
   color: #A6A3A1;
   text-align: left;
}
#side1button a  {
   background: url(new_side/1.png) no-repeat 0% 0px;
   display: block;
   height: 200px;
   width: 150px;
   font-size: 92px;
   line-height: 140px;
}

#side2button a  {
   background: url(new_side/2.png) no-repeat 0% 0px;
   display: block;
   height: 200px;
   width: 150px;
   font-size: 144px;
   line-height: 140px;
}

#side3button a  {
   background: url(new_side/3.png) no-repeat 0% 0px;
   display: block;
   height: 200px;
   width: 150px;
   font-size: 156px;
   line-height: 156px;
}
#side4button a  {
   background: url(new_side/4.png) no-repeat 0% 0px;
   display: block;
   height: 200px;
   width: 150px;
   font-size: 144px;
   line-height: 140px;
}
#side1button a:hover  {
}
#side2button a:hover  {
}
#side3button a:hover  {
}
#side4button a:hover  {
}
#side1button  {
   visibility: visible;
   position: absolute;
   left: 800px;
   top: 85px;
   z-index: 3;
   width: 109px;
   height: 92px;
}
#side2button  {
   visibility: visible;
   position: absolute;
   left: 800px;
   top: 235px;
   z-index: 3;
   width: 109px;
   height: 92px;
}
#side3button  {
   visibility: visible;
   position: absolute;
   left: 800px;
   top: 385px;
   z-index: 3;
   width: 109px;
   height: 92px;
}
#side4button  {
   visibility: visible;
   position: absolute;
   left: 800px;
   top: 235px;
   z-index: 3;
   width: 109px;
   height: 92px;
}
</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>

<div id="background">

&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/logo.jpg" width="100" height="50">
<div id="indexbutton"><a  href="index2.html"  title="index"></a></div>
<div id="productsbutton"><a  href="index2.html"  title="Home" onmouseout="P2H_StartClock();" onmouseover="P2H_Menu('PMproductsbutton', 500, 0);">HOME</a></div>
<div id="aboutusbutton"><a  href="aboutus.html"  title="About J�LEE">ABOUT JALEE</a></div>
<div id="id288pressbutton"><a  href="brands.html"  title="Brands">BRANDS</a></div>
<div id="id290eventsbutton"><a  href="spraytan.html"  title="Spray Tan">SPRAY TAN</a></div>
<div id="partnersbutton"><a  href="partners.html"  title="Partners">PARTNERS</a></div>
<div id="id283environmentbutton"><a  href="promos.html"  title="Promos">PROMOS</a></div>
<div id="locatorbutton"><a  href=" http://jaleedesigns.blogspot.com/ "  title="Blog">BLOG</a></div>

<div id="contactusbutton"><a  href="contact.html"  title="Contact">CONTACT US</a></div>
<br>
<br>



 
 <p  style="color:#00CFCA; font-size:20px;"><strong>SPRAY TAN</strong></p>
<div id="environmentbackground2"></div>

<img src="images/spraytan.jpg" />
<br />
<a href="http://www.jaleedesigns.com/certificationtraining.html" target="_top">Certification Training Page</a>



</body>
</html>
    Code (markup):
     
    stephen421, Jul 15, 2009 IP
  2. JahRasta311

    JahRasta311 Peon

    Messages:
    201
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    it looks like <div id="background"> isn't closed, but i can't tell.
     
    JahRasta311, Jul 15, 2009 IP
  3. Top-Web

    Top-Web Peon

    Messages:
    68
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I don't believe you can have the images after a <div> tag without them enclosed in something, other then that the code is completely fine.
     
    Top-Web, Jul 15, 2009 IP
  4. stephen421

    stephen421 Active Member

    Messages:
    894
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    60
    #4
    but the image works fine its the hyperlink thats the problem.
     
    stephen421, Jul 15, 2009 IP
  5. KellyAX

    KellyAX Peon

    Messages:
    113
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    You are using layers and your "background" layer both isn't closed, and overlaps the text. Making it "not there".
     
    KellyAX, Jul 15, 2009 IP
  6. Top-Web

    Top-Web Peon

    Messages:
    68
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I know, my point is still correct.

    Put the picture in a <div> tag and the links should work.
     
    Top-Web, Jul 15, 2009 IP
  7. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #7
    Because your "environment-background2" div is covering everything up. Get rid of it. divs are not self closing either. You need the closing div tag. Also, you are trying to use XHTML version 1.1 which is an XML application and you aren't serving XHTML so change your doctype to 1.0 if you must use XHTML.
     
    drhowarddrfine, Jul 15, 2009 IP
  8. Destinyx3

    Destinyx3 Peon

    Messages:
    430
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #8
    You need to close <div id="background">. Put </div> just above </body>.

    Also, your doctype may be causing the problem. Change <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> to <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     
    Destinyx3, Jul 15, 2009 IP
  9. stephen421

    stephen421 Active Member

    Messages:
    894
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    60
    #9
    I tried everything you guys have suggested but it still doesnt work. Heres what I have right now: 
    <!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>
<title>Jalee Designs l Spray Tan</title>
<meta name="keywords" content="environmentally green, american sport, zinc,chemical free, best quality moisturizing, face and body sunscreen, sunscreen, certified organic, sun protection" />
<meta name="description" content="COOLA Suncare best organic natural sunblock sunscreen with anti aging moisturizing quality spf" />
<meta name="robots" content="index,follow" />
<meta name="REVISIT-AFTER" content="7 days" />

<link rel="stylesheet" type="text/css" media="screen, print, projection"  href="newcommon.css"></link>

<script type="text/javascript"  src="popmenu.js"></script>

<style type="text/css" media="screen, print, projection">
#locatorbutton,
#id283environmentbutton  {
   z-index: 3;
}

#efecomlogo  {
   background-image: url(newenvironment/earthfriendlylogo.png);
   left: 11px;
   top: 181px;
}

#copyrighttext2  {
   visibility: visible;
   position: absolute;
   left: 253px;
   top: 980px;
   z-index: 2;
   width: 400px;
}
#copyrighttext2 p  {
   font: 8px/54px Arial;
   margin: 0px;
   color: #A6A3A1;
   text-align: left;
}

#environmenttextscroll  {
   position: absolute;
   left: 5px;
   top: 80px;
   z-index: 2;
   width: 550px;
   height: 385px;

   

}
#environmentbackground2  {
   background: url(newenvironment/aboutcoola.png) no-repeat;
   position: absolute;
   left: 0px;
   top: 75px;
   z-index: 2;
   width: 897px;
   height: 733px;
}
    

#bambooinglass  {
   background: url(newenvironment/tag.png) no-repeat;
   visibility: visible;
   position: absolute;
   left: 361px;
   top: 561px;
   z-index: 2;
   width: 329px;
   height: 49px;
}
#privacybutton {
   visibility: visible;
   position: absolute;
   left: 2px;
   top: 845px;
   z-index: 2;
   width: 100px;
}

#privacybutton a  {
   font: 8px Arial;
   margin: 0px;
   color: #A6A3A1;
   text-align: left;
}
#privacybutton p  {
   font: 8px Arial;
   margin: 0px;
   color: #A6A3A1;
   text-align: left;
}
#termsbutton {
   visibility: visible;
   position: absolute;
   left: 75px;
   top: 845px;
   z-index: 2;
   width: 100px;
}

#termsbutton a  {
   font: 8px Arial;
   margin: 0px;
   color: #A6A3A1;
   text-align: left;
}
#termsbutton p  {
   font: 8px Arial;
   margin: 0px;
   color: #A6A3A1;
   text-align: left;
}

#privacybutton a:hover,
#termsbutton a:hover  {
   color: #68B6BE;
}
#newsletter  {
   visibility: visible;
   position: absolute;
   left: 0px;
   top: 810px;
   z-index: 2;
   width: 180px;
}
#bottomtag  {
   left: 595px;
   top: 807px;
}

#bottomtag  {
   background: url(new_side/bottomtag.png) no-repeat;
   visibility: visible;
   position: absolute;
   z-index: 3;
   width: 220px;
   height: 40px;
}

#copyrighttextnew  {
   visibility: visible;
   position: absolute;
   left: 620px;
   top: 820px;
   z-index: 2;
   width: 400px;
}
#copyrighttextnew p  {
   font: 8px/54px Arial;
   margin: 0px;
   color: #A6A3A1;
   text-align: left;
}
#side1button a  {
   background: url(new_side/1.png) no-repeat 0% 0px;
   display: block;
   height: 200px;
   width: 150px;
   font-size: 92px;
   line-height: 140px;
}

#side2button a  {
   background: url(new_side/2.png) no-repeat 0% 0px;
   display: block;
   height: 200px;
   width: 150px;
   font-size: 144px;
   line-height: 140px;
}

#side3button a  {
   background: url(new_side/3.png) no-repeat 0% 0px;
   display: block;
   height: 200px;
   width: 150px;
   font-size: 156px;
   line-height: 156px;
}
#side4button a  {
   background: url(new_side/4.png) no-repeat 0% 0px;
   display: block;
   height: 200px;
   width: 150px;
   font-size: 144px;
   line-height: 140px;
}
#side1button a:hover  {
}
#side2button a:hover  {
}
#side3button a:hover  {
}
#side4button a:hover  {
}
#side1button  {
   visibility: visible;
   position: absolute;
   left: 800px;
   top: 85px;
   z-index: 3;
   width: 109px;
   height: 92px;
}
#side2button  {
   visibility: visible;
   position: absolute;
   left: 800px;
   top: 235px;
   z-index: 3;
   width: 109px;
   height: 92px;
}
#side3button  {
   visibility: visible;
   position: absolute;
   left: 800px;
   top: 385px;
   z-index: 3;
   width: 109px;
   height: 92px;
}
#side4button  {
   visibility: visible;
   position: absolute;
   left: 800px;
   top: 235px;
   z-index: 3;
   width: 109px;
   height: 92px;
}
</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>

<div id="background">


&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/logo.jpg" width="100" height="50">
<div id="indexbutton"><a  href="index2.html"  title="index"></a></div>
<div id="productsbutton"><a  href="index2.html"  title="Home" onmouseout="P2H_StartClock();" onmouseover="P2H_Menu('PMproductsbutton', 500, 0);">HOME</a></div>
<div id="aboutusbutton"><a  href="aboutus.html"  title="About J�LEE">ABOUT JALEE</a></div>
<div id="id288pressbutton"><a  href="brands.html"  title="Brands">BRANDS</a></div>
<div id="id290eventsbutton"><a  href="spraytan.html"  title="Spray Tan">SPRAY TAN</a></div>
<div id="partnersbutton"><a  href="partners.html"  title="Partners">PARTNERS</a></div>
<div id="id283environmentbutton"><a  href="promos.html"  title="Promos">PROMOS</a></div>
<div id="locatorbutton"><a  href=" http://jaleedesigns.blogspot.com/ "  title="Blog">BLOG</a></div>

<div id="contactusbutton"><a  href="contact.html"  title="Contact">CONTACT US</a></div>
<br>
<br>


 
 <p  style="color:#00CFCA; font-size:20px;"><strong>SPRAY TAN</strong></p>
<div id="environmentbackground2"></div>

<div><img src="images/spraytan.jpg" /></div>
<br />
<div><a href="http://www.jaleedesigns.com/certificationtraining.html" target="_top">Certification Training Page</a></div>


</div>
</body>
</html>
    Code (markup):
     
    stephen421, Jul 16, 2009 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #10
    Well... non-breaking spaces doing padding's job, presenational markup, group of DIV's for what should be an unordered list, javascripted instead of CSS menu, inlined styling, deprecated attributes (target?), redundant title attributes, no CSS reset, character encoding declared after other properties, (really should be the first thing you do after /head - just in case), mixed media types on the external CSS, and without seeing that external CSS we can't tell what properties could be overriding your styling.

    I'd have to throw that all out and start over from scratch to even TRY to figure out what's going on there. Do you have a live copy of this somewhere so we can at least see what you are trying to do?
     
    deathshadow, Jul 16, 2009 IP
  11. stephen421

    stephen421 Active Member

    Messages:
    894
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    60
    #11
    No I dont have a live copy and I dont have time to start over. Is there any other alternative to a hyperlink if that doesnt work. I just need some kind of button that goes to the other page. I tried doing a simple image link but that doesnt work either. I really need to finish this site today.
     
    stephen421, Jul 16, 2009 IP
  12. KellyAX

    KellyAX Peon

    Messages:
    113
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #12
    I made it work yesterday, just close your div and remove your layers. This way, everything will work.
     
    KellyAX, Jul 16, 2009 IP
  13. stephen421

    stephen421 Active Member

    Messages:
    894
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    60
    #13
    Can you please just fix it and post it here?
     
    stephen421, Jul 16, 2009 IP
  14. JahRasta311

    JahRasta311 Peon

    Messages:
    201
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #14
    then you wouldn't learn.
     
    JahRasta311, Jul 16, 2009 IP
  15. stephen421

    stephen421 Active Member

    Messages:
    894
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    60
    #15
    Im not interested in learning I need to finish this site tomorrow and I cant without this hyperlink.
     
    stephen421, Jul 16, 2009 IP
  16. JahRasta311

    JahRasta311 Peon

    Messages:
    201
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #16
    Oh well then, guess you're screwed.
     
    JahRasta311, Jul 16, 2009 IP