|
|
Posted by Jon Slaughter on 04/20/07 19:17
"Steve Pugh" <steve.grumpy@gmail.com> wrote in message
news:1177073062.499049.161470@n76g2000hsh.googlegroups.com...
> 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.
Yes, I might have to do that but its kinda messy. Actually that is what I
usually do. I start inlining first and then move the stuff to a class. I
forgot about that when I posted though and now that I think about it, it
probably is the best solution.
>
>> 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.
>
There could be many. With classes I suppose its also much faster because
there is no "searching" of the DOM. Ofcourse I'm not sure how slow it would
be in the first place. The classes add a bit to the file size because you
have to use class="..." for each span but probably not much.
>> 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.
>
yeah but screw IE6 and below. Doesn't work probably anyways.
> 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.
>
Nope, you don't get it(I think). Here I'm not going to end up using solid
colors but images so I can't use what you are using. (this is why I have to
go through the trouble with my original code)
Navigation:
[Reply to this message]
|