|
|
Posted by Steve Pugh on 04/20/07 12:44
On Apr 20, 4:18 am, "Jon Slaughter" <Jon_Slaugh...@Hotmail.com> wrote:
> In the following code I use selectors to position containers and I'm
> wondering because of the "depth" of the selection if its better to inline or
> not?
To use style="" attributes? Maybe. Or just to apply a class to each
span.
> I'll be generating the code automatically for several containers so I'm not
> worried about inlining except that it will be much easier to change the
> styles of the boxes automatically without having to regenerate the code.
How many of these boxes will there be on each page? On the whole site?
The savings in bandwidth may add up considerably if there are a lot.
> Just curious as if theres any good reason not to use the selectors as I have
> done it(or maybe there is another way to step through child elements)?
The code will be problematic in reality. IE6 and lower doesn't
support :first-child or > or +, so your styles really won't work for a
large portion of the WWW.
Apart from the colour of the top right corner this is identical, uses
a lot less code and works better in less sophisticated browsers.
..Box1 {
position:absolute;
left:400px;
top:200px;
background-color:#990000;
}
..Box1 div {
border-top: 10px solid #999933;
border-bottom: 10px solid #006699;
border-left: none; border-right: none;
margin: 0 10px;
}
..Box1 div div {
padding:5px;
margin: 0 -10px;
border-left: 10px solid #333399;
border-right: 10px solid #CC9933;
border-top: none; border-bottom: none;
background-color:#00FFFF;
}
<div class="Box1">
<div>
<div>
ASD123412SDF<br />
123412341234<br />
134134
</div>
</div>
</div>
Of course, as the parent box is fixed size it will still break badly
when the user chooses a font size larger than you anticipated. Avoid
absolute positioning where possible. It's a powerful tool but not
really suitable for most tasks, rather like a chainsaw. And avoid
fixed size containers 'cos they're just nasty.
Steve
Navigation:
[Reply to this message]
|