Category: Design

  • Help! My Sidebar is Displayed Below My Content!

    Help! My Sidebar is Displayed Below My Content!

    Since I have been designing my own WordPress themes, I have learned a lot of create CSS-designed themes and how the various elements on a page interact with other elements. It has been frustrating at times to position elements in the correct locations, but it is because of this frustration that I have managed to learn how to create my themes.

    The one common problem that I had when I started designing my themes, and it seems it is a common problem to many people, is that of my sidebar dropping below my content when displaying my page. The cause of this problem is that the widths of my content and sidebar divisions were larger than the entire container they were rendered in. I thought I had the calculated the widths correctly, but what I thought was the width, wasn’t the true width of the elements. This post explains how you can easily debug such a problem.

    A Few Things To Help Follow Along

    I find that the best way to learn is to do things myself. I will be showing you some HTML/CSS code in this example, as well as using a Firefox extension. So you can also try things for yourself, you should use the following steps:

    1. If you don’t have it installed, install the Firefox Web browser, open Firefox and then install the Firebug extension.
    2. Download this example HTML file (in zip format), and then extract it to any directory on your local computer. Once downloaded, open the HTML file in a text editor, as well as opening the file in FireFox.

    Once you have done the above steps, you can now follow along in this post.

    The Width Example

    In the example HTML file that was provided above, you will notice that there are three elements defined in the file (shown between the <style> tags), container, content and sidebar. The container element is the main container and will contain both the content and sidebar elements. The content is displayed on the left, while the sidebar is displayed on the right. You should see this in your Web browser.

    You will also notice that each element has a defined width attribute. The container element has a width of 900 pixels, the content element is 600 pixels wide, and the sidebar element is 300 pixels wide. As it stands, you should be seeing the content element and the sidebar element side-by-side, because they have a combined width that is equal to the width of the container – 900 pixels.

    To show this fact in Firefox, use the following steps:

    1. Right-click the text in the content section and select “Inspect Element”. A new window on the bottom will open. Stretch the bottom window up if you don’t see much of it.
    2. On the left of the window is the HTML code, while on the right is the information about the selected element. On the right, click the “Layout” option. This will display a boxed representation of the selected element.

    The layout diagram for the three elements is shown (combined), in the image below.

    Example Elements Layout Diagram
    Example Elements Layout Diagram
    (Click to enlarge)

    By clicking on the container, content, and sidebar elements you can easily see the width of the elements in the Layout diagram. Let’s make some changes to the CSS to see the impact.

    When Width is Not What You Think

    The width defined in the CSS styles is not always what you think it is. The width that you define in the stylesheet is the width that will contain the contents of the element, but it isn’t the total width of the element.

    To prove this point, make the following change:

    [code language=”css”]
    #content
    {
    background-color:#ccc;
    float:left;
    padding:1px; /* Make this change */
    margin:0;
    width:600px;
    }
    [/code]

    Now refresh the file in the Firefox browser. What you will now notice is the content element is above the sidebar element.

    In the left Firebug window, click on the content element. The layout diagram in the Firebug window still shows the content element as having a width of 600 pixels. If the width didn’t change, how come the content and sidebar elements are no longer beside each other?

    The total width of the content element has changed with the addition of the padding. We have added 2 pixels of padding (1 pixel on the left and right) to the element, so the true width of the content element is now 602 pixels and not 600 pixels.

    You can now see the additional 1 pixel padding in the layout diagram of the Firebug window to the left and right side of the content element. The layout diagram that indicates the padding is shown below.

    Content Element With 1 Pixel Padding
    Content Element With 1 Pixel Padding
    (Click to enlarge)

    Adding the width of 300 pixels to the sidebar to the 602 pixels for the content gives a total width of 902 pixels, which is now wider than the container width of 900 pixels. Because of this, the sidebar element is “squeezed” out of alignment, and is now below the content.

    If you were to change the margin attribute of the content element to 1 pixel instead of the padding attribute, the result would be the same. The same result would also happen if you were to add a border to the left or right of the content element.

    Changing those same attributes (border, padding, or margin) of the sidebar element would have the same effect, as well.

    Therefore, the true width of an element is defined as:

    true width = [width] + [border (left and right)] + [padding (left and right)] + [margin (left and right)]

    By using the Layout option in the Firebug extension for various elements, you can easily see the values for the above calculation for any element. You simply add them up to get the total width of an element.

    The next example shows how we can determine the total width of an element when the three attributes are assigned. The CSS styling fo the content element is shown below.

    #content
    {
      border:1px solid #000;
      background-color:#ccc;
      float:left;
      padding:5px;
      margin:2px;
      width:600px;
    }

    Using the Firebug Layout window, we can now see that the total width of the content element is now 616 pixels. The diagram that shows the calculation is displayed below.

    Content Element With Total Width Calculation
    Content Element With Total Width Calculation
    (Click to enlarge)

    If you are having trouble with displaying various elements side-by-side on you Web pages, you should use the Firebug Firefox extension to verify that the total width of the elements can fit properly in the containing element. By using the Firebug extension, along with its layout feature, you can easily calculate the width of the various elements by simply clicking on them in the code.

  • 5 Dreadful Mistakes that Must be Avoided by a Web Design Company and a Website Designer

    5 Dreadful Mistakes that Must be Avoided by a Web Design Company and a Website Designer

    If you are a website designer you might be planning to make another grand website that you fancy will captivate a great mass of visitor’s attention. Indeed it will, depending upon the efforts you put into your work. You will be having in mind great design ideas that constantly tempt you to put your imagination into creation, an entity that is visible, admirable and tangible. But don’t be over anxious, it’s good to be enthusiastic but it may happen that some of your design ideas turn into dreadful mistakes that you repent over after creation. It’s not just the website designers who can make such mistakes; a web design company can also be prone to such mistakes. So what are these dreadful mistakes which must be avoided especially if you are planning to represent your business online? So here are we going to discuss them.

    (more…)

  • How to Test Your Web Site on a Smaller Browser Window

    How to Test Your Web Site on a Smaller Browser Window

    Many new computers and laptops sold today include a widescreen monitor with a nice high resolution. For many applications, such as games and movies, having a large widescreen monitor makes the experience much better. Movies were meant for widescreen, and games, well they always look better in a higher resolution.

    The one aspect where the widescreen monitors may be more of a pain is in web development. The reason is simple: creating a web site that displays great on many monitor resolutions is not easy. The web site can look good at one resolution and monitor size, but not on another. If you do have a widescreen monitor you can easily test your site with various resolutions with a free application.

    (more…)

  • Create an Attractive Web 2.0 Design Website

    Create an Attractive Web 2.0 Design Website

    The purpose of Web 2.0 design is to focus on the user, and to step up the level of interactivity. Instead of limiting the user to simply viewing the content you have put on your page, a Web 2.0 design will facilitate dialog & user created content. Some examples of Web 2.0 are blogs, mashups, social networking sites and video sharing sites. In this article we will discuss the different characteristics of a Web 2.0 design.

    The first thing to keep in mind when designing, is less is more. Removing unnecessary components will not only make your website load faster, it will direct your users attention to the important parts. It is said that you only have 3.5 seconds to capture and retain the viewers attention, and with Web 2.0, it won’t be hard to do.

    (more…)

  • Make Your Site Load Photos as Fast as it Should

    Make Your Site Load Photos as Fast as it Should

    Many people that have taken on the task of putting up a website do not realize that visitors are not always very patient, especially when it comes to page loading. If the site is running slowly, people who come across it are likely to become frustrated and leave, with rare revisits in the future. If you want your photography to be exposed to as many individuals as possible, it is important to put in the work to make sure everything loads as fast as you can manage. But how can this be achieved? What does a designer need to do have a fast loading photography website? The below tips should be consulted.

    (more…)

  • Increase Your Web Site Performance with CloudFlare

    Increase Your Web Site Performance with CloudFlare

    I recently experienced some performance issues on this blog and changed the template to more of a basic look and feel. By doing so I reduced the number of requests for all the pages on my blog, as well as the number of bytes that was transferred. In an effort to increase the performance even further, I signed up with an online free service.

    While I was on Twitter several months ago I noticed a tweet from Michael Aulia from Craving Tech regarding a service he just started using called CloudFlare. This site talks about increasing a web site’s performance while also making the site safer. I have been using their service over the past few months, and so far I have been impressed.

    (more…)

  • How to Properly Resize a CSS Sprite Image in GIMP

    How to Properly Resize a CSS Sprite Image in GIMP

    GIMP is a popular image editor, but to require some knowledge if you want to properly resize a CSS sprite image in GIMP. In my previous post I provided instructions on resizing a CSS sprite in Photoshop, but I realize that Photoshop is expensive to buy, and many people may not be using that photo editor. For those that are looking for a free alternative to Photoshop, I suggest you download GIMP which is also powerful photo editor. For more information about GIMP, you can read this GIMP review.

    If you are used to Photoshop, GIMP can take some getting used to, but once you understand the basics, it is easy to use. In this tutorial I will show you how you can easily resize a CSS sprite in GIMP much like I did in Photoshop.

    (more…)

  • How to Properly Resize a CSS Sprite Image in Photoshop

    How to Properly Resize a CSS Sprite Image in Photoshop

    Once you have created a CSS sprite image for your website, it is important to learn how to properly resize a CSS sprite image in Photoshop if you wish to add additional images. The reason for this is that when you resize the canvas of an image in Photoshop, the additional pixels added to the image will be applied to all sides of the image equally. This will have the undesired effect of centering the previous image in the current image, and throwing off your CSS sprite positioning.

    To avoid such an issue, it is important to ensure that you only resize either the bottom or the left side of the CSS sprite image. In this post I’ll show you how to properly resize a CSS sprite image in Photoshop.

    (more…)