How do I do this in CSS?

Hello,

As part of my CSS learning, I am trying to redo an old design of mine in
CSS. This design was done with a large <table> to layout the various
bits of the page. Due to the (apparent) placement of one image, this
meant chopping it up into six pieces!! I am a bit stuck on how to do
this in CSS.

Please have a look at http://www.kidsinaction.org.uk/freds/freds.html
for the original (actually a very simplified version of the original,
but one that shows the basic layout).

If you look at http://www.kidsinaction.org.uk/freds/freds-border.html
you can see the borders of the <table>, which shows what I did (don't
laugh!!)

Most of this is fairly simple to recreate in CSS, but the picture of the
candelabra has got me stuck. How do I place that so that it will stay in
the right position? At the moment, it is centred horizontally over the
border between the left margin and the main content. If you resize the
text, you see that this image (actually six placed next to each other)
moves with the width of the margin, keeping it over the border. I would
like to keep the flexibility of allowing the user to change the text
size, but can't work out how to place this image.

The vertical position of this image isn't a problem as the two images
above it (the "Fred's books & gifts" and the banner on the right) are a
fixed height, so I know the distance from the top of the document to the
top of the candelabra.

Anyone able to advise? Please note that I know the HTML in there isn't
great, nor is the CSS. This is copied and cut down from an old design.
When I redo it, I intend to redo it properly. I'm still at the stage of
trying to work out how to lay it out though.

TIA for any help.

--
Alan Silver
(anything added below this line is nothing to do with me)

Alan Silver <alan-silver (AT) nospam (DOT) thanx.invalid> wrote:

http://www.kidsinaction.org.uk/freds/freds.html

Most of this is fairly simple to recreate in CSS, but the picture of the
candelabra has got me stuck. How do I place that so that it will stay in
the right position?

Various ways to do this, one method: create a single image with
transparency outside of the circle, place a span with a class or id in
your markup somewhere in the content area, define the image as a
background image to this span, give it the dimensions of the image,
specify "position:absolute" and left:-[half the width of the image] and
top:-[half the height of the image], wrap the content area in a div,
specify "position:relative" for this div to make it the containing block
for the absolutely positioned span.

--
Spartanicus

Spartanicus,

It sounds like a really good suggestion, but I can't quite picture it
in my mind.

The image is a background for a span which i Understand (although I
don't know why the image can't be in the foreground of the span...
<span><img/></span>

Given the layout that he has there, how does he define a div to contain
the span, since he wants to have that span floating over the border of
several elements. Won't the span be outside of the borders of whatever
div he creates?

Sorry I think I need a picture :-)
Greg.

In article
<pogj12hkbn7hk4d6ro5rl1sl81n04drmmk (AT) news (DOT) spartanicus.utvinternet.ie>,
Spartanicus <invalid (AT) invalid (DOT) invalid> writes

Alan Silver <alan-silver (AT) nospam (DOT) thanx.invalid> wrote:

http://www.kidsinaction.org.uk/freds/freds.html

Most of this is fairly simple to recreate in CSS, but the picture of the
candelabra has got me stuck. How do I place that so that it will stay in
the right position?

Various ways to do this, one method: create a single image with
transparency outside of the circle, place a span with a class or id in
your markup somewhere in the content area, define the image as a
background image to this span, give it the dimensions of the image,
specify "position:absolute" and left:-[half the width of the image] and
top:-[half the height of the image], wrap the content area in a div,
specify "position:relative" for this div to make it the containing block
for the absolutely positioned span.

Thanks for the reply, although I'm not clear that it answers my
question.

Maybe I didn't make the point clear enough, but the specific problem I
was facing with this issue was that the left margin will *not* be sized
in pixels, it will be sized in either % or em. To get the left position
of the image, you need to take the width of the left margin, then
subtract half the width of the image. That means evaluating a
calculation with one term in % or em and the other in pixels. AFAIK CSS
doesn't allow this. Maybe your answer does address this problem, in
which case I didn't understand what you were suggesting. If so, please
could you post some code so I can see what you meant?

I did have a thought over the weekend, but I haven't had chance to try
it yet. I wondered about having two divs, each half the width of the
image, and placing them either side of the border between the left
margin and the rest of the content. One could have the left position set
and the other have the right position set. I would then set the
background image to be the image, offset so that the appropriate bit
shows. Bit convoluted, but I think it might work.

Any comments? Thanks for the reply

--
Alan Silver
(anything added below this line is nothing to do with me)

Alan Silver <alan-silver (AT) nospam (DOT) thanx.invalid> wrote:

Maybe I didn't make the point clear enough, but the specific problem I
was facing with this issue was that the left margin will *not* be sized
in pixels, it will be sized in either % or em. To get the left position
of the image, you need to take the width of the left margin, then
subtract half the width of the image.

Sorry, I've no idea what you're on about.

Maybe your answer does address this problem, in
which case I didn't understand what you were suggesting. If so, please
could you post some code so I can see what you meant?

http://homepage.ntlworld.ie/spartanicus/freds/index.htm

I changed it slightly from what I described to get around a Firefox
z-index bug that I couldn't be bothered to figure out.

--
Spartanicus

In article
<2ptt12hpq82pgo2s37ql6jf1t2iv4hn88d (AT) news (DOT) spartanicus.utvinternet.ie>,
Spartanicus <invalid (AT) invalid (DOT) invalid> writes

Alan Silver <alan-silver (AT) nospam (DOT) thanx.invalid> wrote:

Maybe I didn't make the point clear enough, but the specific problem I
was facing with this issue was that the left margin will *not* be sized
in pixels, it will be sized in either % or em. To get the left position
of the image, you need to take the width of the left margin, then
subtract half the width of the image.

Sorry, I've no idea what you're on about.

That's OK, it was a bit convoluted. Your way was much better...

Maybe your answer does address this problem, in
which case I didn't understand what you were suggesting. If so, please
could you post some code so I can see what you meant?

http://homepage.ntlworld.ie/spartanicus/freds/index.htm

I changed it slightly from what I described to get around a Firefox
z-index bug that I couldn't be bothered to figure out.

OK, I see how it works, but I have a couple of questions if you don't
mind...

1) Why did you use a <span> for the candelabra instead of a <div>? I'm
not sure it would make any difference in practice, but all the CSS stuff
I've seen uses <div> for laying out stuff.

2) Why did you give the <span> a class rather than an ID? Again, I'm not
sure it makes a difference, but given that there is only going to be one
of these images, wouldn't an ID be more logical?

3) I can't work out how you lined up the centre of the image with the
edge of the left margin. The margin has a width of 18em, so I would have
expected you to set the image's left to 18em, then use the negative
margin to shift it left by half the image width. You actually set the
image's left to 20em. Where did the extra 2em come from?

Thanks very much for the help.

--
Alan Silver
(anything added below this line is nothing to do with me)

Alan Silver <alan-silver (AT) nospam (DOT) thanx.invalid> wrote:

1) Why did you use a <span> for the candelabra instead of a <div>? I'm
not sure it would make any difference in practice, but all the CSS stuff
I've seen uses <div> for laying out stuff.

Personal preference, it makes no difference for absolutely positioned
elements, also note that images are inline by default. I use Opera's
user mode a lot to check the rendering without CSS, a properly marked up
document looks properly structured in that mode. In user mode Opera has
a quirk where empty div's may prevent margins from collapsing, this may
cause me to think there's something wrong with the markup. This doesn't
occur when spans are used.

2) Why did you give the <span> a class rather than an ID? Again, I'm not
sure it makes a difference

Again personal preference. I tend to use id's for elements that are
guaranteed to be used only once, and then preferably only for children
of the body element. For non children of the body element I tend to use
classes. In my stylesheets I tend to prefix rules with the containing
element's id (typically these are the principle layout blocks), this
allows automatic sorting of the rules and gives a structured
organization.

3) I can't work out how you lined up the centre of the image with the
edge of the left margin. The margin has a width of 18em, so I would have
expected you to set the image's left to 18em, then use the negative
margin to shift it left by half the image width. You actually set the
image's left to 20em. Where did the extra 2em come from?

#sidebar has a 1em padding, this is added to the width of the div under
CSS box model rules.

--
Spartanicus

In article
<jue022hqjd8vthpql3s9fdd28uc8356ug9 (AT) news (DOT) spartanicus.utvinternet.ie>,
Spartanicus <invalid (AT) invalid (DOT) invalid> writes

Alan Silver <alan-silver (AT) nospam (DOT) thanx.invalid> wrote:
snip

3) I can't work out how you lined up the centre of the image with the
edge of the left margin. The margin has a width of 18em, so I would have
expected you to set the image's left to 18em, then use the negative
margin to shift it left by half the image width. You actually set the
image's left to 20em. Where did the extra 2em come from?

#sidebar has a 1em padding, this is added to the width of the div under
CSS box model rules.

Duh, of course!! I should have spotted that, sorry for asking a dumb
question.

Thanks again for the help. I'm sure I'll have more questions when I've
had more time to work on this.

--
Alan Silver
(anything added below this line is nothing to do with me)