Blog

Here is the approach I take when creating containers that are dynamic in height.

View an example

First I start with a png image of the container.

I open this in Photoshop and create my slices (4 images) from the original image.

Image 1. The header

Image 2. The background that is repeated, only 1px high cut just below the header

Image 3. The bottom gradient of the container. The top is just below the section that is repeated and bottom just above the bottom slice where the corners begin to round.

Image 4. The bottom of the container.
 

Now for putting this together with xhtml and css.

Here is my xhtml:

    <div class="container">
      <h1>Container Demo</h1>
      <div class="main">
        <div class="bottom">
          <p>Add your content here</p><p>Add your content here</p>
        </div>
      </div>
      <img alt="" src="images/bottom.png" width="429" height="11" />
    </div>

and my css:

body {background-color:#fff; margin:40px; font-size:62.5%; line-height:100%; font-family:Arial, Helvetica, Sans-Serif;}

.container{width:429px; background:transparent url(../images/header.png) no-repeat top left;}
.container h1{font-size:1.2em; font-weight:bold; line-height:2em; color:#fff; text-align:center; margin:0;}
.container .main{width:429px; background:transparent url(../images/background.png) repeat-y top left;}
.container img{display:block;}
.container .bottom{width:429px; background:transparent url(../images/gradient.png) no-repeat bottom left; padding:5px 15px;}

A little explanation of what is going on.
Basically it all comes together with the two layers.  The bottom gradient is on top of the main layer.  When content is added  the bottom gradient layer pushes the parent main container down.  We align the bottom gradient at the bottom of the cell with the rest of the background transparent so you see the main repeating background behind it.

Is this how others are doing this? Do you have a better approach that you can share?

Filed under: Web Development   Tags: css, xhtml,
 No Comments »

Scenerio: I wanted to created a drop down menu with the cmslistmenu instead of the cmsmenu control.  The cmsmenu control works, but the rendered output is a LOT of tables and javascript.  I like to keep my markup as lean as possible. I also wanted to use a cms control so the menu could be built dynamically at runtime based on the cms content structure.

Solution: The solution is actually quite simple and you’ll see that you can cut and paste most of this to work with your project.

1. Drop the <cms:CMSListMenu ID=”CMSListMenu1″ runat=”server” /> control in your markup where you want the menu to be rendered.

2. Updated your css stylesheet for the site.

#CMSListMenu1{margin:0; list-style:none;}
#CMSListMenu1 li.CMSListMenuLI, #CMSListMenu1 li.CMSListMenuHighlightedLI{float:left; font-size:13px; font-weight:bolder; line-height:30px; text-transform:uppercase; padding-right:22px;}
#CMSListMenu1 li.CMSListMenuLI ul{position:absolute; display:none; width:13em; background-color:#000; padding:0 0 6px 4px; list-style:none;}
#CMSListMenu1 li.CMSListMenuLI:hover ul{display:block;}
#CMSListMenu1 li.CMSListMenuHighlightedLI ul{position:absolute; display:none; width:13em; background-color:#000; padding:0 0 6px 4px; list-style:none;}
#CMSListMenu1 li.CMSListMenuHighlightedLI:hover ul{display:block;}
#CMSListMenu1 li.CMSListMenuLI ul.CMSListMenuUL li.CMSListMenuLI, .nav li.CMSListMenuHighlightedLI ul.CMSListMenuUL li.CMSListMenuLI{float:none; line-height: 2em;}
#CMSListMenu1 li.CMSListMenuLI ul.CMSListMenuUL li.CMSListMenuHighlightedLI{float:none; line-height: 2em;}
#CMSListMenu1 li.CMSListMenuLI ul.CMSListMenuUL li.CMSListMenuHighlightedLI .CMSListMenuLinkHighlighted{color:#006600;} #CMSListMenu1 li a, #CMSListMenu1 li a:visited{color:#9e7c13; text-decoration:none;}
#CMSListMenu1 li a:hover{color:#006600;}

These two steps along will give you a working dropdown menu.  Now simply update they styling in your stylesheet to match your site.

3 (optional): If you care about IE6 you’re going to have to add a little jQuery to get the dropdown to function.
3a. Add jQuery reference in the head of your site if you’re not already using it:

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js"  type="text/javascript"></script>

*note  I like to advantage of the MS CDN.
3b. I add a javascript reference to a globals javascript file.

<script src="~/Scripts/global.js" type="text/javascript"></script>

In that globals.js file add these lines of code:

$(document).ready(function() {
$('li.CMSListMenuLI, li.CMSListMenuHighlightedLI').hover(
  function() { $('ul', this).css('display', 'block'); },
  function() { $('ul', this).css('display', 'none'); });
});

Working example: Nature Valley Pro Ride

You may have to create an IE conditional style sheet to fix the positioning of the dropdowns.

That’s it, a simple way to get a dropdown menu based on your cms content that is semantically correct using pure css and a little jQuery for IE6.

Filed under: Web Development   Tags: Kentico CMS,
 No Comments »

Scenerio: I have a simple contact form in which I want to post to a different page.
Pretty simple, just set the PostBackUrl property of the button to the page I want to post to. It works like it should locally.  When I deploy it to the server, Rackspace Cloud, it doesn’t work.

Research: After Binging for a while I found that the issue was due to a javascript error.  If you VIew Source of the page, you’ll notice that the rendered html uses javascript to perform the PostBack.

<input style=”border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px” id=”imgButton” class=”submit” onclick=”javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;imgButton&quot;, &quot;&quot;, false, &quot;&quot;, &quot;/quick-contact.aspx&quot;, false, false))” src=”/i/qcsubmit.gif” type=”image” name=”imgButton” />

I then was able to capture the javascript error in IE. *Sidenote, what is a good way to do this? I ended up putting my cursor in the form, hit enter and quickly clicked on the browser stop button. There must be a better way.

“Webform_PostbackOptions” is undefined.

Ok…. Why is that? I found this in the comments at a blog post on http://pocketnerd.blogspot.com/2008/01/webformpostbackoptions-is-undefined.html

“I was getting this error in a load balanced production environment, but once the network admin turned on sticky sessions, all the errors went away. I assume it was trying to load the .axd file from the other web server and perhaps that caused a security problem which didn’t allow the file to load. Not sure but just thought I’d share what fixed it for me. “

I don’t have server access when hosting in the Cloud.

The WebForm_PostBackOptions function should be in the WebResource.axd file that you’ll see is referenced in the html on load.

<script src=”/WebResource.axd?d=Ttwk99ZBtJ8argpvGbO64g2&amp;t=633750447951477990″ type=”text/javascript”></script>

I tried browsing to this file and this indeed was the issue, 404 Not Found.

Solution: I loaded the page locally. Viewed Source, grabbed the WebResource.axd and querystring, browsed to this file. This gave me the output of the javascript. I copied that all and placed it into a postbackfix.js file. I then referenced this js file on the page. Uploaded the new js and aspx files. Works now.

This took me a few hours of banging my head (not to Quit Riot) to figure out. Hope this helps someone else.

Filed under: asp.net,Web Development   Tags: .NET, Rackspace Cloud,
 4 Comments »