Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Software > Sigil

Notices

Reply
 
Thread Tools Search this Thread
Old 09-18-2012, 01:28 PM   #1
ElMiko
Addict
ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.
 
ElMiko's Avatar
 
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.
ElMiko is offline   Reply With Quote
Old 09-18-2012, 01:36 PM   #2
DaleDe
Grand Sorcerer
DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.
 
DaleDe's Avatar
 
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
DaleDe is offline   Reply With Quote
Advert
Old 09-18-2012, 01:44 PM   #3
theducks
Well trained by Cats
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 29,689
Karma: 54369090
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
Quote:
Originally Posted by ElMiko View Post
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
Attached Files
File Type: epub wordinboxTEST.epub (1.9 KB, 160 views)
theducks is offline   Reply With Quote
Old 09-18-2012, 02:04 PM   #4
ElMiko
Addict
ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.
 
ElMiko's Avatar
 
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 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?
Attached Thumbnails
Click image for larger version

Name:	Untitled 322.jpg
Views:	219
Size:	40.3 KB
ID:	92553  

Last edited by ElMiko; 09-18-2012 at 02:21 PM.
ElMiko is offline   Reply With Quote
Old 09-18-2012, 03:10 PM   #5
theducks
Well trained by Cats
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 29,689
Karma: 54369090
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
Quote:
Originally Posted by ElMiko View Post
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 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?
theducks is offline   Reply With Quote
Advert
Old 09-18-2012, 04:23 PM   #6
DaleDe
Grand Sorcerer
DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.
 
DaleDe's Avatar
 
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
DaleDe is offline   Reply With Quote
Old 09-18-2012, 04:31 PM   #7
ElMiko
Addict
ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.
 
ElMiko's Avatar
 
Posts: 320
Karma: 56788
Join Date: Jun 2011
Device: Kindle
Quote:
Originally Posted by theducks View Post
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.
Attached Thumbnails
Click image for larger version

Name:	Untitled 325.jpg
Views:	209
Size:	41.5 KB
ID:	92562   Click image for larger version

Name:	Untitled 324.jpg
Views:	234
Size:	44.5 KB
ID:	92563  
ElMiko is offline   Reply With Quote
Old 09-18-2012, 04:39 PM   #8
ElMiko
Addict
ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.
 
ElMiko's Avatar
 
Posts: 320
Karma: 56788
Join Date: Jun 2011
Device: Kindle
Quote:
Originally Posted by DaleDe View Post
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?
ElMiko is offline   Reply With Quote
Old 09-18-2012, 04:59 PM   #9
theducks
Well trained by Cats
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 29,689
Karma: 54369090
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?
theducks is offline   Reply With Quote
Old 09-18-2012, 05:47 PM   #10
ElMiko
Addict
ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.
 
ElMiko's Avatar
 
Posts: 320
Karma: 56788
Join Date: Jun 2011
Device: Kindle
Quote:
Originally Posted by theducks View Post
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.
ElMiko is offline   Reply With Quote
Old 09-18-2012, 06:05 PM   #11
DaleDe
Grand Sorcerer
DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.
 
DaleDe's Avatar
 
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:
Originally Posted by ElMiko View Post
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
DaleDe is offline   Reply With Quote
Old 09-19-2012, 04:04 AM   #12
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,514
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.
Jellby is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

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


All times are GMT -4. The time now is 04:56 PM.


MobileRead.com is a privately owned, operated and funded community.