CSS Help needed

[HeroOfPellinor]

Originally posted by: Alone

Originally posted by: bluestrobe
I'm starting to understand but my two keys things are getting the cslls to work together and trying to make it look half way decent on other browsers.

Then use the CSS hacks I mentioned. You can make IE do one thing and everything else do the other.

That's funny. Workarounds and hacks to get CSS to work is standard. Using tables for something other than how they were intended is wrong. Got it. :thumbsup:

 

[Alone]

Originally posted by: HeroOfPellinor

Originally posted by: Alone

Originally posted by: bluestrobe
I'm starting to understand but my two keys things are getting the cslls to work together and trying to make it look half way decent on other browsers.

Then use the CSS hacks I mentioned. You can make IE do one thing and everything else do the other.

That's funny. Workarounds and hacks to get CSS to work is standard. Using tables for something other than how they were intended is wrong. Got it. :thumbsup:

You can blame IE for this, not CSS or myself. CSS works just fine, this is to get IE to work. Using tables for position is a "hack" as well.

 

[HeroOfPellinor]

Originally posted by: Alone
Using tables for position is a "hack" as well.

That was my point. The way browsers interpret tables is similar enough that you don't need to become an HTML master to get consistent looking pages across browsers. Look at all the work and counter-intuitive coding you need to do to try to force CSS to work.

Again my point is, either way you're hacking........it's just that the hacking with tables is very minimal.

 

[Alone]

But these "CSS hacks" are for IE only, to correct its mistakes. Using tables is comparable to a hack for every browser.

EDIT: Mind you, they're both hacks in the same sense, but in my opinion, they're both using CSS for exactly what they're supposed to do, only one parses it differently.

 

[bluestrobe]

I added the following code at the upper portion of the css file:

#header{padding-left: 5px;}
<!--[if IE]>
#header{padding-left: 10px;}
<![endif]-->

FF looks fine and IE still looks ugly. Any design recomendations to eliminate the issue. I'm all ears at the point. I could go down to two columns with a header and even space them out a bit to eliminate the overlap issue.

 

[Alone]

Try one of the other methods. I'm not surprised these don't apply to IE7 anymore.

 

[bluestrobe]

Actually I might narrow down the cells a bit so allow space between everything. I'll play with it later.

 

[bluestrobe]

I'm playing with this design now with highly unsuccessful results.

http://glish.com/css/9.asp

Obviously 3 cells with a header cell won't work in FF and IE without making them with spaces between them all which I might resort to doing. I'm finding out everything needs to be in a cell to be told where to be on a page otherise it just goes where it pleases.

With my current try, everything is OK in IE unless the content of the left cell doesn't go farther than the menus on the right then the menus shift to the middle. FF shows all the text of the top menu jumbled up in one spot with the menu in the middle of the page and the lower menu under that. I guess I'll need a cell on thr right to stick the menus into to keep them in that spot.

CSS is proving to be confusing compared to a table layout. I might go back to the original layout and just make the cells smaller so they don't touch and overlap in IE or FF or both. It might add more definition to the layout too.

 

[bluestrobe]

I got it to where I want. Other than colors and finalization, see any problems?

 

[Alone]

I'm not sure I'm seeing what you're seein.

Text.

 

[bluestrobe]

Originally posted by: Alone
I'm not sure I'm seeing what you're seein.

Text.

Yea, I guess I have to work on the resolution issue. This is what I have on my end at 1024X768. Text

 

[Alone]

Oh, good then!

A good way to avoid resolution issues is to use percentages instead of pixel values.

 

[bluestrobe]

I'll have to play with percentages since I've always used pixels as a measure and layout medium.

Is there any way I could keep this centered in the middle of the screen no matter the resolution without using tables? Using percentages will just keep it "homed" in on one edge from what I gathered.

 

[Alone]

Originally posted by: bluestrobe
I'll have to play with percentages since I've always used pixels as a measure and layout medium.

Is there any way I could keep this centered in the middle of the screen no matter the resolution without using tables? Using percentages will just keep it "homed" in on one edge from what I gathered.

Well, if you use percentages for your magins/padding around all your content, then it'll stay centered.

 

[mulletgut]

A tip for using percentages:

Don't have all your percentages add up to 100%. For some reason there are losses (through additional space from borders etc) so sacrifice a few percent to these.

so for eg.
margin-left: 5%
margin-right: 5%


div for content (or your table or whatever)
width:70%

right div for navigation (or your table or whatever)
15%

then a use a few percent for the space between your content and your right navigation say 3%

this leaves 2% for loss.

You can play around with the actual figures untill you get it how you want.
I hope I'm not off track here and leading you astray.

 

[Alone]

That's absolutely correct. I can't recall ever using 100% and having the desired results.

 

[bluestrobe]

I'll try it when I get home and post an update.

 

[bluestrobe]

Ok, I changed the content side at 75% and menu side as 15% and it was actually nice looking. I had to narrow the menu a bit to get it to look right at 800x600. Is it common for a web site to adjust to the size of the viewer's screen or is a fixed sized prefered? Other than some color changes I like the new look. Any suggestions on improvement or code I should clean up?

My next item to get is a cell like the header but a footer for the bottom for copyright information and such. I'll try to keep it in a fixed position off the bottom like the header is at a fixed position off of the top.

 

[bluestrobe]

This is the code I have so far. What I want to do with the "bottom" box is make it a fixed distance from the "leftcontent" box so when the "lc" box grows or shrinks from my text/updates, the bottom box moves with it and stays at a fixed distance from it. I know the code isn't perfect but I'm still playing with it. Is there a way to do this?

css code

 

[mulletgut]

I am struggling to work out what it is you're asking.

Is your leftcontent box the main content component of your page?

If you want content divs to adjust themselves in relation to other divs, you will probably be better off using the float property for positioning as opposed to absolute positioning.

Am I right to assume you want your footer to rest just below your content?

 

[bluestrobe]

Originally posted by: mulletgut
I am struggling to work out what it is you're asking.

Is your leftcontent box the main content component of your page?

If you want content divs to adjust themselves in relation to other divs, you will probably be better off using the float property for positioning as opposed to absolute positioning.

Am I right to assume you want your footer to rest just below your content?

It's best to goto this thread:

http://forums.anandtech.com/messageview.aspx?catid=33&threadid=2038076

This thread was past it's prime and way off topic.

 

[mulletgut]

Lol thats a link to this thread..............

 

[bluestrobe]

Originally posted by: mulletgut
Lol thats a link to this thread..............

DOH! I corrected the link.