Mon, 2010-08-23 08:24
I've been designing my current site in width: 1000px; and it just dawned on me how important it is to create your website using percentage! While the majority of web users browser sizes are high, there are some 20% to 30% that still have their screen resolutions set to 1024x768 and lower ... I've been creating sites on my new laptop 1366x768 (so you can clearly see my problem).
With that being said I've set off on a new journey to start creating my websites in percentage rather then pixels. It's the only way to avoid the "scroll bar of death" .. ehh.. that was cheesy but you know what I'm saying.
So, I've ran into a lil problem.. I'm sure it's an easy fix for the masters'..but its something that I do not know (yet). I've made the majority of my layout already but am running into a problem while trying to add a repeat-y background image to a div tag and setting the width to a percentage:
#side_topmid { background: url(<a href="///C:/Users/Justin/Desktop/Phone7Forum%20%28backup%29/Test/top_mid.png" title="///C:/Users/Justin/Desktop/Phone7Forum%20%28backup%29/Test/top_mid.png">file:///C:/Users/Justin/Desktop/Phone7Forum%20%28backup%29/Test/top_mid.png</a>); width: auto; height: 53px; margin: 0; padding-top: 0; float: left; display: block; }
While generally this would work for me no problem because I'd set the width: 250pixels, it will not work this time...
Whenever I set width: auto, it spits it out like this:
http://www.phone7forum.com/styles/celticdreams/template/new_test.html
--- IT STOPS MY BACKGROUND IMAGE WHEN THE "MY ACCOUNT" STOPS --- but why? how to fix?
And furthermore whenever I "restore down" my browser window and size the window width smaller..it screws up my side bar by making all of my floated div element "return" down or "wrap down"..
.............................................................................
So this is what I want to learn:
1. how to create a percentage based background image for my div that will nicely go all the way across to where my other div starts (as opposed to ending whenever my text does).
2. Making the div's stand completely "still" whenever my browser page is re-sized (as opposed to going berzerk when the browser is sized down)
Thanks in advance 
http://oneillwebs.com/ ~ yes, my personal website built purely with tables which needs to be updated heavily
(before i knew anything!)
Mon, 2010-08-23 10:35
#1
Why?
Hi.
--- IT STOPS MY BACKGROUND IMAGE WHEN THE "MY ACCOUNT" STOPS --- but why? how to fix?
It's stopping because it's a widthless float. In ye old CSS rules ( 2.0 ), that was illegal, but it's ok since CSS2.1. However, it does mean it'll shrinkwrap to the width of the content inside of it. It'll act like an inline element in that manner.
So, floating may not be what you want here. If it weren't floated, it would expand as wide as it could within its container (as unfloated static blocks do). Since that div is holding the bg image, maybe you want to float the h3 instead? I dunno if you want the text to the left or something.
Another option is making the right image with the shadow the wide image, instead of a right cap, and then have a left cap. I mention this because text and elements in general, if not 100% wide, will hug the left rather than right sides. That might work out better in your case.
Re divs dropping down: float drop is a common "feature" of floats... basically the thing one does to deal with it, if you're going to use floats, is to have those floats inside containers with at least x amount of width.
<div id="foo"> <h3>I'm floated</h3> <p>Me too</p> </div>
Let's say you wanted the header to be like display: run-in (some magazines do this) where the header and p are all next to each other instead of on newlines. If the width of h3 ends up being approx 4em (or whatever the text width is) and the p is 10em (again, just making up numbers), you'll want #foo to have either a width or min-width of 14em. Yes, any user with a screen width of less than 14em (now that's pretty small) will get a scrollbar, but scrollbars are not to be feared. It means someone can still get to your content even when their screen is way too small for your layout (I'll not bring up @media-queries or mobile stylesheets, but if you're not using those you might want to read about them to deal with the ridiculously small screens who are accessing your page).
Also, to prevent "I'm floated" from wrapping (two lines "I'm" and "floated"), floats themselves can have min and max widths (except in IE6, but IE6 has issues with widthless floats anyway).
Some people wrap their whole pages up in containers who are basically braces for holding a "window" open for the floats inside.
In some browsers (I keep thinking there's someone who doesn't do it this way), if you have a float next to something, and that float can compress down to a smaller width (it has inline stuff inside it like text that can wrap, but currently no text is wrapping and the float is full-width), the float would rather drop before letting text wrap and getting smaller, as you shrink the browser window. I'd sure like to know a way to reverse that behaviour in a page I have now! I'd like it to compress first down to its min-width, THEN drop, but it's other-way around.
Another thing to keep in mind with flexible pages is, see how much you can get away with without setting ANY widths first (add widths later, to have as few as possible). And, it's ok to have a fixed width on something like a sidebar while the rest of the page stretches further out to the other side. If you set the width in em's, it won't stretch so terribly out of proportion as % can, while still allowing the page to react to text-enlargement etc.
Other than setting widths of page wrappers to 90%, I don't use % a whole lot. I tend to use em's and make pages that can adjust but aren't as crazy as %'s.
I'm sure there are some tuts or something around the web that explain the pains and pitfalls (and benefits of course) of flexible pages, and there are different types. I have a page that expands into forever but has a min-width of 400 px or so because that was the width on a bunch of PDAs using the site... a mobile stylesheet would have to deal with smaller screens. Another page has a min-width of 1024, meaning all those smaller screens have a scrollbar. But at least it's accessible. The design foisted on me simpy needed a minimum of 1024px. However it can grow out to forever ok.
Wed, 2010-08-25 13:44
#2
Quote: Another thing to keep
Another thing to keep in mind with flexible pages is, see how much you can get away with without setting ANY widths first (add widths later, to have as few as possible). And, it's ok to have a fixed width on something like a sidebar while the rest of the page stretches further out to the other side. If you set the width in em's, it won't stretch so terribly out of proportion as % can, while still allowing the page to react to text-enlargement etc.
I sure have been doing lots of research over the past few days over these fluid layouts.. I did find some great tutorials. Here is what I have so far...
http://phone7forum.com/styles/celticdreams/template/liquid.html
- fixed width sidebar
- expandable main content
Just like you said! It works perfect so far... Now the problem I face is getting the header to look correctly and not jumble up my logo, buttons, search bar, etc.
I've posted another topic similar to this new problem now, join the conversation if you'd like:
Creating a fluid header!
http://oneillwebs.com/ ~ yes, my personal website built purely with tables which needs to be updated heavily
(before i knew anything!)