Re: Controling structure with CSS

Tonico Strasser wrote:
> Another example: for screen I want to position some text on the top of 
> the page, for print I want the same text at the bottom. Is this possible 
> with CSS 3?

is absolute positioning not possible for some reason? otherwise you 
could simply do something to the effect of:

@media screen {
  #text-box { position:absolute; top:0 }
}
@media print {
  #text-box { position:absolute; bottom:0 }
}

assuming that #text-box's first positioned ancestor spans the full 
length of the document.

In fact, most cases of reordering can be handled using absolute and 
relative positioning.  It's certainly nit-picky (often you'll need to 
know exact heights or widths), but it can be done. Taking your previous 
"icon" example, you could arrange it as follows:

html:
  <h1>Foo Bar</h1>
  <div class="icon">(Question)</div>

css:
h1 {
  height:40px; overflow:clip;
  position:relative; top:20px;
}
span.icon {
  height:20px; overflow:clip;
  position:relative; top:-40px;
}

This is of course assuming that your fonts will fit properly in the 
specified dimensions... It would probably be better to have a containing 
block with a font-size set, and then specify the childrens' font-sizes 
and box offsets with em's.  Nit-picky, but do-able.

--Maxwell Terpstra

Received on Friday, 16 April 2004 03:30:11 UTC