can css position an object relative to another object regardless of resolution?

[canadianjameson]

this may be a simplistic question but:

If I have an image, and I want a textbox / searchfield to be overlaid on that image in a specific way... i know I can do it on my screen, however how do i position the textbox with CSS so that no matter what screen it is viewed on, it keeps that overlay?

[Kravvitz]

Why don't you use a background image?

If you can't use a background image, read these:
http://www.stopdesign.com/articles/absolute/
http://www.autisticcuckoo.net/archive.php?id=2004/12/07/relatively-absolute

[rmedek]

Yes, absolutely positioned elements are positioned relative to a relative container. In other words:


div#absolute {
width: 100px;
height: 100px;
position: absolute;
left: 50px;
top: 50px;
}

<div id="absolute">
<p>This box is 50px from the top and left of the browser window, because it's not contained in anything else declared relative.</p>
</div>


... and

div#relative {
position: relative;
}

p#absolute {
width: 100px;
height: 100px;
position: absolute;
left: 50px;
top: 50px;
}

<div id="relative">
<p id="absolute">This box is 50px from the top and left of the #relative div, because that div has been declared a relative container.</p>
</div>


Hope this makes sense.

[canadianjameson]

PERFECT

as per usual with you and your kind!

[rmedek]

Thanks… but don't look at me, I learned that for the first time on this forum as well. :D

http://codingforums.com/showthread.php?t=29611

Looking back at that post makes me realize how far I've come since joining here... thanks CF!

[canadianjameson]

lol apparently my mouth moves quicker than my brain.

I need a little help :D

it didnt work as planned... you can see the differences here:

www.enviromark.ca/english/products.html

and here where i tried it:
www.enviromark.ca/english/productsTest.html

I was trying to get it overlaid over two images so i set the z-index to 2, as seen here:


#searchPosition {
position: relative;
}

#search {
z-index: 2;
position: absolute;
right: 45px;
bottom: 10px
}

and heres what i tried to do:

before change:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/t28_01.gif" width="130" height="135"></td>
<td><img src="images/t28_02.gif" width="245" height="135"></td>
<td><img src="images/t28_03.gif" width="295" height="135"></td>
<td><img src="images/t28_04.gif" width="31" height="135"></td>
<td><img src="images/spacer.gif" width="1" height="135"></td>
</tr>
</table>

after change
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/t28_01.gif" width="130" height="135"></td>
<td><img src="images/t28_02.gif" width="245" height="135"></td>
<td><img src="images/t28_03.gif" width="295" height="135"></td>
<td><div id="searchPosition">
<img src="images/t28_04.gif" width="31" height="135">
<span id="search">
<form method="post" action="../../cgi-bin/searchEnglish.pl">
<input type="text" name="findProducts" size="15" onFocus="if(this.value=='Search')value=''" onBlur="if(this.value=='')value='Search';" value="Search" >
</form>
</span>
</div>
</td>
<td><img src="images/spacer.gif" width="1" height="135"></td>
</tr>
</table>


i need the search window to "float" over the two bolded images above... but i don't think i applied it right. I tried spanning the <div> across both <td>'s but it screamed at me, lol

how would I acheive what i need, or is it not worth it??

or should i recut the images in question so it works better (i.e so its only over on TD)?

[Kravvitz]

I don't see those two CSS rules in productsTest.html.

Why tables for layout is stupid (http://www.hotdesign.com/seybold/index.html)
Why avoiding tables (for layout) is important (http://davespicks.com/essays/notables.html)
Why go table free? (http://www.workingwith.me.uk/tablefree/why/)
Nested Tables: About the (ab)use of tables as layout tools in webpages. (http://www.dorward.me.uk/www/nested/)
Tables Vs. CSS - A Fight to the Death (http://www.sitepoint.com/article/tables-vs-css/)
Why Tables Are Bad (For Layout) Compared to Semantic HTML + CSS (http://www.phrogz.net/CSS/WhyTablesAreBadForLayout.html)
The layout is dead, long live the layout (http://www.westciv.com/style_master/house/good_oil/dead_layout/)
Tables or CSS: Choosing a layout (http://evolt.org/article/Tables_or_CSS_Choosing_a_layout/25/21429/)
What are tables really for? (http://forums.devshed.com/css-help-116/what-are-tables-really-for-335225.html)

[canadianjameson]

they are in product.css, an external css file

[canadianjameson]

also i'm aware that tables are dumb but the layout is old / done and i'm not going to recode the whole site with divs for one thing

can it be done as shown with tables?

[Kravvitz]

Well where's product.css? You didn't reference in either HTML file.

You really should add a 404 (page not found) page. When I go to a page that doesn't exist on your server all I get is a completely blank page.

[felgall]

It could be because you are trying to place a span inside a div and a span doesn't have a height to set to anything. Try placing a div inside a div instead.

[canadianjameson]

You're both right. i had added the .css file to the wrong page and the div instead of span helped.

I got it "positioned" as I want it, as seen here: www.enviromark.ca/english/productsTest.html however the process created two secondary problems, one I fixed, one I didnt.

the one I couldnt is that there is now a 1-or-2 px space both between the very top of the page and the border of the table, and between two images right below the search box. look at the link above then look here: www.enviromark.ca/english/products.html

see what i mean.

I fear that due to my innexperience with CSS i will land up running around in circles trying to adjust margins to compensate ti'll i'm blue in the face. Since the error occured due to my new css code, i assume the problem is in there

here's my code
css

a:link, a:active, a:visited {
color: #FF4F02; }

#searchPosition {
position: relative;
}

#search {
z-index: 3;
position: absolute;
right: 0px;
bottom: -9px
}
#searchBox {
height: 21px
}

#searchPicFix {
position: relative;
z-index: -1;
bottom: -2px;
}

relevant html

<table width="701" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/t28_01.gif" width="130" height="135"></td>
<td><img src="images/t28_02.gif" width="245" height="135"></td>
<td><img src="images/t28_03.gif" width="295" height="135"></td>
<td><div id="searchPosition">
<img src="images/t28_04.gif" width="31" height="135" id="searchPicFix">
<div id="search">
<form method="post" action="../../cgi-bin/searchEnglish.pl">
<input type="text" name="findProducts" id="searchBox" size="15" onFocus="if(this.value=='Search')value=''" onBlur="if(this.value=='')value='Search';" value="Search" >
</form>
</div>
</div>
</td>
<td><img src="images/spacer.gif" width="1" height="135"></td>
</tr>
</table>


color coded for readability.

what did i do wrong?