Forum Moderators: not2easy
I have scanned this site and others, but haven't quite found the one. This forum thread [webmasterworld.com] is the closest, and this thread [webmasterworld.com] too.
I have an ilustrated border around my page (I don't mean the CSS border element), made up of several images - one in each corner and repeating sections along the sides, top and bottom.
I want the border to frame the page snugly. So, if there is very little page content, the border will enclose 100% of the screen. But if there is more content, the border will then enclose 100% of the page (and not just the viewable screen).
The best way I could come up with to get a fluid layout (i.e. resizes to browser width and height), without using tables, is to nest a few divs within each other. I then apply a background image through CSS to each div.
BUT... I can either code it to stretch to the viewable screen OR to the whole page, but not both. In the first case, the layout is ruined if there is little content on the page (or the user has a high resolution screen). In the second case, the layout is ruined if there is a lot of content (or the browser window is small, or the screen resolution is low).
It would be easiest to just post a link to the page I am working on, but here is my code...
HTML (xhtml transitional doctype):
<body>
<div id="frame1">
<div id="frame2">
<div id="frame3">
<div id="frame4">
<div id="frame5">
<div id="frame6">
<div id="frame7">
Page content text goes here
</div></div></div></div></div></div></div>
</body>
CSS:
html, body { margin:0; height:100% }
#frame1, #frame2, #frame3, #frame4, #frame5, #frame6, #frame7 { height:100% }
body { background:url(footer_repeat.gif) #F0DBC1 bottom repeat-x }
#frame1 { background:url(header_repeat.gif) top repeat-x }
#frame2 { background:url(border_right_repeat.gif) right repeat-y }
#frame3 { background:url(border_left_repeat.gif) left repeat-y }
#frame4 { background:url(header_left.gif) top left no-repeat }
#frame5 { background:url(header_right.gif) top right no-repeat }
#frame6 { background:url(footer_right.gif) bottom right no-repeat }
#frame7 { background:url(footer_left.gif) bottom left no-repeat }
Now, unlike in the thread that I linked to above, my problem is not with IE (testing on IE6), but with Firefox. It looks fine in IE, but in Firefox, the border is broken up when there is more content than one screen-ful.
I have tried playing around with min-height settings on the frame divs, but to no avail.
Can anyone assist? I'd really appreciate it.
If anyone would like a URL to show what the page looks like, please Private Message me.
BTW - I am here now, but I am away over Easter, so don't think me rude if I can't respond to posts over that time!
I've done this before too. I had a similar situation with footer placement. I used JS to place it where it should be.
The trick is to do
display: hidden;in CSS, and then using JavaScript make it visible again. So if a user has JS turned off, they just wont see it at all.
The trick is to do display: hidden; in CSS, and then using JavaScript make it visible again. So if a user has JS turned off, they just wont see it at all.
Do you mean to make the entire border hidden unless the user has JS turned on. Oooh, I couldn't do that!
So, please keep any CSS solutions coming. In the meantime, I am exploring a JavaScript solution here [webmasterworld.com] - with near perfect success...
Can anyone think of a pure CSS solution to do this?
Why is it that in Firefox, which does support the min-height attribute, when the html and body elements are styled to height:100% and the frame1 div styled to min-height:100%, the frame1 div still does not fill the entire body?
SN
I've just tried even a css 'expression' in IE. Does not work. (A browser can not 'look ahead' may be?)
My best solution - a small JavaScript inserted right after the content :
###########
var a = (window.innerHeight ¦¦ document.body.clientHeight);
var b = (document.height ¦¦ document.body.scrollHeight ¦¦ document.body.style.pixelHeight);
var c = a - b;
document.write('<div style="background : transparent; width : 1px; height : '+c+';"> </div>')
##########
var c value may be corrected due to other css properties (paddings, margins, etc).
Wokrs fine.
Killroy: CSS isn't perfect, and I don't know why so many people think it is. If a table solves your problem and headaches, use it. Far preferable then JS and a fraction of your users not seeing your site. Since when is a JS hack CSS compliant?
This is a good comment, but I see it a bit differently.
In the particular case that we discussing here, there is no problem with CSS in itself - but there is a problem with the incomplete implementation of CSS in browsers. It is true that I had thought the CSS implementation in Firefox was more perfect than it is. As far as I am aware, the HTML and the CSS code I have written is correct, i.e. it follows web standards.
The JavaScript code is indeed a hack, but it is intended to bridge the gap between standard CSS and the way it has been implemented (in this case, in the Firefox browser).
In the future, when web standards are more rigidly implemented in browsers, there will be no need to modify my HTML and CSS code. All I would need to do is to remove the JavaScript hack and it would still work fine. I may use the HTML and CSS as a template for numerous other websites, so it would be a headache to have to update a lot of non-standard code.
Regarding tables, I did actually try using a table layout for the site but it was no less fraught. It involved making tiny little images to go in each cell of the table and a real mess of code for what should essentially be a simple layout. It was a real hassle. There are well documented reasons for not using tables for providing page layout.
So, in summary, I am trying to write standard and streamlined code. When I stumble across a gap in a browser's implementation of that code, it is an unfortunate but preferable step to force the browser to recognise the code with JavaScript than to write verbose, non-standard code that is less portable and more liable to become obsolete in the near future.
Moby_Dim, thank you for your suggestion. That is another way round the issue and worth trying out.
Prem.
The columness and stretchiness of tables is unmatched in CSS layouts.
Also remember that CSS is designed for laying out documents while most websites are application GUIs, NOT documents and we shouldn't be surprised by the mismatch.
I still think a table "hack" is far preferable to a javascript one, since it's forward compatible and you will have to cahnge nothing to get it to work in a proper compliant browser. Much better then have your JS hacked pages break in the future. And mutch better then to have your layouts break without js.
SN
Killroy: Try using a proper CSS table. no tiny images needed. If you read up the full doc on CSS for tables you will see some wonderous tools and flexibility.
Thanks for this, Killroy. Can you point me further in the direction that you mean. I have used CSS with tables and I have looked through the W3C CSS specification, but I'm not sure by what method you are suggesting to attach images to the table.
I could place images within table cells in the HTML code, or I could make the CSS backgrounds of different table cells show particular images, through the CSS stylesheet. Both those approaches would require cutting up the layout into tiny images.
Are you suggesting to attach images to the table rows instead of the cells, or are you suggesting a different method?
For example, in my page, which I would like to use as a template for future sites, I wish to create a fluid layout - i.e. one that stretches to fit the browser window in both width and height. I want to include the following images that will make up the fluid layout:
If all of the corner images were the same size, I could easily create a simple 3-row, 3-column table with the main body of the page in the middle cell and the images in the cells around the outside.
But I don't wish to be constrained by having all the corner images the same size. So I don't think that this simple table layout would do the job.
Prem.
