newbie css layout question

I've got a wordpress blog with a fairly nondescript header photo.
What I want is to chop the leftmost 1/4 or so off that photo, and
replace that part with a rotating selection of photos, all the same
size as one another, with a thin black margin in between. The
rotation would be handled by a little rotation script,
http://hiveware.com/rotate.php.

The site is: http://www.depaulacs.org/

Right now the header photo is a background image, called like so:

#headerimage {
clear: both;
background: #fff url(img/misty.jpg) no-repeat 0px 0px;
margin: 10px;
color: #fff;
height: 200px;
}

Can I get a push in the right direction here? What I've tried
unsuccessfully to do is put two new divs inside a third, thusly:

<div id="headermine">
<div id="left>
</div>
<div id="right">
</div>
</div>

#headermine {
margin: 10px;
color: #fff;
height: 200px;
}
*/

#leftimage {
background: #fff url(rotate-images/rotate.php) no-repeat 0px 0px;
width: 250px;
padding: 0px;
margin-top: 0px;
}

#rightimage {
background: #fff url(img/misty.jpg) no-repeat 0px 0px;
width: 450px;
margin-top: 1px;
padding: 0px;
}


Thanks for any clues, hope this is not too basic.

Peter <facetious_nickname (AT) hotmail (DOT) com> wrote:

I've got a wordpress blog with a fairly nondescript header photo.
What I want is to chop the leftmost 1/4 or so off that photo, and
replace that part with a rotating selection of photos, all the same
size as one another, with a thin black margin in between. The
rotation would be handled by a little rotation script,
http://hiveware.com/rotate.php.

The site is: http://www.depaulacs.org/

See HTML source:
http://homepage.ntlworld.ie/spartanicus/depaulacs.org/blog/index.html

--
Spartanicus

Spartanicus wrote:

Peter <facetious_nickname (AT) hotmail (DOT) com> wrote:

I've got a wordpress blog with a fairly nondescript header photo.
What I want is to chop the leftmost 1/4 or so off that photo, and
replace that part with a rotating selection of photos, all the same
size as one another, with a thin black margin in between. The
rotation would be handled by a little rotation script,
http://hiveware.com/rotate.php.

The site is: http://www.depaulacs.org/

See HTML source:
http://homepage.ntlworld.ie/spartanicus/depaulacs.org/blog/index.html

Thanks!

Peter wrote:

Spartanicus wrote:
[excellent help]

How does this look now? Any suggestions?

http://www.depaulacs.org/

Peter <facetious_nickname (AT) hotmail (DOT) com> wrote:

How does this look now? Any suggestions?

http://www.depaulacs.org/

The right border shows up on pages other than the home page. If you
can't prevent the extra div element from showing up on pages other than
the home page then you should make the right border part of the images.

--
Spartanicus

Spartanicus wrote:
[more good advice]

OK - here's another question, if you've got a second - is it
possible to automatically adjust the relative widths of two divs,
one "inside" the other? I'd like to be able to rotate a variety of
images into the spot currently occupied by the photo on the left,
but I would like them to be different widths. Is there a way to do
this, or do I have to set a fixed width and crop all my photos to
that size?

http://www.depaulacs.org

Thanks!

Peter <facetious_nickname (AT) hotmail (DOT) com> wrote:

OK - here's another question, if you've got a second - is it
possible to automatically adjust the relative widths of two divs,
one "inside" the other? I'd like to be able to rotate a variety of
images into the spot currently occupied by the photo on the left,
but I would like them to be different widths. Is there a way to do
this, or do I have to set a fixed width and crop all my photos to
that size?

Just set the width of the absolutely positioned extra div that has the
"left" decorative image to "100%" instead of the fixed "200px" in my
example. It defaults to a transparent background colour and the image
was already set to "no-repeat", so the sky background will show through.

Note that this will only work correctly you have moved the right border
from the inner div of the original example and have made it part of the
image itself.

--
Spartanicus

Spartanicus wrote:

Peter <facetious_nickname (AT) hotmail (DOT) com> wrote:

OK - here's another question, if you've got a second - is it
possible to automatically adjust the relative widths of two divs,
one "inside" the other? I'd like to be able to rotate a variety of
images into the spot currently occupied by the photo on the left,
but I would like them to be different widths. Is there a way to do
this, or do I have to set a fixed width and crop all my photos to
that size?

Just set the width of the absolutely positioned extra div that has the
"left" decorative image to "100%" instead of the fixed "200px" in my
example. It defaults to a transparent background colour and the image
was already set to "no-repeat", so the sky background will show through.

Note that this will only work correctly you have moved the right border
from the inner div of the original example and have made it part of the
image itself.

Thanks! At the risk of asking that one question too many :-), what
if I wanted to remove the sky background entirely, and just have 4
equal-sized graphics next to one another, with a border in between
each pair? Assuming the containing div is 780px, I reckon that
would make each image 190px wide, + 5px borders in between.

Hints?

Peter wrote:

Spartanicus wrote:
[snip help]

Thanks! At the risk of asking that one question too many :-), what if I
wanted to remove the sky background entirely, and just have 4
equal-sized graphics next to one another, with a border in between each
pair? Assuming the containing div is 780px, I reckon that would make
each image 190px wide, + 5px borders in between.

Hints?

OK, a little try on my own.

http://depaulacs.org/blog/

How does this look?

Peter <facetious_nickname (AT) hotmail (DOT) com> wrote:

what
if I wanted to remove the sky background entirely, and just have 4
equal-sized graphics next to one another, with a border in between
each pair? Assuming the containing div is 780px, I reckon that
would make each image 190px wide, + 5px borders in between.

Remove the inner empty div, replace the sky image with your collage
image.

--
Spartanicus