Archive

Archive for the ‘ASP .NET’ Category

Web Development basics for ASP.NET Developers – Floating

March 17, 2011 Leave a comment

One of the interesting and powerful ways you can affect normal flow using floats. A floated element is removed from the normal flow and shifted towards either right or left edge of the containing block as far as it can go. When the width is not enough the floated element box wraps below the first row of floated elements.

float:left

Left Float

An example of float left. See how the text content flows around the right edge of the left floated element. See how the line boxes are shortened, more on that later. Float left thus shifts element from normal flow and moves it as much left as possible.

float:right

Right Float

An example of float left. See how the text content flows around the left edge of the right floated element. See how the line boxes are shortened, more on that later. Float left thus shifts element from normal flow and moves it as much to the right as possible. Next we will see what happens when there are multiple floats.

Multiple floats

Right Float 1
Right Float 2
Right Float 3
Right Float 4

Multiple floats, See how the 4 the div is pushed down as the width is used by this text content and the other elements in the first row. The same applies to left floated content as well. Next we will see what if a float’s height exceeds the containing block’s height.

What happens when a float’s height exceeds the containing block’s hieght

Left Float where height exceeds that of the container. I have also removed the float’s background here.

In this example the float’s height exceeds the containing block’s height.

How block level elements after the float are affected by the float

Left Float where height exceeds that of the container. I have also removed the float’s background here.

In this example the float’s height exceeds the containing block’s height.

Let us say that this paragraph should have been below the left float as per our requirement. Notice how the first line box is still shrunk. More on line box later.

Clearing

Left Float where height exceeds that of the container. I have also removed the float’s background here.

In this example the float’s height exceeds the containing block’s height.

Now this paragraph is actually beginning below the left float as per our requirement. This is the power of clear. clear: left doesn’t allow any element to float to the left of the element box, right doesn’t allow any element to float to the right of the element box and both doesn’t allow elements to float on both left and right

Line box shortening

Left Float

Notice how the background of this paragraph is bleeding into the floating element as well. But the text doesn’t bleed into the floating box. That’s because the anonymous boxes for each line of content inside of the block level box of this paragraph (called line boxes) are shortened

Use your favorite browser’s development tools to view the markup

Read the following articles for a better understanding of floats:

CSS Floats 101

Web Design 101: Floats

Autistic Cuckoo on Float Layouts (via the Internet Archive)

Web Development basics for ASP.NET Developers – Positioning

March 16, 2011 Leave a comment

As I mentioned in the post about Normal Flow the rendering can be modified by using CSS positioning and floats. We will look into positioning in this post.

position: static implies Normal Flow, the flow is not modified.

All other positioning is relative to something else

position:relative is relative to the element box itself. For example Specifying position: relative and left: 5px, top: 5px renders the element moving it 5px down and 5px to the right of the actual element box. It is useful to shift rendering location of the element relative to its original element box by a few pixels to the left, right, top or bottom.

position:absolute is relative to the containing block. The containing block is the ancestral element which is positioned relative, absolute or fixed. If there is no such element then a hypothetical initial containing block (the viewport usually) is used. Viewport is the visible area of the browser window that can show html content (excludes addressbar, menubar, statusbar, toolbar etc.). When an element is positioned absolute it is removed from the document flow and positioned relative to the containing block as specified by the top, left, right, bottom attributes.

position:fixed is similar to position:absolute but the containing block is always the initial containing block. This is useful when you want to create a menu that is always at the top of the page and doesn’t scroll as the user scrolls content vertically in the viewport.

The stacking order is controlled by the z-index css attribute. Element boxes with higher z-index appear above element boxes with lower z-index.

I recommend you to read the following excellent articles on positioning:

Web Design 101: Positioning

CSS Positioning 101

Web Development basics for ASP.NET Developers – Normal Flow

March 16, 2011 1 comment

Normal flow (or document flow as some people call it)  is the manner in which a browser renders html elements in the absence of any float / position related css attributes applied to the elements.

Block elements are rendered one below the other / stacked vertically in the order in which they appear in the html document. They can contain other block level elements, inline elements, text.

Inline elements are rendered in the same line stacked horizontally next to each other (left to right in most of the languages) in the order in which they appear in the html document. They cannot contain block level elements. If the width is not sufficient to display all the inline elements / content then  rendering starts in the next line.

The visual layout of  each element is governed by a box generated as as per the css box model.

This is rendering in Normal Flow. But float and position which affect the normal flow are what make css powerful enough to do visual layouts.

Web Development basics for ASP.NET Developers – Block vs. Inline elements

March 3, 2011 Leave a comment
  Block Inline
Width Takes up whole width available Takes up only much width as needed
line breaks Generates line-breaks before and after Does not force any line break (except <br /> which is a special case)
width, height – css attributes applicable ignored
max-width, max-height – css attributes applicable ignored
min-width, min-height – css attributes applicable ignored
examples div, h1,h2…h6, p, ul, ol, dl, li, dt, dd, table, blockquote, pre, form span, a, strong, em, img, br, input, abbr, acronym
Layout behavior in normal flow stacked vertically one below the other (top to bottom) in order they appear in the document stacked horizontally one after the other (left to right) till width permits and then continues in the next line
What can it contain? other block level elements, inline elements, text data other inline elements, text data – cannot contain block level elements

Though HTML elements have their default display styles as block or inline, we can change the behavior using the display css attribute (block, inline and other exotic stuff). For example you can change the list item’s display to inline to have a horizontally stacked menu instead of a vertical one.

References:

http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

http://webdesign.about.com/od/htmltags/qt/block_vs_inline_elements.htm

Web Development Basics for the ASP.NET Developer – What is Box Model?

March 2, 2011 Leave a comment

All document elements (visible) generate an element box which describes the amount of space that element occupies in the layout of the document. As per the CSS specification the box consists of the element’s content area, padding, border and margin.

The margin is always transparent and reflects the containing block’s background properties, whereas the content and padding reflect the element’s background properties. The border assumes the foreground properties of the element unless explicitly specified.

The CSS box model

Box Model

References:

http://www.w3.org/TR/CSS21/box.html

Web Development basics for ASP.NET Developers – What is DOCTYPE?

March 1, 2011 Leave a comment

Most of us conveniently ignore the DOCTYPE in an ASP.NET Page, What is DOCTYPE in the context of web development?

It is an instruction to the web browser that

  • Defines which version of (X)HTML our document is actually using
  • Triggers a rendering mode in most of the families of browsers
    The most commonly used DOCTYPEs

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;

Presentation, Deprecated elements (ex: FONT) Framesets Well formed XML
Not Allowed Not Allowed Not Required

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;

Presentation, Deprecated elements (ex: FONT) Framesets Well formed XML
Allowed Not Allowed Not Required

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"&gt;

Presentation, Deprecated elements (ex: FONT) Framesets Well formed XML
Allowed Allowed Not Required

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Presentation, Deprecated elements (ex: FONT) Framesets Well formed XML
Not Allowed Not Allowed Required

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Presentation, Deprecated elements (ex: FONT) Framesets Well formed XML
Allowed Not Allowed Required

XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"&gt;

Presentation, Deprecated elements (ex: FONT) Framesets Well formed XML
Allowed Allowed Required

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;

Presentation, Deprecated elements (ex: FONT) Framesets Well formed XML
Not Allowed Not Allowed Required

HTML 5

<!DOCTYPE HTML>

Some rules

  • The doctype declaration should be the very first thing in an HTML document, before the <html> tag.
  • The doctype declaration must be exact (both in spelling and in case) to have the desired effect
    We saw about the versions / flavors of (X)HTML, now lets return to the rendering modes of the browsers.
    In Netscape and Internet Explorer 4 days CSS standards compliance was really patchy, but moving forward the newer browser version were getting closer to the standard. The browser vendors faced these major issues
  • allow web developers who knew their standards to choose which mode to use.
  • continue displaying old pages according to the old (quirks) rules.

Thus all browsers needed two modes: quirks mode for the old rules, strict mode for the standard.

    The right DOCTYPE declaration will trigger the strict rendering mode in most families of browsers.
    References & Further Reading:

http://www.w3.org/QA/Tips/Doctype

http://www.w3.org/QA/2002/04/valid-dtd-list.html

http://www.w3.org/QA/2002/04/valid-dtd-list.html

http://www.alistapart.com/articles/doctype/

http://www.quirksmode.org/css/quirksmode.html

http://www.quora.com/Without-a-version-number-in-the-HTML5-doctype-how-will-we-specify-future-versions-of-HTML

 

    Categories: ASP .NET Tags: ,

    ASP.NET Pre-Compilation, Virtual Path Providers and Resource Providers

    February 11, 2011 Leave a comment

    If your Pre-Compiled Website uses custom Virtual Path Providers and Resource Providers both serving content from the application database, you may run into a series of issues. I will try to highlight a few hacks and workarounds to get the website to a working state.

    Fritz Onion’s January 2006 article in the MSDN Magazine’s Extreme ASP.NET column is a very good start to understand ASP.NET Pre-Compilation model. The summary of the article is this very table found in the MSDN magazine article.


      Deployment Mode
      All Source All Binary Updatable (mixed)
    What compiles into a unique assembly App_Code directory
    global.asax
    .ascx and associated codebehind file (separate assembly for each user control)
    .master and associated codebehind file (separate assembly for each master page)
    All .aspx files and their code­behind files in a given directory (separate assembly per directory)
    App_Code directory
    global.asax
    .ascx and .master files and their associated codebehind files
    All .aspx files and their code­behind files in a given directory (separate assembly per directory)
    App_Code directory (D)
    global.asax (R)
    .ascx and .master files (R)
    codebehind files for .ascx and .master files (D)
    All .aspx files in a given directory (separate assembly per directory) (R)
    All codebehind files associated with .aspx files in a given directory (separate assembly per directory) (D)
    When it’s compiled Request time Deployment time (R) = Compiled at request time
    (D) = Compiled at deployment time

     

    The full article can be read here.

    Making Virtual Path Providers work with Pre-Compilation:

    This is not officially supported by Microsoft, so use this at your own risk.

    The first hack is about registering the Custom Virtual Path Provider with the Hosting Environment using private reflection detailed in Coskun SONALI’s article here.

    If you deploy the Web Site in the ‘All Binary’ mode, you will be greeted with the error ‘The file <your file served by the virtual path provider> has not been pre-compiled, and cannot be requested.’. It turns out that pre-compilation module was looking into a file called PreCompiledApp.config. If you just flip the updateable flag to true (after the all binary pre-compilation) and it should start working.

    Making custom Resource Providers work with Pre-Compilation:

    The pre-compiled site should be working but some of the resource expressions may not be working and you may be having blank instead of the resource string values in the labels and other text controls. To be more precise Explicit Resource Expressions will be working whereas Implicit Resource Expressions will not be. Rick Strahl’s blog talks about the Implicit Resource Provider interface IImplicitResourceProvider. Implementing one you can get the Implicit Resource reference in expressions also working in a pre-complied web site.

    You can read Rick Strahl’s blog entries here, here and here.

    Resource Providers are invoked at compile time as well and not surprisingly Rick Strahl has blogged about the same here.

    If you start implementing a custom resource provider start with Rick Strahl’s version here rather than the one here.