although I managed to fix the table problems on my site some weeks ago I?m trying to move the whole thing to a CSS-based layout, just for the fun of it. And, of course, because I can hardly see through all the code, even before there?s any content in it! But my ?problem? is that I don?t want to create a new layout, I really like it as is.
And as every time when I code a new page, in IE it appears exactly like I imagined and wanted it to be, but Netscape and Opera don't want to understand the first things that come to my mind, it?s really amazing
The main idea for my current CSS version I got from glish.com, and it?s working almost perfectly well in IE 6. There are only two things that I just can?t seem to get working:
1. With a table, I can just set the overall height to 100% to make it fill the whole screen. How can I do this in CSS?
2. The second thing is similar: how can I make the two light yellow bars fill the whole space between the dark top and bottom area, (that?s what tables do automatically...)?
And if I (and you ) have a look at the page in Netscape 6 or Opera 5: there are these horizontal spacings that don?t appear in IE, and the top and bottom areas aren?t as wide as the screen... I hope that?s only small things in the style sheets, but I couldn?t find them?
Ok, First off start replacing all of your <p></p> tagsets with <span></span>. The <p> tag is for paragraphs and your using it for single lines of text all over the place. That sould fix some of your alignment's & gaps. I also found one section where you had <p> tags with nothing inside them??
As for the rest.... Well, I'm too lazy to completly pull appart your code but I will suggest that you should always develope and test with all browsers. Not just one and espically not just IE when your working on CSS layouts. IE tends to be leaneant when it comes to bad markup habbits. Anyway, test on as many platforms as you can otherwise you'll work yourself into a corner. Then you'll have to back track and redo alot of work that you've already done. Which it the situitation your in now.
If you find it hard to constantly test in multipule browsers then for CSS testing I'd suggest using Mozilla. It seems to render quite colsely to the specifications and what you get in Mozilla often looks the same in IE and Opera. This might be because Mosilla is stircter on CSS than IE and Opera's just to moody.
A couple of other things....
This is just me nit picking but I would personally assign id's to the div's that only occour once in the document instead of using classes. IMHO things just seem a little neater like that. But that's just me. I also suggest you use the full 6 digit hex codes. Why? Because 6 digit hex codes are more common then the shorter ones and make things easier for yourself when you cut and paste them to and from different applications. That and you'd be able to get a much more eye pleasing shade of yellow that way :P Heh.
Edit: TYOP's
[This message has been edited by Dracusis (edited 02-04-2002).]
kuckus: You are on your way to getting there and if you follow Dracusis' types you should be close to your target (although it may need tweaking).
One thought: I would efine the font on the body tag and let inheritance take care of assigning the fonts. You also don't need quotes around single word font names so it is Arial but "Times New Roman".
My previous comments about Flash navigation on otherwise non-Flash pages and keyword and description metatags still stand!!
Thanks for your your help so far, it's working much better already!
I replaced the <p>s with spans, changed the classes into ids, gave the color codes 6 digits, added some meta tags and moved the font definitions to body. Emps, I agree and don't like the flash navigation very much, too, and I'll replace it as soon as something beautiful comes to my mind. But I think it will have to wait a few more seconds, until I know which and how much content it will have to handle. And I'm thinking about how to make the yellows more 'eye-pleasing', since you both don't seem to like it *that* much But the thing is, it has to be yellow...
Now there's only one thing left that's not OK in Netscape, it's the dark bars at the top and bottom of the page: any ideas why they aren't stretched to the whole window's width, like in IE?
And I didn't find a solution for the other two things that were so easy to do when I had all those tables: the light yellow colored divs (it's #middleleft and #middleright) should fill up the whole space between the top and bottom bars... and the bottom bar should be the last thing one the page, there shouldn't be any yellow after it. Just as it was when I had the monster table.
No, both width: 100% and heiht: 100% won't work. If I set the height of #middleleft and #middleright to 100%, NN (yes, it's 6 ! ) starts messing up the whole layout. And it doesn't care for width: 100% on the .bar divs
Just added a bg image. What do you think about it?
I think you problem here it that margin: auto works differently in IE as it does to NN6+ and Opera.
Ok, since you have many different boxes of colour happening here you'd possibly get better results breaking things up some more and putting the z-index property to work.
For example, You could have a single div for the thick dark brown stripe all the way accross the top of the page. Then over this you position the lighter brown area. Again in another div you put the title sitting in the middle.
Setting up your page this way may force you to berak the psudo liquidity you have there. Although you are more likely to acheive a fully liquid result using a slightly more intricate mix of nested and un-nested divs. Setting them up from the left and right margins (both from the body and nested inside one another) and setting relative % width values is always a good way to start. Mixing inline, relative and absoulte divs makes an impressive toolset to work with.
But if you don't want to get that close to CSS's ugly face just yet you should try re-arranging how you set out your site. At the moment you seem to have three rows of div's. Header div's, body div's and footer div's. Then you've split them up into several columns. How about doing it the other way around? Do your columns first then slot three rows into each column. You might need up to five columns for the layout your after which means you'll need to understand how the glish templates work so you can build onto them.
Although, div's and CSS aren't tables. Copying a complex table based layout using only CSS isn't easy. You may or may not have to make some trade-in's along the way.
Arr... You could go out on a limb and actually learn CSS.
CSS is cool. It's is hip and everyone's converting to CSS. It's the newest web trend and would you believe it, it's actually got some decent browser support! It's the best thing since sliced bread! Of course you want a CSS site. Hell, who wouldn't right?
Am I on your wave-length now?... good.
Stop. Shut up. And let me put a little question in your head...
Why is CSS so good?
CSS is for display. Your trying to convert from an old style table hack display to a nice clean CSS diaplay. CSS was designed to format and display your HTML elements. Basically, your site shouldn't really be layed out in a table to start with. You put your data into elements. You format and display your elements onto the screen. The document structure is almost logical this way.
Ok, now for another little question?
Why convert your layout?
Sure, it would be CSS but to be honest. I personally couldn't care less how it was done. It still looks the same. Why take a web site that looks like it could be done with table hacks and copy it? Seriously, you don't have to do that!
Not when you have the tools to achieve so much more...
Here's a little two step guide I'd recommend to anyone converting a web site from HTML 3.0 table hacks to CSS:
Step 1. Learn CSS. Learn it like you learnt your mothers nipple when your were but a wee lad.
Step 2. Scrap your current design and start again.
You've got different tools to work with now. They are much more powerful than what you were doing before. They also require a totally different approach to design.
I made a completely new approach, using more nested divs and combining relative and absolute positioning to body and parent divs, and it's working *lots* better, thanks for the ideas!
In IE6 it's perfect now, but I had to use absolute positioning and a little javascript to position the navigation and everything that's in the left column. Is there another way of doing it? But at least, it's looking exactly like the table-based version now, it's cool!
And again a little problem in Netscape 6: why doesn't it make the middle area (the yellow one) as high as the div in the center of it (it's name is #middlecenter, I think)?
Exept from that, I'm very proud of what I've done ... thanks again!
Heh, I forgot to save before uploading the page. Fixed it!
Because of the absolute positioning I had to use a javascript that puts the navigation to 15% + 1px, otherwise it would have covered the border... now it's updating onResize, but isn't there a way without absolute positioning and javascript?
Relative positioning. First element after body tag (<- May or may not be needed). High z-index value. Margin-left: 15%.
Or, make an absolutly positioned div that slots in under all of your textual content but above your backgrounds so you can still see it. Set all margins to 0px. Width to 100%. Padding-left to 15%.
Assuming you want it 15% from the left hand side of the page that is. If you want it 15% +1 pixel you can try mixing % margins with px padding values or vice versa.
Although I've come accross some ultra weird ass bugs in IE 5.5 & 6.0 doing things like this and I've never been able to identify why. Mozzie and Opera got it right though.
kuckus: Wouldn't a floated version present less trouble?
Skatefx: Dracusis mentions 'learn' and you should also practice (a lot). You can learn all about the odd quirks but the best way to understand is to try various designs and kick the bugs out of them in a variety of browsers.
Yes, I'd like a floated version much better than absolute positioning, too. I already tried a few things, but it wouldn't work...
Here's some CSS, it's for the header section:
What would I have to change to avoid absolute positioning and get everything in one single line? If I just put text in the #topframe div, the #topcenter appears on its own line.
Hmmm...
[This message has been edited by kuckus (edited 02-05-2002).]
kuckus: I wouldn't really recommend just doing a direct change like that - you'll probably save yourself time and clean up the code if you started from scratch:
Put in 3 holders, top middle and bottom, all 100% wide with clear: both;
Then you'll need columns inside these and these are the ones you float for example you need 2 columns in the middleHolder so make them 100% and float: left; and then use other DIVs in the right column if needed.
As the top and bottom elements are only 1 line I'd use SPANs in the topHolder with padding and margins to position them (although you can use float too).
Have a quick play with that and see how it all hangs together before you put in any serious content.
kuckus: Looking good and the code is so much cleaner (ahhh). How does it look in Opera?
Your problem seems to be from the middlecenter DIV - try setting top and bottom margins, borders and padding to 0px and making it 100% high and see how that goes.
Now it's looking and working perfectly well and the same in all the browsers I could find on my computer (that's IE 6, Opera 5 & 6, NN 6.2) - although I didn't dare to have a look at it with NN 4.7 yet ...
I used bluerobot's centering and a padding: 20px; on #middleCenter instead of margin: 20px; on all its children, and that was the whole trick. I think I'm really beginning to like CSS - it made the code so much more clean and easy to read, I love it!
~goes to cupboard and fetches CSS-only site destroying NS4.x cannon takes aim at site and pulls trigger and not much happens~
kuckus: It doesn't look too bad in NS4.x - the vertical lines don't appear and 'ENSELEIT' wraps on to another line which doesn't look great but it is perfectly functional. You might want to put an oops notice up .oops { display: none; } so that NS4.x people know why it doesn't look as you intend.
Well done on the hard work there and I'm glad to see we have another convert!!
CSS doesn't suck Dark Phoenix. There are sufficient hacks out there to overcome the browser problem. Maybe you should consider that in essence using css means you've actually got to work at it....get the grey matter into gear...
posted 02-03-2002 22:11
