If you solve my problem i will pay you!

Zenfire · 09-19-2012, 04: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&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, 11:48 AM

This is a pretty average question, you can just post it as normal in the HTML/CSS forum.

Add to your CSS:

Code:

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 [code][/code] tags, so that it is neatly formatted (like my code above).

Here is the final code:

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, 12:19 PM

Your code is too obsolete! You shouldn't use tables for making layouts. They are for displaying tabular data.

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

Code:

<!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>

Code:

*{
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!.

Edit:
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

Quote:

Originally Posted by http://www.grsites.com

No code to write. Endless possibilities.

Create unique design elements, text boxes or entire pages with customizable content, in minutes.

Generate cross-browser HTML5 designs to match any style.