On 3/07/2014 1:19 PM, Elli Vizcaino wrote:
Hello CSS Discuss,
I'm presently working on building out a responsive redesign of my site
and in order to keep the HTML semantic, I can't use divs inside of my
H1. I have an H1 tag with nested spans and ems that are floated.
However, the spans and ems don't behave like divs do when
floated--shrink wrapping to the contained content. I would love to be
able to replicate this same shrink wrap effect on the ems so I have
better control of their placement and alignment with the other text
elements on the page. The ems and spans seem to have inherent padding
I can not control. Hoping someone has some suggestions on a way to do
what I'd like or can suggest appropriate markup that will behave like
I want it to.
Please take a look at the
RE
SPON
SIVE
text on the following page: http://www.e7flux.com/e7flux2014/2222.html
Regards,
Elli Vizcaino
http://www.e7flux.com
Hello Elli. The padding is really line-height.
Insert the following into your CSS or something like it (the border is
to help you see).
em {border: 1px solid red; line-height: 0.8; }
em+em {border: 1px solid red; line-height: 0.9; }
em+em+em { line-height: 1; }
And remove or alter the margins below where I have inserted REMOVE or
ALTER. I commented them out before using the above CSS.
.re {
display: block;
/* margin: -02.89855072463768% 0 0; -16px/552px 0 0 REMOVE or ALTER */
text-align: right;
font-size: 32.25em; /* 516px/16px */
letter-spacing: -17px;
}
.vamp, .ing {
clear: both;
display: block;
text-align: right;
}
.vamp {
font-size: 12.75em; /* 204px/16px */
/* margin-top: -04.52898550724638%; -25px/552px REMOVE or ALTER */
/* margin-bottom: 06.70289855072464%; 37px/552px REMOVE or ALTER */
}
.ing {
font-size: 9em; /* 144px/16px */
margin-bottom: 11.05072463768116%; /* 61px/552px */
}
You have a missing </span> tag.
Alan
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
