|
Posted by Jon Slaughter on 04/20/07 03:18
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>
Navigation:
[Reply to this message]
|