locked
Need help to solve these simple CSS problems

    Question

  • I've created this navigation template project to learn Windows 8 apps with JavaScript. I've used basic styles as given in the template, still the outcome is not as desired. I don't understand why the same CSS is not applied to each pages. To make it clear, I'm uploading my project to SkyDrive and sharing it here. Please help me to understand what I need to do to correct those header styles.

    https://skydrive.live.com/redir?resid=F4CAEFCD620982EB!2719&authkey=!AEGFUtGsZgLUrd4&ithint=file%2c.zip

    As far as I understand, default.css will propogate to each page through .fragment class. But I don't see that, atleast in my project. why? What do I need to do for that?

    Thanks for looking into this.

    Sonal


    sonal

    Friday, January 17, 2014 7:04 PM

Answers

  • When I'm having trouble with determining why a CSS is not being rendered the way I think it should be, I switch to using Blend. It has this concept of "Winning Style" in that it will tell you where the project is getting the CSS that it sees as the one to be applied. Typically, for me it has been a scoping issue.

    Hope this helps!

    Christine

    Thursday, February 13, 2014 10:49 PM

All replies

  • Hi Sonal -  I downloaded your package but don't really understand what the issue is.  Can you be more specific?


    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Friday, January 17, 2014 8:44 PM
    Moderator
  • Homepage looks fine. But when we click to go to corresponding game, the pagetitle of other two pages does not take the full space.  I'm uploading screenshot image for "Play with Computer" button click. 


    sonal

    See how that header goes inside canvas. The pagetitle is not spreading horizontally.

    Also, how to adjust layout settings.

    • Edited by SonalMac Friday, January 17, 2014 8:56 PM
    Friday, January 17, 2014 8:55 PM
  • I've created this navigation template project to learn Windows 8 apps with JavaScript. I've used basic styles as given in the template, still the outcome is not as desired. I don't understand why the same CSS is not applied to each pages. To make it clear, I'm uploading my project to SkyDrive and sharing it here. Please help me to understand what I need to do to correct those header styles.

    https://skydrive.live.com/redir?resid=F4CAEFCD620982EB!2719&authkey=!AEGFUtGsZgLUrd4&ithint=file%2c.zip

    Homepage looks fine. But when we click to go to corresponding game, the pagetitle of other two pages does not take the full space.  I'm uploading screenshot image for "Play with Computer" button click.  Second page's header (page title) goes inside main section, instead of spreading horizontally.

    As far as I understand, default.css will propogate to each page through .fragment class. But I don't see that, atleast in my project. why? What do I need to do for that?

    I'm pasting this question second time because I did not get any solution so far.

    Thanks for looking into this.


    sonal


    Wednesday, January 22, 2014 10:39 PM
  • Sorry, I have been out of the office this week.  I'm looking at this now.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Thursday, January 23, 2014 4:19 PM
    Moderator
  • I'm not a fan of CSS... I saw that style="-ms-grid-column: 2;" seemed to force the title into a small space.  An easy solution for this was to put non-breaking spaces into the titlearea:

     <span>Challenge&nbsp;the&nbsp;Computer!</span> 


    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Thursday, January 23, 2014 4:54 PM
    Moderator
  • When I'm having trouble with determining why a CSS is not being rendered the way I think it should be, I switch to using Blend. It has this concept of "Winning Style" in that it will tell you where the project is getting the CSS that it sees as the one to be applied. Typically, for me it has been a scoping issue.

    Hope this helps!

    Christine

    Thursday, February 13, 2014 10:49 PM
  • Thanks Christine. I figured out that, but now has some other problems. Thanks again.

    sonal

    Thursday, February 13, 2014 11:20 PM