will Pro css and Html design pattern give solutions for these problems

[vidya lakshmi]

Hi,
I am a web designer working on html and css for past 4 years. Each layout we design has its own issues of compatibility with the browsers. I want to know whether this book has classified the layouts in to some categories and given some guidelines to follow for each classification.
For Ex.If the layout is fixed width and if its a liquid layout how we must plan our layout so that it will be easy for the designer to finish it faster.Also is this book contains the hacks what we need to use to fix the layout for different browsers.

[Raghavan Muthu]

Howdy vidya lakshmi,

Welcome to JavaRanch

[Mike Bowers]

My book shows you precisely how to do that and much more.

One of the breakthrough features of my book are the design patterns in Chapter 17 Layouts. In this chapter I show you how to create fluid layouts that dynamically adjust to the end-user's browser -- such as a web browser on a phone or one on a 20" monitor.

I also show you exactly how to use absolute positioning and tables to do layouts.

All these patterns work in all the major browsers and can be reliably combined to create any layout you can imagine. This last point is a major breakthrough because prior to my book coding CSS and HTML was an art based on trial-and-error.

[Bear Bibeault]

Originally posted by Mike Bowers:
I also show you exactly how to use absolute positioning and tables to do layouts.

Perhaps you have something to add to this discussion?

[vidya lakshmi]

That's nice so I have a wonderful book that can increase my productivity.
Regards,
vidya

[vidya lakshmi]

I have one issue which iam facing currently i have made a tab menu with css. I must make the text bold when its hovered or active. I made it like that. I know that since its changes from bold to normal its seem to be jerking. Is that a rule that the tab menus should not jerk since we while designing menus will give some animating design by giving padding or margin space. Is it not applicable for tabs

Regards,
vidya

[Mike Bowers]

As you know, a bold font-weight increases the width of text. If the width of your tabs is based on the width of the text, then they too will expand. I assume this causes the jerkiness you mentioned.

The solution depends on how you have coded your tabs using XHTML and CSS.

In general, you can use a block element for the tab and give it a fixed size (or even better a minimum size) that is wide enough to hold its text when it is bold. Then when the text within the tab becomes bold, it won't resize the width of the tab.

The downside to using fixed-size blocks is that they may not adapt well in browsers with different screen sizes and font sizes. For this reason, I avoid using dynamic style changes that alter the size of text, such as making text bold or changing the font size. Instead I prefer adding an underline to text to show that it is being hovered over and that it is clickable -- the underline is also the standard convention for communicating that text is clickable.

Chapter 17 of my book contains two design patterns for tabs that you might find useful. You can see the examples for these tab design patterns at the following two links: http://cssdesignpatterns.com/Chapter%2017%20-%20LAYOUTS/Tab%20Menu/example.html
http://cssdesignpatterns.com/Chapter%2017%20-%20LAYOUTS/Tabs/example.html

[vidya lakshmi]

thanks a lot Mike Bower.
I have one more doubt. I am creating table less form and for different resolutions it behaves differently as my monitor is of very big resolution after i see that i need to check in each resolution. I am using only percentage for the layout. Currently iam finding it very difficult to set it for 800 resolution but somehow i managed to set it but still is there any smart way to handle this .

regards,
vidya

[Mike Bowers]

To answer your question requires much more information from you and many long detailed answers from me. I would literally have to write a book to explain it ...what a minute...that is what I have done :-)

The best answer I can suggest is to buy my book...not so I can get another book sale, but because it will explain to you how the six block models work and how they are affected by all the CSS properties and property values like percentages. Lastly, it will take you step-by-step through the process of creating fluid layouts.

My fluid layout design pattern works. Just check out the examples in my book. They work in all major browsers at all screen resolutions and they even work in PDAs and cell phones.

I understand your doubts because before I invented this breakthrough design pattern, and I never could get floated divs to behave consistently -- it all seemed like a black art of trial and error -- mostly error!

For example, I just now pulled up my website, http://cssdesignpatterns.com on my blackberry. The entire website is based on the fluid layout design pattern and the pages look great on the blackberry's tiny display. I then navigated to the Fluid Layout examples in Chapter 17 and they displayed perfectly--wrapping around to fit the display on my blackberry. Even when I turn off CSS in my blackberry, these pages still look great. This is the true power of my fluid layout design pattern. It just works!

Unfortunately it would take about a dozen pages of text here to explain how and why this design pattern works so well, but you can find it all in my book :-)

[vidya lakshmi]

definitely