...

View Full Version : If you solve my problem i will pay you!



Zenfire
09-19-2012, 05:08 AM
Hi

i'm trying to put an horizontal menu above an image but i don't know how.

Seems i can get the menu at the border of the image but it won't go on the image.

Please tell me how and i'll send you $20 by Paypal.

Thanks


Here's my code

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>New Test</title>
</head>
<body>
<table style="text-align: left; width: 100%; height: 249px;" border="0"
cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="vertical-align: top;"><img
style="width: 100%; height: 257px;" alt=""
src="https://www.opendrive.com/files/61581706_Hq0Wm/Top-Header%20copy.jpg">




<link rel="stylesheet" href="https://static1.grsites.com/user/f/f/8/louisecoite/r9807368/9807368.css" type="text/css" />



<div class="result9807368">
<table cellpadding="0" cellspacing="0" border="0" class="tabbar">
<tr>
<td valign="middle" id="b98073681" class="button" onmouseover="mOv9807368(1); " onmouseout="mOut9807368(1); ">
<center>
<a href="http://stores.ebay.com/Top-Rank-Records" class="a9807368">
<span id="sp98073681" class="t9807368">
Home
</span>
</a>
</center>
</td>
<td valign="middle" id="b98073682" class="button" onmouseover="mOv9807368(2); " onmouseout="mOut9807368(2); ">
<center>
<a href="http://stores.ebay.com/Top-Rank-Records/Shipping.html" class="a9807368">
<span id="sp98073682" class="t9807368">
Shipping
</span>
</a>
</center>
</td>
<td valign="middle" id="b98073683" class="button" onmouseover="mOv9807368(3); " onmouseout="mOut9807368(3); ">
<center>
<a href="http://stores.ebay.com/Top-Rank-Records/Grading.html" class="a9807368">
<span id="sp98073683" class="t9807368">
Grading
</span>
</a>
</center>
</td>
<td valign="middle" id="b98073684" class="button" onmouseover="mOv9807368(4); " onmouseout="mOut9807368(4); ">
<center>
<a href="http://stores.ebay.com/Top-Rank-Records/Abbreviations.html" class="a9807368">
<span id="sp98073684" class="t9807368">
Abbreviate
</span>
</a>
</center>
</td>
<td valign="middle" id="b98073685" class="button" onmouseover="mOv9807368(5); " onmouseout="mOut9807368(5); ">
<center>
<a href="http://cgi3.ebay.com/ws/eBayISAPI.dll?ViewUserPage&amp;userid=top-rank-recordz" class="a9807368">
<span id="sp98073685" class="t9807368">
About Us
</span>
</a>
</center>
</td>
<td valign="middle" id="b98073686" class="button" onmouseover="mOv9807368(6); " onmouseout="mOut9807368(6); ">
<center>
<a href="http://stores.ebay.com/Top-Rank-Records/We-Buy.html" class="a9807368">
<span id="sp98073686" class="t9807368">
We Buy
</span>
</a>
</center>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
function mOv9807368 (num) {
document.getElementById("b9807368"+num).style.backgroundPosition = "-100px 0px";
}
function mOut9807368 (num) {
document.getElementById("b9807368"+num).style.backgroundPosition = "0px 0px";
}
</script>







</td>
</tr>
</tbody>
</table>
</body>
</html>

Sammy12
09-19-2012, 12:48 PM
This is a pretty average question, you can just post it as normal in the HTML/CSS forum.

Add to your CSS:


td {
position: relative;
}
td img {
display: block;
}
.result9807368 {
position: absolute !important;
bottom: 0;
}


You are also missing a <!DOCTYPE> http://www.w3schools.com/tags/tag_doctype.asp.

Remember to wrap your code in
tags, so that it is neatly formatted (like my code above).

Here is the final code:



<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>New Test</title>
<style type="text/css">
td {
position: relative;
}
td img {
display: block;
}
.result9807368 {
position: absolute !important;
bottom: 0;
}
</style>
</head>
<body>
<table style="text-align: left; width: 100%; height: 249px;" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="vertical-align: top;"><img style="width: 100%; height: 257px;" alt="" src="https://www.opendrive.com/files/61581706_Hq0Wm/Top-Header%20copy.jpg">
<link rel="stylesheet" href="https://static1.grsites.com/user/f/f/8/louisecoite/r9807368/9807368.css" type="text/css" />
<div class="result9807368">
<table cellpadding="0" cellspacing="0" border="0" class="tabbar">
<tr>
<td valign="middle" id="b98073681" class="button" onmouseover="mOv9807368(1); " onmouseout="mOut9807368(1); ">
<center>
<a href="http://stores.ebay.com/Top-Rank-Records" class="a9807368">
<span id="sp98073681" class="t9807368">
Home
</span>
</a>
</center>
</td>
<td valign="middle" id="b98073682" class="button" onmouseover="mOv9807368(2); " onmouseout="mOut9807368(2); ">
<center>
<a href="http://stores.ebay.com/Top-Rank-Records/Shipping.html" class="a9807368">
<span id="sp98073682" class="t9807368">
Shipping
</span>
</a>
</center>
</td>
<td valign="middle" id="b98073683" class="button" onmouseover="mOv9807368(3); " onmouseout="mOut9807368(3); ">
<center>
<a href="http://stores.ebay.com/Top-Rank-Records/Grading.html" class="a9807368">
<span id="sp98073683" class="t9807368">
Grading
</span>
</a>
</center>
</td>
<td valign="middle" id="b98073684" class="button" onmouseover="mOv9807368(4); " onmouseout="mOut9807368(4); ">
<center>
<a href="http://stores.ebay.com/Top-Rank-Records/Abbreviations.html" class="a9807368">
<span id="sp98073684" class="t9807368">
Abbreviate
</span>
</a>
</center>
</td>
<td valign="middle" id="b98073685" class="button" onmouseover="mOv9807368(5); " onmouseout="mOut9807368(5); ">
<center>
<a href="http://cgi3.ebay.com/ws/eBayISAPI.dll?ViewUserPage&amp;userid=top-rank-recordz" class="a9807368">
<span id="sp98073685" class="t9807368">
About Us
</span>
</a>
</center>
</td>
<td valign="middle" id="b98073686" class="button" onmouseover="mOv9807368(6); " onmouseout="mOut9807368(6); ">
<center>
<a href="http://stores.ebay.com/Top-Rank-Records/We-Buy.html" class="a9807368">
<span id="sp98073686" class="t9807368">
We Buy
</span>
</a>
</center>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
function mOv9807368 (num) {
document.getElementById("b9807368"+num).style.backgroundPosition = "-100px 0px";
}
function mOut9807368 (num) {
document.getElementById("b9807368"+num).style.backgroundPosition = "0px 0px";
}
</script>
</td>
</tr>
</tbody>
</table>
</body>
</html>

abduraooft
09-19-2012, 01:19 PM
Your code is too obsolete! You shouldn't use tables for making layouts (http://www.hotdesign.com/seybold/). They are for displaying tabular data.

To begin with, (in HTML4) you may code it like

<!doctype html>
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>New Test</title>
<link rel="stylesheet" href="https://static1.grsites.com/user/f/f/8/louisecoite/r9807368/9807368.css" type="text/css" />
</head>
<body>
<div id="header">
<ul id="nav">
<li><a href="http://stores.ebay.com/Top-Rank-Records">Home</a></li>
<li><a href="http://stores.ebay.com/Top-Rank-Records">Shipping</a></li>
</ul>
</div>
</body>
</html>

*{
margin:0;
padding:0;
}
#header{
background:url('https://www.opendrive.com/files/61581706_Hq0Wm/Top-Header%20copy.jpg') no-repeat;
height:257px;
}
#nav{
position:absolute;
right:0; /* you may adjust this to fit for your needs */
top:0; /* you may adjust this to fit for your needs */
}
#nav li{
float:left;
list-style:none;
width:100px;
}
#nav li a{
display:block;
line-height:29px;
font-size:14px;
color:#F5F5DC;
text-align:center;
font-family:'Arial Black', Arial;
text-decoration:none;
}
#nav li a:link, #nav li a:visited{
background:url(menu84210575.png) no-repeat 0 0;
}
#nav li a:hover, #nav li a:active{
background:url(menu84210575.png) no-repeat -100px 0;
}PS: You have to isolate that logo from that background image and put it as an <img> tag inside header. (you may position it well using CSS after that). This will make your code more semantic (http://boagworld.com/dev/semantic-code-what-why-how/)!.


btw, don't use any html generators to make your pages. If you go with them, the end result would a nasty tag soup, as you've received right now :)

...and this looks very funny now


Endless possibilities. ("]No code to write.[/URL] [URL=")


Create unique design elements, text boxes or entire pages with customizable content, in minutes.
Generate cross-browser HTML5 designs to match any style.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum