JS Missing manual

I ́m reading chapter 7 of JS missing manual, and I don ́t understand how tutorial 1 and 2 show the pictures diferent, if they used the same CSS. Thanks!
1 person has
this question
+1
Reply
  • Hi Marina,

    I'm not sure what difference you're asking about. Can you explain a little more? Are you asking about the layout or the way the images change when you hover over them or something else?

    The live completed tutorial files are on the author's website for the book, so you can see the expected behavior. Here are example 7.1, example 7.2, and example 7.2 advanced.

    Sorry that I couldn't answer your question, but I look forward to hearing back from you so we can help.

    Regards,

    Rachel James
    O'Reilly Media
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Thank you Rachel for your reply. I would try to explain it better. At the beginning of Tutorial 7.1 the small images are horizontal, but at the beginning of tutorial 7.2 are vertical. I can ́t find any difference on the HTML or the CSS to explain that. :(

    As I ́m learning, of course I ́m missing something... And I really would like to know what it is! :)

    Thank you again!

    Regards,

    Marina
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Hi Marina,

    I see what you're saying now. I was looking at the completed examples on the author's website, but when I looked at the downloadable files, I saw what you meant.

    Example 7.1 has an additional class on the body tag, which is why different styles are being applied to the gallery of images:

    <body id="twoCol" class="simple">

    In the css, there are different sets of style rules for .simple #gallery and just #gallery:
    .simple #gallery {
    float: none;
    width: auto;
    padding: 0;
    }

    #gallery {
    width: 85px;
    float: left;
    padding: 0 20px 30px 10px;
    border-right: 1px dotted #5C7B7B;
    }


    Because the .simple #gallery selector is more specific, it overrides the #gallery styles. Since the images within that div are floated left, they display horizontally or vertically depending on the width of their container.

    A quick way to figure out what styles are being applied to an element on the page is to use a tool like Firebug (for Firefox) or Chrome's Inspector. With either of these tools, you can right-click on something and choose Inspect Element and you'll be able to see which styles are being applied and where different style rules are overriding each other, like in this case. Here's what I saw when I inspected the #gallery div in Firebug:



    I hope this makes more sense now! Please let us know if you still have questions.

    Regards,

    Rachel
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited