<style>
#main{
width:60%;
float:right;
background-color:#FAA;
}
#sidebar{
width:200px;
background-color:#AAAAAA;
}
</style>
<body>
<div id="wrapper">
<div id="main">Main</div>
<div id="sidebar">Side</div>
</div>
</body>
Regards,
Dale
Dale Hurley
Consultant
CreateMy.com.au
Sydney Associate Network Representative
Internet email :
d...@createmy.com.au
Mobile : +61 434 735 167
http://www.linkedin.com/in/dalehurley
http://www.twitter.com/dalehurley
From: <wsg@webstandardsgroup.org>
To: <wsg@webstandardsgroup.org>
Date: 17/08/2009 06:00 PM
Subject: WSG Digest
*********************************************************************
WEB STANDARDS GROUP MAIL LIST DIGEST
*********************************************************************
From: Ben Davies <bendav...@he3.com.au>
Date: Mon, 17 Aug 2009 13:34:36 +1000
Subject: Fixed Sidebar Fluid Content - Source Order Limitations
Hi Everyone,
I am working on a site with a fixed sidebar panel and fluid content. After
some research I think I have discovered a CSS source order limitation
particular to this layout. Can anyone confirm whether this sounds correct:
- To put my content first in the markup, my content needs to be floated
(for
a following sidebar)
- My content is fluid, so I can not assign a width
- According http://css.maxdesign.com.au/floatutorial/introduction.htm you
must set an explicit width on a floated elemented except img tags as per
the
W3C (he references http://www.w3.org/TR/CSS2/visuren.html#floats, but I can
not find exact statement).
- Therefore my fluid content can not appear with in my markup, my fixed
width sidebar must appear first and be floated instead.
Does that sound right? Regardless of W3C I could not get my content to
remain fluid, come first in the markup and still allow my fixed-width
sidebar to float up beside it.
Thanks for any feedback.
Ben Davies
*********************************************************************
From: "Kepler Gelotte" <kep...@neighborwebmaster.com>
Date: Mon, 17 Aug 2009 00:09:07 -0400
Subject: RE: [WSG] Fixed Sidebar Fluid Content - Source Order Limitations
- To put my content first in the markup, my content needs to be floated
(for
a following sidebar)
- My content is fluid, so I can not assign a width
You may want to try max-width on your main content. I'm not sure if that
will work for you since you didn't post a link.
Best regards,
Kepler Gelotte
Neighbor Webmaster, Inc.
156 Normandy Dr., Piscataway, NJ 08854
<http://www.neighborwebmaster.com> www.neighborwebmaster.com
phone/fax: (732) 302-0904
*********************************************************************
From: Jens-Uwe Korff <jko...@fairfaxdigital.com.au>
Date: Mon, 17 Aug 2009 14:39:40 +1000
Subject: RE: [WSG] Strange Bottom Margin on Floated Elements I Can't Get
Rid of
Hi Cole,
you can also specify {vertical-align:bottom} for the images.
Cheers,
Jens
-----Original Message-----
Sent: Friday, August 14, 2009 4:02 PM
Subject: Re: [WSG] Strange Bottom Margin on Floated Elements I Can't Get
Rid
of
Hi Cole,
Try setting those images to 'display: block;'
div.thumbs img {display: block;}
The reason this works is detailed here:
https://developer.mozilla.org/en/Images, Tables, and Mysterious Gaps
HTH
The information contained in this e-mail message and any accompanying files
is or may be confidential. If you are not the intended recipient, any use,
dissemination, reliance, forwarding, printing or copying of this e-mail or
any attached files is unauthorised. This e-mail is subject to copyright.
No
part of it should be reproduced, adapted or communicated without the
writte
n consent of the copyright owner. If you have received this e-mail in error
please advise the sender immediately by return e-mail or telephone and
dele
te all copies. Fairfax does not guarantee the accuracy or completeness of
an
y information contained in this e-mail or attached files. Internet
communica
tions are not secure, therefore Fairfax does not accept legal
responsibility
for the contents of this message or attached files.
*********************************************************************
From: "Mark Huppert" <mark.hupp...@anu.edu.au>
Date: Mon, 17 Aug 2009 14:47:51 +1000
Subject: RE: [WSG] Fixed Sidebar Fluid Content - Source Order Limitations
Ben
This works ok - or have I misunderstood you? Maybe
the alignment isn't good enough for the 'big end of town' though.
<html><head>
<title>test</title>
<style type="text/css">
#cont {float:right;width:81%;border:1px solid red;}
#sidebar {float:left;width:200px;background-color:green;color:#ffffff;}
</style>
</head>
<body>
<div id="cont">content</div>
<div id="sidebar">ABC</div>
</body></html>
regards
Mark
=========================
===============
Mark Huppert
Library Web Development &
Integrated Library Management System Coordinator
Division of Information
R.G. Menzies Building (#2)
The Australian National University
ACTON ACT 0200
T: +61 02 6125 2752
F: +61 02 6125 4063
W: http://anulib.anu.edu.au/about/
CRICOS Provider #00120C
=========================
===============
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org]
On Behalf Of Ben Davies
Sent: Monday, 17 August 2009 1:35 PM
To: Web Standards Mailing List
Subject: [WSG] Fixed Sidebar Fluid Content - Source Order Limitations
Hi Everyone,
I am working on a site with a fixed sidebar panel and fluid content.
After some research I think I have discovered a CSS source order
limitation particular to this layout. Can anyone confirm whether this
sounds correct:
- To put my content first in the markup, my content needs to be floated
(for a following sidebar)
- My content is fluid, so I can not assign a width
- According http://css.maxdesign.com.au/floatutorial/introduction.htm
you must set an explicit width on a floated elemented except img tags as
per the W3C (he references
http://www.w3.org/TR/CSS2/visuren.html#floats, but I can not find exact
statement).
- Therefore my fluid content can not appear with in my markup, my fixed
width sidebar must appear first and be floated instead.
Does that sound right? Regardless of W3C I could not get my content to
remain fluid, come first in the markup and still allow my fixed-width
sidebar to float up beside it.
Thanks for any feedback.
Ben Davies
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
*******************************************************************
*********************************************************************
From: "Tim MacKay" <t...@deepend.com.au>
Date: Mon, 17 Aug 2009 15:18:35 +1000
Subject: table inside a dd?
Hi all,
Is it semantic markup to include a table of items ( in this case a
nutritional information table ) as the contents of a <dd> within a
definition list?
I am marking up product nutritional information and am thinking of doing it
like so:
<dl>
<dt> The Product </dt>
<dd> Paragraph blurb about the product </dd>
<dd>
<table>
<.etc>Tabular data of the nutritional information</.etc>
</table>
</dd>
</dl>
Is nesting the table within the def list valid markup?
Thanks J
Tim
*********************************************************************
From: Christian Snodgrass <csnodgrass3...@gmail.com>
Date: Mon, 17 Aug 2009 01:27:45 -0400
Subject: Re: [WSG] table inside a dd?
Certainly, as long as it's an appropriate usage of a table (which it
sounds like it is).
- Christian
Tim MacKay wrote:
>
> Hi all,
>
> Is it semantic markup to include a table of items ( in this case a
> nutritional information table ) as the contents of a <dd> within a
> definition list?
>
> I am marking up product nutritional information and am thinking of
> doing it like so:
>
> <dl>
>
> <dt> The Product </dt>
>
> <dd> Paragraph blurb about the product </dd>
>
> <dd>
>
> <table>
>
> <&etc>Tabular data of the nutritional information</&etc>
>
> </table>
>
> </dd>
>
> </dl>
>
> Is nesting the table within the def list valid markup?
>
> Thanks J
>
> Tim
>
>
> *******************************************************************
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: memberh...@webstandardsgroup.org
> *******************************************************************
--
Christian Snodgrass
CEO - Azure Ronin
http://www.arwebdesign.net
http://www.htmlblox.com
Phone: 859.816.7955
*********************************************************************
From: Ben Davies <bendav...@he3.com.au>
Date: Mon, 17 Aug 2009 16:13:40 +1000
Subject: Re: [WSG] Fixed Sidebar Fluid Content - Source Order Limitations
Hi Kepler,
>You may want to try max-width on your main content. I’m not sure if that
will work for you since you didn’t post a link.
I tried max- and min-width in a few combinations and could not get it
to work (and makes my content no longer fluid ).
Hi Mark
Thanks for the sample code. The problem with that approach is that if
the window is too small the sidebar will drop down. If it is too large
my content area will grow but I will introduce a big gap between the
sidebar and the content.
The markup below demonstrates what I currently have. Works great but I
suspect content-first source ordering is impossible:
<html><head>
<title>test</title>
<style type="text/css">
#cont {
padding:10px;
margin-left: 220px;
}
#sidebar {
float:left;
background: #DDDDDD;
margin: 10px;
margin-right:0px;
font-size:90%;
width:200px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="sidebar">
Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sid
ebar
</div>
<div id="cont">content
content content content content content content content content content con
tent
content content content content content content content content content con
tent
content content content content content content content content content con
tent
content content content content content content content content content con
tent
content content
</div>
</div>
</body></html>
Ben Davies
*********************************************************************
From: "Mark Huppert" <mark.hupp...@anu.edu.au>
Date: Mon, 17 Aug 2009 16:30:16 +1000
Subject: RE: [WSG] Fixed Sidebar Fluid Content - Source Order Limitations
Ben
If the window gets below a certain width,
then inevitably the content must pop up
above the fixed width sidebar. That is the whole point
of the content first approach, I thought.
It's true that with an extremely wide screen a
gap will open up. I guess if that's a problem for your
client, then it's your problem.
Another way to handle this is to use javascript to
manually adjust the style settings according to the
screen size.
regards
Mark
=========================
===============
Mark Huppert
Library Web Development &
Integrated Library Management System Coordinator
Division of Information
R.G. Menzies Building (#2)
The Australian National University
ACTON ACT 0200
T: +61 02 6125 2752
F: +61 02 6125 4063
W: http://anulib.anu.edu.au/about/
CRICOS Provider #00120C
=========================
===============
-----Original Message-----
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org]
On Behalf Of Ben Davies
Sent: Monday, 17 August 2009 4:14 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Fixed Sidebar Fluid Content - Source Order
Limitations
Hi Kepler,
>You may want to try max-width on your main content. I'm not sure if
that will work for you since you didn't post a link.
I tried max- and min-width in a few combinations and could not get it
to work (and makes my content no longer fluid ).
Hi Mark
Thanks for the sample code. The problem with that approach is that if
the window is too small the sidebar will drop down. If it is too large
my content area will grow but I will introduce a big gap between the
sidebar and the content.
The markup below demonstrates what I currently have. Works great but I
suspect content-first source ordering is impossible:
<html><head>
<title>test</title>
<style type="text/css">
#cont {
padding:10px;
margin-left: 220px;
}
#sidebar {
float:left;
background: #DDDDDD;
margin: 10px;
margin-right:0px;
font-size:90%;
width:200px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="sidebar">
Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar
Sidebar
</div>
<div id="cont">content
content content content content content content content content content
content
content content content content content content content content content
content
content content content content content content content content content
content
content content content content content content content content content
content
content content
</div>
</div>
</body></html>
Ben Davies
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
*******************************************************************
*********************************************************************
From: =?KOI8-R?B?88XSx8XKIOvJ0snexc7Lzw==?= <oooott.s...@gmail.com>
Date: Mon, 17 Aug 2009 10:33:34 +0400
Subject: Re: [WSG] Fixed Sidebar Fluid Content - Source Order Limitations
learn to search, ÅÌËÉ ÐÁÌËÉ
http://www.alistapart.com/articles/multicolumnlayouts/
http://www.alistapart.com/articles/fauxabsolutepositioning/
2009/8/17 Ben Davies <bendav...@he3.com.au>
> Hi Kepler,
>
> >You may want to try max-width on your main content. I'm not sure if that
> will work for you since you didn't post a link.
>
> I tried max- and min-width in a few combinations and could not get it
> to work (and makes my content no longer fluid ).
>
> Hi Mark
>
> Thanks for the sample code. The problem with that approach is that if
> the window is too small the sidebar will drop down. If it is too large
> my content area will grow but I will introduce a big gap between the
> sidebar and the content.
>
> The markup below demonstrates what I currently have. Works great but I
> suspect content-first source ordering is impossible:
>
> <html><head>
> <title>test</title>
> <style type="text/css">
> #cont {
> padding:10px;
> margin-left: 220px;
> }
> #sidebar {
> float:left;
> background: #DDDDDD;
> margin: 10px;
> margin-right:0px;
> font-size:90%;
> width:200px;
> }
> </style>
> </head>
> <body>
> <div id="wrap">
>
> <div id="sidebar">
> Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar
> Sidebar
> </div>
>
> <div id="cont">content
> content content content content content content content content content
> content
> content content content content content content content content content
> content
> content content content content content content content content content
> content
> content content content content content content content content content
> content
> content content
> </div>
>
> </div>
> </body></html>
>
>
>
> Ben Davies
>
>
> *******************************************************************
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: memberh...@webstandardsgroup.org
> *******************************************************************
>
>
--
ó Õ×ÁÖÅÎÉÅÍ,
ëÉÒÉÞÅÎËÏ óÅÒÇÅÊ
×ÅÒÓÔÁÌØÝÉË
ÔÅÌ. +7 (904) 333-46-25
starhack.ru
*********************************************************************
From: "Linda Mitchell" <lindamitch...@iinet.net.au>
Date: Mon, 17 Aug 2009 16:50:39 +1000
Subject: RE: [WSG] Fixed Sidebar Fluid Content - Source Order Limitations
Not sure if this is what you want but to have the content first in the body
but have the sidebar appear firt you can use:
html, body {
width: 100%;
margin:0;
}
#cont {
float: left;
padding:10px;
margin-left: 220px;
}
#sidebar {
background: #DDDDDD;
margin: 10px;
font-size:90%;
width:200px;
position: absolute;
left: 0px;
top: 0px;
}
<body>
<div id="wrap">
<div id="cont">content
content content content content content content content content content
content content content content content content content content content
content content content content content content content content content
content content content content content content content content content
content content content content content content </div>
<div id="sidebar">
Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar
Sidebar </div>
</div>
</body>
This seems to work
Linda
-----Original Message-----
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On
Behalf Of Ben Davies
Sent: Monday, 17 August 2009 4:14 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Fixed Sidebar Fluid Content - Source Order Limitations
Hi Kepler,
>You may want to try max-width on your main content. I'm not sure if that
will work for you since you didn't post a link.
I tried max- and min-width in a few combinations and could not get it to
work (and makes my content no longer fluid ).
Hi Mark
Thanks for the sample code. The problem with that approach is that if the
window is too small the sidebar will drop down. If it is too large my
content area will grow but I will introduce a big gap between the sidebar
and the content.
The markup below demonstrates what I currently have. Works great but I
suspect content-first source ordering is impossible:
<html><head>
<title>test</title>
<style type="text/css">
#cont {
padding:10px;
margin-left: 220px;
}
#sidebar {
float:left;
background: #DDDDDD;
margin: 10px;
margin-right:0px;
font-size:90%;
width:200px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="sidebar">
Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar
Sidebar </div>
<div id="cont">content
content content content content content content content content content
content content content content content content content content content
content content content content content content content content content
content content content content content content content content content
content content content content content content </div>
</div>
</body></html>
Ben Davies
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
*******************************************************************
*********************************************************************
From: Benjamin Hawkes-Lewis <bhawkesle...@googlemail.com>
Date: Mon, 17 Aug 2009 08:46:53 +0100
Subject: Re: [WSG] table inside a dd?
On 17/08/2009 06:18, Tim MacKay wrote:
> I am marking up product nutritional information and am thinking of doing
> it like so:
>
> <dl>
>
> <dt> The Product </dt>
>
> <dd> Paragraph blurb about the product </dd>
>
> <dd>
>
> <table>
>
> <&etc>Tabular data of the nutritional information</&etc>
>
> </table>
>
> </dd>
>
> </dl>
>
> Is nesting the table within the def list valid markup?
Yes.
I'd tend to suggest using headings (or headings inside a list) instead
of a definition list, so that each product has an entry in the effective
document outline:
<h2>The Product</h2>
<p>blurb</p>
<table>
<caption>Nutritional information</caption>
...
</table>
More practically, this allows non-mouse users of Opera
(http://www.opera.com/browser/tutorials/nomouse/) or assistive
technology
(http://www.freedomscientific.com/Training/Surfs-up/Navigating.htm) to
skip effectively from one product to another, and surfaces the products
in assistive technology heading lists.
Some assistive technology does have some support for definition lists,
but it's not especially pretty, which isn't surprising given the HTML
spec suggests using the element for "terms" and "descriptions", and also
for dialogs:
http://www.webaim.org/discussion/mail_message.php?id=11226
--
Benjamin Hawkes-Lewis
**************************************************************
Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
**************************************************************
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
*******************************************************************
