- From: <carl.myhill@ps.ge.com>
- Date: Wed, 13 Aug 2003 12:54:14 -0400
- To: w3c-wai-ig@w3.org
Hi all, (apologies for cross-posting this to [thelist] too)
Newbie here - my first post so I hope it's the normal sort of thing
discussed and I've not missed my answer in an FAQ somewhere. I'm quite new
to all this xhtml and css box model stuff but I'm trying! Any help would be
gratefully received.
My quest is to produce nice clean XHTML in a site which is also nice and
accessible. When I tested my original version of this with 36pt font
(simulating an extreme case for how a blind person might view the page [1]),
the whole <h1> wrapped fairly crudely. By changing this to display:inline I
was able to achieve nicer letter by letter wrapping and no longer needed to
specify a fixed width for the page to prevent horrible wrapping -
unfortunately this does not validate 'strict'. (I would also like to
indent the sub-title as it wraps to stay under the heading but couldn't
figure that out either.)
Would be very happy to have some help - I really want to get the xhtml
validated.
Cheers
Litsl.
[1] - 70% of registered blind people (UK) use their remaining partial site
to view webpages, albeit up close and with very thick lenses.
Whole thing is here...
http://www.impingtonswimmingclub.org.uk/index_css6.html (doesn't work on IE
Mac - float problems I expect)
Relevant CSS is...
============
#header {
position: relative;
/*width:700px;*/ /*prevents the logo and title floats wrapping and looking
horrible - would rather not use this though*/
padding-bottom: 1em;
margin-left: 17px;
}
#header_titleright {
padding: 1.5em 0 0 0;
}
#header_titleright_span h1 {
display: inline; /*works better inline
instead of the default block when the font size goes huge as it allows the
title to wrap letter by letter instead of en block*/
font-size: 180%;
}
/*would much prefer the subtitle to remain indented beneath the heading (H1)
when the browser is narrowed*/ #header_titleright_span p {
display: inline;
font-style:italic;
font-size: 80%;
}
HTML is here...
===============
<div id="header">
<div id="header_logoleft">
<a href="index.html"><img src="logo.jpg"
alt="Impington Swimming Club Logo" /></a>
</div>
<div id="header_titleright">
<span id="header_titleright_span">
<h1>Impington Swimming Club</h1>
<br /> <!--needed now because these are both now
inline elements-->
<p>A friendly Masters Swimming Club just north of Cambridge</p>
</span>
</div>
</div>
Received on Wednesday, 13 August 2003 12:55:25 UTC