GNOME.org
 

CSS changes

While playing round with the new site templates, I noticed that the size of the header is specified in pixels, when its size should be relative to the metrics of the text in the header.
At default font size, this isn't very noticable, but at large font sizes and with small screens, the links in the header can wrap to a single line, and overlap the main content of the page. Similarly, with small font sizes, there is a noticable gap between the header and the main content.
I did a bit of hacking of the CSS to come up with the attached mockup. With this design, the header CSS box is sized according to the text it contains, and the main content starts just below the header. 

Some downsides to these changes are:

  1. the header must come first in the document, rather than at the
end. I don't see this as much of a problem. * Pro: the header will load and display very quickly when people view a page, so they know something is hapenning. With the current setup, you get a large blank space at the 
           top of the page when viewing large documents over slow
           connections.
         * Pro: we can position the content below the header properly,
           so people using large fonts or small screens don't see
           overlapping text.
         * Pro: the user won't see weird behaviour when selecting
           regions of text that span the header and main content, since
           the visual layout more closely matches the logical layout.
         * Con: People using lynx or audio browsers will see the header
           before the content.  Note that our header is much smaller
           than most sites, so I don't personally see this as a big
           problem -- the majority of navigation links are in the sidebar.
  2. There is an extra DIV around the main content and sidebar.  This
     was necessary to correctly position those elements relative to the
     header.


Any comments/suggestions?

James.

--
Email: james daa com au
WWW:   http://www.daa.com.au/~james/
Title: Test
main content
main content
main content
main content
main content
main content
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]