VWD HTML Design Grid

Last post 11-04-2009 4:03 AM by Thomas Sun – MSFT. 3 replies.

Sort Posts:

  • VWD HTML Design Grid

    10-31-2009, 11:48 AM
    • Member
      22 point Member
    • TRIMS30
    • Member since 10-23-2009, 12:54 PM
    • Florida
    • Posts 48

    Using Visual Web Developer and can't seem to find the Design Grid for positioning controls in HTML Editor. 

    I can move controls by setting position to Absolute but alignment Grid with Snap to grid and a visible ruler would make things a bit easier for me.

    I see the setup for it in Tools - Options - HTML Designer - Ruler and Grid and these are configured but don't see Ruler or Grid in HTML Layout panel.


    What am I missing??


    Lee

  • Re: VWD HTML Design Grid

    10-31-2009, 8:56 PM
    Answer
    • Member
      56 point Member
    • some_yahoo
    • Member since 09-25-2007, 9:02 PM
    • Posts 48

    Typically HTML (Hypertext Markup) is not like designing a WinForms app.  Your site may look great on your machine, but keep in mind that there are at least 15 different browsers and some of them have fun options like "increase font size" and "show using my fonts regardless of markup". 

    HTML pages should be designed more like a newsletter or magazine than like a forms app.  it's one thing to want to align stuff, but it's quite another to want to make a 3"x5" box because that fits your text.  If you doubt the wisdom of this, open your page and use View-Zoom+ or View-Increase Font about 6 times.

    Try to use Tables and/or CSS to layout your pages and design for flow rather than absolute layouts.

    My opinion. For what it's worth.

    I'd rather live with false hope than with false despair.
  • Re: VWD HTML Design Grid

    11-02-2009, 5:39 PM
    • Member
      22 point Member
    • TRIMS30
    • Member since 10-23-2009, 12:54 PM
    • Florida
    • Posts 48

    Found Ruler &Grid on View Menu.

    Now going one step further, as you suggested I'm experimenting with mixing CSS and Tables and now I have two more questions:

     

    #1

    When using StyleSheet.CSS file I have defined a class .MyPanel and have applied that class to a DIV. Now, when I resize the DIV it creates .style1 with same properties as .MyPanel and now the DIV uses rather than as I had specified. If I change MyPanel Background-Color in StyleSheet.css it has no effect on the DIV. How do I get the DIV to use the named style I specified?

     

    #2

    I Have a DIV that I have Position:Absolute turned on. It's located in the center of the page and it contains a table - 3 rows and 2 Columns. I then, in design mode, paste TextBox controls into Col2 row 1, row 2 and row 3.

     

    Strange things happen - Textbox1 and Textbox2 get style2 assigned and textbox3 gets style3 assigned. In Design screen Textbox1 and 2 are overlayed and textbox3 appears in proper place. There is inline css code generated for style2 but none for style3.

     

    If I just paste the Text Boxes into the HTML all is correct or if I delete the .style2 {} stuff that was generated it appears correct.

     

    Any ideas as to whats happening?

  • Re: VWD HTML Design Grid

    11-04-2009, 4:03 AM
    Answer

    Hi,

    Visual Studio 2008 has feature that can generate style for your control when you drag and drop the control in Design mode.

    You can disable it by selecting "Manual Style Application" (Tools -> Options -> HTML Designer -> CSS Styling).

    In this case, you can remove that style generated by VWD.

    For more information about Support for Cascading Style Sheets in Visual Studio 2008, you can refer to http://www.asp101.com/articles/john/vs2008css/default.asp

     

    Thanks.

    Thomas Sun
    Microsoft Online Community Support

    Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as Answer” if a marked post does not actually answer your question.
Page 1 of 1 (4 items)