The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.

Beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense.

Scrap 1024! Design once at 1140 for 1280, and with very little extra work, it will adapt itself to work on just about any monitor, even mobile.

http://cssgrid.net/

Solution

Designed and Customized blog page to look like the main website. fixed compatibility on all the major browsers. spacing adjustment, added a video section. written css for forms, simplified code, removed too many divs (that eats processor and ram)

Testimonial

Husnain is awesome! A secret weapon for my business now. Not only is he an expert at what he does but he brought new, creative and helpful ideas to the table. It seemed more like a collaboration with a partner on this project than a work for hire.

He understands American English very well, is fast and didn’t need supervision. He handled everything I threw at him and kept me informed on what he was doing the entire time. He redesigned and rebuilt our entire site from the database up, cleaning up all the terrible mistakes our last guy made. He will be the first person I contact for any project we do. Yep, he’s that good!

~Clarence Fisher

<!–[if Safari]> ??? possible?

no it is not but following example really helped me. I much appreciate

Clever technique to help you on CSS hacks.

CSS Browser Selector is a very small javascript with just one line which empower CSS selectors. It gives you the ability to write specific CSS code for each operating system and each browser.

http://rafael.adm.br/css_browser_selector/

<style type="text/css">
.ie .example {
  background-color: yellow
}
.ie7 .example {
  background-color: orange
}
.gecko.example {
  background-color: gray
}
.win.gecko .example {
  background-color: red
}
.linux.gecko .example {
  background-color: pink
}
.opera .example {
  background-color: green
}
.konqueror .example {
  background-color: blue
}
.webkit .example {
  background-color: black
}
.example {
  width: 100px;
  height: 100px;
}
.no_js { display: block }
.has_js { display: none }
.js .no_js { display: none }
.js .has_js { display: block }
</style>

HTML5 is the 5th major revision of the World Wide Web Consortium’s core language, Hypertext Markup Language (HTML). As the Web has continued to evolve, so too have the demands on the Web’s primary language, and what it gives web professionals the ability to do. HTML5 takes into account the many advances that have taken place in the web community over the years, including the explosive growth of dynamic websites and web applications, as well as the proliferation of video and interactivity. As is the goal of any major revision, HTML5 seeks to improve the experiences of web designers and developers who have, over the years, had to rely on less-than-optimal methods for producing the pages they want to produce.

Similarly, the advance of CSS3, the next iteration of CSS, alongside HTML5 promises to improve both the development and viewing of web experiences. CSS3 introduces many new kinds of selectors and properties that let you do much more with styling web content. Additionally, CSS3 has broken up the CSS specification into separate modules—as opposed to the single large specification that currently exists for CSS2. This new spec format allows for the updating of different parts of the specification individually as needed, resulting in a more timely and flexible evolution for the specification as a whole.

Although the HTML5 and CSS3 specs are still being finalized, HTML5 and CSS3 can be used with any browser that currently supports them. Most recent versions of the leading browsers (Safari, Firefox, Opera, Internet Explorer, Chrome), support at least some (a few support many) HTML5 and CSS3 features.

DREAMWEAVER CS5 AND THE HTML5 PACK

The following features and support are now available in Dreamweaver CS5 when you install the HTML5 Pack:

HTML5 code hinting

HTML5 code hinting now works like any other code hinting in Dreamweaver. In Code view, start typing the tag you’re interested in, and Dreamweaver provides the code hint for you.

Figure 1. Hinting the new <canvas> tag in Dreamweaver CS5.

In addition to hinting new HTML5 tags, Dreamweaver also provides new attribute and value code hints for existing tags (for example, new attributes and values for the input tag).

CSS3 support and code hinting

In addition to HTML5 code hinting, the HTML5 Pack adds CSS3 code hinting to Dreamweaver CS5. The new code hinting does not support every CSS3 selector and property, but rather those that are currently most complete in the W3C spec.

Additionally, the extension includes basic support for some -moz, -webkit and -o CSS properties.

Multiscreen Preview and Media Query support

Multiscreen Preview (File > Multiscreen Preview) lets you preview the page you’re editing as it would appear on three different screen sizes: phone size, tablet size, and desktop.

Figure 2. The Multiscreen Preview panel.

The phone, tablet, and desktop dimensions used for previewing are set to default sizes, but you can easily adjust these sizes by clicking the Viewport Sizes button in the Multiscreen Preview panel.

Once you know the dimensions of the devices you want to target, you can specify different styles for different-sized devices by adding media queries to your HTML page. To add media queries, click the Add Media Queries button in the Multiscreen Preview dialog box. The ability to add and read media queries through the visual interface is a significant advance for Dreamweaver CS5. With different media queries, you can specify what your page will look like on phones, tablet devices, and standard desktop browsers.

Video and audio tag support in Live view

Video and audio tags are new HTML5 tags that enable the playing of video and audio files directly in the browser without the requirement of an external plug-in or player. In essence, with HTML5, the browser becomes the player. This functionality requires QuickTime installation.

Webkit—the rendering engine for Live view—has been updated so that video and audio can play in Live view when tagged appropriately. Additionally, some (not all) CSS3 properties will render in Live view.

HTML5 starter layouts

The extension installs two new layouts that use HTML5 syntax, making it easier for you to get started with HTML5 layouts.

Figure 3. HTML5 starter layouts with new HTML5 syntax.

The layouts are available from the New Document dialog box (File > New), along with the other CSS layouts.

Better rendering in Design view

Traditionally, when Dreamweaver doesn’t recognize a tag, it simply ignores it, leaving an imperfect idea in Design view of what your design will ultimately look like. For HTML5 tags, Design view has been improved so that the area occupied by the related content is blocked out, giving you a better idea of how that content affects the rest of your page’s layout.

CONCLUSION

With the Dreamweaver HTML5 pack, you can start creating HTML5- and CSS3-compliant pages that update your website and optimize viewing on the latest handheld devices. With multiscreen preview and media query support, Dreamweaver allows you to see, test, and edit what your web pages will look like on mobile phones, tablets, and desktops simultaneously.

Download

HTML5 Pack for Dreamweaver CS5
Download extension

however generated this little trick that normally works.

body {
text-align: center;
min-width:500px;
}
#wrapper {
text-align: left;
width: 500px;
margin-left: auto;
margin-right: auto;
}


Explanation


body {
text-align: center; /* MSIE 5 doesn't center based on auto left/right margins,
but 'text-align:center' does center top-level divs: */
min-width: 500px; /* Specify a min-width for the body as wide as the 'wrapper'
element itself. This prevents negative (i.e. inaccessible)
left-margins in narrow browser windows when using
Navigator 6+/Mozilla on Win32: */
}
#wrapper {
text-align: left; /* Reset alignment to compensate for 'text-align:center': */
width: 500px; /* Specify the width of the element. This should be the same
as 'body min-width': */
margin-left: auto; /* Set left and right margins to auto, thus centering the
element in the containing (body) tag: */
margin-right: auto;
}

software offers you complete creative freedom without sacrificing precision or quality, whether working in print, web, interactive, or mobile media.

In this tutorial, you can learn to build a blog page using next-generation techniques from HTML 5 and CSS 3. The tutorial aims to demonstrate how we will be building websites when the specifications are finalized and the browser vendors have implemented them. If you already know HTML and CSS, it should be easy to follow along.

1. HTML 5

2. Basic Structure

3. Marking Up the Navigation

4. Marking Up the Introduction

5. Marking Up the Main Content Area

6. Styling with CSS 3

7. Styling the Navigation

8. Styling the Introduction

9. Styling the Content Area and Sidebar

10. Styling the Blog Post

11. Zebra-striping the Comments

12. The Final Design

HTML5 CSS3 Standard page

Compatibility

The page renders correctly in Safari 4 and newer webkit-based browsers, as it is the only rendering engine that supports all of the CSS 3 techniques we have used. Firefox 3 has some problems applying rounded corners to our flower image and it doesn’t support background-size, but besides that the layout works. I’ve chosen to ignore Internet Explorer as it requires a bit of hacking to get HTML 5 to work. You could also define some more rules and get everything working across major browsers, but all of this is outside the scope of the tutorial.

Conclusion

When HTML 5 and CSS 3 are one day implemented in all browsers it will be a lot easier to build websites. We’ll finally be able to stop using floats for layout (which they were never meant to be used for), and we will spend considerably less time writing javascript to scale our background images or zebra-stripe our tables. Hopefully we will use all this extra time to study some long-neglected areas of web design, like front end optimization and proper information architecture.