Css Questions, Help And Suggestions

Bluebear

Oct 11 2008, 07:15 PM

I am horrible regarding coding. I have never ever tried it. Or well I tried once, but it did not work out. After some problems with different coders and other people that were supposed to help me I decided to give it another go on my own. So I have done all of this on my own, so take in consideration that I am me - never done this before.

I have tried to create it using CSS. (At least I think so?) I am having problems with the fact that it looks completely different in different browsers, can not get things to be placed right and such. Right now the only thing would be that the "menu text" is wrong... and the browser thing. The width is also wrong, but I know how to fix it and I will do that later.

Also if there is anything wrong with me code, something I should change or something I simply could to better please tell me! I want to get this right, so just say it if something is wrong.

Here is a list with problems or things I can not figure out, I will update it if it is fixed:
- Site looking different in different browsers.
- I do not know how to create the content areas?
- "Menu text" should be placed further up. (That part is correct in IE)

Again tell me if something is wrong! (It probably is.)

Link: Bluebear's little weird site

And what is the difference between padding and margin?

Comment/Reply (w/o sign-up)

sonesay

Oct 11 2008, 08:36 PM

One thing your doing wrong is not applying margins and padding to zero at the body tag level. This will override most browsers default setting to html elements so you will get a more consistent look across most browsers. This setting does not apply to all elements but its the most effective so anything you want with margins and padding you just need to apply explicitly.

I hope this makes sense. As for your other layout issues the above is the first step to fixing them. You just gotta keep in mind how much space each element you add is taking up. They stack like building blocks so start with the top and work your way down. It may be easier then to try and fix it all at once. OK I cant look into your code too much at the moment I'm suppose to be working on something else sorry.

Good luck

Comment/Reply (w/o sign-up)

jlhaslip

Oct 11 2008, 09:07 PM

Add this to your page, replacing the <html> tag you currently have in place:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

This is the Document Type Declaration for the page. It will tell everyone, and their Browsers, the rules to use for laying-out your page. It is very important to have this on your page so the Browsers all apply the same rules, and is a really good step towards having the page viewed the same in all Browsers.

When you add a div that has content in it, the div takes up space on your page, let's say the height is 100 pixels and the width is 100 pixels for the div.
The padding is added 'inside the box' and margins are added 'outside the box'.
Here is a small demo that might help you understand the difference.
Notice the the text of the second and fourth boxes are spaced away from the black border? This is padding added to the div. The padding is between the border and the text. The CSS for these are #div1 and #div3 in the styles contained in the page. Do a View Source to check it out.
Notice that the third and fourth div's are spaced away from the left hand side of the page and also away from the div's above them? This is margin added to the div. The CSS for these are #div2 and #div3.
Div 3 has both padding and margins, so the box is spaced away from the left-hand side of the page AND the div above it, and the Text is spaced away from the borders, too.

Demo page here.

Simple enough once you understand the difference. Padding goes inside, margins go outside.

Comment/Reply (w/o sign-up)

Bluebear

Oct 11 2008, 09:16 PM

sonesay: I do not know if I got it correct or if I even understood what you said.

Anyway the body tag level looks like this now:

CODE

body {
margin: 0px;
padding: 0px;
font-family: verdana, arial, sans-serif;
font-size: 12px;
}

Thanks haslip, understand a lot more now.

Comment/Reply (w/o sign-up)

jlhaslip

Oct 11 2008, 10:07 PM

Glad to help.

To take the suggestion about the 'reset' of the body paddings and margins, remove them from the body element and add it to the universal selector (*) like so:

CODE

* { padding:0; margin: 0; )
body { font-family: verdana, arial, sans-serif; font-size: 12px; }

That will assist cross Browser, too. Especially IE.

Now simply add the amount of padding or margin to each element that needs more than the 0 pixels of padding/margin as the design requires.

Comment/Reply (w/o sign-up)

sonesay

Oct 11 2008, 11:02 PM

From my experience though using the universal selector has it draw backs. For instance on some browsers like with safari in my past experience and maybe even opera too(cant remember) the rules gets applied to all elements which means buttons and many others will get margins and paddings of zero. you will have to go back in and redefine paddings for those that you do not want affected which can be tedious work.

I think each browser handles the level of CSS definition between the body and the * differently to its elements so you have to keep that in mind. I have opted in favor of just applying to the body tag and then redefining as I need. It covers most important things like divs etc but not altering things like buttons, drop down menus, text input areas etc where you would probably not want to alter.

One problem I didn't like was when you set margins and paddings to 0 with the * selector and you go back in and define margins and paddings for your button for example they would be different in Firefox or safari. thats because a fix unit gets applied to buttons from different browsers but they aren't the same in style so they don't look normal. I have always used pixels to apply these though so many its not a problem with em but I have not tried myself.

Its up to you how you want to do it I suppose.

Comment/Reply (w/o sign-up)

jlhaslip

Oct 11 2008, 11:17 PM

You make some good points there, I like that you understand the reasons why you do as you do.
I rarely use pixels for spacing. Most often, I use ems. If a client resizes the text, for whatever reason, the spacing grows with it.

Comment/Reply (w/o sign-up)

pasten

Oct 12 2008, 06:27 AM

QUOTE(jlhaslip @ Oct 12 2008, 04:47 AM)

I too use ems. Not just for fonts, but for the divs also. Because when we apply ems to fonts only, then the whole layout will be screwed if the user increses the font size. I also consider using %.

Comment/Reply (w/o sign-up)

Bluebear

Oct 12 2008, 10:16 AM

I could try the ems or the % thingy, but I will apply it later. You guys make some really good points, I appreciate it. Try not to use so many big or hard words as I do not understand many of them.

For example I understand about half of what the universal selector is... should I even use it? I am noticing that people have some disagreements about that.

This em-thingy, how does it work? Never heard of it.

Comment/Reply (w/o sign-up)

jlhaslip

Oct 12 2008, 01:12 PM

The 'em' is a unit of measure for the display of your page.
1em = the size of the character 'm'.

Instead of saying: width: 160px; use width 16em;. This will size the div according to the width of the character 'm' in the font you select. If a client increases the font-size, the div will change sizes, too.

Comment/Reply (w/o sign-up)