Viewing Thread:
"Simple CSS"

bonjour my fellow CSS programmers.

Our numbers are dropping. Where's cjh? Wish he'd come back I miss his tutorials.

I'm very slowly getting better at CSS but I'll admit I'm still a complete novice.

Today's problem is a doozy. I have the following in a header div;

Contact | Press | Advertise | Site Map | Help

It looks fine but it's not spaced out nicely as other sites like YouTube. How can I solve this? I think I should be doing something with

. Help or links would be very appreciated as always.

I recently had a problem with putting a footer under two columns. Turns out, clear: both; was the answer I was looking for. =)

Best practice is generally to use em unless you really, really, need absolute control. This allows partially sighted people to increase the text size using their browser - or people with small/lo-res screens (like telephones) to shrink it.

I generally set a catch all text size in ems using the stylesheet and then increase/decrease it using percentages for different elements:


body {
font-size: 1.25em;
}
h1 {
font-size: 200%;
}
.small {
font-size: 50%;
}


I think you can change it still with FireFox haven't tried it in IE yet. Thanks again Eccles ^^

Ah I believe the jury is still out on that one. But it's my understanding that px is best for exact measurements (on your screen) but em's are the best for accessibility and resizing proportionally by the user. You never know what font sizing a user has set in their browser so 12px words will display as 12px words even if the user has set the fonts to be bigger (at least in some browsers, not sure about Firefox), so it's not always a good thing.

Another little question =) There seems to be many different ways to disaply font sizes, px, pt, % etc. But which one is the best to use? At the moment I'm using px.

Blimey, works a treat =D. Thank you very much Eccles, you've been a great help. ^^

Normally I'd use:

<ul class="menu">
<li><a href="#whatever">Item One</a></li>
<li><a href="#whatever">Item Two</a></li>
<li><a href="#whatever">Item Three</a></li>
<li><a href="#whatever">Item Four</a></li>
</ul>

With a little CSS you can get this looking ok:


.menu {
display:table; /* ignored by IE (< 7) */
padding:0;
list-style-type:none;
white-space:nowrap;
border:1px solid #999;
}
* html .menu {
display:inline-block; /* for IE only */
width:1px;
padding:0 2px;
}
.menu li {
display:table-cell; /* ignored by IE (< 7)*/
}
* html .menu li {
display:inline; /* IE only */
}
.menu a, .menu a:visited {
display:block; /* for all browsers except IE (< 7) */
padding:4px 16px;
color:#000;
background:#d4d4d4;
border:1px solid #FFF; */
text-decoration:none;
}
* html .menu a, * html .menu a:visited {
display:inline-block; /* for IE only */
margin:0 -2px; /* to correct an IE border width bug */
}
.menu a:hover {
color:#fff;
background:#08c;
}


bonjour my fellow CSS programmers.

Our numbers are dropping. Where's cjh? Wish he'd come back I miss his tutorials.

I'm very slowly getting better at CSS but I'll admit I'm still a complete novice.

Today's problem is a doozy. I have the following in a header div;

Contact | Press | Advertise | Site Map | Help

It looks fine but it's not spaced out nicely as other sites like YouTube. How can I solve this? I think I should be doing something with

. Help or links would be very appreciated as always.

I recently had a problem with putting a footer under two columns. Turns out, clear: both; was the answer I was looking for. =)