CSS and body margins

[Christoph]

Using CSS, I want to set images for the left and right margins/borders of
the page. That seems like it would be simple enough but here's the twist: I
want one image to display on the top left/right and then another image
repeating for the rest of the margins/border. So bascially the page would
look something like this:

A = Image 1
B = Image 2
C = Image 3, repeating on both sides

A B
C Web Page Text Here C
C Web Page Text Here C
C Web Page Text Here C
C Web Page Text Here C
C Web Page Text Here C
C Web Page Text Here C

with C repeating all the way to the bottom of the page regardless of how
large or small the page is. Right now, I'm accomplishing this by using 2
tables, one outer and one inner. It looks something like this:

<table width="100%" height="100%">
<tr>
<td valign="top" align="left" height="100%">
<table border=0 height="100%" cellspacing=0 cellpadding=0>
<tr>
<td valign="top" height="387" width="36">
<img src="/Image1.gif" border="0" alt="">
</td>
</tr>
<tr>
<td background="/Image3.gif" width="56" height="100%"></td>
</tr>
</table>
</td>
<td>
Web Page Text Here<br>
Web Page Text Here<br>
Web Page Text Here<br>
Web Page Text Here<br>
Web Page Text Here<br>
Web Page Text Here<br>
</td>
<td valign="top" align="left" height="100%">
<table border=0 height="100%" cellspacing=0 cellpadding=0>
<tr>
<td valign="top" height="387" width="36">
<img src="/Image2.gif" border="0" alt="">
</td>
</tr>
<tr>
<td background="/Image3.gif" width="56" height="100%"></td>
</tr>
</table>
</td>
</tr>
</table>

but there has to be some way I can do the same thing much more elegantly
with CSS. I'm not necessarily looking for someone to tell me step by step
how to do this. What I'm more looking for is just a pointer to where I
should start learing how do implement this. I've looked at various CSS
pages, tutorials, how-to's, etc but nothing I saw addressed anything like
this.

thnx,
Christoph

 

[Jonathan N. Little]

Using CSS, I want to set images for the left and right margins/borders of
the page. That seems like it would be simple enough but here's the twist: I
want one image to display on the top left/right and then another image
repeating for the rest of the margins/border. So bascially the page would
look something like this:

A = Image 1
B = Image 2
C = Image 3, repeating on both sides

A B
C Web Page Text Here C
C Web Page Text Here C
C Web Page Text Here C
C Web Page Text Here C
C Web Page Text Here C
C Web Page Text Here C

<snip>

Sure:

In Stylesheet:

..bookends { clear: both; }
IMG.lefthand { display: block; float: left; margin-right: 1em; }
IMG.righthand{ display: block; right: left; margin-left: 1em; }


Example code:

<p class="bookends">
<img src="A.jpg" alt="A" class="lefthand">
<img src="B.jpg" alt="A" class="righthand">
Your text for this paragraph
....
</p>

<p class="bookends">
<img src="C.jpg" alt="C" class="lefthand">
<img src="C.jpg" alt="Another C" class="righthand">
Your text for this other paragraph
....
</p>

<p class="bookends">
<img src="C.jpg" alt="And another C" class="lefthand">
<img src="C.jpg" alt="And another C" class="righthand">
Your text for this other paragraph
....
</p>

....

 

[Christoph]

<img src="A.jpg" alt="A" class="lefthand">
<img src="B.jpg" alt="A" class="righthand">
Your text for this paragraph
....
</p>
<p class="bookends">
<img src="C.jpg" alt="C" class="lefthand">
<img src="C.jpg" alt="Another C" class="righthand">
Your text for this other paragraph
....
</p>

Hmm, this is the only way it can be done? There is nothing I can do that
will place the images (and, in the case of image C, repeat it to the bottom
of the page) first thing w/o having to enclose everything in a <p> (or
<div>, et. al.) tag?

thnx,
Christoph

 

[Jonathan N. Little]

Hmm, this is the only way it can be done?

No but it is not clear what you are trying to accomplish, that is why a
URL is aways useful. Even a failed attempt can be revealing.

Are this images content or just decoration? If the latter then it should
be background images! Then nested DIVs could work

<style type="text/css">
BODY { margin: 0; padding: 0; }
DIV.lefty {
margin: 0; padding: 0; /* image on left */
background: transparent url(A.jpg) repeat-y fixed top left;
}
DIV.righty {
/* left & right padding to 'clear' images here for 40px IMGs */
margin: 0; padding: 0 50px; /* image on right */
background: transparent url(B.jpg) repeat-y fixed top right;
}
</style>

HTML:

<div class="lefty">
<div class="righty">
Lorem ipsum dolor sit amet, consectetuer ...
</div>
</div>

There is nothing I can do that
will place the images (and, in the case of image C, repeat it to the bottom
of the page) first thing w/o having to enclose everything in a <p> (or
<div>, et. al.) tag?

Well you text should be in some sort of block element....

 

[Christoph]

Hmm, this is the only way it can be done?

No but it is not clear what you are trying to accomplish, that is why a
URL is aways useful. Even a failed attempt can be revealing.

Fair enough. This is what I'm trying to do. Please note that it only works
properly in IE, however.

http://web.melancholy.org:8081/CSSTest/ch_home.html

Are this images content or just decoration? If the latter then it should
be background images! Then nested DIVs could work

Decoration. But once you see the above page, particularly the source,
you'll better see what I'm trying to accomplish. The statues at the top
left/right rest atop a 'border' image that repeats all the way to the bottom
of the page regardless of how much text is actually on that page. Because
of that repitition, it can't be a background image. But because it is
actually 4 images, it can't (at least, I don't think) just be nested DIVs.

thnx,
Christoph

 

[Jonathan N. Little]

Fair enough. This is what I'm trying to do. Please note that it only works
properly in IE, however.

http://web.melancholy.org:8081/CSSTest/ch_home.html


Decoration. But once you see the above page, particularly the source,
you'll better see what I'm trying to accomplish. The statues at the top
left/right rest atop a 'border' image that repeats all the way to the bottom
of the page regardless of how much text is actually on that page. Because
of that repitition, it can't be a background image. But because it is
actually 4 images, it can't (at least, I don't think) just be nested DIVs.

Wow, doesn't even display any images except in IE!

Well, then I would do it as my last "bookends" example with the
"bookends" image as your repeated columns then the top figurines would
be absolute positioned images:

#leftMonk, #rightMonk { display: block; position: absolute; }

#leftMonk { top: 0; left: 0; }

/* Replace [NN] with the width of you image to place top-right corner */
#rightMonk { top: 0; left: 100%; margin-left: -[NN]px; }

And at the very start of you document add:

<img id="leftMonk" src="A.jpg" alt="Left Figure">
<img id="rightMonk" src="B.jpg" alt="Right Figure">
....

This would work in IE and *other* browsers. Also fix some markup errors.
Dump the table layout. Add doc type at very top:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">


remove the pseudo-XHTML formating, e.g.:
<link rel="stylesheet" type="text/css" href="./ch_home.css"/>
^
DELETE

<link rel="stylesheet" type="text/css" href="./ch_home.css">

 

[Christoph]

Wow, doesn't even display any images except in IE!

Yes, I know. That is one of my (very many) problems.

Well, then I would do it as my last "bookends" example with the "bookends"
image as your repeated columns then the top figurines would be absolute
positioned images:

Ok, I implemented all your recommendations but I must have done
something wrong.

http://web.melancholy.org:8081/CSSTest/ch_home.html

The image on the left is obscuring some of the text. Also, the border
images are getting broken up and do not form one continuous, fluid
border. And for some reason, it's still not working right in Mozilla.
But at least it's showing the images...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

If I add this to the top of the document, any text that is not in the <p>
tag inexplicably disappears.

I must be doing something wrong. I'm just not sure what...

Thank you very much for your time and assistance!

thnx,
Christoph

 

[Beauregard T. Shagnasty]

Christoph wrote:
....

If I add this to the top of the document, any text that is not in the <p>
tag inexplicably disappears.

In Firefox and Opera, your blah blah text is all below the images.

I must be doing something wrong. I'm just not sure what...

One thing I notice is you need to remove the HTML from your CSS file.
That could cause the browser to ignore the entire file.

<STYLE TYPE="text/css">
<!--
and
-->
</STYLE>

Regarding your choice of font sizing (points are for printing) and font
family, have a read of this:
http://k75s.home.att.net/fontsize.html

You haven't assigned a background color so I see my ugly default purple.

 

[Christoph]

One thing I notice is you need to remove the HTML from your CSS file.

That could cause the browser to ignore the entire file.
<STYLE TYPE="text/css">
<!--
and
-->
</STYLE>

Removing the above made it look better in Firefox.

Regarding your choice of font sizing (points are for printing) and font
family, have a read of this:
http://k75s.home.att.net/fontsize.html
You haven't assigned a background color so I see my ugly default purple.

Thanks for your pointers. Suggestions noted. However, my main concern
is to get the images on the left and right margins to display as desired
using
just CSS. This is what I'm going for:

http://web.melancholy.org:8081/CSSTest/ch_home_table.html

but it's using tables and is only visible in IE (bad).

thnx,
Christoph

 

[Jonathan N. Little]

Yes, I know. That is one of my (very many) problems.


Ok, I implemented all your recommendations but I must have done
something wrong.

http://web.melancholy.org:8081/CSSTest/ch_home.html

The image on the left is obscuring some of the text. Also, the border
images are getting broken up and do not form one continuous, fluid
border. And for some reason, it's still not working right in Mozilla.
But at least it's showing the images...

Sorry Christoph I confused myself, it was not the 'bookends' example but
the following one with the 'lefty' and 'righty' nested DIVs:

Here is a mockup of your site to show you, CSS in in the HEAD and
annotated for you:

http://www.littleworksstudio.com/temp/usenet/alt.html.20060906.html

I think this is what you are after...

 

[Christoph]

Sorry Christoph I confused myself, it was not the 'bookends' example but

the following one with the 'lefty' and 'righty' nested DIVs:
Here is a mockup of your site to show you, CSS in in the HEAD and
annotated for you:
http://www.littleworksstudio.com/temp/usenet/alt.html.20060906.html
I think this is what you are after...

Exactly what I was looking for! Thank you so much for your help! Now
I have a good starting point to look up exactly what and how you did this.


thnx,
Christoph

 

[Christoph]

Sorry Christoph I confused myself, it was not the 'bookends' example but

the following one with the 'lefty' and 'righty' nested DIVs:
Here is a mockup of your site to show you, CSS in in the HEAD and
annotated for you:
http://www.littleworksstudio.com/temp/usenet/alt.html.20060906.html
I think this is what you are after...

I'm curious, why is it if I take the style definition out of the html page,
put
it into a seperate CSS page and link to that page

<link rel="stylesheet" type="text/css" href="ch_home.css">

it doesn't look like it does when the style definition is part of the
original
page? What's going on? I didn't change any of the style definition. It
was just a cut and paste into the .css file. Is my link tag wrong somehow?

thnx,
Christoph

 

[Chris F.A. Johnson]

I'm curious, why is it if I take the style definition out of the html page,
put
it into a seperate CSS page and link to that page

<link rel="stylesheet" type="text/css" href="ch_home.css">

it doesn't look like it does when the style definition is part of the
original
page? What's going on? I didn't change any of the style definition. It
was just a cut and paste into the .css file. Is my link tag wrong somehow?

What's different?

Did you put the <style> tags in the file? If so, remove them.

 

[dorayme]

I'm curious, why is it if I take the style definition out of the html page,
put
it into a seperate CSS page and link to that page

<link rel="stylesheet" type="text/css" href="ch_home.css">

it doesn't look like it does when the style definition is part of the
original
page? What's going on? I didn't change any of the style definition. It
was just a cut and paste into the .css file. Is my link tag wrong somehow?

Perhaps you could provide a url to show the comparison. When you
say you cut and paste, did you cut from the css style in the head
of one doc? And did you cut from between the style tags, avoiding
the tags themselves (these don't go to a separate sheet)? And
have you got any other css sheets linked to in your html head
that might be causing inheritance effects... As you can see, a
specific up to date url is needed for you to receive good help.

 

[Christoph]

Did you put the <style> tags in the file? If so, remove them.

That was exactly it. <sheepish grin>

Thanks!

thnx,
Christoph