Ryan Ternier : web design

Full Screen web pages and browser resizing - keeping it looking good

rternier — Fri, 23 Nov 2007 17:17:12 GMT

I've noticed one thing that really gets some web developers going (and not the good going): Keeping a full screen web site looking good with different browser sizes. Those that know CSS inside-out will also have this problem as sometimes you just can't cut it with pure CSS. This is why many sites us a set width - they have clear control over everything with just CSS. However, those that like to employ full screen web pages need to do a bit more.

Note* this is only an issue with <div> based layouts. Table based layouts (die die die) don't have this.

Most Web Applications nowadays are full screen web apps - If they are not you should really re-think your design. I always develop my web apps for 800x600, but always allow them to work at resolutions like 1600x1050 (my resolution).

I have a simple JavaScript function I use whenever I write full page web apps that have a lot of content areas that I need specifically sized. here's a sample of my script that I am using for a program using mapping. This script runs every 250ms (4 times a second) and resizes my map width/Height and my sidebar height to take in the full height of the browser. My application never has any scrolling - except my right sidebar (overflow:auto;). This allows my application to remain clean of scrollbars and stay as large as possible for those using it.

var browserWidth = 0;
var browserHeight = 0;
 
function getSize() {
  if( typeof( window.innerWidth ) == 'number' ) 
  {
    //Non-IE
    isIE = false;
    browserWidth = window.innerWidth;
    browserHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    browserWidth = document.documentElement.clientWidth;
    browserHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    alert("You are using an outdated browser. Please upgrade to IE7 or FireFox 2.0");
    //IE 4 compatible
    browserWidth = document.body.clientWidth;
    browserHeight = document.body.clientHeight;
  }
}
 
function updateMapSize()
{
    //IE7 is 21 pixels LESS than FireFox.
    //Pretty much we want to keep the map to the maximum size alloted.
    getSize();
    //Side bar is 200px, but we should take some px off of it for padding.
    //header is 80px hight. take some px off for padding.
    var mapWidth;
    if(document.getElementById("aToggleSideBar").className == "collapse")
    {
            mapWidth = browserWidth - 290;
    }
    else
    {
            mapWidth = browserWidth - 50;
    }
 
    var mapHeight = browserHeight - 60;
    var sideBarHeight = browserHeight - 60;
 
    document.getElementById("map").style.width = mapWidth + "px";
    document.getElementById("leftSide").style.width = mapWidth + "px";
    document.getElementById("map").style.height = mapHeight + "px";
    document.getElementById("rightSide").style.height = sideBarHeight + "px";
    document.getElementById("sideBar").style.height = (sideBarHeight - 50)+ "px";
 
    setTimeout("updateMapSize()", 250);
 
}

Two ASP.NET features that are usually missed or misunderstood...T

rternier — Tue, 30 Oct 2007 15:47:00 GMT

Enter the Tilde (~)

Browsing the asp.net forums I notice a lot of people putting the '~' (tilde) character on every control that has some sort src or href. Many think that the tilde character is a regular character that deals with file locations. Much like: /, ../, ../../ etc.

However, this little angle is actually an ASP.NET character that is a shortcut for" HttpRuntime.AppDomainAppVirtualPath. (say that 10x in a row). This property refers to the virtual application root - not the root of the web server. Remember that a Virtual Directory is in fact an Application (Server 2000 / XP). You'll notice that in Vista that the IIS team has gone the better rout and actually calls them "Applications" while still having the ability to have a virtual directory that functions as a directory.

So how do we use this character?

here are some examples.

If my Folder structure is as follow:

Website
- Images
- CSS
- Admin

I have a master page within my main website, and content pages in my Admin. One thing newer web developers will do is declare an image like:

That works for everything in the root directory, however once you get into the Admin directory - all images are broken. A way to resolve this is:

This can also lead into issues if you have a more complex structure. A quick way to resolve this is:

<asp:image id="myImage" runat="server" ImageUrl="~/Images/MyImage.png" AlternateText="My Image" />

This will always go to the root of your application and then to the Images directory. This is very useful with Hyperlinks when you are working with multiple directories.

Enter the ALT-SHIFT (Really... ALT-SHIFT)

I've heard about this but I've always just stored this away in the back of my mind. This little button combo allows you to select VERTICALLY in Visual Studio.

So, besides the nice little vertical line, what are the uses of this?

Easy way to remove a single line of characters (say Line numbers from an online post) without having to format a bunch of things
Easy way to remove comments if you commented out lines (You can use the shortcuts: CTRL E+C to commend and CTRL E+U to uncommented)
Quickly change values or remove values in XML.
Many many more.

Needless to say it's a beautiful tool that exists in Visual Studio (not just ASP.NET).

Fancy Button 2.0 (Not A Link button)

rternier — Fri, 26 Oct 2007 22:18:25 GMT

I got a shwack of feedback and comments from my recent post: Get rid of regular buttons, use Link Buttons. I actually thought my solution was a great one, apparently I was a bit off base. That's not to say that my solution was totally wrong - Yes I'm stubborn... but I do admit that I am "occasionally" wrong... occasionally...

From the feedback, I decided to make a new "better looking" button. This one is about the same amount of work as the previous, but I believe this one is up to standards - which was the biggest subject from the feedback.

Another comment I got was regarding users might be confused because it was a link, and not a button. If they look the same, the user will never be able to tell. (I have yet to see a user that looks at the markup of a web application and gets their underwear in a knot because something that is supposed to be an <input /> is an <a />... though I'd really like to see it :P ).

So let's look at the markup of this new thing:

    <button id="btnTest" runat="Server" type="button" class="nButton" onserverclick="btnTest_ServerClick">
        <div class="login"></div>
        <div>This is my button</div>
    </button>

I have changed this to use the <button> element. The <button> element allows you to further style what the button looks like.

I used <div> elements so I can control the vertical alignment of the text - as well as further styling if needed.

Here's my CSS:

.nButton
{
    background-color:#84A1D6;
    border:solid 2px #415D9B;
    min-width:70px;
    height:23px;
    padding-left:3px;
    vertical-align:middle;
}
 
.nButton:hover
{
    background-color: #a0bdf2;
}
 
.nButton div
{
    float:left;
}
 
.nButton .login
{
    vertical-align:middle;
    background-image:url(Images/save.png);
    background-repeat:no-repeat;
    background-position:left top;
    width:16px;
    height:16px;
}

Very similar to my last post. This functions the same, and it has the same functionality as a regular <asp:button />.

Now let's see what it looks like:

That made my day... or did it.... Here is what I get when I surround ALL my markup with a <button>.

Now I wonder how many that read this are going to go to their websites and try it out....

Get rid of regular buttons, use link buttons

rternier — Thu, 25 Oct 2007 23:21:22 GMT

For the past 3 years I have been pushing my managers and especially the teams I work with that the web applications we make need to be visually appealing. The graphics designers I know can do amazing things. My friend Steve Sereda is an amazing graphics designer and he created some awesome skins for me for the time we worked together.

I've done a few posts leading up to this one. It all started with my post on UpdatePanel, FireFox and the Default Button, where I talked about how to get the default button working in FireFox. At this point I was in the process of moving all buttons over to fancy LinkButtons. I then wrote about CSS Pseudo Classes and their uses (which are many), and finally I finished my last post on A LinkButton, DefaultButton, UpdatePanel and FireFox, where I discuss how to get FireFox to use a LinkButton (Anchor tag) as a default button.

So let's talk about Buttons. Buttons provide functionality, and 99% of users know when they click on a button that some sort of action is going to happen. Many buttons look like this:

Now, besides the ugly border my snipping tool puts in, that button isn't that great. But should that matter? Isn't a button there to tell the user that clicking it will invoke some sort of procedure? Correct. By general standards Buttons should invoke functions, while links should be directional. However, who said a button had to be grey and ugly?

ASP.NET has the LinkButton. It gets rendered as an <a /> (anchor) tag, and because of that we can do something like this:

Wow, that looks way better than regular buttons. What about this:

I've grown tired of using JavaScript confirm boxes. I've decided to switch to modal windows. (yes yes I know my spacing isn't right....). You can see the nice presentation, and notice the spacing... isn't that amazing?!

There's a trick to these buttons, and unfortunately you do have to put more work into them. I could make a button like this a userControl/CompositeControl, but for what I need them for, that's too much work.

Let's look at the markup I use for these buttons. This will give you more clarity when you see the CSS.

<div class="button">
   <asp:LinkButton ID="btnSave" runat="Server" CssClass="bSave" Text="Save User" OnClick="btnSave_Click"  ValidationGroup="userDetails"  UseSubmitBehavior="false" />
</div>
<div class="button">
    <asp:LinkButton ID="btnCancel" runat="Server" CssClass="bCancel" Text="Cancel" OnClick="btnCancel_Click" CausesValidation="False"   UseSubmitBehavior="false" />
</div>
<div class="button">
    <asp:LinkButton ID="btnDeleteUser" runat="Server" CssClass="bDelete" Text="Delete" UseSubmitBehavior="false" />
</div>      
<div class="clear"></div>

You see that I have 3 div's, and in each div I have a LinkButton. Under the LinkButtons I have a single div with the "clear" class. My clear class does clear:both;. It clears the floats that all of these div's have.

Here's the CSS

.button
{
    background-color:#84A1D6;
    border:solid 2px #415D9B;
    margin:5px;
    min-width:70px;
    height:20px;
    float:left;
    padding-left:3px;
}
 
 
.button a
{
    display:block;
    padding:2px 5px 2px 20px;
    min-width:70px;
}
 
.button:hover
{
    background-color: #a0bdf2;
}
 
.button a:active
{
    border-top:solid 1px black;
}
 
 
/* Button Style */
.button a.bLogin
{
    background-image: url(Images/Login.png);
    background-position:left;
    background-repeat:no-repeat;    
}
 
.button a.bSave
{
    background-image: url(Images/Save.png);
    background-position:left;
    background-repeat:no-repeat;    
}
 
.button a.bCancel
{
    background-image: url(Images/Cancel.png);
    background-position:left;
    background-repeat:no-repeat;    
}

You can notice that each .button class is floating left. I need to use Block elements for these buttons so I can apply padding, margin's etc. You cannot do that to an inline element. Seeing they're block, I want them line up, so I float them. You can also see that my .button a contains the same width as the parent .button, this is because I want the entire button to be clickable, not just the link portion.

I am also using pseudo classes for this. You can see the :hover and the :active. This gives my buttons "hover" and "click" styles without having to code any javascript. (IE7 and FF).

And that is all you need to do.

Like I said, it's a tiny bit more markup and some small CSS, however, the outcome of this work is well worth it. It gives a whole new presentation to your application.

A Table, some text and CSS Pseudo Classes

rternier — Thu, 18 Oct 2007 17:17:00 GMT

To See this in a working example, please check out my projects at : bicnet Projects.

I really want to thank the IE7 team for building in more Support for CSS. It allows us web developers to do some pretty cool things with CSS without the use of javaScript. Unfortunately not all the goodies work with IE7 (:after :before) but a lot do.

This post is a quick glance at using CSS Pseudo Classes with Tables. In this example I will use a regular HTML table, however this will work with any ASP.NET control that outputs an html <table>.

First, if you have no idea what a Pseudo class is please look at this page by W3Schools.

Let's start with some CSS:

#MyTable
{
    width:460px;
}
 
#MyTable td
{
    width:150px;
}
 
#MyTable td:hover
{
    background-color:Black;
    color:Yellow;
}
 
#MyTable tr:hover
{
    border: solid 1px green;
    background-color:Yellow;
    color:Maroon;
}
 
 
#MyTable thead tr:hover
{
    background-color:ThreeDShadow;
    color:White;
 
}
 
#MyTable td span:hover:after
{
    content: "\00BB";
}
 
#MyTable td span:hover:before
{
    content:"\00AB";
}
 
#MyTable .row1
{
    border:solid 1px white;
}
 
#MyTable .row1:hover
{
    background-color:Aqua;
    color:Navy;
}
 
#Mytable .column1:hover
{
    background-color: #1b1b1b;
    color: Yellow;
}
 
#MyTable .column2:hover
{
    background-color: #545454;
    color: Yellow;
}
 
#MyTable .column3:hover
{
    background-color: #8c8c8c;
    color: Yellow;
}
 
#MyTable .row1 td:hover:before
{
    content:open-quote;
}
 
#MyTable .row1 td:hover:after
{
    content:close-quote;
}

You'll notice that the #MyTable is the only declared item that I'm using. This is because CSS can traverse my DOM and apply it's styles to the children based on how I declare it.

Let's look at my HTML Markup:

<table id="MyTable" cellpadding="0" cellspacing="0">
    <thead>
        <tr>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
        </tr>
    </thead>
    <tr>
        <td>Column 1 Row 1</td>
        <td>Column 2 Row 1</td>
        <td>Column 3 Row 1</td>
    </tr>
    <tr>
        <td>Column 1 Row 2</td>
        <td>Column 2 Row 2</td>
        <td>Column 3 Row 2</td>
    </tr>
    <tr>
        <td>Column 1 Row 3</td>
        <td>Column 2 Row 3</td>
        <td>Column 3 Row 3</td>
    </tr>
    <tr>
        <td>Column 1 Row 4</td>
        <td>Column 2 Row 4</td>
        <td>Column 3 Row 4</td>
    </tr>
    <tr class="row1">
        <td class="column1">Column 1 Row 4</td>
        <td class="column2">Column 2 Row 4</td>
        <td class="column3">Column 3 Row 4</td>
    </tr>
    <tr>
        <td><span>Text in Span</span></td>
        <td><span>Text in Span</span></td>
        <td><span>Text in Span</span></td>
    </tr>
</table>

This is a very simple Table. The last row contains text in "span" tags, and the 2nd to last row has class names on the <td> and <tr> elements. Also notice I do not declare those classes in CSS, I don't need to.

To See this in a working environment please check out my projects at : bicnet Projects.
(*Note I don't have time right now to fix a few issues in my projects section. I'll be updating it and fixing a few issues later this week... if my baby isn't born )

Like I said, this is a quick example that shows some cool things you can do with CSS. Sometimes you don't need to purchase those kick ass controls from Telerik, all you need to do is put your head down, look at some cool examples of sites and tables and then pilfer what you need.

Here's a list for those that wish to learn more about Design and CSS (because I am no expert at design):