09-18-2012, 01:28 PM | #1 |
Addict
Posts: 320
Karma: 56788
Join Date: Jun 2011
Device: Kindle
|
CSS Question: creating borders...
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.
|
09-18-2012, 01:36 PM | #2 |
Grand Sorcerer
Posts: 11,470
Karma: 13095790
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7
|
Our wiki as a good discussion on using Borders around a page paragraph. See https://wiki.mobileread.com/wiki/CSS#Boxes
Dale |
Advert | |
|
09-18-2012, 01:44 PM | #3 | |
Well trained by Cats
Posts: 29,869
Karma: 55267620
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
Quote:
Look at Section 8 (box model) of CSS2 Your text including the <br /> needs to be inside the block |
|
09-18-2012, 02:04 PM | #4 |
Addict
Posts: 320
Karma: 56788
Join Date: Jun 2011
Device: Kindle
|
Like a jerk, i realized i hadn't actually attached an image... d'oh!
in the past, i've used: Code:
.border { border-style: solid; border-width: 3px; padding-left: 5px; padding-right: 5px; padding-top: 2px; padding-bottom: 2px; } 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? Last edited by ElMiko; 09-18-2012 at 02:21 PM. |
09-18-2012, 03:10 PM | #5 | |
Well trained by Cats
Posts: 29,869
Karma: 55267620
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
Quote:
|
|
Advert | |
|
09-18-2012, 04:23 PM | #6 |
Grand Sorcerer
Posts: 11,470
Karma: 13095790
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7
|
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 |
09-18-2012, 04:31 PM | #7 |
Addict
Posts: 320
Karma: 56788
Join Date: Jun 2011
Device: Kindle
|
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. |
09-18-2012, 04:39 PM | #8 | |
Addict
Posts: 320
Karma: 56788
Join Date: Jun 2011
Device: Kindle
|
Quote:
|
|
09-18-2012, 04:59 PM | #9 |
Well trained by Cats
Posts: 29,869
Karma: 55267620
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
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? |
09-18-2012, 05:47 PM | #10 |
Addict
Posts: 320
Karma: 56788
Join Date: Jun 2011
Device: Kindle
|
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.
|
09-18-2012, 06:05 PM | #11 | |
Grand Sorcerer
Posts: 11,470
Karma: 13095790
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7
|
Quote:
Dale |
|
09-19-2012, 04:04 AM | #12 |
frumious Bandersnatch
Posts: 7,516
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
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. |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
CSS/HTML question | ElMiko | Sigil | 54 | 10-23-2012 12:39 PM |
CSS Question | jackibar | Sigil | 24 | 03-01-2012 09:12 AM |
CSS question | crutledge | Workshop | 17 | 12-17-2011 07:52 AM |
CSS Question | AppleTard | Calibre | 1 | 06-12-2011 12:07 AM |
Question about creating columns | Jabby | Library Management | 17 | 02-08-2011 03:23 PM |