Hi,
I have a problem with a link that I want to stay within a certain place on an image. The image has a circle within it and on that circle I have a link called "go"
The image does not resize with the brower [set in pixels]. Neither does the link; its font-size is also set in pixels.
Now, the image and the link are in a div called #lawn_services. Here is the XHTML
<div id="lawn_services">
<p class="lawn">lawn services</p>
<img src="lawn_services.jpg" alt="picture of a lawn"</img>
<p class="blurb">keeping a lawn in prestine condition can be an ardous task. Read more about how STK can help...</p>
<a href="#" title="click here to access lawn services">go</a>
</div>
In order to place the link within the image I made the div "#lawn_services" position: absolute and the a: link position relative and positioned it accordingly.
However the link does not stay within the circle on the image. The div "#lawn_services" sits within a content div called "#main_content" that is floated right 70% The other content div '#side_menu' is floated left :30% [in other words I have a two column liquid layout]
When the browser is re-sized or font size of the browser is changed the image moves up and down a line and thus the link moves out of position.
If I do NOT take the link from out of the normal flow of the document, ie do not position it absolute then it moves up and down OK relevant with other elements around it. However in the normal flow of the document it is below the image and paragraph text. How can I put the link on the image and have it stay in position relevant to the image even when the browser of font-size is increased.
Here is my CSS:
body{
margin:0;
font-family: "Gill Sans MT", sans-serif;
}
#wrapper {
width: 100%;
}
#header {
width: 100%;
height: 141px;
background: url(header_grad.gif) repeat-x;
}
#flowers {
background: url(flowers_header.jpg) no-repeat;
position: absolute;
height: 141px;
width: 230px;
top: 0;
right:0;
}
#letters {
background: url(letters_header.jpg) no-repeat;
position: absolute;
height: 141px;
width: 568px;
top: 0px;
left:0px;
}
#side_menu {
margin-top: 145px;
display: inline;
float: left;
width: 29%;
}
#main_content {
margin-top: 90px;
float: right;
width: 69%;
}
#main_content p.tag_line {
margin-left: 10%;
font-size: 1.6em;
color: #bbbf99;
}
.brown {
color: #a99a7f;
}
#footer {
clear: both;
margin-top: 10px;
width: 100%;
background-color: orange;
}
.box{
margin-left: 10%;
width: 55%;
background: #fbf5c7 url(bottom_left.gif) no-repeat left bottom;
}
.box-outer {
background: url(bottom_right.gif) no-repeat right bottom;
}
.box-inner {
background: url(top_left.gif) no-repeat left top;
}
.box h3 {
background: url(top_right.gif) no-repeat right top;
}
.box p {
color: #5e5e5a;
padding-left: 1%;
padding-right: 1%;
padding-top: 1%;
}
.box2{
width: 82%;
margin-left: 5%;
background: #fcf7ce url(bottom_left2.gif) no-repeat left bottom;
}
.box2-outer2 {
background: url(bottom_right2.gif) no-repeat right bottom;
padding-bottom: 1%;
}
.box2-inner2 {
background: url(top_left2.gif) no-repeat left top;
}
.box2-inner3 {
background: url(top_right2.gif) no-repeat right top;
height: 1%;
}
#side_menu li {
margin-top: 14%;
list-style-type: none;
border-bottom: 1px solid #e3dfbb;
border-width: 50%;
width: 90%;
}
#side_menu a {
display: block;
padding-right: 8%;
background: url(arrow.jpg) no-repeat center right;
font-family: "Gill Sans MT", sans-serif;
font-size: 150%;
color: #7b7966;
text-decoration: none;
}
#lawn_services {
position: relative;
margin-left: 10%;
}
#lawn_services p.lawn {
margin-top: 3%;
color: #9aa529;
font-size: 130%;
}
#lawn_services p.blurb {
margin-top: 1%;
color: #8d8e87;
font-size: 90%;
}
#lawn_services a:link,#lawn_services a:visited {
position: absolute;
font-size: 20px;
text-decoration: none;
color: #c5c2a6;
top: 34%;
margin-left: 18%;
}
If you need to see the files e-mail me at d.jonesATmitsui.com
Start Free Trial
