after spending several hours yesterday trying to find that drop cap thread i knew i had seen before
i thought it might be nice to have ONE thread where we can all post WORKING code snippets that have been tested, for specific effects or workarounds, so that they are easy to find and use by everyone.
please mention briefly the function of the code (i.e. "Drop Caps") and give the (x)html code and the css code, and a link to the original thread if there was a discussion about the problem.
to start with, here is the
drop cap code from
this thread (thanks jellby, peter sorotkin, brewt, llasram, kovid, and everybody else who worked on this tricky problem !!)
xhtml :
Quote:
<p class="initial"><span class="drop">A</span><span class="first
afterA">ntes</span> de enseñar el primer cabo de nuestra...</p>
|
Linking to style.css:
Quote:
p.initial {
text-indent: 0;
}
span.drop {
font-size: 400%;
font-weight: bold;
line-height: 1;
height: 1em;
float: left;
margin: -0.1em 0.125em -0.1em 0.25em;
}
span.first {
margin-left: -0.5em;
white-space: pre;
}
span.afterA {
margin-left: -1.0em;
}
span.afterL {
margin-left: -1.2em
}
p.initial + p {
clear: left;
}
span.predrop {
font-size: 25%;
font-weight: normal;
vertical-align: top;
line-height: 1.9;
}
|
further explanation from jellby in post #2 just below.