Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    If you solve my problem i will pay you!

    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>

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    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>
    Last edited by Sammy12; 09-19-2012 at 12:04 PM.

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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.
    Last edited by abduraooft; 09-19-2012 at 12:29 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •