Headline with border line behind type?
Julie
I'm trying to build subheads that look sort of like this:
---- SERVICE OPTIONS
----------------------------------------------------------------------------
Essentially, a line, type on top, with white to block out the line
behind the type.
I have this:
<div style="border-top:1px solid black;">
<div style="background-color:white;line-height:0;margin-left:
6px;margin-right:6px;font-family:Trebuchet MS;font-size:14px;">SERVICE
OPTIONS</div>
<div>
...which puts the line behind the type like I want, but since the line-
height for the type is 0, the height of the white box is 0, and so
doesn't block the line out behind the type.
Does anyone know of a way to do this? I've tried every variation I
could think of, and couldn't come up with a Google search with the
right keywords to find an example on a web page. (Or if this is the
wrong newsgroup, could someone point me to the right one?)
Thanks,
Julie
Jukka K. Korpela
> I'm trying to build subheads that look sort of like this:
>
> ---- SERVICE OPTIONS
> ----------------------------------------------------------------------------
This is bit difficult to visualize, since Usenet software tends to break
lines. I guess you mean
---- SERVICE OPTIONS ------
with a continuous line instead of consecutive "-" characters, extending to
the right.
> Essentially, a line, type on top, with white to block out the line
> behind the type.
Well I _guess_ that means the same...
> I have this:
> <div style="border-top:1px solid black;">
> <div style="background-color:white;line-height:0;margin-left:
> 6px;margin-right:6px;font-family:Trebuchet MS;font-size:14px;">SERVICE
> OPTIONS</div>
> <div>
>
> ...which puts the line behind the type like I want, but since the
> line- height for the type is 0, the height of the white box is 0, and
> so doesn't block the line out behind the type.
That's rather contrived markup, unnecessarily dependent on specific sizes in
pixels, and doesn't reallu achieve the goal, as you say.
I'd start from the logical markup. This is probably supposed to be a heading
of some level, let's say 2nd level, for definiteness, so I'd write
<h2>Service options</h2>
We may need to make the markup somewhat more tricky, but this will be seen.
What you describe looks really like a background image rather than anything
else. So lets create a very simple image for that. At the extreme, it could
be a single-pixel GIF of the desired color. (A short horizontal line would
be slightly more efficient in terms of rendering time.) Then you just raise
it to level of half the font size and make it "copy" tile in the horizontal
direction:
h2 { background: url(dot.gif) 0.5em repeat-x; }
Fine, but now the background is there even behind the text content. So this
is where we might add artificial markup, say
<h2><span class="h2text">Service options</span></h2>
And then you just set a specific non-transparent background (and content
color) for that inner element. The rest is fine-tuning like specifying font
size (if you insist), removing default rendering features of headings (if
desired), setting up padding, etc., resulting in e.g.
h2 {
background: url(dot.gif) 0.5em repeat-x;
margin: 0;
font-size: 100%;
font-weight: normal;
text-transform: uppercase;
font-family:Trebuchet MS;
font-size: 14px;
}
.h2text {
background: white;
color: black;
padding: 0 0.2em;
margin-left: 2em;
}
--
Yucca, http://www.cs.tut.fi/~jkorpela/
dorayme
<14bb87dc-e04d-4214...@p19g2000vbq.googlegroups.com>,
Julie <julie....@gmail.com> wrote:
> Hi, all:
>
> I'm trying to build subheads that look sort of like this:
>
> ---- SERVICE OPTIONS
> ----------------------------------------------------------------------------
>
> Essentially, a line, type on top, with white to block out the line
> behind the type.
>
...
>
> Does anyone know of a way to do this?
<http://dorayme.netweaver.com.au/julie.html>
--
dorayme
Julie
> In article
> <14bb87dc-e04d-4214-ae5e-2f8b7020d...@p19g2000vbq.googlegroups.com>,
>
>
>
> Julie <julie.sie...@gmail.com> wrote:
> > Hi, all:
>
> > I'm trying to build subheads that look sort of like this:
>
Yeah, there was lots of stuff in the style tag that didn't need to be
there - it's from a document I'm building with 40-50 suggested subhead
styles, which is why it's not built as an actual style sheet - but I
was going for the most simple markup I could that was copy/paste so
people could see.
Thanks. Graphics seems to be the ticket. I find that funny because the
whole point of the site redesign is to dump the graphics...but this is
a tiny one! Anyway, apparently some sort of mental block on my part.
Thanks again!
Julie
rf
> Hi, all:
>
> I'm trying to build subheads that look sort of like this:
>
> ---- SERVICE OPTIONS
> ----------------------------------------------------------------------------
>
http://barefile.com.au/test/julie.html
No graphics.
dorayme
"rf" <r...@z.invalid> wrote:
Fair enough. It looks a bit different in alignment in Opera but who uses
Opera that it would matter! Adrienne. And she would be happy.
But it is a very serious matter in MacIE where your border is over the
top.
Line-height: 0 and anything under 1 has always seemed to me to be a
tricky cross browser proposition.
Even I had to get a smidgin over 0 to pull FF into line on my bg pic
attempt, that surprised me! It is almost comical, get the css up in web
developer up on FF and change my line-height from 0.1 to 0 and the line
disappears. I bet that is unpredictable on the CSS2.1 specs.
<http://dorayme.netweaver.com.au/julie.html>
--
dorayme
rf
"dorayme" <dorayme...@optusnet.com.au> wrote in message
news:doraymeRidThis-2A8...@news.albasani.net...
> In article <OEgWm.62783$ze1....@news-server.bigpond.net.au>,
> "rf" <r...@z.invalid> wrote:
>
>> Julie wrote:
>> > Hi, all:
>> >
>> > I'm trying to build subheads that look sort of like this:
>> >
>> > ---- SERVICE OPTIONS
>> > ----------------------------------------------------------------------------
>> >
>>
>> http://barefile.com.au/test/julie.html
>>
>> No graphics.
>
> Fair enough. It looks a bit different in alignment in Opera but who uses
> Opera that it would matter! Adrienne. And she would be happy.
>
> But it is a very serious matter in MacIE where your border is over the
> top.
Does anybody still use that? IIRC not even Microsoft does. In any case it's
wrong.
Added background-color on the span. Does that make any difference?
> Line-height: 0 and anything under 1 has always seemed to me to be a
> tricky cross browser proposition.
Yep. I had it set to 0 as I wanted both top and bottom border (a different
colour, a ridge effect) until I looked at it with Safari, where line-height
0 is ignored and the h3 was actually about .3em high. Took out the bottom
border and forgot about line-height.
Have now set it to 1px.
> Even I had to get a smidgin over 0 to pull FF into line on my bg pic
> attempt, that surprised me! It is almost comical, get the css up in web
> developer up on FF and change my line-height from 0.1 to 0 and the line
> disappears. I bet that is unpredictable on the CSS2.1 specs.
That figures. No line height, nowhere to put a background.
dorayme
"rf" <r...@z.invalid> wrote:
> "dorayme" <dorayme...@optusnet.com.au> wrote in message
> news:doraymeRidThis-2A8...@news.albasani.net...
> > In article <OEgWm.62783$ze1....@news-server.bigpond.net.au>,
> > "rf" <r...@z.invalid> wrote:
> >
> >> Julie wrote:
> >> > Hi, all:
> >> >
> >> > I'm trying to build subheads that look sort of like this:
> >> >
> >> > ---- SERVICE OPTIONS
> >> > -------------------------------------------------------------------------
> >> > ---
> >> >
> >>
> >> http://barefile.com.au/test/julie.html
> >>
> >> No graphics.
> >
> > Fair enough. It looks a bit different in alignment in Opera but who uses
> > Opera that it would matter! Adrienne. And she would be happy.
> >
> > But it is a very serious matter in MacIE where your border is over the
> > top.
>
> Does anybody still use that? IIRC not even Microsoft does. In any case it's
> wrong.
Oh no, almost no one any more, I keep it as a pet.
>
> Added background-color on the span. Does that make any difference?
>
> > Line-height: 0 and anything under 1 has always seemed to me to be a
> > tricky cross browser proposition.
>
> Yep. I had it set to 0 as I wanted both top and bottom border (a different
> colour, a ridge effect) until I looked at it with Safari, where line-height
> 0 is ignored and the h3 was actually about .3em high. Took out the bottom
> border and forgot about line-height.
>
> Have now set it to 1px.
>
Yours looks *best* in Mac Opera rather than the other Mac browsers now.
A bit off vertical in some other browsers, but no matter.
> > Even I had to get a smidgin over 0 to pull FF into line on my bg pic
> > attempt, that surprised me! It is almost comical, get the css up in web
> > developer up on FF and change my line-height from 0.1 to 0 and the line
> > disappears. I bet that is unpredictable on the CSS2.1 specs.
>
> That figures. No line height, nowhere to put a background.
In a way I guess but all (or most) browsers find room for the text in a
formula about the minimal height of the line boxes in spite of zero
specified line-height. Perhaps the browser makers did not find 10.8.1 in
CSS 2.1 as clear as it could be?
--
dorayme