Div - resualotion problem very hard probobly havnt found a fix .

[yanivkalfa]

OK well my problem is that  have a big pic as my site ok of couse some parts of it is broken to little pics like buttons and other staff .

anyways on the mos big pic there is a textfield place . what i do is create a div and place in it a textfield. then fix its location to the place in the pic and the pic looks just as it has a text field impented in it. not whe problem comes when i trys to change resulotion . when i do the whole thing screws up . i mean all of it . is there a way to fix this anyone knows anything about it would realy be appriciated .

 

anyways here is some codes to see what i did.

:

 

#apDiv1 {
position:absolute;
left:337px;
top:125px;
width:250px;
height:12px;
z-index:1;
}

.one {
width: 200px;
height: 14px;
background:#FFFFFF;
border: none;
padding: 2px 0 0 5px;
}

 

and here is the body

 

<div id="apDiv1">
  <label>
  <input name="textfield" type="text" class="one" id="textfield" value="kjabskhdbaks" />
  </label>
</div>

 

 

thanks in advanced . its aint simple to solve. i know

[yanivkalfa]

Pretty hard to solv yea .. dont know what to do with this .

[yanivkalfa]

no one able to help ?

[haku]

I think I know the problem, but I need to see more of your code. Please post your whole page, and your whole CSS. The problem most likely lies in the fact that you have positioned the div absolutely, but that is absolute on the page, rather than compared to the div its contained in. You want something like this:

 

HTML:

<div id="background_picture">
    <div id="textfield">
       <input type="text" name="name" />
    </div>
</div>

 

CSS:

#background_picture
{
    position: relative;
    width: ____ px; //enter the width of the background image here
    height: ____px; //enter the height of the image here
    background: url(path/to/backgroundimage.jpg) no-repeat 0 0;
}

#textfield
{
    position: absolute;
    left:337px;
    top:125px;
    width:250px;
    height:12px;
}

[yanivkalfa]

thanks i will try that

 

[haku]

No worries. What you have to realize is that absolute positioning is relative to either relative elements that it is contained inside, or if no containing element is relative, its relative to the entire document. You most likely didn't have your containing element positioned relative, which is where your problem was coming from.