images over images...

[missruby]

i'm fairly new to css and trying to figure out a couple things about positioning and background images/images... i am re-designing a site that has a background image that repeats y made from a 750px wide transparent gif with a dot on either end to produce right and left borders of dots that create a different effect than the dotted borders... i made a 1px wide image that repeats x that creates a band across the page under the mast... i would like to put a small image of a star centered on top of the horizontal band on the right side of the page...

the dots are in the body tag...
the band is in the nav...
and i was going to put the star as an img in the html in the mast div and just give it a top margin that pushes it down over the band... but when i give it a top-margin it pushes the whole mast down not just the image with that id...

my questions are these...

i want the band to cover just over both right and left dot borders... but it only covers the right side... how can i get the band to cover both sides?

and how do i get the star to center on the horizontal band on the right side of the page...?

is any of this possible?

help... please?

[philtreble]

Have you a URL we can see please?

[missruby]

i don't have it up yet... but perhaps this will help:http://www.missrubywest.com/images/wf_.gif

the way i have it now the side images that repeat-y are a transparent gif that is 700+ pix wide with just a dot on either side... (is there a better way to do that?)... what i'd like is... the band that repeats-y to just cover the side images on either side and then stop... (and possibly expand/contract in proportion the page and keeping the image that goes over the band in relative position?) i'm assuming that the mast and the image that goes over the band should be imgs and that the band and dots should be background images in css... yes? no?

any help would be much appreciated...

i did get some of this to work but only if i used the mast as a background image in css and using positioning that seems to go haywire when i check it in anything but firefox... (i'm still learning... that's why i'm here)

[Oreo]

Hi Missruby,

You defined a width to your layout with faux borders using the transparent repeat-y background at a 700+ px. That's fine. Now, you say you want it to expand with the star image to follow by staying positionned to the right. I'm a bit confused.

How do you want your "star" to move if layout expands?

Like this ?

http://www.woodfloorguide.net/tests/wf2_.gif

or like that ?

http://www.woodfloorguide.net/tests/wf3_.gif

I just presume your existing layout is centered.

[missruby]

sorry for confusing you... i just meant that if someone who replied recommended that i shouldn't define the width a transparent gif that goes across the whole screen but instead with just a dot that repeats-y on either side of the page... that i would hope that there's a way to make everything stay in proportion....

if i use the 750px gif repeating-y then the length of the repeat-x image and the star would be static...

i would like the band to just extend past the dots on either side of the page by a couple px... (in either case)...

does that clear things up? (i hope)...

[Oreo]

I'm taking a guess here (http://www.woodfloorguide.net/tests/missruby1.html)

Note that I replaced the 1px band that repeats x you suggested by a bottom border to the header div. Is that ok? The width of that border can be modified by changing the header div's width, so the band's extensions can be adjusted.

[missruby]

yes! that is what i'm looking for... unfortunately i can't use a bottom border because the band consists of a color pattern that is created when it repeats... but that is very close to what i'm looking to do... is there a way to do that without using a bottom border?

[Oreo]

How about that (http://www.woodfloorguide.net/tests/missruby2.html) ?

The only way I found was to throw in an extra div. If anyone has a better idea, let me know.

[missruby]

that looks excellent! thank you so much. i will try it out with my images and let you know.