HTML and CSS Reference
In-Depth Information
The same method is applied for iconography like PDF icons next to links
that match the selector
a.pdf
or
a[href~=.pdf]
or warning signs before
any
p.note
.
Connecting Backgrounds
Elements such as section headers or tabbed boxes may have fancy
borders that “open up” into the content below like the tab on a folder.
Because the position of the tab on that folder varies, the opening in the
top of the content area needs to change. Here again you can use visual
tricks to make the elements backgrounds overlap. The following sample
(shown in
Figure 8.2
) uses borders, background colors, and relative posi-
tioning to shift the header into the content that follows and create the
appearance of a nonrectangular border:
h1 {
position: relative;
top: 3px; /* shift down the size of the border */
background: #fff;
margin: 0 0 0 20%;
padding-bottom: 3px; /* retain the space of the missing
border*/
border: 3px solid #999;
border-bottom: none;
}
h1+p {
background: #fff;
margin: 0;
padding: 1em;
border: 3px solid #999;
}
[...]
