|
Posted by Desmond on 04/20/07 10:12
On 20 Apr, 04:18, "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?
>
> 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.
> 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)?
>
> (BTW the code is just an example)
>
> Thanks,
> Jon
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="http://www.w3.org/1999/xhtml">
> <head>
> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
> <title>Untitled Document</title>
>
> <style type="text/css">
>
> body *
> {
> margin:0px;
> padding:0px;
>
> }
>
> .Box1
> {
> position:absolute;
> left:400px;
> top:200px;
> background-color:#003366;
>
> }
>
> .Box1 > span:first-child
> {
> position:absolute;
> left:0px;
> top:0px;
> width:10px;
> height:10px;
> background-color:#990000;
>
> }
>
> .Box1 > span:first-child + span
> {
> position:absolute;
> right:0px;
> top:0px;
> width:10px;
> height:10px;
> background-color:#000099;
>
> }
>
> .Box1 > span:first-child + span + span
> {
> position:absolute;
> left:10px;
> right:10px;
> top:0px;
> height:10px;
> background-color:#999933;
>
> }
>
> .Box1 > span:first-child + span + span + span
> {
> position:absolute;
> left:0px; bottom:0px;
> width:10px;
> height:10px;
> background-color:#990033;
>
> }
>
> .Box1 > span:first-child + span + span + span + span
> {
> position:absolute;
> right:0px;
> bottom:0px;
> width:10px;
> height:10px;
> background-color:#990033;
>
> }
>
> .Box1 > span:first-child + span + span + span + span + span
> {
> position:absolute;
> left:10px;
> right:10px;
> bottom:0px;
> height:10px;
> background-color:#006699;
>
> }
>
> .Box1 > span:first-child + span + span + span + span + span + span
> {
> position:absolute;
> left:0px;
> top:10px;
> bottom:10px;
> width:10px;
> background-color:#333399;
>
> }
>
> .Box1 > span:first-child + span + span + span + span + span + span + span
> {
> position:absolute;
> right:0px;
> top:10px;
> bottom:10px;
> width:10px;
> background-color:#CC9933;
>
> }
>
> </style>
>
> </head>
> <body>
>
> <div class="Box1">
> <span></span><span></span><span></span>
> <span></span><span></span><span></span>
> <span></span><span></span>
>
> <div style="padding:15px; margin:0px;
> background-color:#00FFFF;">ASD123412SDF<br />
> 123412341234<br />
> 134134</div>
> </div>
>
> </body>
> </html>
No this is not good it makes the page hard to maintain. you relay need
an external style sheet using
#Box1
and then a <div id=Box1>
you seem to be using box1 everywhere thay should all be diffrent
names. and give an idea of to where they are used.
you can have more than one style sheet if this becomes difficult.
Desmond.
Navigation:
[Reply to this message]
|