Forum Moderators: not2easy

Message Too Old, No Replies

Uncommon expression with IDs

#innerframe >#contentleft{left:-200px}

         

WalterLyn

11:00 am on Aug 25, 2007 (gmt 0)

10+ Year Member



I've tried to create simplified 3 column version page from one site's css source but I don't understand this expression:
#innerframe >#contentleft{left:-200px}
I've never seen this comparison operation in any css tutorial. If I just remove this line from style.css then center column swaps with left column. Maybe someone can explain this line or give a link for reading.
Here's simplified html code:

<div id="frame">
<div id="contentheader">
</div>
<div id="innerframe">
<div id="contentcenter">Center</div>
<div id="contentleft">Left</div>
<div id="contentright">Right</div>
</div>
</div>

And here's css:

@charset "utf-8";
/* CSS Document */
#frame{
MARGIN:10px auto;
TEXT-ALIGN:left;
width:900px;
padding:0;
border:1px solid #999
}
#innerframe{
padding-left:200px;
padding-right:200px;
}
[b]#innerframe >#contentleft{left:-200px}[/b]
#contentheader {
MARGIN: 0px;
HEIGHT: 52px;
BACKGROUND-COLOR: #900;
padding: 0px;
}
#contentcenter{
float:left;
width:500px;
margin:0;
padding:0;
position:relative;
overflow:hidden;
}
#contentright{
background:#fff;
float:left;
position:relative;
overflow:hidden;
width:200px;
margin-right:-200px;
padding:0;
}
#contentleft{
float:left;
position:relative;
overflow:hidden;
width:200px;
margin-left:-500px;
padding:0;
left:215px;
}

4css

11:12 am on Aug 25, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



This means that the ID innerframe is a child of the id content left.

May I make a suggestion? Read up on the different types of selectors in css.

Here is [w3.org] a good starting point for you.

Also Here [w3.org] is another great starting point for you to become familiar with selectors.

IMO, it is good to view source that you see on others sites, but it is better if you can come up with a design on your own with your own css. This way it helps you to learn the css better.

Also, before you use someone else's css style sheets, please make sure that it is something that you are permitted to do. Sometimes the authors don't mind if you use their styles, others do.

Xapti

9:01 pm on Aug 26, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



it's like saying #joe #joes_descendant
Just when you have the > symbol in there, it means DIRECT descendant, AKA (also known as) CHILD, meaning it won't affect the children of the div's child, or anything else further inside the nesting.

And when it comes to the off-topic discussion of stealing CSS, I don't think there's any right the creators have, so the only reason to consider asking the author would be for courtesy, which I consider analogous to having to ask a person if you can use a band-aid or something. Yeah it may be their property, but why should they care?

[edited by: Xapti at 9:05 pm (utc) on Aug. 26, 2007]