Create a simple Responsive Design for a blog site using CSS media queries

Responsive Web Design is basically a design done with CSS3 Media Queries that changes according to the environment a visitor uses. In other words, the design "responds" to changes.

It may sound science-fictiony, but that's what happens. And it's not complicated like it sounds. It's actually easy to create a basic Responsive design. All you need to do is play a little with CSS3 Media Queries and setting different widths for container elements.


Create a Simple HTML 5 Website using ASP.NET MVC and LINQ

We’ll be creating a simple but fully functional website. We’ll use the design, HTML and CSS from one of my previous blog posts: Step-by-step walktrough for coding a Web Site from a Photoshop template. So, HTML and CSS are basically already done. Of course, we need to integrate these files into ASP.NET templates, so the basic HTML & CSS will be repeated.

So, the layout is almost done and beside integrating it into templates we have to develop the website functionalities. This time I’ll skip the image gallery part, because I believe something like that needs a blog post of it’s own. We’ll add the image gallery and RSS another time, hopefully soon. :) So, the functionalities will include:

  • About Me section with fixed content inside
  • Last Blog posts on the home page
  • Blog section with posts sorted into categories
  • Working Contact form

So, we’ll steal some HTML/CSS from this design:

OK, let’s get into it!


Few quick CSS tips for easy summer reading

Finally the time has come for another Blog entry, cool and breezy, just right for the summer time. We’re going to do some XHTML/CSS Tips and Tricks you may or may not know. Either way it’ll be quick and simple post, just long enough for you to do the coding while enjoying a nice cold beer. :)

1.1. Simple separator using borders

Probably the most used border trick which creates a simple, nice looking content separator for us. HTML:

<div style="padding: 20px; background-color: #6d6e6d;">
    <div class="separator"> </div>

CSS is very simple, goes like this:

.separator {
    font-size: 0;
    line-height: 0;
    border-top: 1px #1f1f1f solid;
    border-bottom: 1px #c5c5c5 solid;

The code gives us a nice looking simple separator for our content:

All that is left to do is to play with border colors for the desider effect (and adjust margins as needed).

1.2. Fast „double border” trick

Two borders on a image using only img tag and no extra div:

<div style="padding: 20px; background-color: #6d6e6d;">
    <img src="golf.jpg" class="double-border" width="600" height="279" alt="Sveti Martin, golf, hotel and wellness" />

The CSS:

.double-border {
    border: 2px solid #595959;
    padding: 1px;
    background-color: #000000;

It’s really very simple. We use the padding and background color to add the extra black border. Together with the background div this gives us nice results: