Absolute and relative positioning in Visual Web Developer 2008 designer

Absolute and relative positioning in Visual Web Developer 2008 designer

Rate This
  • Comments 10

Design view in Visual Studio and Visual Web Developer Express 2008 provides several tools that help with absolute and relative positioning of controls. I'd like to describe how do they work and what kind of visual hints the designer provides.

How do I set my control position to absolute? Use Format | Position menu:

Format menu 

Unfortunately, because of a bug, the menu is disabled for <span> and <a> based controls. To enable the menu, add style="display:block" to labels or hyperlinks. This will be fixed in the next service pack. You can then use the Position dialog to set positioning mode:

 

In most cases you'll want absolute positioning. After setting the position you should be able to move the control around. There are two ways you can move the control:

Dragging the control

Watch the status bar, it provides hints about various options you have in moving and resizing 

Status bar

Designer also provides visual cues to which element is control's positioning container. This is important to know since absolute positioning in CSS does not work the same way it works in Windows Forms. Controls are not always positioned relatively to their immediate parents. Instead, they are positioned relatively to their containing block. For absolutely positioned controls that would be the nearest ancestor that has position attribute set in its style or a body element. When you select absolutely positioned control, designer display four guides and highlights the positioning contaner.

Here is an example when element is in a div, but is positioned by another, outer div

 

In this example button appears to be in <div>, while, in fact, it is in the <body> element.  

Designer also supports relative positioning. Relative positioning is tricky though. It is not relative to the parent control. Instead, relative position describes shift of the element from its normal position in the layout.

 

As you can see, if element is relatively positioned, designer only draws two guides instead of four. Although rendering seems odd, this is exactly how FireFox renders the page:

 

Unfortunately, IE7 does not render the page same way FireFox and Visual Studio 2008 Web designer do:

 

In order to help with element alignment, designer provides a grid, ruler and ability to snap element position to the grid. You can activate this functionality in Tools | Options

As well as in the View menu

  • "In most cases you'll want absolute positioning"

    I find this a slightly strange recommendation and I know there are many web designers who would disagree with that.

    I would be curious to know the rationale behind this recommendation?

  • "In most cases you'll want absolute positioning."

    This is absurd. No designer in their right mind would ever promote this kind of website development. Position: absolute; has its uses, but using it for everything is completely rediculous.  It messes with the page flow, breaks CSS control by overriding the styles attached to it and limits one's control over the site layout, look and feel from any kind of sitewide method without hack-ish solutions.

    And telling people to set their labels and hyperlinks to display: block; because of a designer bug? Unbelieveable. Code for the correct reasons people.

    I have spent many hours of wasted time refactoring .NET 1.1 markup, created in the Visual Studio designer, to work with MasterPages and sitewide CSS.

    I adamantly disagree with those particular statements in the article and for those developers who are relatively new to this whole CSS thing--you should be aware that this is, in no way, a best practice.

  • Sorry, I didn't mean to say "you should use absolute positioning" or "it is the best way to design pages". What I meant was that if you someone wants to create simple form-like layout, then in the Position dialog she'll want to choose absolute positioning.

    Of course there are other ways to do page layout. However, different users have different needs and some want to design page in a form-like way. In some environments this design may be sufficient. This post is to answer questions frequently asked in forums regarding absolute positioning and functionality change from VWD and VS 2005.

  • Hi,

    I have Windows Vista Home Ultimate Edition. I have Visual Studio 2008 Professional Edition and whenever I try to run any ASPX page to debug it or test it .. it gives me the following message in a messagebox:

    "Unable to connect to the ASP.NET Development Server"

    Anyone has an idea about it?

  • Biswajit

    The best idea is to ask in ASP.NET forums: http://forums.asp.net/1112.aspx. There are couple of threads there that may be useful, for example: http://forums.asp.net/t/1209387.aspx. Most probably the issues is with IPv6

  • Using absolute positioning for building a page is just GridView all over again.

    My main bugbear with it is that it makes the page inaccessible - try resizing the text upwards a few times and see what happens.  Anyone with a sight impairment, or who's maybe just middle-aged and starting to lose their clarity of vision, will no longer be able to read your content.

  • Thanks for the tips.

    Suprotim

    ---

    http://www.dotnetcurry.com

    ---

  • I create web applications and I feel the absolute positioning is very useful for backend web portals.  I've made 200+ page sites for the IRS and DoD branches (along with many smaller companies) using absolute positioning on everything.  It's worked great for that purpose and it's really annoying 2008 does not work like 2005 did in this respect.  This is the only reason I will not move to 2008.  I own my own software corporation and have been at this 10 years, so I feel my opinion is valid given that these systems are in use every day by hundreds of users.  

    I have read that many don't think it's a good idea but I don't agree.  The newer browsers scale the page like an image zooming in and out, which does not exhibit the text issues as discussed above.  I also use Infragistics extensively and it works extremely well with this model.  

    I do admit I use this out of laziness, because I want the fastest way to get the pages up and running.  I care about what works, not what is accepted by other developers.  It's made me a lot of money doing these apps this way and I highly doubt I can get he same level of productivity not using it.  

    For front end websites to attract customers though, this is really not a good thing to do--something I'm sure the posts above will agree with.  

  • Positively agree with the software corp. owner. Absolute positioning is, in my opinion, the best thing to happen to Web Development. Flow layout wasted MANY hours of my time.

    I've dealt with the accessibility issue (people who use large text) fairly easily with absolute positioning. I love the control it provides.

    Also, regarding the above statement about Microsoft not being able to code. Get serious? Develop your own IDE and compete with them if you think you can do better (I doubt it).

Page 1 of 1 (10 items)