As a web designer I am frequently required to embed a Google or possibly Bing map onto the contact page of a new website. Often times the client or the allotted area for the map can be fairly small making it hard to see the “Pop-up” window which contains the address information and such on the map. Frequently the window will get cut off on the top or it simply is aligned oddly for the size of the map.

The issue:

Notice how the window is cut off and you can’t really see much.

How it should look:

Now you can see the full Pop-up window, yet without having to change the allotted width and height of the map area.

The Solution:

HTML:
<div class="mapContainer">
<iframe width="400" height="550" src="”></div>
</div>

*Note that most of the map code is removed for ease of reading.

CSS:
.mapContainer
{
width:400px;
height: 300px;
overflow: hidden;
}

If you look at the code above you will see a few key elements to make this work.

First, you need to wrap your iFrame in a simple div with a class or id attached to it, in this case it’s just a class called “mapContainer”.

Secondly, in the css code you need to define your height and width, specifically the height. As you will notice I have set the css height to only 300 pixels (my allotted space on my site), but the iFrame height is 550 pixels. (more on this in a bit)

Thirdly, you will notice I have a css attribute: overflow: hidden; – this is important as it allows us to hide anything that may fall outside of our div container.

Now back to the height settings, if you look at the iFrame you will notice it is set to 550px and not the 300px that we have in our css. What we are doing is making the map “extra tall” which in return pull our location marker and pop-up down further inside of the div, thus lining it up the way we want need it to be while not extending outside of our div container since we have the overflow: hidden value set. (You need to fiddle with the height values until you get the desired vertical placement)

And that is all there is to it, pretty simple but very effective.

I have never actually tried it, but I would expect you can have the same results if you need to adjust the horizontal placement as well, just set your iFrame width larger than the css width.

You will only be able to pull the pop-up down and/or right with this technique.

Has anyone else had a similar issue? How did you solve it? Is there a better way? Let me know your thoughts.

Here at Krazier Designs we feel that art plays an important role in all of our lives whether people realize it or not, we hope that we can help your organization promote your art services to the community.

If your organization falls into the visual or performing arts and are in need of a new website, please send us an email at: info@krazier.com with at least the information listed below:

• Organization Name
• Art Category involved with
• Current Website
• Your Name and relation to the organization
• Email Address
• Phone Number
• Description of your services
• Description of how a new site would benefit you and the community
• Description of the features you would like on your website that do not already exist on your current site
• Any other useful information about your organization so we can get a better level of understand as to what you do and what you offer

We are looking to get started on a site soon and so we are setting a short deadline to get your requests in. We will accept requests up through Sunday September 20th 2009. At that point we will pick one organization to work with on a new website.

Please note:

• Websites will be static only, no database driven sites will be allowed
• Websites will be built using the ASP.NET framework or basic HTML depending on the features of the site
• Domain Name expenses are to be handled by the organization
• Hosting can be provided if requested
• Due to limitations in our own time we are limiting our free services to 40 hours

Please pass on this article to anyone who you feel might be interested in our offer, we look forward to all your requests and we hope we are able to help out a great organization.

Thank you,
Krazier Designs

This site was a bit more involved compared to the Hendricks Insurance site in that there were more pages, photos, content and they requested a flash element with some photos and basic text.

Professional looking design targeted at a younger age group were just a couple of the goals the client requested. Business/ Professional design involves clean, sharp lines, strong colors and a clean interface.The client is very pleased with the way the site turned out, we are happy that the Centrasota Centre now has a great new website to show their clients.

This interface includes things such as:

• An online “Design Brief” used to collect basic information as to what Inn Keepers are looking for in a website, from colors and layout to age demographics and specifically what pages are required for the site.
• An “Assets” page, used to collect files from the client such as their logo, photos and other marketing materials they may already have which could influence the direction of the design.
• We also provide a page specifically for collecting the content for each page of the website, our clients can login add the information about the Bed and Breakfast Features and submit it to us to be included into the live website. This is an easy way for the client to provide us with “copy” as they write it for inclusion into their site.

We have also setup an account on Twitter so you can follow any important updates and information that we may provide, including giveaways once in a while, follow us here: http://twitter.com/GetInnStyle

We look forward to working with all our new customers!

We decided it is important that we start showcasing more of our recent work to help show-off what we are really able to create. We plan to blog about our latest projects at least once a week from here on out.

Recently we started working with a company called Sytek Communications located about 30 miles north of St. Cloud MN in Upsula MN. They recently started offering basic web design services and ended up getting busier than expected and needed someone to help them out. We saw it as a good opportunity for us to produce a lot of new quality work for our portfolio while at the same time helping make the web look a little nicer.

We are currently working on two new sites for them and we just launched a third site that we completed. Hendricks Insurance Agency is the first completed site and we think it turned out quite well. The client was looking for something clean and easy to use. We received basic color requests and only a few photos to work with.

Based off this basic information we designed the concept shown above, the client loved the design and was beyond what they would have ever imagined. We swiftly converted the design to html and the site was launched in under a week (which includes waiting for client responses on design and other comments on the test site before final approval.)

This is the first of hopefully many more blog posts showcasing some of our most recent work for our clients.