Jump to content
Killersites Forums

Holy grails Batman...

Recommended Posts

He says he's already got one!


...And I have -- another holy grail layout, that is.


Will this new holy grail go to the holy grail graveyard of layouts -- maybe?


It still needs a lot of tweaking, as the relatives aren't playing ball with those absolutes. Those relatives, you either love 'em or hate 'em. :lol:


I can't get the barsteward to work in IE6, so I've curtailed its fluidity, and given it a fixed width. Plus, I also haven't been successful in giving it the appearance of equalizing columns as I have with all other browsers. As for IE7, all looks quite good. And so does it do in Firefox on Windows XP Pro.


There are minor problems with the various Mac browsers that I am currently testing the layout with. But for FF, Safari, Camino, iCab, and OmniWeb all looks well, except, that is on Opera.


Once I've finished tweaking it, and am happy, I will present it to sitepoint's Paul O'Brien, as I have done in the past. Once he give's it his professional once-over, then I'll feel confident that maybe I'll have something to show you guys. :)

Link to post
Share on other sites

About that holy grail...


I'm not 100% sure, but I think Paul, over at SitePoint's forums liked it. Or, at least parts of it -- maybe? I'm still tinkering with it, as it isn't too stable. But, there is a plus side. When I create a layout I always go for something with lots of spaces, like empty div columns, as I did when I originally created my first div-based website.


You guys, though, can simply remove those spaces and create a more stable layout. Perhaps, I should have created an example? For now though, I'll leave you with my newest holy(ish) grail...


http: //www. macrankin .co.uk/ layouts/ fullstretch .html (close up these spaces afterwards)

Link to post
Share on other sites

I've gone and created (I believe?) my most rock-solid 3-Column, fluid, equalizing layout to date.


Paul, over at SitePoint hasn't confirmed whether this latest attempt is sound, but I'm pretty confident that it is, even though I've not been able to test it in Google's Chrome, not IE8. Perhaps someone here can?


I did once have Chrome, but it screwed up with my not being able to shut down my Window's client OS properly, so I got rid of it. Maybe, I'll go for it again?


Anyway, I've also found this really great 'expression' min / max-width script, which has allowed me to give back some fluidity to IE6. Unfortunately, I don't think I'll be able to give it an equalizing look, though.


Full_Stretch (09)

http:// www. macrankin .co.uk/ layouts/ full_stretch .html (please remove spaces)


I'm hoping that someone will want to give it a try in an actual working design, instead of say, using tables, ones which rely on css, that is.

Link to post
Share on other sites

I imagine that it's like Eric's because it uses position: absolute for #left_under, #center_under and #right_under but it's not fluid in the width.


As you say, you can use a javascript width:expression which will work in IE6 (if the viewer has ActiveX enabled) or you can use min-width and max-width to put limits on the fluidity (but this won't work in IE6 unless you use width:expression just for IE6).


Here's a completely different all-css method which works in modern browsers without ActiveX or javascript, but occasionally it needs a refresh to get the columns in the precise positions. It doesn't use position: absolute divs as a backing for the divs. Only the middle column is flexible. IE6 has to be a fixed width unless you add the width:expression ActiveX.


http://w ww.wickham43.net/backgroundsfullheight.html

Link to post
Share on other sites

Hm, to be honest, I've never like fixed side columns with flexible middle columns. I mean, it's ok and everything, but I wouldn't be happy with just the middle column doing that.


Hey, but you guys are great. I mean, Eric really knows his stuff, and there's a few others round here that do too. Reading this stuff just takes me longer to do what I want to do now. Besides, even if I do read all your websites, which I have on occasion, it all disappears from my memory all too quickly, so I'm kind of having to re-learn what I've already done. :rolleyes:


Btw, Paul has given it the once over, and has recommended that I use another expression script, though I had no idea that this active X that you speak of has to be enabled. I have heard bad things about active X, though I can't remember what they were?


Anyway, here is that script...


#page_wrapper {


(d = document.compatMode == "CSS1Compat" ? document.documentElement : document.body) &&

(d.clientWidth > 1152 ? "1152px" : d.clientWidth


Paul reckons that this one is better that the one that I'm currently using. Something about it being more compatible with IE5.


I'm also at this moment trying to implement some of these things, as well as putting the absolute-positioned divs further down the page. I think he said that by doing it that way you avoid some IE bugs. So that's what I'm doing, apart, that is from typing this comment out. :)


Wickham, thanks for having a look. Erm, I'll definitely look into that pure css way of creating min / max-widths. Maybe there is more people solving these problems, as there does seem to be an awful lot of ways to get round IE6 just lately. :)

Link to post
Share on other sites

Hopefully, you're all not completely fed up with all my layout efforts. I'm just looking for that one newspaper style of layout that will help me feel more confident about doing 3-Column, fluid layouts.


Erm, anyway, Paul hasn't commented yet on the latest layout, which includes his advised ways in which to get around bugs and compatibility issues regarding the min / max-width, expression script.


To be honest, I'm not all that keen on the compatible expression version, as it is making my IE6 viewport 'jumpy', when waving it around... as you do, when testing the stability of a layout.


Anyway, here is (please, God. :rolleyes:) the final version...


http:// www. macrankin .co.uk/l ayouts/ full_stretch_02 .html (remove spaces)

Link to post
Share on other sites

Thanks Eric :cool:


...But, erm, although your question is blindingly clear, it doesn't make much sense, as of now, no browser that this layout has been tested on should be fixed. The only fixed bit is with IE6's height.


Unless those final suggestions made by Paul over at Sitepoint has drastically altered something in some way, I have no idea what might be causing you to be seeing this?


Which one of these following layouts was you referring too?


2nd attempt

http:// www. macrankin .co.uk/ layouts/ full_stretch .html (remove spaces)


3rd attempt

http:// www. macrankin .co.uk/ layouts/ full_stretch_02 .html (remove spaces)

Link to post
Share on other sites
I was looking at the 3rd attempt. I just looked quick. I'll look again. Maybe it's because my screen is only 1024 so I'm not seeing the flex...


Yep that was it. Looking again, it's only flexible on my screen within the last 10pixels. That's why I missed it the first time. Sorry if I got your heart going - good job! :)

Link to post
Share on other sites

You certainly did get my heart going, you wicked devil, you. :lol:


But to be fair to you, I should have mentioned more precisely those min / max-width dimensions. Min-width: 800px / Max-width: 1280.


I actually tried out your viewing experience, and noticed that there isn't an awful lot of flexibility when squishing the viewport from right to left.


The reason I'm using min / max-width(s) is that as much as I'd like to see my own website displayed on an eighty foot monitor, somehow it just seems like too much of an extreme for my liking.

Link to post
Share on other sites

Well, you know, I thought I got real lucky with that first expression, as the whole experience of waiving that browser's viewport around was very smooth, but as soon as I implemented Paul's expression script, the whole thing became rather jumpy.


Maybe that's why it seems more flexible. It shouldn't really be though, as I rather curtailed its max-width to 1152px, I think?


Anyway, about that fix... You're doing it again. C'mon man, what is it? :lol: :cool:

Link to post
Share on other sites

You want to get it perfect - right? It does do a rather large jump. I too see what you referring to.


Edit - I just messed with all my different expressions I have, and I couldn't do any better than your current setup. So it looks like it's as good as your going to get it in IE6. Which isn't bad.

Edited by Eric
Link to post
Share on other sites

Hi there Eric :)


Sorry for seemingly disappearing for a while, but I've been on a different duty at work, and it has totally left me cream-crackered.


I did have a sneak-peek over at Sitepoint, and Paul looks to have sorted that expression out nicely, though he also expects me to do a couple of other things to the layout to bring it 'up to scratch'. But, like yesterday, as now, I have absolutely no energy to do anything.


Erm, maybe once I've clearly understood what Paul expects of, and I get his thumbs up, I'll try to report back here. :)

Link to post
Share on other sites

Yes, he is really top-notch stuff. Trouble is, I don't understand half this stuff about layout workarounds that I'd like, and quite often I feel really dumb about it.


Anyway, I've gone and posted something new over there which is guaranteed to give us both a new headache, as I'm not really sure I've carried out his instructions. Maybe I just need a bit more sleep, and have another go at this next Thursday, maybe, when I'll have a day off to myself?


Oh well, here is the latest effort, which has had the structure of its CSS code altered slightly by Paul, and tidied up -- for I guess most pros to easily and quickly get to grips with. Though I much prefer it to (physically?) follow the html mark-up...


http:// www. macrankin .co.uk/ layouts/pobs_stuff/ pmob_fs_01.html (please remove spaces)

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...