CodingForums.com

CodingForums.com (http://www.codingforums.com/index.php)
-   Small projects (quick fixes and changes) (http://www.codingforums.com/forumdisplay.php?f=56)
-   -   If you solve my problem i will pay you! (http://www.codingforums.com/showthread.php?t=273522)

Zenfire 09-19-2012 04:08 AM
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>

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.


All times are GMT +1. The time now is 09:25 AM.

Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.