Hi

When I resize the window on www.kjlconstruction.co.uk the image of a house moves. It looks fine in Dreamweaver. How do I keep it fixed as it is on dw?

Thanks a lot guys! :)

9 answers

0
points
This was chosen as the best answer

Ok here is your CSS, just copy this and replace what is in your style sheet. Also REMOVE the styles for the apDiv1 in the header of your html doc.

div#header {

background:url('images/header-middle.png') repeat-x top left;
height:149px;
width:1061px;
position:relative;

}

#apDiv1 {

position:absolute;
width:200px;
height:115px;
z-index:1;
left: 767px;
top: -30px;
}

div#footer {

padding:10px 0;
border-left:6px solid #414141;
border-right:6px solid #414141;
background-color:#AE0000;
width:1049px;

}

div#content {

  background:#AE0000;
  border-left:6px solid #414141;
  border-right:6px solid #414141;
  width:1049px;

}

Hope this helps lol

  • Juan
Answered almost 7 years ago by Juan Di Diego
1
point

Ok Here is your code:

the #header tag. Set it to width:1065px; and add position:relative;

Then the ID #apDiv1 you need to change your top and left positioning to be where you want it. I recommend top:-30px and left:767px;

Also you need to set your #content and #footer to both have a width of 1049px

<div id="header">
    <div id="innerheader">
        <div id="title">
          <div id="apDiv1"><img width="290" height="232" alt="" src="images/housepic.png"/></div>
          <h1>K J L Construction Ltd</h1>
            <h2>The home extension and improvement specialists</h2>
      </div>
    </div>
</div>

Does that clear things up a little?

  • Juan
Answered almost 7 years ago by Juan Di Diego
0
points

Hey, this a pretty easy fix. The issue is that your DIV is set to absolute to the page so when the browser winder gets larger it's going to move to a new position. To fix it you have to set the container DIV that it's in to relative so that the absolute DIV will position inside that area. Also you need to have a set width on your site. Right now its all set to grow when the page grows.

Example:

So in this example the first DIV has a width and height set with a position set to relative. The DIV inside of it is absolute and set to appear in the top left of the DIV. When you move the browser it will always stay in its place.

Hope this helps answer your question.

Juan Di Diego www.dulceblu.com

Answered almost 7 years ago by Juan Di Diego
0
points

weird i just posted some HTML code and it didn't show up.... I described the example anyways... let me know if you still have trouble.

Answered almost 7 years ago by Juan Di Diego
0
points

I'm not too sure what you mean, sorry! Could I email you the code and you review it for me please? :)

Answered almost 7 years ago by James Scott
0
points

I must be stupid hehe.. I still dont follow :| - Any way you could edit it and then send it back? - That way I can see what you mean - Really appreciate the help btw!

Answered almost 7 years ago by James Scott
0
points

you sir, are a legend! that you very much! how do I just move it over slightly? you can see it overhangs to the right a tad - Thanks!!!!!

Answered almost 7 years ago by James Scott
0
points

hmmm I can't see your site anymore... but to move it over from the left or right just change the left positioning on the #apDiv1

Answered almost 7 years ago by Juan Di Diego
0
points

I tried that and it works.. but for some reason it still cuts the image slightly

Answered almost 7 years ago by James Scott