Stylesheets - newbie css layout question

Author

newbie css layout question

Peter

2006-08-21, 3:35 am

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.

Spartanicus

2006-08-21, 6:48 am

Peter <facetious_nickname@hotmail.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/spartan...blog/index.html

--
Spartanicus

Peter

2006-08-21, 6:45 pm

Spartanicus wrote:
> Peter <facetious_nickname@hotmail.com> wrote:
>
>
> See HTML source:
> http://homepage.ntlworld.ie/spartan...blog/index.html

Thanks!

Peter

2006-08-22, 3:36 am

Peter wrote:
> Spartanicus wrote:
[excellent help]

How does this look now? Any suggestions?

http://www.depaulacs.org/

Spartanicus

2006-08-22, 3:36 am

Peter <facetious_nickname@hotmail.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

Peter

2006-08-26, 10:38 pm

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!

Spartanicus

2006-08-27, 3:30 am

Peter <facetious_nickname@hotmail.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

Peter

2006-08-27, 3:30 am

Spartanicus wrote:
> Peter <facetious_nickname@hotmail.com> wrote:
>
>
> 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

2006-08-27, 6:37 am

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?

Spartanicus

2006-08-27, 6:37 am

Peter <facetious_nickname@hotmail.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