Topic: HTML/CSS Question

[DoorKnobHandle]

Hey there!

I'm working on a website for a project and I have a little problem with the layout. What we want is a blind table layout like this:

|----|--------|----|
|    | HEADER |    |
|    |--------|    |
|    | NAVBAR |    |
|    |--------|    |
|    |        |    |
|    |        |    |
|    |        |    |
|    | CONTENT|    |
|    |        |    |
|    |        |    |
|    |        |    |
|    |--------|    |
|    | FOOTER |    |
|----|--------|----|

The left and right columns are what we call bumpers. There's cool pre-rendered art in there as this is for an upcoming game! I have this laid out easily as a blind table in HTML where the left and right bumpers use the rowspan property and all the middle table cells have a width and max_width of 1024px.

My first question is: how can I ensure this collapses properly in lower resolutions. The middle column is 1024px wide and should ALWAYS stay at that size and centered in the middle. When you shrink the browser window or view the page in lower res, the bumpers should simply shrink.

My second question is: at 1920x1080 screen resolution, for example, the bumper art is still a bit wider than the space it's got. When looking at the page in 1280x720, for example, the bumper art for those left and right columns is much to wide of course. Is there a way to have the tables cut off the bumper art FROM the right direction? That is, the INSIDES of the bumpers (right edge for left bumper and vice verse) should always stay at the edge of the table cell, the OTHER side should get cut off. I've tried overflow:hidden tags and a couple other things and nothing really works properly, overflow:hidden doesn't do anything in my case for example.

I'm stumped on how to set this up properly, and would greatly appreciated any help from you web-designers! If you need more info or anything, please let me know!

[Anian]

Ok, I don't know how much you dabble in html and such so I just tell you what I gathered from your post.

If you're not gonna use divs and what's called "responsive" design (basically you define a grid in .css which tells at what resolutions what happens to a particular segment of the page) - there are wordpress themes that have this already in them but I find that most people override those properties as you lose some control over the look of the page, especially if you're like me and don't know enough php so you modify other people's themes...it gets bloody complicated and messy real fast in my opinion.

Ok gone too far with that If you're gonna stick with tables and just make it simple and easy, just with manual updating of html instead of blog and such features of CMS, here's what I'd do:
I'd suggest center the main table (without the bumpers) (you can do this with a div as well, just mark how far from the left it is), I found that tables have an align atribute but you better handle it with css because it seems it's going to be outdated soon. Here's complete solution to centering the table, just copy paste the solution you want: http://www.granneman.com/webdev/coding/css/centertables/
I think you can even use this in a css

Code: Adventure Game Studio

1. table { margin: auto; }

Main thing is leave the bumpers out of the table completly, no rowspaning, then put the prerendered background as a background image for the whole page and turn off repeat, also center it. That way no matter what size the screen is, the viewer will still see the content (the table with header, navbar, content, footer) the way it's meant to be seen and the size of the background will be ignored if it's smaller than those 1024px or whatever you set the content/table to be the width off.
The browser won't look at the bumper images as content but as for example a background color, but you'll have control and the readers won't know the difference.

Background image should be like prerendered stuff on the right and the left with a 1024px wide black or whatever color in the middle.
And here's the css code you need of the background, just replace the smiley.gif with the image you want to use and where it is uploaded:

Code: Adventure Game Studio

1. body
2. {
3. background-image:url('smiley.gif');
4. background-repeat:no-repeat;
5. background-attachment:fixed;
6. background-position:center;
7. }

[DoorKnobHandle]

First of all, thanks a ton, you're a life-saver!!

I like all of this EXCEPT that this means we have to bake the bumpers into the background image. See, the plan is to have a small tileable spacefield graphic as the background and then the bumper graphics are spaceships that blend over that spacefield background.

Is there any way to modify your approach to work like that?

[Anian]

I see, well CSS3 does have that option of using multiple backgrounds (it's just what you might think it is, google multiple backgrounds css3, there are plenty of easy tutorials).

But not all people have the latest browsers so, other options:
Maybe make starfield background image repeat and then make a div that has the width of the table(with the content stuff) + whatever you need for the bumpers with another background image with the ships and the gap/black area in the middle (if you want it to blend, use gif and make the edges on the left and right with transparency). Within that div place the table with the content, centered.

Or:
If you just want to make it really simple you could make just the ordinary background image which shows blank center area (or anything at all) + bumpers with ships + an area which has the stars that fade to black on the far left and far right side - just one big image.
Then make the background color of the body black and you basically get the baked background but you also get a bit of the starfield in it, even it's not tileable. Still should be an ok small size if the starfield is not overly complicated.

[DoorKnobHandle]

Okay I went for the div approach now.

So I have a div enclosing everything in my HTML body using the style

Code: Adventure Game Studio

1. width:2048; height:1024; background-image:url("images/bumper.png");

and in that, I have my blind table which is now just a single column with 4 cells, header at the top, navbar underneath, then the content area and finally the footer.

bumper.png is a new image, since my blind table is 1024px and each bumper is 512px wide, this one has a width of 2048px. In the left 512 horizontal pixels, it has the left bumper, then 1024 transparent pixels to be overwritten by the blind table, and the last 512px are the right bumper.

My blind table uses the style

Code: Adventure Game Studio

1. margin:auto; padding:0; border-spacing:0;

This works in the sense that I have the background image for the HTML body set to the tiled starfield, then I get the bumpers (from the div's background image) drawn and blended over that nicely using an alpha channel, and in the middle I have my table centered.

The problem is the div itself isn't centered. I tried with the HTML center tag as well as with adding a

Code: Adventure Game Studio

1. margin:auto;

style, but this only, apparently, centers the contents of the div. The problem is that, when I view this site with the aforementioned dimensions in 1920x1080 screen resolution, I get a scrollbar at the bottom which is all the way left. Accordingly, I see ALL 512 horizontal pixels of the left bumper, then the table, which is offset a bit to the right and not centered 100% and then a little bit of the right bumper! I still need to have the left and right bumpers cut off so that I always have my table in the center, even when resizing the window.

Is that doable? Thanks again for your continued help, this is a lot better already!

 

[Khris]

The trick is to put the bumpers inside the main div, then use "position:absolute;" to align them with the edges.
To get rid of the horizontal scrollbar, use "overflow-x: hidden;" for the body tag.

What I do is use 1000px as the width of the main div so there's some space left for the scrollbar. Also, setting the html tag's min-height to 101% prevents the contents from jumping horizontally when you switch from a tall page to one without scrollbar or vice-versa.

Here's a full template: http://khris.agser.me/dkh/
html: http://pastebin.com/ZV16Ux7E
css: http://pastebin.com/TUPLfjCy

[Anian]

Hold on, I didn't even calculate this before, you're making a 2048px wide page? you do realise the fatal flaw is that you said that there is something 2048px big on a 1920px wide screen? 
This is far too wide. And I mean this in a way that most people will look at this page on about 1920px and smaller, thus a lot of the image will be lost.

The scroll appears probably because you entered the width of the div, that makes the browser forced to make the site that wide, thus have to scroll. The background image doesn't make a scroll bar and won't stretch the div or other containers.

EDIT: well Khris made far more effort than I did, and this is basically what you should do, just use div-s instead of tables, it'll make things easier if that is the effect you want to make, you can postion them anywhere you want.
And even here, Khris, made the page narrower than 2048px, you should keep it 1920px and smaller.

[Khris]

As far as I understood the 2048px, that's the total width of bumper images + main contents (512 + 1024 + 512).
Thus on a 1680 wide monitor, which is becoming more and more common, more than 300 pixels of both bumper images can be seen.
They just frame the page and their weight is probably next to the center div, they don't have to be seen in their entirety.

[DoorKnobHandle]

Khris hit the nail on the head! Thanks a ton for your effort, too!

This is absolutely perfect except that, while the horizontal scrollbar is indeed hidden, I can still use the middle mouse button to move around the full 2048px width of the two bumpers plus the 1024px content area! The browser also still starts "on the left", not centered (ie. I still start out seeing all 512 horizontal pixels of the left bumper and only a bit of the right bumper).

Does that make sense? Can this be resolved somehow as well?

This is what I have so far:

HTML

Code: Text

1. <html>
2.  
3. <head>
4.  
5. <title>This is the title!</title>
6.  
7. <meta http-equiv="Content-Language" content="EN-US">
8. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
9.  
10. <link rel="stylesheet" type="text/css" href="style.css" />
11. <link href="http://fonts.googleapis.com/css?family=PT+Sans+Caption" rel="stylesheet" type="text/css" />
12.  
13. </head>
14.  
15. <body>
16.  
17. <div id="main">
18.  
19.         <div id="left_bumper" class="bumper"></div>
20.         <div id="right_bumper" class="bumper"></div>
21.  
22.         <div id="header">
23.                 <img src="images/logo.png">
24.         </div>
25.  
26.         <div id="navbar">
27.                 <img src="images/navbar.png">
28.         </div>
29.  
30.         <div id="content">
31.                 Content
32.         </div>
33.  
34.         <div id="footer">
35.             Footer
36.         </div>
37.  
38. </div>
39.  
40. </body>
41.  
42. </html>
43.  

CSS

Code: Text

1. body
2. {
3.         background-image: url("images/background_small.png");
4.         margin: 0;
5.         padding: 0;
6.         font-family: "PT Sans Caption";
7.         font-size: 12pt;
8.         color: #fff;
9.         overflow-x: hidden;
10. }
11.      
12. #main
13. {
14.         margin: auto;
15.         text-align: center;
16.         width: 1024px;
17.         position: relative;
18. }
19.      
20. .bumper
21. {
22.         position: absolute;
23.         overflow: hidden;
24. }
25.      
26. #left_bumper
27. {
28.         background-image: url("images/left_bumper.png");
29.         left: -512px;
30.         width: 512px;
31.         height: 1024px;
32. }
33.      
34. #right_bumper
35. {
36.         background-image: url("images/right_bumper.png");
37.         right: -512px;
38.         width: 512px;
39.         height: 1024px;
40. }
41.      
42. #header, #navbar, #footer
43. {
44.         text-align: center;
45.         padding: 0px;
46.         margin: 0px;
47. }
48.      
49. #content
50. {
51.         background-color: #111;
52.         min-height: 300px;
53. }
54.  
55. #footer
56. {
57.         background-color: #222;
58.         font-size: 8pt;
59. }
60.  

[Khris]

That's weird, Firefox centers it just fine, from the start. I didn't test it in other browsers though.

Here's an amended version:

Code: C

1.         <body>
2.                 <div id='ships'>
3.                         <div id='main'>
4.                                 <div id='header'>header</div>
5.                                 <div id='navbar'>navbar</div>
6.                                 <div id='content'>content</div>
7.                                 <div id='footer'>footer</div>
8.                         </div>
9.                 </div>
10.         </body>

Code: CSS

1. #ships {
2.         background-image: url('images/ships.png');
3.         background-position: center top;
4.         background-repeat: no-repeat;
5.         margin: 0;
6.         padding: 0;
7.         min-height: 422px;
8. }

ships.png is a 2048px wide picture with the two ships at the outer edges.
The body's "overflow-x: hidden;" is thus no longer needed.

I've updated http://khris.agser.me/dkh/

[DoorKnobHandle]

That is weird, I am running Firefox as well and your (old) page is centered but it is also smaller than 1080px horizontally, if I understand you correctly. Mine was larger than 1080px and was not centered anymore.

This new approach, however, works fine in Firefox. Thanks so much! In Internet Explorer 9, however, the blind table isn't centered but instead all the way left... I have zero experience in making websites browser-compatible, any idea what could be causing this to happen?

EDIT: Found a solution, centering a DIV in IE needs special treatment... margin:auto doesn't work in IE, so the body needed a text-align:center

[Khris]

Yeah, IE always requires additional work.

While this isn't really helpful, what I do is redirect IE users to a page that recommends downloading an actual browser.

[DoorKnobHandle]

Haha yeah, I can see why you'd do that!

Thanks again, this works very nicely!