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: 299
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: 9,652
Karma: 5071814
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2
Our wiki as a good discussion on using Borders around a page paragraph. See http://wiki.mobileread.com/wiki/CSS#Boxes

Dale
DaleDe is offline   Reply With Quote
Old 09-18-2012, 01:44 PM   #3
theducks
Grand Sorcerer
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: 14,848
Karma: 5654321
Join Date: Aug 2009
Location: (The original) Silicon Valley, USA
Device: Galaxy Tab 2, Astak Pocket Pro, K4NT
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, 47 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: 299
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:	70
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
Grand Sorcerer
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: 14,848
Karma: 5654321
Join Date: Aug 2009
Location: (The original) Silicon Valley, USA
Device: Galaxy Tab 2, Astak Pocket Pro, K4NT
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
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: 9,652
Karma: 5071814
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2
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: 299
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:	61
Size:	41.5 KB
ID:	92562   Click image for larger version

Name:	Untitled 324.jpg
Views:	65
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: 299
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
Grand Sorcerer
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: 14,848
Karma: 5654321
Join Date: Aug 2009
Location: (The original) Silicon Valley, USA
Device: Galaxy Tab 2, Astak Pocket Pro, K4NT
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: 299
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: 9,652
Karma: 5071814
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2
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: 6,194
Karma: 4800739
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 online now   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 12:17 PM.


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