Topic: placing images...

HI guys
I am really having problems placing two stupid 20x20 px squares on my site layout. I have been studying CSS for a while and I can't get round to it. I also have a book right next to me but either I'm really useless, or I don't know where to look for this kind of things, and I bet it's really simple, but I just can't make it
So I've got two cells with a left border for one and a bottom border for the other one (I can't avoid the table, I haven't done the code of the website and can't change it) and I would like to place these mini squares on the lines.
Could anybody tell me if I need an absolute or fixed position, and how do I make them remain still if I change the size of the window or the resolution?
Help me please I would really appreciate!
Thanks

I'll be honest with you, it's difficult to visualise your problem, if you could post up an example that would help greatly, try using geocities for some free space.

From what you've said so far I would try not to use absolute positioning, if anything on your page has a relative size absolute positioning can cause you problems. However if you want the image to actually appear 'over' other elements then absolute positioning 'may' be the only choice you have.

Often with images on websites you;'ll find that gaps will appear between themselves and their previous or next elements, this can sometimes be removed by removing any carriage returns and spaces in your (X)HTML.

Hope this helps, let us know how you get along.

Cheers,

Thank you very much Blaise.
I can't give you the url as it is still on our Development server and not online yet, but here is an image to illustrate my problem:



Basically there are two cells with a background image (gradient) and some borders. I would like the squares to keep their x-position in any case (exactly centered on top of the line for the cell on the left hand side, and exactly at the end of the line for the cell on the right hand side).

I hope this is clearer?

Many thanks again

Not really - how 'bout some source code? (A copy of the entire page including images, CSS, etc. would be better)

That's really annoying, but I can't give you anything, it's not a personal job, it's for my boss and not online yet. And It's got editable content...
But thanks anyway guys, I'll come back with that when it's online and safe!
Thank you very much for your time, sorry I've wasted it

...can't you even chop out the relevant code and post it here?

For example then (I've removed al the references and names, you won't mind, will you?)

-----------> the code

<tr height=20>
<td class="topbackground">
<span id="xxx" class="xxx"><a href="xxx" class="xxx">about</a> :: <a href="xxx"class="xxx">item 2</a>
</span>
<div id="gs2">
<img src="images/greensquareempty.jpg" alt="">
</div>
</td>
</tr>

-----------> And the CSS bit:

div#gs2 img {
position: absolute; z-index: 1;
top: 190px; left: 119px;
}


Is this enough or shall I give more?

Right I've thought about this, I think it's quite an unusual thing, not particularly easy but these two border with boxes on, could perhaps be created using to divisions with one background image each, let me write some code...

<div class="leftBorder">
  <div class="bottomBorder">
    my stuff lalala
  </div>
</div>

Then your style infromation would look like this...

.leftBorder {
  background: url(../img/leftBorder.gif) no-repeat center left;
}

.bottomBorder {
  background: url(../img/bottomBorder.gif) no-repeat bottom right;
}

Ok so you could put these two div's around your table or inside your td's, and make your gif's to include the line the boxes sit on and make that line aslong as you think the boredr will posibly go, they should still come out in a web-safe size.

I'm not sure about using absolute positioning for this problem, because off the top of my head for resizing etc you may end up having to use javascript as well to replace them each time the screen is moved or resized.

Hope this helps, let us know how you get on.

Cheers,

Al.



(Edited by Blaise on 06-01-2005 12:28)

Thanks a lot Blaise, I'll try and do that! I'll let you know how I got on.
Cheers

Like this?:

It's more like this:

I don't think anyone mentioned this, but if you have to use absolute positioning, there is one fundamental trick you need to be aware of. Absolute positioning is always calculated from the closest 'positioned' ancestor element. So if you haven't specified a position attribute for any elements, absolute positioning will be calculated from the document window.

To work around this, you can explicitly specify any element as position: relative, which is the default behaviour, but stating it explicitly will reset the absolute positioning starting point for any element within it. So you could apply position: relative to the table cells and then use absolute positioning on the images within. Of course, you don't necessarily have access to add a class or id to the table cells, so instead just put wrapper divs inside the cells that are position: relative then you should be good to go.

This is only a last resort though. The background method is much more reliable in general, so I'd try to get that working first.

-jiblet

(Edited by jiblet on 06-01-2005 16:16)

Thanks for the tip, jiblet! I'm working on it and see if it works. But what you mentioned is that kind of things I need to know!

Cheers

quote:

---

jiblet said:

position: relative, which is the default behaviour, but stating it explicitly will reset the absolute positioning starting point for any element within it

---

position: static; is the default behavior - rest is right
http://www.w3.org/TR/CSS21/visuren.html#propdef-position

(Edited by reisio on 06-01-2005 22:19)

Well said Jiblet, and well corrected reiso!