Quote:
Originally Posted by grannyGrumpy
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