Thanks Ralph. There is a background image where the three columns are. On the left is a couple of blue boxes that say image and then some text. The center column is for recent posts in WP, and the right column is for the search feature, links and a calendar and any other widgets the client wants. The background is a brownish color and is transparent. I then put the white border on each column and there is a white border around the entire content area. Please look at the image again. You can blow it up to real size. I don’t want to sound disrespectful but if you are colorblind, you might not be able to see the color differences in the prototype. It is exactly like where the WebTrak image is, except instead of being a blue color it is a brown color. So with that in mind how would I do the code for that? On a side note, I saw a video on FW CS6 today and see that I can take my graphics and FW creates CSS code for it. That sounds fantastic to me. It would save a ton of slicing to work that way.
Ah, but you don’t want them as part of a background image. The only background image in the middle section should the the map in the background. The blue images should just go straight into your html, inside the left column. (Otherwise, alignment with text etc. would be a total nightmare.)
Regarding the transparent brown color, that’s quite easy (I referred to that earlier, in post #16). My preferred method would be to set a brown background color on the container using rgba color values, which allows you to set a transparency level. That works nicely on all modern browsers. Users of older browsers would see solid brown, though—so if that’s not acceptable, you could use a semi-transparent brown image as a background repeat instead.
The rgba solution would look something like this:
background: rgba(67,52,45,0.2);
That’s a brown color with 80% transparency. To set that up, find the solid brown color you want, type that value into Photoshop (e.g. #43342d) and it will give you the rgb values … in this case 67, 52, 45. Then just add in a decimal number to suit, like 0.2, 0.25, 0,3 or whatever.
Yes I know that the images will not be part of the background. Here is a section of the site and what I need it to do. I hope this helps express what I want to achieve. If the brown background can be created with CSS and can expand great. If the inner white borders can be created with CSS and expand, also great. If not, then I will have to slice them.
Yep, all that’s easy to do with CSS. No sliced images needed. I’ll try to knock up an example tonight if someone else doesn’t beat me to it. 
Here’s a basic example. There are probably better ways to to it, such as not floating the middle column and giving it big left and right margins, but here’s a start, anyhow:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
<style media="all">
.wrap {width: 95%; max-width: 60em; margin: 50px auto 0;}
.content {background: rgba(133,97,61,0.3); -moz-border-radius: 30px; -webkit-border-radius: 30px; -khtml-border-radius: 30px; -o-border-radius: 30px; border-radius: 30px; overflow: hidden; padding: 2%;}
.left, .mid {float: left;}
.left, .right {width: 25%;}
.right {float: right;}
.mid {width: 40%; padding: 0 5%;}
.inner {padding: 10px; border: 2px solid white; -moz-border-radius: 15px; -webkit-border-radius: 15px; -khtml-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px;}
</style>
</head>
<body>
<div class="wrap">
<div class="content">
<div class="left">
<div class="inner">
<p>Quo usque tandem abutere, Catilina, patientia nostra? quam diu etiam furor iste tuus nos eludet? quem ad finem sese effrenata iactabit audacia? Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae, nihil timor populi, nihil concursus bonorum omnium, nihil hic munitissimus habendi senatus locus, nihil horum ora voltusque moverunt?</p>
<p>Patere tua consilia non sentis, constrictam iam horum omnium scientia teneri coniurationem tuam non vides? Quid proxima, quid superiore nocte egeris, ubi fueris, quos convocaveris, quid consilii ceperis, quem nostrum ignorare arbitraris? </p>
</div>
</div>
<div class="mid">
<div class="inner">
<p>Quo usque tandem abutere, Catilina, patientia nostra? quam diu etiam furor iste tuus nos eludet? quem ad finem sese effrenata iactabit audacia? Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae, nihil timor populi, nihil concursus bonorum omnium, nihil hic munitissimus habendi senatus locus, nihil horum ora voltusque moverunt?</p>
<p>Patere tua consilia non sentis, constrictam iam horum omnium scientia teneri coniurationem tuam non vides? Quid proxima, quid superiore nocte egeris, ubi fueris, quos convocaveris, quid consilii ceperis, quem nostrum ignorare arbitraris? </p>
<p>O tempora, o mores! Senatus haec intellegit. consul videt; hic tamen vivit. Vivit? immo vero etiam in senatum venit, fit publici consilii particeps, notat et designat oculis ad caedem unum quemque nostrum. Nos autem fortes viri satis facere rei publicae videmur, si istius furorem ac tela vitemus. Ad mortem te, Catilina, duci iussu consulis iam pridem oportebat, in te conferri pestem, quam tu in nos omnes iam diu machinaris.</p>
</div>
</div>
<div class="right">
<div class="inner">
<p>Quo usque tandem abutere, Catilina, patientia nostra? quam diu etiam furor iste tuus nos eludet? quem ad finem sese effrenata iactabit audacia? Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae, nihil timor populi, nihil concursus bonorum omnium, nihil hic munitissimus habendi senatus locus, nihil horum ora voltusque moverunt?</p>
<p>Patere tua consilia non sentis, constrictam iam horum omnium scientia teneri coniurationem tuam non vides? Quid proxima, quid superiore nocte egeris, ubi fueris, quos convocaveris, quid consilii ceperis, quem nostrum ignorare arbitraris? </p>
</div>
</div>
</div>
</div>
</body>
</html>
Here’s what I mean by not floating the middle column:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
<style media="all">
.wrap {width: 95%; max-width: 60em; margin: 50px auto 0;}
.content {background: rgba(133,97,61,0.3); -moz-border-radius: 30px; -webkit-border-radius: 30px; -khtml-border-radius: 30px; -o-border-radius: 30px; border-radius: 30px; overflow: hidden; padding: 2%;}
.left {float: left;}
.left, .right {width: 25%;}
.right {float: right;}
.mid {width: 44%; margin: 0 28%;}
.inner {padding: 10px; border: 2px solid white; -moz-border-radius: 15px; -webkit-border-radius: 15px; -khtml-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px;}
</style>
</head>
<body>
<div class="wrap">
<div class="content">
<div class="left">
<div class="inner">
<p>Quo usque tandem abutere, Catilina, patientia nostra? quam diu etiam furor iste tuus nos eludet? quem ad finem sese effrenata iactabit audacia? Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae, nihil timor populi, nihil concursus bonorum omnium, nihil hic munitissimus habendi senatus locus, nihil horum ora voltusque moverunt?</p>
<p>Patere tua consilia non sentis, constrictam iam horum omnium scientia teneri coniurationem tuam non vides? Quid proxima, quid superiore nocte egeris, ubi fueris, quos convocaveris, quid consilii ceperis, quem nostrum ignorare arbitraris? </p>
</div>
</div>
<div class="right">
<div class="inner">
<p>Quo usque tandem abutere, Catilina, patientia nostra? quam diu etiam furor iste tuus nos eludet? quem ad finem sese effrenata iactabit audacia? Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae, nihil timor populi, nihil concursus bonorum omnium, nihil hic munitissimus habendi senatus locus, nihil horum ora voltusque moverunt?</p>
<p>Patere tua consilia non sentis, constrictam iam horum omnium scientia teneri coniurationem tuam non vides? Quid proxima, quid superiore nocte egeris, ubi fueris, quos convocaveris, quid consilii ceperis, quem nostrum ignorare arbitraris? </p>
</div>
</div>
<div class="mid">
<div class="inner">
<p>Quo usque tandem abutere, Catilina, patientia nostra? quam diu etiam furor iste tuus nos eludet? quem ad finem sese effrenata iactabit audacia? Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae, nihil timor populi, nihil concursus bonorum omnium, nihil hic munitissimus habendi senatus locus, nihil horum ora voltusque moverunt?</p>
<p>Patere tua consilia non sentis, constrictam iam horum omnium scientia teneri coniurationem tuam non vides? Quid proxima, quid superiore nocte egeris, ubi fueris, quos convocaveris, quid consilii ceperis, quem nostrum ignorare arbitraris? </p>
<p>O tempora, o mores! Senatus haec intellegit. consul videt; hic tamen vivit. Vivit? immo vero etiam in senatum venit, fit publici consilii particeps, notat et designat oculis ad caedem unum quemque nostrum. Nos autem fortes viri satis facere rei publicae videmur, si istius furorem ac tela vitemus. Ad mortem te, Catilina, duci iussu consulis iam pridem oportebat, in te conferri pestem, quam tu in nos omnes iam diu machinaris.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Thanks for the help Ralph. I really appreciate it. That thing I mentioned before about the new FW CS6 creating CSS is working. I have added the CSS to the page. You can see it here…http://foxdenwebsolutions.com/CACNR/index2.html. The inner boxes need to be tweaked as I don’t have them set correctly. I tested it in IETester, which has older versions of IE and IE8 hates it. IE9 accepts it. I know that there are still a lot of people are using IE8 so I don’t know what to do. Am I going to have to slice anyway?
BTW I have everything with px first because I need to do the math (YUCK!) to figure out the percentages and I am not good at math!
In terms of the layout, have a look at what I posted, as it’s a better centering method, and also notice how the round corners are done. Editing CSS generated by an Adobe product isn’t much fun, so I’d recommend you avoid that kind of code.
In terms of CSS3 compatibility in IE8 and under (round corners, rgba etc.), there are some JS add-ons you can use to get them going, such as this:
Ok I will take your advice and learn from it. I will also look into the JS add-on. But…what if the viewers have JS turned off? There is always that possibility.
Ha ha, there’s only so much you can do for people. As long as the content is fully accessible, they are being well served.
One other issue you will face with that background image is that there is space around it on large screens. One option is to use a full-size background. Here is one way to implement that:
http://buildinternet.com/project/supersized/3/core.html
OK, it’s a bit JS heavy. There is a CSS3 method, but too many browsers don’t support it as yet.
Hey Ralph. I have pretty much finished with the code for the site but am still really confused on how to change px to % to really get this to be responsive. I was wondering if you would be willing to walk me through the site step by step so that others can follow how to make existing code responsive. We can start a new thread for it. Most of my code right now is px. BTW, I tested the site at W3C (which includes the code snippet you did for the content area) and the CSS3 code is showing as not supported. I thought these techniques have been around for a while that the W3C would accept them. The site is up at http://foxdenwebsolutions.com/CACNR/index.html.
Wow ralph, you really earn that staff member badge!
To start with, just remove the width on the body (never put a width on body) and on the wrapper. That will allow the content area to expand and contract.
I tested the site at W3C (which includes the code snippet you did for the content area) and the CSS3 code is showing as not supported.[/QUOTE]
Yes, when validating against CSS 2.1, CSS3 properties don’t validate. But you can choose to validate against CSS3, in which case it’s OK. The vendor prefixes may still throw warnings or errors, but that’s not a problem. Remember that validation is just there to give you a heads up about any potential problems. As long as you put CSS3 in there consciously, you have nothing to worry about.
I removed the width on the body and wrapper. I figure I need to make the font sizes to ems. Then work on the branding and the nav. I changed the background on the site. I am trying to go with something that not seen every day. I did upload it again and will with each change.
Responsive web design… grid… Responsive web design… grid… Responsive web design… grid…
BWAHAHAHAAA… Oh man, you slay me. That’s the funniest thing I’ve heard in some time! Ranks up there with acute apathy, non-fat cream, noiseless sound, and being ‘just a little pregnant’.
Do yourself a favor, forget that grid nonsense even exists. Double-wrap the middle column to put it content first floated, put a wrapper around both side columns so you can width trigger to a single column, and just declare widths that make sense without any of that grid idiocy screwing it up.
NOT that your starting picture (which I consider a flawed approach to making a website in the first place) is a viable concept for a fluid or semi-fluid layout with media query switches per-se… To even approach that a number of the visual concepts would probably have an axe swung at them.
Ok death, seems you hate the grid approach. I am just trying to learn a new technique. Give this old lady a break. I want to learn the proper way to do this. Some sites say that you need to start with a mobile site first and build up from there. I had already started this when my client then told me that he wanted this accessible via different devices. I have never designed for anything but PCs and laptops so I had to start doing a lot of research. This site has always been kind and helpful to me in learning how to things I have never done before. If you want to help Ralph help me design this site properly, then I appreciate your help. I figure with the background graphic, it will go away for smaller devices. That is where the media queries will come into play. I know for smaller devices it would probably be best to have a very simple layout with not a lot of graphics to have to re-size. For right now, I just want to get the full sized site in % and ems instead of pxs. This is where I am getting confused.
Now I am confused by what you mean with the middle column. What do you mean by double wrapping it? I think I understand what you are talking about with the side columns. Put each in a wrapper and declare % instead of px? Is that correct?
Grabbing breakfast, but right after I’ll belt out a demo of what I meant… I would end up with a few questions – like that “webtrak” section – what’s actually going there? If that’s a full width image rotator, fixed image, flash movie or other such content it will NOT be viable for a ‘responsive’ layout - AT ALL.
Also, the transparencies are a coding nightmare to actually implement if you give a flying fig about accessibility. It can be done, doesn’t mean it SHOULD be done. Likewise the equal height columns? That’s either right out, or needlessly complex; typical of drawing a pretty picture instead of making the layout where layout creating belongs… in the CSS.
… and here’s what I came up with:
http://www.cutcodedown.com/for_others/cgacfox/template.html
As with all my examples the directory:
http://www.cutcodedown.com/for_others/cgacfox
… is unlocked for easy access to the bits and pieces. I didn’t go for a full out translation of the page, just enough to show the basics of doing a responsive layout.
I prefer to design for ‘middle widths’ first – since there are still a lot more IE8 and lower users than there are people with crappy outdated mobile. I dislike the notion of giving IE8 and lower users the mobile layout; and that’s really the decision you have to make with responsive and where to start.
I always start with a semi-fluid layout – meaning the outer wrapper gets a min and max-width thus:
min-width:752px;
max-width:66em;
width:95%;
margin:0 auto;
The EM max-width lets the layout be ‘elastic’ on the high end, so large font/120dpi users (like myself) or those of even larger sizes get a wider maximum width. The layout will expand to fit it. Since we’re at a ‘narrow’ width we really should only try to fit one column. That’s what the outer “sideBarWrapper” is there to accomplish.
The #contentWrapper/Content pairing is what I meant by a ‘content first’ approach. The center column contains (or should contain) the most important data on the page – what the visitor is actually on the site to see, so we want it first. Floating the outer wrapper full width means there’s 0px free to fit #sideBarWrapper. Setting a negative left-margin on #sideBarWrapper equal to it’s width ‘sucks in’ the ‘flow width’ of that DIV to 0 – and if it’s reporting 0 width in flow, it can fit in that 0px wide spot next to #contentWrapper. We then just add a side margin on Content to push that out from under the sidebar.
Notice again I declare the sidebars in EM width since their content is dynamically sized, so large font/120dpi (or larger) users (like me) don’t end up with uselessly tiny sidebars.
There’s also just not enough room at these width constraints to fit the menu on the left, so I centered it above.
The magic for three column and one column comes in here:
<link
type="text/css"
rel="stylesheet"
href="bigScreen.css"
media="screen and (min-width:66em)"
/>
<link
type="text/css"
rel="stylesheet"
href="smallScreen.css"
media="screen and (max-width:751px)"
/>
Loading extra stylesheets as needed for wider or narrower widths.
For bigScreen.css I increase the max-width. Really the only reason we set a max-width (or min-width for that matter) in the screen.css is for browsers that don’t know media queries… with bigScreen we’ll go to three columns, so go ahead and get wider. Content gets a margin on both sides to make room for both sidebars. I had to add 0.15em (roughly 2px or more depending on font size) to make room for the border around both sidebars which get added to their width. (which is stupid, but hey). #sideBarWrapper gets all it’s floating behavior and margin tricks stripped off it, and instead we apply them to #firstSideBar and #secondSideBar. #firstSideBar then gets the opposite negative margin, which still makes it 0 width in flow, but rendering to the right instead of left of where it would normally be. Using relative positioning to slide it left the full width pops it into our desired position. Poof, 3 column layout.
I also then play with the footer to put it into a three column setup with the footer menu on the left as per the original image… and naturally we play with the paddings and margins to make things purty.
Smallscreen.css is a bit more complex since on mobile a lot of the CSS3 stuff can suck memory, battery and make scrolling painful, the extra paddings chew up precious screen real-estate, etc. A the floats and margins for having sidebars are stripped out to make it all a single column, and I threw in some border tags to separate the sections. One final tweak I give it addresses really small (272px or narrower) displays, like the 192px many phones using Opera Mini run – it’s too narrow to fit the calendar without shrinking the font size, and the ‘airplane divider’ looks funky chopped off so we change it’s background-position.
… and that’s how you do responsive layout; no malfing ‘grids’ needed. If anything it’s simpler because you don’t have to do math to figure out every column’s width. You let the center column be dynamic, the side columns be elastic, the outer wrapper be semi-fluid, and you’re golden. Grids go hand in hand with this ‘declaring fixed widths on everything’ mentality that to be frank, has about as little to do with accessible web design as being able to draw a goofy picture in photoshop and then call yourself a ‘designer’.
I used CSS3 for the rounded corners and some light shadow effects. IE8 and lower get square corners and no shadows, OH WELL. Site tested as at least functional and usable all the way back to IE 5.5 – though IE7 and 8 only get elastic between 752 and 66em, and IE6/lower get a 752px fixed width – again, oh well. We could waste weeks trying to get those old browsers perfect and still not be happy with the result… so just feed them working but less attractive/functional versions.
– edit – BTW, from a layout perspective I’d seriously consider axing the extra border around all the columns.
Wow death, thank you so much! This is a great Mother’s Day present! I will study the code more in depth when I get home from the day job and then start asking all the questions that I am sure I will have!
Yes, great work, Jason. I’m pouring over that code, too.