View Single Post
Old 09-17-2013, 12:59 PM   #7
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,528
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by grannyGrumpy View Post
The attached file is a graphics mock-up of what I want to accomplish. I want the characters to "bleed" off the edges of the rectangular background.

In the CSS, I have set the background color to black, and the font to white, and played around with floats, padding (negative padding), etc, but without success.

Is this even possible with CSS? Or must I work out a solution using a graphic image for the background?

Does anyone have suggestions?
Well, after a bit of work, I could find something that ALSO works in ADE . In your .css stylesheet, write:

Code:
h2 {
  height: 60px;
  margin-bottom: 40px;
  background: black;
}
                           
.text {
  float: left;
  width: 15%; /* this in linked with the left margin below */
  line-height: 100%;
  font-family: sans-serif;
  font-size: 94px;
  text-align: center;
  color: white;
  margin: -10px 0 -10px 42.5%;
}
And in your .html file write:

Code:
<h2><span class="text">23</span></h2>
The text is "floated-centered". I do that by asigning a width to the text block (in this case is 15% but feel free of changing it) and setting a left margin according to that width (in this case, since the width is 15% then the margin-left is [100%-15%]/2 = 42.5%). Also you can play with the font-size and the height of the header (h2).

That's all

Below you can see a screenshot of my ADE and I attach the respective ePub.

Regards
Rubén
Attached Thumbnails
Click image for larger version

Name:	ChapterHeading.jpg
Views:	275
Size:	74.6 KB
ID:	111243  
Attached Files
File Type: epub ChapterHeading.epub (2.7 KB, 228 views)

Last edited by RbnJrg; 09-17-2013 at 01:14 PM.
RbnJrg is offline   Reply With Quote