Links in image not clickable

Gamerz · January 9, 2010

So I have this HTML page, and I put multiple images and on these images, I added text...well, they are overlapping indeed, and I gave them all a z-index...problem now, is that one set of the links in the logo is not clickable...I've tried z-index to higher, lower...they dont work.

I have given you the HTML page below...you can try it out yourself. Find the below line as this line is the set of links that don't work:

<b><a href="home.php">Home</a> - <a href="tutorial.php">Tutorial</a> - <a href="faq.php">FAQ</a> - <a href="help.php">Help</a> - <a href="about.php">About Us</a> - <a href="contact.php">Contact Us</a></b>

You can access the webpage by clicking below:

http://www.earth1materials.com/imagez/

Here is the full HTML page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TEST</title>

<style type="text/css">
html {overflow-y:hidden; }
body {overflow: hidden; }

* {margin:0;padding:0}

/* mac hide \*/
html,body{height:100%;width:100%;}
/* end hide */
body {
text-align:center;
min-height:468px;/* for good browsers*/
min-width:552px;/* for good browsers*/
}

#outer{
height:50%;
width:100%;
display:table;
vertical-align:middle;
}

#container {
text-align: center;
position:relative;
vertical-align:middle;
display:table-cell;
height: 468px;
}

#inner {
width: 552px;
background:white;
height: 468px;
text-align: center;
margin-left:auto;
margin-right:auto;
border:0px solid #000;
}
#boxone {
width:500px;
text-align:center; /* Counteract to IE5/Win Hack */
padding:15px;
border:1px dashed #333;
background-color:white;
                overflow:auto;
position:relative;
margin-top:-220px;
margin-left:-50px;
margin-right:500px;

}


div.image
{
margin-right: 0px;
float:left;
width:100px; // adjust this to the width of your images.
}


.usertext {
position:relative;
margin-top:-610px;
margin-left:-50px;
margin-right:-50px;
text-align:center;
}

.headertext {
position:relative;
top:10px; /* in conjunction with left property, decides the text position */
right:-475px;
}

.headerlink {
position:relative;
top:-50px; /* in conjunction with left property, decides the text position */
right:-475px;
}

.search {
position:relative;
top:-73px; /* in conjunction with left property, decides the text position */
right:-1000px;
}


div#testtext {
    position: relative;
    height: auto;
    width: auto;
    left: -475px;
    top: -75px;
}

div#logolink {
    position: relative;
z-index:9;
    height: auto;
    width: auto;
    left: 415px;
    top: -180px;
}

div#rightlogolink {
    position: relative;
z-index:1;
    height: auto;
    width: auto;
    right: 415px;
    top: -250px;
}


div#left-orangebar {
    position: relative;
    height: auto;
    width: auto;
    left: 414px;
    top: -146px;
}

div#right-orangebar {
    position: relative;
    height: auto;
    width: auto;
    right: 415px;
    top: -216px;
}
div#testtextzh1 {
    position: relative;
    height: auto;
    width: auto;
    right: -300px;
    top: -50px;
}

A:link {color:black}
A:visited {color:black}
A:hover {color:#0066CC}
A.unique:hover {color:black}
</style>
</head>
<body>
<center>
<img src="http://www.earth1materials.com/imagez/top-bar.jpg" height="74" width="1366"><br>
<div id="testtext"><img src="http://www.earth1materials.com/imagez/logo.jpg" height="75" width="400">
<div class="headertext">
<h2>Welcome to {WEBSITE}</h2>
</div>

<div class="headerlink" style: "z-index:7">
<a href="lol.php">
<b><a href="home.php">Home</a> - <a href="tutorial.php">Tutorial</a> - <a href="faq.php">FAQ</a> - <a href="help.php">Help</a> - <a href="about.php">About Us</a> - <a href="contact.php">Contact Us</a></b>
</div>
<div class="search" style: "z-index:-1">
<form action="search.php" method="post">
<input  onFocus="if(this.value == 'Search for a File...') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Search for a File...';}" type="text" name="filename" size="30" value="Search for a File...">   
<input type="submit" name="submit" value="Search File!">
</form>
</div>

</div>
</div>
<div id="left-orangebar">
<img src="http://www.earth1materials.com/imagez/left-orangebar.png">
</div>
<div id="logolink">
<a href="link">LINK1</a> - <a href="link">LINK2</a> - <a href="link">LINK3</a> - <a href="link">LINK4</a>
</div>
<div id="right-orangebar">
<img src="http://www.earth1materials.com/imagez/right-orangebar.png">
</div>
<div id="rightlogolink">
<a href="link">LINK1</a> - <a href="link">LINK2</a> - <a href="link">LINK3</a> - <a href="link">LINK4</a></div>
<div id="vert">
<div id="outer">
<div id="container">
<div id="inner">
<p>
<div id="boxone" style="width:650px; height:200px; overflow:auto;">
<div class="image">
  <a href="lol.php"> <img src="http://www.earth1materials.com/imagez/folder_icon.jpg" alt="image" class="gradualfader"  style="border: 0px dashed black;" width="50" height="50"/>
  <p>ECL Fall '09</p></a>
</div>
<div class="image">
   <a href="lol.php"> <img src="http://www.earth1materials.com/imagez/folder_icon.jpg" alt="image" class="gradualfader"  style="border: 0px dashed black;" width="50" height="50"/>
  <p>Geophysical Science</p></a>
</div>
<div class="image">
  <a href="lol.php">  <img src="http://www.earth1materials.com/imagez/folder_icon.jpg" alt="image" class="gradualfader"  style="border: 0px dashed black;" width="50" height="50"/>
  <p>Math</p></a>
</div>

</div>

<script type="text/javascript">
gradualFader.init() //activate gradual fader
</script>
</div>
</div>
</div>
<div class="usertext" style="text-align: center;">
<p>Welcome, <b>ADMIN</b> <br>
SOME TEXT HERE</b>.</p>
</div>
</body>
</html>

RaythMistwalker · January 9, 2010

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TEST</title>

<style type="text/css">
html {overflow-y:hidden; }
body {overflow: hidden; }

* {margin:0;padding:0}

/* mac hide \*/
html,body{height:100%;width:100%;}
/* end hide */
body {
text-align:center;
min-height:468px;/* for good browsers*/
min-width:552px;/* for good browsers*/
}

#outer{
height:50%;
width:100%;
display:table;
vertical-align:middle;
}

#container {
text-align: center;
position:relative;
vertical-align:middle;
display:table-cell;
height: 468px;
}

#inner {
width: 552px;
background:white;
height: 468px;
text-align: center;
margin-left:auto;
margin-right:auto;
border:0px solid #000;
}
#boxone {
   width:500px;
   text-align:center; /* Counteract to IE5/Win Hack */
   padding:15px;
   border:1px dashed #333;
   background-color:white;
                overflow:auto;
position:relative;
margin-top:-220px;
margin-left:-50px;
margin-right:500px;

}


div.image
{
margin-right: 0px;
float:left;
width:100px; // adjust this to the width of your images.
}


.usertext {
position:relative;
margin-top:-610px;
margin-left:-50px;
margin-right:-50px;
text-align:center;
}

.headertext {
   position:relative;
   top:10px; /* in conjunction with left property, decides the text position */
   right:-475px;
}

.headerlink {
   position:relative;
   top:-50px; /* in conjunction with left property, decides the text position */
   right:-475px;
}

.search {
   position:relative;
   top:-73px; /* in conjunction with left property, decides the text position */
   right:-1000px;
}


div#testtext {
    position: relative;
    height: auto;
    width: auto;
    left: -475px;
    top: -75px;
}

div#logolink {
    position: relative;
z-index:9;
    height: auto;
    width: auto;
    left: 415px;
    top: -180px;
}

div#rightlogolink {
    position: relative;
z-index:1;
    height: auto;
    width: auto;
    right: 415px;
    top: -250px;
}


div#left-orangebar {
    position: relative;
    height: auto;
    width: auto;
    left: 414px;
    top: -146px;
}

div#right-orangebar {
    position: relative;
    height: auto;
    width: auto;
    right: 415px;
    top: -216px;
}
div#testtextzh1 {
    position: relative;
    height: auto;
    width: auto;
    right: -300px;
    top: -50px;
}

A:link {color:black}
A:visited {color:black}
A:hover {color:#0066CC}
A.unique:hover {color:black}
</style>
</head>
<body>
<center>
<img src="http://www.earth1materials.com/imagez/top-bar.jpg" height="74" width="1366"><br>
<div id="testtext"><img src="http://www.earth1materials.com/imagez/logo.jpg" height="75" width="400">
<div class="headertext">
<h2>Welcome to {WEBSITE}</h2>
</div>

<div class="headerlink" style: "z-index:7">
<a href="lol.php">
<b><a href="home.php">Home</a> - <a href="tutorial.php">Tutorial</a> - <a href="faq.php">FAQ</a> - <a href="help.php">Help</a> - <a href="about.php">About Us</a> - <a href="contact.php">Contact Us</a></b>
</div>
<div class="search" style: "z-index:-1">
<form action="search.php" method="post">
<input  onFocus="if(this.value == 'Search for a File...') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Search for a File...';}" type="text" name="filename" size="30" value="Search for a File...">   
<input type="submit" name="submit" value="Search File!">
</form>
</div>

</div>
</div>
<div id="left-orangebar">
<img src="http://www.earth1materials.com/imagez/left-orangebar.png">
</div>
<div id="logolink">
<a href="link">LINK1</a> - <a href="link">LINK2</a> - <a href="link">LINK3</a> - <a href="link">LINK4</a>
</div>
<div id="right-orangebar">
<img src="http://www.earth1materials.com/imagez/right-orangebar.png">
</div>
<div id="rightlogolink">
<a href="link">LINK1</a> - <a href="link">LINK2</a> - <a href="link">LINK3</a> - <a href="link">LINK4</a></div>
<div id="vert">
<div id="outer">
<div id="container">
<div id="inner">
<p>
<div id="boxone" style="width:650px; height:200px; overflow:auto;">
<div class="image">
  <a href="lol.php"> <img src="http://www.earth1materials.com/imagez/folder_icon.jpg" alt="image" class="gradualfader"  style="border: 0px dashed black;" width="50" height="50"/>
  <p>ECL Fall '09</p></a>
</div>
<div class="image">
   <a href="lol.php"> <img src="http://www.earth1materials.com/imagez/folder_icon.jpg" alt="image" class="gradualfader"  style="border: 0px dashed black;" width="50" height="50"/>
  <p>Geophysical Science</p></a>
</div>
<div class="image">
  <a href="lol.php">  <img src="http://www.earth1materials.com/imagez/folder_icon.jpg" alt="image" class="gradualfader"  style="border: 0px dashed black;" width="50" height="50"/>
  <p>Math</p></a>
</div>

</div>

<script type="text/javascript">
gradualFader.init() //activate gradual fader
</script>
</div>
</div>
</div>
<div class="usertext" style="text-align: center;">
<p>Welcome, <b>ADMIN</b> <br>
SOME TEXT HERE</b>.</p>
</div>
</body>
</html>

you have an open <a> tag above those links.

Gamerz · January 9, 2010

Yes, but that does not solve anything. I fixed it, and it's not working.

AngelG107 · January 9, 2010

                           <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TEST</title>

<style type="text/css">
html {overflow-y:hidden; }
body {overflow: hidden; }

* {margin:0;padding:0}

/* mac hide \*/
html,body{height:100%;width:100%;}
/* end hide */
body {
text-align:center;
min-height:468px;/* for good browsers*/
min-width:552px;/* for good browsers*/
}

#outer{
height:50%;
width:100%;
display:table;
vertical-align:middle;
}

#container {
text-align: center;
position:relative;
vertical-align:middle;
display:table-cell;
height: 468px;
}

#inner {
width: 552px;
background:white;
height: 468px;
text-align: center;
margin-left:auto;
margin-right:auto;
border:0px solid #000;
}
#boxone {
   width:500px;
   text-align:center; /* Counteract to IE5/Win Hack */
   padding:15px;
   border:1px dashed #333;
   background-color:white;
                overflow:auto;
position:relative;
margin-top:-220px;
margin-left:-50px;
margin-right:500px;

}


div.image
{
margin-right: 0px;
float:left;
width:100px; // adjust this to the width of your images.
}


.usertext {
position:relative;
margin-top:-610px;
margin-left:-50px;
margin-right:-50px;
text-align:center;
}

.headertext {
   position:relative;
   top:10px; /* in conjunction with left property, decides the text position */
   right:-475px;
}

.headerlink {
   position:relative;
   top:-50px; /* in conjunction with left property, decides the text position */
   right:-475px;
}

.search {
   position:relative;
   top:-73px; /* in conjunction with left property, decides the text position */
   right:-1000px;
}


div#testtext {
    position: relative;
    height: auto;
    width: auto;
    left: -475px;
    top: -75px;
}

div#logolink {
    position: relative;
z-index:9;
    height: auto;
    width: auto;
    left: 415px;
    top: -180px;
}

div#rightlogolink {
    position: relative;
z-index:1;
    height: auto;
    width: auto;
    right: 415px;
    top: -250px;
}


div#left-orangebar {
    position: relative;
    height: auto;
    width: auto;
    left: 414px;
    top: -146px;
}

div#right-orangebar {
    position: relative;
    height: auto;
    width: auto;
    right: 415px;
    top: -216px;
}
div#testtextzh1 {
    position: relative;
    height: auto;
    width: auto;
    right: -300px;
    top: -50px;
}

A:link {color:black}
A:visited {color:black}
A:hover {color:#0066CC}
A.unique:hover {color:black}
</style>
</head>
<body>
<center>
<img src="http://www.earth1materials.com/imagez/top-bar.jpg" height="74" width="1366"><br>
<div id="testtext"><img src="http://www.earth1materials.com/imagez/logo.jpg" height="75" width="400">
<div class="headertext">
<h2>Welcome to {WEBSITE}</h2>
</div>

<div class="headerlink" style="z-index:7">
<a href="lol.php">   <a href="lol.php"><a href="lol.php"><a href="lol.php"><a href="lol.php">
<b><a href="home.php">Home</a> - <a href="tutorial.php">Tutorial</a> - <a href="faq.php">FAQ</a> - <a href="help.php">Help</a> - <a href="about.php">About Us</a> - <a href="contact.php">Contact Us</a></b>
</div>
<div class="search" style: "z-index:-1">
<form action="search.php" method="post">
<input  onFocus="if(this.value == 'Search for a File...') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Search for a File...';}" type="text" name="filename" size="30" value="Search for a File...">   
<input type="submit" name="submit" value="Search File!">
</form>
</div>

</div>
</div>
<div id="left-orangebar">
<img src="http://www.earth1materials.com/imagez/left-orangebar.png">
</div>
<div id="logolink">
<a href="link">LINK1</a> - <a href="link">LINK2</a> - <a href="link">LINK3</a> - <a href="link">LINK4</a>
</div>
<div id="right-orangebar">
<img src="http://www.earth1materials.com/imagez/right-orangebar.png">
</div>
<div id="rightlogolink">
<a href="link">LINK1</a> - <a href="link">LINK2</a> - <a href="link">LINK3</a> - <a href="link">LINK4</a></div>
<div id="vert">
<div id="outer">
<div id="container">
<div id="inner">
<p>
<div id="boxone" style="width:650px; height:200px; overflow:auto;">
<div class="image">
  <a href="lol.php"> <img src="http://www.earth1materials.com/imagez/folder_icon.jpg" alt="image" class="gradualfader"  style="border: 0px dashed black;" width="50" height="50"/>
  <p>ECL Fall '09</p></a>
</div>
<div class="image">
   <a href="lol.php"> <img src="http://www.earth1materials.com/imagez/folder_icon.jpg" alt="image" class="gradualfader"  style="border: 0px dashed black;" width="50" height="50"/>
  <p>Geophysical Science</p></a>
</div>
<div class="image">
  <a href="lol.php">  <img src="http://www.earth1materials.com/imagez/folder_icon.jpg" alt="image" class="gradualfader"  style="border: 0px dashed black;" width="50" height="50"/>
  <p>Math</p></a>
</div>

</div>

<script type="text/javascript">
gradualFader.init() //activate gradual fader
</script>
</div>
</div>
</div>
<div class="usertext" style="text-align: center;">
<p>Welcome, <b>ADMIN</b> <br>
SOME TEXT HERE</b>.</p>
</div>
</body>
</html>

I already tried that HTML code in my computer, i hope it works for you.

Gamerz · January 9, 2010

AngelG, now...the upper link does work, but I just realized that if you look on the top, right hand corner..there's a search function. That isn't working. I can't even click the field to enter something, let alone clicking the submit button. Is it possible to make both of them work?

AngelG107 · January 9, 2010

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TEST</title>

<style type="text/css">
html {overflow-y:hidden; }
body {overflow: hidden; }

* {margin:0;padding:0}

/* mac hide \*/
html,body{height:100%;width:100%;}
/* end hide */
body {
text-align:center;
min-height:468px;/* for good browsers*/
min-width:552px;/* for good browsers*/
}

#outer{
height:50%;
width:100%;
display:table;
vertical-align:middle;
}

#container {
text-align: center;
position:relative;
vertical-align:middle;
display:table-cell;
height: 468px;
}

#inner {
width: 552px;
background:white;
height: 468px;
text-align: center;
margin-left:auto;
margin-right:auto;
border:0px solid #000;
}
#boxone {
   width:500px;
   text-align:center; /* Counteract to IE5/Win Hack */
   padding:15px;
   border:1px dashed #333;
   background-color:white;
                overflow:auto;
position:relative;
margin-top:-220px;
margin-left:-50px;
margin-right:500px;

}


div.image
{
margin-right: 0px;
float:left;
width:100px; // adjust this to the width of your images.
}


.usertext {
position:relative;
margin-top:-610px;
margin-left:-50px;
margin-right:-50px;
text-align:center;
}

.headertext {
   position:relative;
   top:10px; /* in conjunction with left property, decides the text position */
   right:-475px;
}

.headerlink {
   position:relative;
   top:-50px; /* in conjunction with left property, decides the text position */
   right:-475px;
}

.search {
   position:relative;
   top:-73px; /* in conjunction with left property, decides the text position */
   right:-1000px;
}


div#testtext {
    position: relative;
    height: auto;
    width: auto;
    left: -475px;
    top: -75px;
}

div#logolink {
    position: relative;
z-index:9;
    height: auto;
    width: auto;
    left: 415px;
    top: -180px;
}

div#rightlogolink {
    position: relative;
z-index:1;
    height: auto;
    width: auto;
    right: 415px;
    top: -250px;
}


div#left-orangebar {
    position: relative;
    height: auto;
    width: auto;
    left: 414px;
    top: -146px;
}

div#right-orangebar {
    position: relative;
    height: auto;
    width: auto;
    right: 415px;
    top: -216px;
}
div#testtextzh1 {
    position: relative;
    height: auto;
    width: auto;
    right: -300px;
    top: -50px;
}

A:link {color:black}
A:visited {color:black}
A:hover {color:#0066CC}
A.unique:hover {color:black}
</style>
</head>
<body>
<center>
<img src="http://www.earth1materials.com/imagez/top-bar.jpg" height="74" width="1366"><br>
<div id="testtext"><img src="http://www.earth1materials.com/imagez/logo.jpg" height="75" width="400">
<div class="headertext">
<h2>Welcome to {WEBSITE}</h2>
</div>

<div class="headerlink" style="z-index:7">
<a href="lol.php">   <a href="lol.php"><a href="lol.php"><a href="lol.php"><a href="lol.php">
<b><a href="home.php">Home</a> - <a href="tutorial.php">Tutorial</a> - <a href="faq.php">FAQ</a> - <a href="help.php">Help</a> - <a href="about.php">About Us</a> - <a href="contact.php">Contact Us</a></b>
</div>
<div class="search" style="z-index:7">
<form action="search.php" method="post">
<input  onFocus="if(this.value == 'Search for a File...') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Search for a File...';}" type="text" name="filename" size="30" value="Search for a File...">   
<input type="submit" name="submit" value="Search File!">
</form>
</div>

</div>
</div>
<div id="left-orangebar">
<img src="http://www.earth1materials.com/imagez/left-orangebar.png">
</div>
<div id="logolink">
<a href="link">LINK1</a> - <a href="link">LINK2</a> - <a href="link">LINK3</a> - <a href="link">LINK4</a>
</div>
<div id="right-orangebar">
<img src="http://www.earth1materials.com/imagez/right-orangebar.png">
</div>
<div id="rightlogolink">
<a href="link">LINK1</a> - <a href="link">LINK2</a> - <a href="link">LINK3</a> - <a href="link">LINK4</a></div>
<div id="vert">
<div id="outer">
<div id="container">
<div id="inner">
<p>
<div id="boxone" style="width:650px; height:200px; overflow:auto;">
<div class="image">
  <a href="lol.php"> <img src="http://www.earth1materials.com/imagez/folder_icon.jpg" alt="image" class="gradualfader"  style="border: 0px dashed black;" width="50" height="50"/>
  <p>ECL Fall '09</p></a>
</div>
<div class="image">
   <a href="lol.php"> <img src="http://www.earth1materials.com/imagez/folder_icon.jpg" alt="image" class="gradualfader"  style="border: 0px dashed black;" width="50" height="50"/>
  <p>Geophysical Science</p></a>
</div>
<div class="image">
  <a href="lol.php">  <img src="http://www.earth1materials.com/imagez/folder_icon.jpg" alt="image" class="gradualfader"  style="border: 0px dashed black;" width="50" height="50"/>
  <p>Math</p></a>
</div>

</div>

<script type="text/javascript">
gradualFader.init() //activate gradual fader
</script>
</div>
</div>
</div>
<div class="usertext" style="text-align: center;">
<p>Welcome, <b>ADMIN</b> <br>
SOME TEXT HERE</b>.</p>
</div>
</body>
</html>

There you go. I hope i helped you.

Gamerz · January 9, 2010

AngelG, now it's back to same thing..meaning the search function works, but the upper links (Home, Tutorial, etc.etc.) does NOT work...

AngelG107 · January 9, 2010

<!DOCTYPE HTML PU1LIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TEST</title>

<style type="text/css">
html {overflow-y:hidden; }
body {overflow: hidden; }

* {margin:0;padding:0}

/* mac hide \*/
html,body{height:100%;width:100%;}
/* end hide */
body {
text-align:center;
min-height:468px;/* for good browsers*/
min-width:552px;/* for good browsers*/
}

#outer{
height:50%;
width:100%;
display:table;
vertical-align:middle;
}

#container {
text-align: center;
position:relative;
vertical-align:middle;
display:table-cell;
height: 468px;
}

#inner {
width: 552px;
background:white;
height: 468px;
text-align: center;
margin-left:auto;
margin-right:auto;
border:0px solid #000;
}
#boxone {
   width:500px;
   text-align:center; /* Counteract to IE5/Win Hack */
   padding:15px;
   border:1px dashed #333;
   background-color:white;
                overflow:auto;
position:relative;
margin-top:-220px;
margin-left:-50px;
margin-right:500px;

}


div.image
{
margin-right: 0px;
float:left;
width:100px; // adjust this to the width of your images.
}


.usertext {
position:relative;
margin-top:-610px;
margin-left:-50px;
margin-right:-50px;
text-align:center;
}

.headertext {
   position:relative;
   top:10px; /* in conjunction with left property, decides the text position */
   right:-475px;
}

.headerlink {
   position:relative;
   top:-50px; /* in conjunction with left property, decides the text position */
   right:-475px;
}

.search {
   position:relative;
   top:-73px; /* in conjunction with left property, decides the text position */
   right:-1000px;
}


div#testtext {
    position: relative;
    height: auto;
    width: auto;
    left: -475px;
    top: -75px;
}

div#logolink {
    position: relative;
z-index:9;
    height: auto;
    width: auto;
    left: 415px;
    top: -180px;
}

div#rightlogolink {
    position: relative;
z-index:1;
    height: auto;
    width: auto;
    right: 415px;
    top: -250px;
}


div#left-orangebar {
    position: relative;
    height: auto;
    width: auto;
    left: 414px;
    top: -146px;
}

div#right-orangebar {
    position: relative;
    height: auto;
    width: auto;
    right: 415px;
    top: -216px;
}
div#testtextzh1 {
    position: relative;
    height: auto;
    width: auto;
    right: -300px;
    top: -50px;
}

A:link {color:black}
A:visited {color:black}
A:hover {color:#0066CC}
A.unique:hover {color:black}
A{z-index:8;}
</style>
</head>
<body>
<center>
<img src="http://www.earth1materials.com/imagez/top-bar.jpg" height="74" width="1366"><br>
<div id="testtext"><img src="http://www.earth1materials.com/imagez/logo.jpg" height="75" width="400">
<div class="headertext">
<h2>Welcome to {WEBSITE}</h2>
</div>

<center>
<div style="margin:auto">
<div style="z-index:8;position:relative;top:-50px;">

<b><a href="home.php">Home</a> - <a href="tutorial.php">Tutorial</a> - <a href="faq.php">FAQ</a> - <a href="help.php">Help</a> - <a href="about.php">About Us</a> - <a href="contact.php">Contact Us</a></b>

</div></div>
        </center>
<div class="search" style="z-index:7">
<form action="search.php" method="post">
<input  onFocus="if(this.value == 'Search for a File...') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Search for a File...';}" type="text" name="filename" size="30" value="Search for a File...">   
<input type="submit" name="submit" value="Search File!">
</form>
</div>

</div>
</div>
<div id="left-orangebar">
<img src="http://www.earth1materials.com/imagez/left-orangebar.png">
</div>
<div id="logolink">
<a href="link">LINK1</a> - <a href="link">LINK2</a> - <a href="link">LINK3</a> - <a href="link">LINK4</a>
</div>
<div id="right-orangebar">
<img src="http://www.earth1materials.com/imagez/right-orangebar.png">
</div>
<div id="rightlogolink">
<a href="link">LINK1</a> - <a href="link">LINK2</a> - <a href="link">LINK3</a> - <a href="link">LINK4</a></div>
<div id="vert">
<div id="outer">
<div id="container">
<div id="inner">
<p>
<div id="boxone" style="width:650px; height:200px; overflow:auto;">
<div class="image">
  <a href="lol.php"> <img src="http://www.earth1materials.com/imagez/folder_icon.jpg" alt="image" class="gradualfader"  style="border: 0px dashed black;" width="50" height="50"/>
  <p>ECL Fall '09</p></a>
</div>
<div class="image">
   <a href="lol.php"> <img src="http://www.earth1materials.com/imagez/folder_icon.jpg" alt="image" class="gradualfader"  style="border: 0px dashed black;" width="50" height="50"/>
  <p>Geophysical Science</p></a>
</div>
<div class="image">
  <a href="lol.php">  <img src="http://www.earth1materials.com/imagez/folder_icon.jpg" alt="image" class="gradualfader"  style="border: 0px dashed black;" width="50" height="50"/>
  <p>Math</p></a>
</div>

</div>

<script type="text/javascript">
gradualFader.init() //activate gradual fader
</script>
</div>
</div>
</div>
<div class="usertext" style="text-align: center;">
<p>Welcome, <b>ADMIN</b> <br>
SOME TEXT HERE</b>.</p>
</div>
</body>
</html>

Now you can use both the menu and the search box...

But, i didn't figure out how to center the menu again, it's aligned to the left, at the moment,

sorry about that, but I'm kind of busy at the moment.

Gamerz · January 9, 2010

It finally works...BUT when I try centering the links to the center by adding a right:-470px; to the code, the links still BUT NOT THE search function....so its same thing...how would I fix this?

This is the code that I added:

AngelG107 · January 10, 2010

Try using : margin-left : 470px .. instead, that might do

Gamerz · January 10, 2010

AngelG, I kind of need further help onto this, and I would like to talk in private...do you have an MSN or AIM where I can contact you? (PM doesn't work for me..)

AngelG107 · January 10, 2010

I guess you can add me on MSN if you want,

i'll send you a PM

soycharliente · January 11, 2010

Is putting the text directly on the image an option? If so you can use a map to link the text areas.

Sign In

Links in image not clickable

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information