Chris Newman

Wednesday, August 06, 2008

Posted in HTML Layout

Today I turned a Mock created by Web Solution’s Senior Web Designer Bradford Sherrill into an HTML layout.

I decided to do something a little different this time and take screen shots of my progress. Click an Image to enlarge it.

*Edit

As Requested I am updating this post with the HTML and CSS I used to create this site.

I’m starting with the HTML and adding the CSS in a day or two.

I started by creating elements with the sizes and locations of each part of the web site layout. The different colors are so I can easily see each element.

Im only including the HTML in the body tag to reduce the amount of code you have to scroll though.

This layout is being developed for an ASP.Net 2.0 Master Page so any <asp: tags are specific to that framework.

I started by creating 6 div’s to define the basic layout of the site.

The header has a fixed height and expands to 100% of the browser window.

The body content div has no defined height but has a fixed width of 1000 pixels.

The 3 divs that it contains each have a fixed width and are floated left. The reason these elements are inside of a parent div with a fixed width is to prevent the divs from dropping below each other when the browser is less than 1000 pixels because the user resized the browser or has a lower screen resolution.

<body>

    <form id="form1" runat="server">

        <div id="header"></div>

        <div id="bodyContent">

            <div id="leftContentHolder"></div>

            <div id="menuContent"></div>

            <div id="mainContent"></div>

        </div>

        <div id="footer"></div>

    </form>

</body>

Next I added in a background image for the Header, Left Content Area, The Menu, the Main Content Area and the Footer.

The Images are added in as background images for each part of the layout except the logo.

In the mainContent div I added another div that is used to give the content some padding. This is done to get around IE 6’s broken box model. Many people prefer to use some IE specific css hack to give an element with a width padding or a margin but I prefer this method.

<body>

    <form id="form1" runat="server">

        <div id="header"></div>

        <div id="bodyContent">

            <div id="leftContentHolder">

                <div id="logo">

                    <a href="Default.aspx">

                        <img src="images/logo.jpg" alt="TJB Industries" width="208px" height="268px" />

                    </a>

                </div>

                <div id="leftContent"></div>

            </div>

            <div id="menuContent"></div>

            <div id="mainContent">

                <div id="mainContentPadding">

                    <asp:ContentPlaceHolder ID="cp1" runat="server">

                    </asp:ContentPlaceHolder>

                </div>

            </div>

        </div>

        <div id="footer"></div>

    </form>

</body>

Now this site is finally starting to look good. Lets finish the layout up by adding in some content in the header and footer

<body>

    <form id="form1" runat="server">

        <div id="header">

            <div id="services">

            </div>

            <div id="headerText">

                <div id="headerTextSpacing">

                    Header Links Here

                </div>

            </div>

        </div>

        <div id="bodyContent">

            <div id="leftContentHolder">

                <div id="logo">

                    <a href="Default.aspx">

                        <img src="images/logo.jpg" alt="TJB Industries" width="208px" height="268px" />

                    </a>

                </div>

                <div id="leftContent">

                    <div id="leftContentPadding">

                    </div>

                </div>

            </div>

            <div id="menuContent">

                <div id="menuContentPadding">

                    <div id="ConcretePolishing" runat="server" class="menuButton">

                        <a href="Concrete-Polishing.aspx">Concrete Polishing</a>

                    </div>

                    <div id="FloorCoatings" runat="server" class="menuButton">

                        <a href="Floor-Coatings.aspx">Floor Coatings</a>

                    </div>

                    <div id="SeamlessFlooring" runat="server" class="menuButton">

                        <a href="Seamless-Flooring.aspx">Seamless Flooring</a>

                    </div>

                    <div id="TerrazzoCementitious" runat="server" class="menuButton">

                        <a href="Terrazzo-Cementitious.aspx">Terrazzo Cementitious</a>

                    </div>

                    <div id="SurfacePreparation" runat="server" class="menuButton">

                        <a href="Surface-Preparation.aspx">Surface Preparation</a>

                    </div>

                    <div id="SafetyStriping" runat="server" class="menuButton">

                        <a href="Safety-Striping.aspx">Safety Striping</a>

                    </div>

                    <div id="ConcreteRepair" runat="server" class="menuButton">

                        <a href="Concrete-Repair.aspx">Concrete Repair</a>

                    </div>

                    <div id="FloorMaintenance" runat="server" class="menuButton">

                        <a href="Floor-Maintenance.aspx">Floor Maintenance</a>

                    </div>

                </div>

            </div>

            <div id="mainContent">

                <div id="mainContentPadding">

                    <asp:ContentPlaceHolder ID="cp1" runat="server">

                    </asp:ContentPlaceHolder>

                </div>

            </div>

        </div>

        <div id="footer">

            <div id="footerText">

                Footer Links Here

            </div>

        </div>

    </form>

The layout is now complete, so its time to finish adding in the content that would be displayed on our home page.

I hope you enjoyed this article.

I will be going into further detail on my next Web Layout article but if you want to see anything specific, let me know.

Wednesday, August 06, 2008 9:20:24 PM (Eastern Daylight Time, UTC-04:00)

Comments [4] -

Monday, July 21, 2008

Google Maps GeoCoder API returns code 602

Posted in Google Maps

I spent a few hours today figuring out why the Google GeoCoder API was returning the error code “602” ( G_GEO_UNAVAILABLE_ADDRESS ) for an address in Clinton Township Michigan, but finds the address on the Google Maps page.

From what I gather from researching this issue is that Google possibly uses 2 different sets of data for Geocoding. One for their own use on Google Maps and another for their Google Maps API.

One solution that I discovered while testing data against their API was to check the Status code for a “602” error and then resubmit the information while leaving out the City information. This resulted in the API getting the Latitude and Longitude for the address.

Hopefully this will work for all addresses that return this error until Google updates this 2nd set of data or uses the same data source for both.

Monday, July 21, 2008 6:18:46 PM (Eastern Daylight Time, UTC-04:00)

Comments [0] -

Friday, July 11, 2008

How I Got Started in Software Development

Posted in About Me

How old were you when you started programming?

I started programming when I was 12 years old. My father had many programing books and I started reading them and doing all the exercises. This was all on a very slow x286 computer running DOS with a very colorful 4 color monitor.

How did you get started in programming?

As stated above I started learning from books my father had at a young age. All of the programs I made at this time were all written in BASIC. I don’t remember any of the books or programs I've made at this age except one.

More BASIC Computer Games
Edited by David H. Ahl, published 1979

An archive of this book can be found here http://www.atariarchives.org/morebasicgames/

What was your first language?

My first language was BASIC.

What was the first real program you wrote?

I cant consider any programs I made from programming books, any additions I made to them or the AOL Progs I made when I was in High School a real program. I cant consider any program I made in college a “Real"” program either.

Im going to have to say its the T2D Animation Datablock Editor I made for the Torque Game Builder Pro 2D from GarageGames.

It was a tool that took an image map and let you drag and drop it in the story board to create an animation for use in the game engine.

I used to have a movie of this in action but lost it to a hard drive crash and have long since deleted backups of my old web site.

After getting a job at Web Solutions I did not have the time to continue work on this editor and donated the code and rights to Garage Games.

They have integrated it into their game engine and improved upon greatly resulting in this.\

What languages have you used since you started programming?

I have used Actionscript, ASP, Assembly, Basic, C, C++, C#, Java, Javascript, PERL, PHP, Visual Basic, VB.Net and a few more i cant even think of right now.

What was your first professional programming gig?

I’m still employed at my first gig. I started working at Web Solutions in Sept of 05.

If you knew then what you know now, would you have started programming?

Oh Yes! I may have done things differently though.

I’ve always wanted to do game development and put a lot of time into that. I found that doing Web and Application programming was more satisfying for me so I may have put more time into learning that even though the end results are not as fun.

If there is one thing you learned along the way that you would tell new developers, what would it be?

"A scientist builds in order to learn;
an engineer learns in order to build."
-Fred Brooks

I would tell them that they should be careful on what they study in college. Many students who want to get into computer programming take many useless Computer Science courses.

If your goal is to build applications take as many Computer Engineering classes as you can.

Instead of going on about this. This article can explain it much better than I could.

Software Engineering is Not Computer Science

What's the most fun you've ever had ... programming?

Oh God, now this is the part where most people would not understand unless they are a code geek like me. I always have fun programming, well… unless I have to maintain software that was written horribly or that was written in an obsolete language.

Friday, July 11, 2008 11:28:34 PM (Eastern Daylight Time, UTC-04:00)

Comments [0] -

Sunday, May 25, 2008

HTML Superscripts and Subscripts messes up line height

Posted in CSS

I was recently updating a clients site by adding in some ® symbols as superscripts and subscripts. This resulted in some pretty nasty line heights as you can see below.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit_®. Aenean ac orci in neque consectetuer viverra.^® In eu tellus ut felis posuere sollicitudin. Nunc id lectus. Fusce quis turpis. Praesent egestas nunc sit amet lorem. Aliquam erat volutpat. Ut felis leo, lacinia molestie, molestie vitae, porttitor et, dolor. Quisque diam erat, rutrum non, cursus at, tempus in, libero. Maecenas dignissim dolor ut nibh. Suspendisse rutrum aliquet felis. Vivamus mi. Donec aliquam imperdiet mauris.

I searched on Google and found a few methods to correct this issue. They worked fine in Firefox but not in IE 6 and sometimes 7.

After experimenting a bit, I found a way that corrects this issue with CSS and works in Firefox, Opera, Safari, IE 6 and 7.

sup
{

    vertical-align: baseline;
    font-size: 0.8em;
    position: relative;
    top: -0.4em;
}

sub
{
    vertical-align: baseline;
    font-size: 0.8em;
    position: relative;
    bottom: -0.4em;
}

Just adjust the position and font size to suit your taste.

Sunday, May 25, 2008 2:54:28 PM (Eastern Daylight Time, UTC-04:00)

Comments [0] -

Thursday, May 08, 2008

ASP.NET Flash Remoting

Posted in ASP.NET | Flash Remoting

If you are looking for information on a free ASP.NET Flash Remoting Solution you have come to the right place.

The Midnight Coders have a product called WebORB® that will meet all of your remoting , real-time messaging (RTMP) and Flex Data Services (AMF0 and AMF3, Data Management, Flex Messaging (pub/sub, push)) needs.

I have used this product's Flash Remotings features extensively on one of my clients sites and I highly recommend it to anyone looking for a Flash Remoting Solution even if they are not doing development in ASP.NET. WebORB® also comes in Java, Ruby On Rails and PHP versions.

Installation

Installing WebORB® is extremely easy. Just copy its assemblies to your bin folder, copy a few files and folders to your web applications root directory and give a few of them write permissions. The final step is updating your web.config file with its HTTP Handlers.

If you install WebORB® on your server, you have the option of automatically deploying to to a virtual directory. There seems to be 1 downfall, it appears that it can only be automatically installed to virtual directorys of your default web site. If you are on a server that is hosting multiple web sites, you should just do the manual install.

Using WebORB

One of WebORB's best abilities is that it will parse your Web Applications Assemblies and generate Action Script code for use in your flash movie or JavaScript for your AJAX functions. It can generate code in a variety of formats and styles: Flex Remoting / AS3, Flash Remoting / AS2, ARP Framework / AS2 or AS3, Cairngorm Framework, FlashComm / FMS2, AJAX Client and PureMVC. It will generate code for anything that your functions in your assembly returns. Objects, DataSets, strings etc.

Thursday, May 08, 2008 9:02:50 PM (Eastern Daylight Time, UTC-04:00)

Comments [0] -

Navigation

Home

Web Solutions

Bradford Sherrill

Advertisments