Changeing from tables to CSS, just cant get it!
I'm volunteering my time to do a website for a local organization, and trying to do it the "right way" by using CSS instead of tables like I know how to do it.
Well I am stumped!!! I thought I was getting close, and then looked at it in IE... Yikes... The padding and widths are different...
For the next day you can see it at http://testsite.kirsch.net/ although as i play with it, it may change, so here is a current screenshot:
The colors here and layout are pretty much how I want them, except for the white background for the main content area should continue all the way down until the footer, not stop short like it shows here.
Here is the basic layout I am shooting for:
I have been looking for samples online, however it seems hard to find ones like I am looking for. The main content area, menu area will both be fixed width, with the entire site set to the top left corner of the page.
I have already figures out how to do the automatically dissapearing DIV's on the right, so that if the browser window is under a certain width, they do not even display. (as they will be content that is accessable withing the site itself)
If anyone can help, or point to a tutorial/tempalte site that might help, it would be appriciated. I ca already do the site in tables, but rather try to be "right"
I was hoping to use some css that are in the templates for Joomla as a guide, but some make me wonder. Heck, I was looking all around for where they change the color for the links when you hover over it, only to find out they don't change colors, they shift the background image so another portion of it is visiable and appears as the background. Sweet, but dang i was lost till i looked at the background image and figured it out.
-Greg
frofi posted this at 16:23 — 22nd November 2006.
They have: 37 posts
Joined: Jun 2006
Just put this at the beginning of your style sheet:
body, body * {position: relative;
margin: 0px;
padding: 0px;
background-repeat: repeat-x;
}
This will ensure you a full control over margins and padding in any browser. Then use absolute positioning for your containers. That way they will not collide with each other. Once you've learned how to use relative positioning, you'll be using absolute less and less.
And don't forget to change the background-repeat value into one you desire.
Raise And Share a Million.com - Rewarding to those who like to help others
frofi posted this at 16:27 — 22nd November 2006.
They have: 37 posts
Joined: Jun 2006
One more thing.... You don't need to use tables at all. The whole idea behind CSS div containers is that you can place them exactly where you want. Tables are a thing of the past.
Raise And Share a Million.com - Rewarding to those who like to help others
Megan posted this at 16:38 — 22nd November 2006.
She has: 11,421 posts
Joined: Jun 1999
Looks like you're doing well so far. Put a clear: both on the footer div and you'll get that down below the floats. For the columns, a simple solution will make this work like you have in the diagram (with the left sidebar hanging and not extending all the way down). Google "equal height columns" if you want the backgrounds of both to expand all the way down. If the left navbar can hang like you have it in the diagram above, what you need to do is put the background color on the mainarea div instead of on the content area itself.
This is my CSS:
#mainarea {background: #fff; width: 750px;}
#footer {clear: both; width: 750px; background-color: #006; color: #fff; padding: 20px 0; text-align: center;}
Too bad about all those joomla tables
Megan
Connect with us on Facebook!
Greg K posted this at 22:57 — 24th November 2006.
He has: 2,145 posts
Joined: Nov 2003
Hey thanks for the replies, sorry I didn't notice them earlier, my father went into the hospital wed morning, so it has been a hectic week.
I did find a book at books24x7.com that I started reading, "HTML Utopia: Designing without Tables using CSS" it is by sitepoint.com, so far it is pretty good at helping me with the things I was struggling on. Sitepoint says they now have a 2nd edition with more current info. I recommend this so far for anyone in the same boat as me. Unlike most CSS tutorials I have found, this one seems pretty good at giving what really works. I got tired of going to tutorials online and then find out half the stuff I was learning only worked in IE or firefox.
The really funny thing is, the sample site they work on in 1st edition (http://www.footbagfreaks.com/1stedition/) is very close to what I need. I had read one other book from sitepoint before, it pretty good material.
-Greg
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.