-----Mensaje original-----
De: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] En nombre de Stephan Wehner
Enviado el: martes, 07 de noviembre de 2006 01:49
Para: [email protected]
Asunto: [css-d] HTML prepared for Branding
Hi there,
I'm currently working on developing the HTML for a website which is
going to be deployed for several clients. These clients will be
offered a branding option.
Now, I'm finding all kinds of little CSS tricks here and there, which
use extra spans and divs, so that a page can be made to look prettier.
Rounded corners here, another shade of a border there. The spans and
divs are only introduced to let CSS have another hook.
For example, I am currently looking at HTML like this
<div id="pagefooter">
<div class='right'>
<div class='content'>
</div>
</div>
</div>
#pagefooter {
color: #ffffff;
background: url('/images/box-footer-left.png') no-repeat top left;
height: 6px;
padding-left: 6px;
}
#pagefooter .right {
background: url('/images/box-footer-right.png') no-repeat top right;
padding-right: 6px;
height: 6px;
}
#pagefooter .content {
border-bottom: 1px #004a94 solid;
padding-top: 5px;
}
Each one of these contributes to a footer which has rounded corners on
the left, and on the right.
(This could be done with additional spans, a la Rico Corner for
example and do without images.)
(The header looks similar)
If another client came along, the #pagefooter .right #pagefooter
.content may be left unspecified in the CSS, if the #pagefooter
specification allows enough flexibility.
So my question is, is there a guide of how many extra hooks to include
in the HTML to allow further CSS styling. And what kind of hooks? It
would be nice to serve the same HTML to all clients of course. But I
don't want to run into troubles later on where just another span here
or there might allow required effects that are difficult without.
If we look at the HTML from csszen-garden.com for example we can see a
layout of
----------------------------------------------------
<div id="container">
<div id="intro">
<div id="pageHeader">
<h1><span>css Zen Garden</span></h1>
<h2><span>The Beauty of <acronym title="Cascading
Style
Sheets">CSS</acronym> Design</span></h2>
</div>
----------------------------------------------------
and at the end
----------------------------------------------------
<!-- These extra divs/spans may be used as catch-alls to add extra imagery.
-->
<!-- Add a background image to each and use width and height to
control sizing, place with absolute positioning -->
<div id="extraDiv1"><span></span></div><div
id="extraDiv2"><span></span></div><div
id="extraDiv3"><span></span></div>
<div id="extraDiv4"><span></span></div><div
id="extraDiv5"><span></span></div><div
id="extraDiv6"><span></span></div>
----------------------------------------------------
So there seems to be some validity to adding divs and spans which are
not dictated by content, but just for the sake of allowing
customizability.
Thanks a lot,
Stephan
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
CSS Zen Garden has that lots of extra code because the object of the site
was to shoe the world the power of CSS, not to show how to make a semantic
markup.
You can do the same, but the HTML will not be so semantic
Christian Roque Geldres
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
