SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Addict Smola's Avatar
    Join Date
    Mar 2005
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    question on syntax...

    The best place I've seen in regards to definitions and examples has been W3Schools.com. However, even they don't have the time to explain certain things adequately.

    I've been exploring examples and I'm wondering how some multiple selectors work. For example, here is a piece of code:

    Code:
    #header li:hover, #header li:hover a {
      background-position:0% -300px;
      color:#333;
    and another:

    Code:
    #header a span {
          float:left;
          display:block;
          background:url("right_both.gif") no-repeat left top;
          /*padding:145px 145px 120px 145px;*/
          font-weight:bold;
          color:#765;
          }
    in the first it seems a selector, a selector, a class, a selector...the second is 3 selectors. What exactly do the properties in braces apply to? What are the limitations in referencing this way?

    Also I THINK I know the difference between divs and classes, but now I'm not so sure. I have seen code with one div, and a variety of classes. In my own code I usually use several divs for each element. Am I not using my code efficiently? Can someone explain this to me adequately with some examples?

    *look around for molona*

    Thanks!
    Smola

  2. #2
    SitePoint Evangelist figbeam's Avatar
    Join Date
    Jun 2004
    Location
    Sweden
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is going to be a multi-part reply, I think.

    Code:
    #header li:hover, #header li:hover a {
        background-position:0% -300px;
        color:#333;
    } (The closing curly bracket should also be there)
    The first one: #header is an ID selector. This is telling the browser that you will only use this name once in your code. Otherwise it's pretty much the same as a class selector. Usually this is used for the page header or menu. It's the # that makes it an ID.

    The second one: li:hover is an Element selector. It selects an existing (in HTML that is) element: li. Attached to the selector is a Pseudo-class :hover. As you can imagine this is only in action when you hover your mouse pointer over the element. the comma is separating the next couple of selectors to say:
    Code:
    #header li:hover {
        background-position:0% -300px;
        color:#333;
    }
    #header li:hover a {
        background-position:0% -300px;
        color:#333;
    }
    The first statement says that any li within the #header will have this style.

    The second statement says that any a within any li within the #header will have this style.

    This notation regards descendants which doesn't have to be direct children. In short it also applies to any li within any number of divs, spans or other within #header. Does this make sense? If not, paste this example in your favourite HTML editor, save and open in browser.
    Code:
    <head>
    <style type="text/css">  <!--
      .senior {font-size: 2em;}
      .junior {color: gray;}
      .senior em {color: red; font-weight: bold;} /* no junior involved */  -->
    </style>    
    </head>  
    <body>
        <div class="senior">
      	<p class="junior">
      		R<em>at</em>s!
      	</p>
      </div>
    </body>
    In the example the .senior em applies to any em which is inside .senior even if it's within a .junior or any number of other elements.

  3. #3
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,271
    Mentioned
    252 Post(s)
    Tagged
    1 Thread(s)
    You are so much fun! But I think you have all your ideas wrong... Divs have nothing to do with classes or IDs.

    A DIV is an element or, if you prefer, an HTML tag. Classes (and IDs) are applied to tags (= elements), but classes are not tags.

    When you create classes you are creating groups of the same element. Let me put you an example. Imagine that you have a basket with fruit (that would be our element). And in the basket you have oranges, apples and lemons (those will be your classes). It is obvious that oranges do not look like apples, nor apples look like lemons (they don't, do they? ). So, basically, you can divide your basket into three classes according to characteristics: a class for the oranges, other for the apples and a third for the lemons.

    Let's use the same example in HTML. Imagine that I have an element, a paragraph (element P, this will be my basket of fruit!). But I am a person that likes colors. I have decided that I don't want all my paragraphs look the same. Oh, it is soooo boring. I want some orange paragraphs, and then some "apple" green, and maybe some other yellow. But.... if I do not use the element/tag P, I would not be creating paragraphs... would I? So, what I need to do is to create some paragraphs with an orange font, other with a green color font, and other yellow. Now... HTML by itself does not allow you to do that, but mighty CSS does! CSS lets me divide the paragraphs and put different colors, make them bold, use bigger fonts... whatever! I can create groups according to characteristics but, quite logically, I need to give them a name! Why, because I need to tell CSS which paragraph will be orange, and which green, or yellow. And to do that, I need to write the name in the HTML code as well. And those are your classes!

    Example of a class:

    Example 1

    CSS code
    P.orange {font-family: Verdana, arial, sans-serif;
    font-weight: bold;
    text-align: justify;
    color: orange;}

    HTML Code
    <P class="orange">Whatever you want to write plus <SPAN> a little more in a span tag </SPAN></P>

    <DIV class="orange"> Text inside a DIV element. A DIV, like a SPAN, is a general container, transparent unless you give it a background. The difference between DIV and SPAN is that a DIV creates a new line when it is closed (block element) whereas the SPAN does not (inline element)</DIV>


    What will happen here?

    The paragraph will have orange bold text because we have created a goup called "orange" and, in our HTML code, we have said to the browser that this particular paragraph belongs to the group "orange" (we have given a class)

    The DIV, funny enough, will not have orange text. How come? Well, look at the CSS. We created a class P.orange. We said that we were classifying P's, not DIV's. If I wanted to classify/group DIV's, my class would have been DIV.orange.

    By writing the tag of the element before the class (separated by a point so we know which one is the tag and which one is the name of the class), I tell the browser that I can only classify P's, or DIV's, or LI's, but those attributes will not be able to be applied to any other element even if I give them the same class name in my code.

    That comes handy if you want to have paragraphs with orange text, and call the class orange, and have DIVs with orange background, and give the same name to the class.

    That is (CSS Code)

    Example 2
    P.orange {font-family: Verdana, arial, sans-serif;
    font-weight: bold;
    text-align: justify;
    color: orange;}

    DIV.orange{background-color: orange; color: black; font-weight:bold;}

    Now, if I have in my HTML code:

    <P class="orange"> text </P>
    <DIV class="orange">whatever</P>

    The P will have orange text, and the DIV will have orange background, even if the name of the class is the same.

    Now, you will ask yourself... That is cool but... what about the SPAN? the SPAN does not have a class and still... it looks orange to me!

    And I will say: Well spotted, good job!. The SPAN has orange text because it inherits it from the P which is its container (this is like saying, the SPAN inherits the properties of the P because the it is P's child or, the equivalent, P is the SPAN's parent)

    Note: not all properties are inherited, but most of them are.

    And then you will say: well, when I look to CSS code around the web, I do not see DIV.orange... I only see something like .orange (no DIV's, nor P's)

    True, that is because there is a selector (=element) that is called universal as it matches anything, any element. The universal selector is .... * (yep, the "star" of the selectors! ... OK, the joke was not very good. I get it!). And, because it maches any element (P, DIV, LI, UL, whatever)
    But when I write my code, I do not need to write the *, I can happily omit it. The browser will know what I am talking about: I am just saying that my format has to be applied to ANY element with class "orange"

    so:

    *.orange {font-weight: bold;}

    and

    .orange {font-weight: bold;}

    means exactly the same thing.

    Most of the time we do not bother to limit ourselves to use a particular class in only just element. We write a class using the universal selector, and then we apply it to the elements we want, even if at the end we only apply it to paragraphs. Sometimes it is caused by laziness, other times it comes handy to apply the same format to paragraphs and some other elements.

    Now, I ask myself... well, the truth is... that I only want part of my paragraph to be orange, and part of my paragraph to be blue!

    And then, I answer myself (I am soooo smart, you see ) Easy. I will make a rule in CSS that says exactly that. How? Like this:

    .orange SPAN {color: blue}

    With this I am saying: "if a SPAN element is INSIDE an element (Any element, as I have not written a specific one before the dot) with a class="orange", then whatever is inside the span will have text color blue"

    See, if we add this rule to our example 1, the text inside the span would not be orange any longer!

    CSS also very good in something else. Imagine that I have this CSS rules:

    H1 {font-weight: bold; font-size:120%; color: gray;}
    CAPTION {font-weight: bold; font-size:120%; color: gray}


    Well, I have two rules that have exactly the same characteristics, the only difference between them is that apply to different elements. CSS lets me save a little bit of room and time. I do not need to write the same stuff twice. This rule will have the same effect:

    H1, CAPTION {font-weight: bold; font-size:120%; color: gray}

    Carefull: H1, CAPTION is NOT the same as H1 CAPTION. The comma is used to separate elements, to allow me to write the same rules for different elements. But H1 CAPTION will tell the browser "apply the format to any element CAPTION inside a H1 element" (I confess that I have never tried this combination. A CAPTION is used to give a title to a table, nothing else)


    Note: IDs are very similar to classes, the difference being that only ONE element in the whole code could be named with the ID. IDs were created to identify a particular container in the HTML code so programmers could access it and change it programmatically. Browsers, very wrongly, overuse IDs and treat them as if they were classes. If you are using CSS only, this is not big deal, but if you want to add some "spicy" effects with JavaScript... well, let's say it gives you a hard time.

    An ID would be something like this:

    #ID33 {text-decoration: underline;}

    the # indicates that this format will not be a class, but it will serve to give a name to a very specific element. In the HTML code, it would be applied like this:

    <DIV ID="ID33"> Whatever you want to write here </DIV>

    Now, in the whole page, we should only find one DIV named ID33, because that is the meaning of ID.

    ID work similar to classes. If I do not write a element before the #, I am telling the browser that it has to underline any text inside an element with ID="ID33" with independence if the element is a P, DIV, LI or whatever. But If I want to be more specific, I could have written this rule:

    DIV#ID33 {text-decoration: underline;}

    This last rule says "apply the format only if there is a DIV with named ID33". So, if later I write:

    <P ID="ID33"> Any text I can imagine </P>

    The text will not be underlined, because it is a P element named ID33, but not a DIV.

    Having said all this, now is your turn... What does the code you written before means?

  4. #4
    SitePoint Evangelist figbeam's Avatar
    Join Date
    Jun 2004
    Location
    Sweden
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To continue.

    A DIV is a block element without any special formatting. Other block elements are for example h1, h2...., ul, p etc. They define a block which by default takes the entire width of the browser window or containing div. The other block elements typically has some sort of default formatting such as margins and font-size.

    A SPAN is an inline element without any special formatting. Other inline elements are for example a, em and strong. They mostly concern text and can wrap around to the next line (doesn't span the whole width).

    DIV and SPAN are used for when you want to apply style without using the HTML structural elements. You could use twenty different classes of p, but that might be misleading and/or ruin the document structure.

    A CLASS (or ID) is used to apply special formatting to an element. You can use the same class on many different elements:
    Code:
    .warning {color: red;}
    
    <h1 class="warning">This is not a drill</h1>
    <div class="warning">
        <p>Just kidding...</p> <!-- inherits color from div -->
    </div>
    <p>Enough about those <span class="warning">alerts</span>.</p>
    Now, if you want to get more details you should read a book, because there's a lot more to it. After that you will be able to understand examples and more specific tutorials better. I've read "Cascading Style Sheets: The Definitive Guide" by Eric Meyer which covers the basic stuff. For more advanded design tips and tricks there's the whole web. And check out the tips and tricks thread in the CSS forum if you haven't found it yet.

  5. #5
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,271
    Mentioned
    252 Post(s)
    Tagged
    1 Thread(s)
    Well, I see that figbeam has done your homework!

  6. #6
    SitePoint Addict Smola's Avatar
    Join Date
    Mar 2005
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you both very much for the responses! as always molona, your detailed descriptions never disappoint...you should write your own tutorial!! i may be private messaging you in the future for other problems i may have.

  7. #7
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,271
    Mentioned
    252 Post(s)
    Tagged
    1 Thread(s)
    No probs. Glad I could be of help

  8. #8
    SitePoint Evangelist figbeam's Avatar
    Join Date
    Jun 2004
    Location
    Sweden
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Homework or not, I still catch myself doing the most silly newbie errors. Then it helps to have the handbook ready and, of course, a forum to display my ignorance.

  9. #9
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,271
    Mentioned
    252 Post(s)
    Tagged
    1 Thread(s)
    I can see that we are two of a kind!

  10. #10
    SitePoint Addict Smola's Avatar
    Join Date
    Mar 2005
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good news fellas! I got myself a book this weekend! It's called "Beginning CSS: Cascading Style Sheets for Web Design" by Richard York. I saw the books by Eric Meyer and they were half the size but like 10 dollars more. I think it's because Mr. Meyer's books are in color...Regardless I think this book will be very helpful....of course, paired with your guys' help!

  11. #11
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,271
    Mentioned
    252 Post(s)
    Tagged
    1 Thread(s)
    congratulations! I think that Meyer's are more expensive because it was Meyer's... He has beeb a Web Guru for as long as I can remember (and those are a few years...)

  12. #12
    SitePoint Addict Smola's Avatar
    Join Date
    Mar 2005
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well early on I have encountered a problem. My layout looks good in writing...and it looks great with the latest versions of netscape and mozilla firefox...however its all messed up with IE and Opera. Why isn't it fitting right?!?!

    Here's the page: http://www.smolaart.com/biography.htm

    And here's the css file: http://www.smolaart.com/styles.css

    And why is it that the picture is outside of the container I put it in? I understand the concept of layers, at least I thought, but sometimes it seems that my divs aren't acting the way I want them to. DAM YOU WEB DESIGN!

    Also off-topic...can you put a class and an id in the same tag? For instance:
    Code:
    <div id="poo" class="browns">blah</div>
    Also, my text-align: center; only works for IE?? Because it sure isn't working for netscape! This is the problem with so many browsers! Get rid of em all except for one!
    Last edited by Smola; Mar 28, 2005 at 11:19.

  13. #13
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,271
    Mentioned
    252 Post(s)
    Tagged
    1 Thread(s)
    Those are the differences from the browsers, each browser understand CSS in a particular way. Testing in Firefox is very similar to testing in Netscape, as they are both based on Mozilla. The differences are really small. Opera, well, normally, what works in Firefox works in Opera most of the time. Your centering thing is a typical example. IE tends to center the DIV whereas most of the browser centers the text inside the DIV, and not the DIV (this makes sense, as the attibute is text-align and not container or div-align). Normally, to get around this, you need to wrap the div you cant to have centered in another div. The wrapping div will have the text-align attribute.

    About the "DAM YOU WEB DESIGN"... what do you think that we all go crazy? And that is because you are not programming. If you tried to learn JavaScript, probably you will be crying by now... Now, the differences are huge there.

    Do a search in sitepoint's articles. There was a good article about hacks and tricks. Maybe your brand new CSS book has something about it.

    Last, but not least, yes you can have that code. It is completely correct. Remember that an ID is really to identify/name the div so you can program it later, although you may use it to apply an style.

  14. #14
    SitePoint Addict Smola's Avatar
    Join Date
    Mar 2005
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well I've gotten a little further on the page, and I'm not sure where to start searching to get around the problem...but now I got a new problem:

    I have floted a div to the left with a background image in it, and put a border around the div. the margins are set 0 as well as the padding. now i want to put an <h1> tag tot he right of it, but for some reason the margins and padding collapse on the top for some reason. if i clear the header to the left it goes under the floated div...which is not what i want. The links above are the same page and css i am having probs with. If you get a chance, let me know your thoughts on the subject.

  15. #15
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,271
    Mentioned
    252 Post(s)
    Tagged
    1 Thread(s)
    Ok. I will have a look and tell you something tomorrow

  16. #16
    SitePoint Enthusiast judgetules's Avatar
    Join Date
    Dec 2004
    Location
    Newcastle, UK
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Smola
    Well I've gotten a little further on the page, and I'm not sure where to start searching to get around the problem...but now I got a new problem:

    I have floted a div to the left with a background image in it, and put a border around the div. the margins are set 0 as well as the padding. now i want to put an <h1> tag tot he right of it, but for some reason the margins and padding collapse on the top for some reason. if i clear the header to the left it goes under the floated div...which is not what i want. The links above are the same page and css i am having probs with. If you get a chance, let me know your thoughts on the subject.
    From what I gather, you want the header to the top right of the box with the picture in?

    Have you tried:

    h1 { float: left; } as opposed to h1 {clear: right; } ?

    To add to the points already made, programmers are lazy and always looking for the easiest way to do things. Which is why you do this

    Code:
    #header li:hover, #header li:hover a {
        background-position:0% -300px;
        color:#333;
    }
    Instead of

    Code:
    #header li:hover {
        background-position:0% -300px;
        color:#333;
    }
    #header li:hover a {
        background-position:0% -300px;
        color:#333;
    }
    It is basically typing the same thing twice, which is pointless and takes up time and money (for time read your workload. for money read bigger css file, more bandwidth taken up per load).

    Hope this helps.
    Still learning the ways of PHP/MySQL.

  17. #17
    SitePoint Addict Smola's Avatar
    Join Date
    Mar 2005
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    judgetules i appreciate the feedback but i want the h1 tag to be centered in the space to the right of the picture. if i float it left i'd have to set up the margins specifically to fill the space to the right of the pic...thats not what i'm looking for...browser incompatibility is lame... =X

  18. #18
    SitePoint Enthusiast judgetules's Avatar
    Join Date
    Dec 2004
    Location
    Newcastle, UK
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    h1 { float: left;
           margin-left: 50%;
         }
    or if you don't want it for every h1 tag,

    Code:
    h1.main { float: left;
           margin-left: 50%;
         }
    
    <h1 class="main">Text</h1>
    It isn't that much effort to put it right the way I've done it, and it solves your problem no?
    Still learning the ways of PHP/MySQL.

  19. #19
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,271
    Mentioned
    252 Post(s)
    Tagged
    1 Thread(s)
    Smola, I am sorry, I do not understand what you want to do. If you want to have the h1 element in the right space, well, I already see it centered, in every single browser I tried. I am talking of horizontally centered. Now, if you want the "biography" text vertically centered in the red box, then I think that you should modify margins and paddings.

    Your real problem is that all the browsers, except IE, extend the red box beyond the top border which does not look very good. Also, there is problems with the left div and the bottom border.

    I will worry about those. I have to do a little bit of testing first with mozilla. But for the centering stuff, I see it centered... so, I guess there is not problem? If there is, maybe it is that I am not understanding what you want, so you might have to provide me with a more detail explanation

  20. #20
    SitePoint Addict Smola's Avatar
    Join Date
    Mar 2005
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yea the centering is cool. it seemed that the code judgetules gave me would change the fact that i already had it centered. i dont have probs with the centering. its just that the extra padding on top is because i was trying to see how much i needed for it to be seen inside the div that i have it placed in. the top margin and padding collapse into the div it seems. so the big text in the h1 tag is always up against the top border of its parent div. no matter what the padding and borders are on the TOP ONLY, the text will always be right next the the parent div border. the left, right, and bottom padding/margins will work fine. i dont know why its acting that way.

  21. #21
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,271
    Mentioned
    252 Post(s)
    Tagged
    1 Thread(s)
    Sorry I could not answer before. I had a hell of a week and hardly time to think about anything, including myself lol

    I had only a quick look to your code. Your problem is that you have converted a block element (the h1) into an inline element. Inline elements only take into consideration the height of the text for vertical formatting. That means that if you add padding or margins, the only thing that will happen it is that these properties will overlap with any other non-replaced element before them (in this case, your div=id490, I think)

    You have two solutions.

    1.- Place the h1 back as a block.

    A code similar to this:

    Code:
    h1{
    	font-size:22px;
    	font-weight:bold;
    	padding: 10% 5% 5% 5%;
    	background-color:red;
    	width: 300px;}
    Look that I have placed the width as the last property.


    2.- You continue with your h1 as an inline element

    Then, I would start include at least a <br> in my HTML code, just before the Biography text.

    Now, there is a few things that I could not help to observe.

    The specification does not say it because it is not supposed to be this way, but sometimes the order the properties are written in the CSS code is important.

    Things you need to remember:

    - a float property comes first. Example:

    Code:
     img{float:right; clear:left;background-color:blue;}
    - a position property comes first, only exception is if the element is floated, then the float property comes first. Example:

    Code:
    div{float:left; position: relative; top: 5px; left: 4px;}
    Typically, you do not positioned a floated element because you already have taken that element outside the normal flow, but there is nothing against it.

    - The clear property is only for floated elements. It will do nothing if the element is not floated (example: your h1. You wrote clear:right, the the floated element is the div id=biopiccontainer, not the h1)

    - when you position an element, you need to indicate at least one position property (top, bottom, left, right). If it is an absolute positioned element, you need to give at least two, one vertical and one horizontal (top left, or top right, or bottom left,or bottom right)

    Because, what is the point of saying "position: relative" if you do not say where do you want to move it to?

    You have position relative in a few ids, but no properties. That is extra non-use code and increases the weight of your stylesheet.

    Another thing that you have to take into account is the box model, because each browser use it in different ways. Your picture overlaps the top border of your bottom div. But I will talk about that tomorrow because I am truly tired.

    See ya.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •