I know that there is an easy solution for this if I was trying to do this for all media, simply put the main content in an outer div. But (a) the content then flows around the nav div, and (b) I want the conventional fixed width layout for the normal "screen" media type.
-----Original Message----- From: [email protected] [mailto:[email protected]] On Behalf Of Peter Coates Sent: June-20-10 11:54 AM To: 'css-d' Subject: [css-d] liquid design for small screens On a regular screen, the norm appear to be to define a container div of a fixed width, put in a float left nav bar, etc, etc. On a small screen, this really doesn't cut it. I'm trying to make a couple of style sheets for small screens that have a family likeness to the "normal" one, but which are friendly for small screens, one landscape, one portrait. This means my header looks something along the lines of: <link rel="stylesheet" media="screen" type="text/css" href="../new/screen.css"> <![if !IE]> <link rel="stylesheet" media="only screen and (max-width: 480px)" type="text/css" href="../new/handheld.css"> <link rel="stylesheet" media="only screen and (max-height: 480px) and (orientation:landscape)" type="text/css" href="../new/handheldl.css"> <![endif]> <link rel="stylesheet" media="print" type="text/css" href="../new/print.css"> <!--[if IE]> <link rel="stylesheet" href="../new/ie.css" type="text/css"> <![endif]--> Screen.css is the base style sheet, handheld.css is for small portrait screens, handheldl.css is for small landscape screens, and print.css is for printers. I suppose if I was really doing this right, I'd do media types TV, braile, speech, ... but no, or at least not yet. Now for portrait screens, it makes sense to put the navigation frills along the top (or bottom). For landscape screens, it makes sense to put them on the left (or right). I want a nice tight little menu bar on the left, fixed width, and I want the main container to occupy the rest of the width. I do not see how to do that. I do not know the screen width, so I do not know how much to subtract. It would be nice if I could define the main container as {float:left;width:all-the-rest}. In fact, all the rest would be a useful interpretation of "auto", but that is not what auto means here. This cannot be a new problem. What is the solution. I hope it is nice and simple. I don't mind feeling stupid, and I dislike complexity and contrapted solutions. Peter ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
