CSS Question: creating borders...

[ElMiko]

I am at my wits end. I want to create a border that will look like the attached image. Through some trial-and-error, I figured out that when it's a single line, I can get that result by putting the border style as a <span> within the <p> tags. but with two lines (or even one line broken by a <br />) I'm at a loss. The best I've been able to do is a border that extends all the way to the top and side edges of the viewing page, but that's not what I want.

[DaleDe]

Our wiki as a good discussion on using Borders around a page paragraph. See http://wiki.mobileread.com/wiki/CSS#Boxes

Dale

[theducks]

Originally Posted by ElMiko

I am at my wits end. I want to create a border that will look like the attached image. Through some trial-and-error, I figured out that when it's a single line, I can get that result by putting the border style as a <span> within the <p> tags. but with two lines (or even one line broken by a <br />) I'm at a loss. The best I've been able to do is a border that extends all the way to the top and side edges of the viewing page, but that's not what I want.

Block, padding and Margins (and Border ) come into play

Look at Section 8 (box model) of CSS2
Your text including the <br /> needs to be inside the block

[ElMiko]

Like a jerk, i realized i hadn't actually attached an image... d'oh!

in the past, i've used:

.border {
	border-style: solid;
	border-width: 3px;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 2px;
	padding-bottom: 2px;
	}

to get the desired border around a single line of text (three or four words). But I'm not able to duplicate the effect on multiple lines of code or broken single lines.

To be clear, the image below is what I'm trying to achieve... not what I've actually achieved (the best I've been able to do is similar to the file attached by theducks.)

EDIT: I think I see where I'm getting tripped up. I'm trying to get the left and right parts of the border to be defined by their proximity to the text, not by their proximity to the margins (since the distance between the two margins varies based on the screen size). Any ideas?

[theducks]

Originally Posted by ElMiko

Like a jerk, i realized i hadn't actually attached an image... d'oh!

in the past, i've used:

.border {
	border-style: solid;
	border-width: 3px;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 2px;
	padding-bottom: 2px;
	}

to get the desired border around a single line of text (three or four words). But I'm not able to duplicate the effect on multiple lines of code or broken single lines.

To be clear, the image below is what I'm trying to achieve... not what I've actually achieved (the best I've been able to do is similar to the file attached by theducks.)

EDIT: I think I see where I'm getting tripped up. I'm trying to get the left and right parts of the border to be defined by their proximity to the text, not by their proximity to the margins (since the distance between the two margins varies based on the screen size). Any ideas?

use Percentages for Margin and fixed for padding?

[DaleDe]

From the wiki

Values are calculated with reference to a width property, which if not specified defaults to the page width or the previous width. There are 'margin-width' and 'padding-width' properties which can be specified with length units or as a percentage. Auto is also allowed which is the same as not specifying a width.

Dale

[ElMiko]

Originally Posted by theducks

use Percentages for Margin and fixed for padding?

I'd been trying to use your template, but percentages really just do the same thing as px or em... they define the border based on the proximity to the edge of the "page" not based on the proximity to the word. Whereas in the example i gave for a single line of text, three or four words long, where the style applied to a <span> within the <p> tags, the border is determined by its proximity to the text.

eg.

<p><span class="border">Some Short Text</span></p>

I've attached to images of the style (as i wrote it in my previous post) i used, in action. The first is when it works (single line, no breaks), the second is when it doesn't.

[ElMiko]

Originally Posted by DaleDe

From the wiki

Values are calculated with reference to a width property, which if not specified defaults to the page width or the previous width. There are 'margin-width' and 'padding-width' properties which can be specified with length units or as a percentage. Auto is also allowed which is the same as not specifying a width.

Dale

I'm sorry, but I'm not following the practical consequence of this... how is margin-width distinct from margin -top -bottom -right and -left values?

[theducks]

Why are you using a Span?
If you note my sample, I use a BR inside with no ill effects Or is it, that you want 2 boxes?

[ElMiko]

Originally Posted by theducks

Why are you using a Span?
If you note my sample, I use a BR inside with no ill effects Or is it, that you want 2 boxes?

I apologize, I'm obviously not being clear. Your example uses margins that are determined by the borders of the page, so as you change the size of the page, the distance between the border and the text also changes. I want the border to be defined by it's proximity to the TEXT, as in the span-based example. If you expand or contract the window/page in your example, the size of the box changes. In contrast, the only way for a span-based border to change is if the size of the screen is smaller than the text in the line, otherwise, the border dimensions remain fixed, relative to the text.

[DaleDe]

Originally Posted by ElMiko

I'm sorry, but I'm not following the practical consequence of this... how is margin-width distinct from margin -top -bottom -right and -left values?

Width is the total width of the page by default but it can be less. Think of it as a viewport. for example the width could be 80% of the page width. Margins are measured from that point. So they are on top of the width. The nice thing about width it is even spaced from the centered page so you can set it based on how wide you want the text to be.

Dale

[Jellby]

There's a conflict there, because normal block elements (a paragraph) have no "natural" width (the width of their contents), rather the contents are adapted to the container's width (the width of the page, minus margins etc.)

If you want the width of the element to be adapted to its contents, I'm afraid you have to use a table (you can "fake" it using display:table), an inline-block would work too, but it's not supported by the spec.