PDA

Click to See Complete Forum and Search --> : I am having a huge problem with placing links over an image x.x PLEASE HELP

Danrod
08-07-2007, 12:40 AM
when you goto bannergenome.com , the links inside the green bar look all nice and centered.... but when you maximize the page they all get distorted. I want it to stay all centered on the bar when i maximize the browser..


<title>Bannergenome.com Taking banner ads to a new level</title>
<html>
<body>
<body bgcolor="palegreen">
<body bgcolor="palegreen">
<body bgcolor="palegreen">
<center><img src="finalizebar.jpg" width= "875" height=50></center>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/2007/xhtml">

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Adobe GoLive" />
<title>Untitled Page</title>
<link href="css/basic.css" rel="stylesheet" type="text/css" media="all" />
<style type="text/css" media="screen"><!--
#layer1 { height: 30px; width: 110px; left: 35px; top: 25px; position: absolute; visibility: visible; }
#layer2 { height: 30px; width: 110px; left: 240px; top: 25px; position: absolute; visibility: visible; }
#layer3 { height: 30px; width: 70px; left: 470px; top: 25px; position: absolute; visibility: visible; }
#layer4 { height: 30px; width: 97px; left: 160px; top: 25px; position: absolute; visibility: visible; }
#layer5 { height: 30px; width: 80px; left: 370px; top: 25px; position: absolute; visibility: visible; }
#layer6 { height: 30px; width: 63px; left: 600px; top: 25px; position: absolute; visibility: visible; }
#layer7 { height: 30px; width: 127px; left: 700px; top: 25px; position: absolute; visibility: visible; }
--></style>
</head>

<body>
<div style="position:relative;width:750px;height:40px;background-image:url(www.debatecorner.com/finalizebar.jpg);-adbe-g:p;"></div>
<center><div id="layer1">
<font size="4"><strong><a href=""> Homepage</a></strong></font></div>
<div id="layer2">
<font size="4"><strong> <a href="about.htm">About US</a></strong></font></div>
<div id="layer3">
<font size="4"><strong> <a href="terms.htm"> Terms</a></strong></font></div>
<div id="layer6">
<font size="4"><strong><a href="faq.htm">F.A.Q</a></strong></font></div>
<font size="5"><strong> </strong></font>
<div id="layer5">
<strong><font size="4"> <a href="order.htm">Order</a></font></strong></div>
<div id="layer7">
<font size="4"><strong><a href="Contact.htm">Contact Us</a></strong></font></div>
<div id="layer4">
<font size="4"><strong> <a href="news.htm"> News</a></strong></font></div>
<p></p>
</body>



<b>Bannergenome.com</b>
<br>
<br>
Site will open when we reach beta status 3.0
<br>
<br>
Current Beta Status: 1.6
<br>
<b><u>NOTE:If you are having problems seeing the layout and the top bar looks a little messed up, This is normal. Some browsers work differently. For some people the layout may look fine, for Others it will look weird. We will fix this later on. If you need to maneuver around the site use the links around the copywrite.</u></b>
<!--
<div>
<a href="sitegoeshere" target="_blank"><img src="imagegoeshere" height="60" width="468" alt="" border="0" /></a> </div>-->
</center>
<h4><table class="bottom" width="100%" cellpadding="0" cellspacing="0">
<td class="right" valign="bottom" align="center"><a href="">Homepage</a>|<a href="about.htm">About Us</a>|<a href="Contact.htm">Contact Us</a>|<a href="terms.htm">Terms and Conditions</a>|<a href="order.htm">Buy a banner</a>|<a href="news.htm">News</a>|<a href="faq.htm">Faq</a>
<center> Copyright © 2007-2008 by www.bannergenome.com All rights reserved.</center>
<center>
<br></h4><br>


</html>




Can a professional programmer fix my amature script.

the bar image is

<img src="www.bannergenome.com/finalizebar.jpg">..

I just cant get the links to stay over the green bar when i maximize...

if you goto the site and maximize the screen the links will be distorted..


PLEASE HELP. Ive been trying to figure this out for two and a half weeks now!

can somone post a fixed script possibly :( :( :(
ray326
08-07-2007, 08:42 AM
Wide looks ok to me in Fx but the links collapse under each other when the screen's too narrow.
Ferret
08-07-2007, 10:43 AM
You can use a minimum and maximum width for the page, to avoid distortion. You could allow some flexibility, but limit the page's ability to expand.

http://www.w3schools.com/css/pr_dim_max-width.asp
http://www.w3schools.com/css/pr_dim_min-width.asp

In your case, however, the banner seems to be fine at maximum, just that it has trouble, as stated above, when you make the window smaller. A min-width tag would help here.
mactheweb
08-08-2007, 12:14 AM
min and max width declarations are fine unless you want to ignore the 50% or so of people still using IE 6.

If you are using image maps or the CSS equivalent, your best bet is to use a fixed width design. Second best is to float the image left or right and define the overlay div positions from the edge in pixels, but I wouldn't consider that bullet proof.
Centauri
08-08-2007, 01:29 AM
It makes it difficult to analize your problem when the page you linked to is completely different to the code you provided.....
Danrod
08-08-2007, 02:58 PM
this problem was fixed please delete the entire post