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,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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
    •