- From: Jens O. Meiert <jens@meiert.com>
- Date: Tue, 7 Sep 2010 15:31:53 -0700
- To: pedro.amaral.couto@gmail.com
- Cc: www-style@w3.org
(+www-style@w3.org—top-posting for context)
> The header and the footer should fill the whole width of the page with a
> dark color, but their contents should be limited by a rectangular space
> with the same width of the body: http://a.imagehost.org/0716/img_6.png
There are several ways to achieve this without “hacking” or requiring
a new pseudo-element. The solutions depend on the (minimum) markup of
the document in question as well how you want to fill what.
For instance,
#header, #footer { background: black; text-align: center; }
#content { margin: auto; width 50%; }
could do the trick in some cases, variations thereof in others.
On Tue, Sep 7, 2010 at 3:08 PM, Pedro Amaral Couto
<pedro.amaral.couto@gmail.com> wrote:
> On Mon, 2010-09-06 at 22:54 -0700, Jens O. Meiert wrote:
>> > I'm sending this message to make a suggestion for CSS: a pseudo element
>> > to create a container inside a element, wrapping their contents.
>>
>> Would you mind elaborating: why?
>
> HTML:
> «
> <!DOCTYPE html>
> <html lang="en">
> <head>
> ...
> </head>
>
> <body>
> <div id="head" class="head">
> <span id="site-title">Title</span>
> <ul id="site-nav" class="nav">
> <li><a href="">Home</a></li>
> </ul>
> </div>
>
> <div id="body" class="body">
> Contents
> </div>
>
> <div id="foot" class="foot">
> <p>Footer</p>
> </div>
> </body>
> </html>
> »
>
> The header and the footer should fill the whole width of the page with a
> dark color, but their contents should be limited by a rectangular space
> with the same width of the body: http://a.imagehost.org/0716/img_6.png .
> The layout should be fluid. How do you do that without changing the HTML
> code and avoiding unnecessary page scrolls? I want to avoid that:
> «
> ...
> <div id="mast-head">
> <div id="head" class="head">
> ...
> </div>
> </div>
>
> ...
>
> <div id="mast-foot">
> <div id="foot" class="foot">
> ...
> </div>
> </div>
> ...
> »
--
Jens O. Meiert
http://meiert.com/en/
Received on Tuesday, 7 September 2010 22:32:43 UTC