Bit of Trouble Learning CSS

Community Forums/General Help/Bit of Trouble Learning CSS

Gabriel

(Posted 2009) [#1]

Hi,

It's been years since I've done any web design at all, and when I did, I typically used nested tables with just a little bit of CSS for colors and text effects, because CSS wasn't well-supported five years ago. I gather it's widely compatible now though, so I'm trying to learn some good new habits to replace all the bad old ones.

First trick I'm trying to learn is centering a layout in the middle of the page. Easily done with a table, and not too tricky with CSS, but I'm puzzled why there is a gap at the top of the page. I've set padding to 0 and I've set the top margin to 0 but still there is a small gap above the design. Can someone tell me why?

Stylesheet is inline to save jumping back and forth.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
<!--
body {
	background-color: #999999;
	font-size:12px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#outer {
	width: 683px;
	background-color:#FFFFFF;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: auto;
	margin-right: auto;
	padding: 0px;
	border: thin solid #000000;
}
div#header {
	padding: 0px;
	margin: 0px;
	text-align: center;
}
-->
</style>
<body>
<div id="outer">
	<div id="header" style="position:relative; left:0px;">
		<h2>Title</h2>
	</div>
</div>
</body>
</html>

plash

(Posted 2009) [#2]

I can't see anything that would cause that, but I'm no web designer :)
I see the spacing on Firefox 3.0.10.

Maybe divs automatically space themselves from other areas unless told not to?

Gabriel

(Posted 2009) [#3]

Ya, I'm running Firefox 3.0.10 as well, but it's not a browser-specific issue because it's identical in IE 7 and Opera 9.64 as well.

I was thinking that perhaps the body is considered to have its own margin, and perhaps that has to be set to zero as well. That does seem to make a difference, but I'm not sure if it's the right thing to be doing or if that's just masking a wider problem, such as your suggestion that divs might space themselves automatically.

TaskMaster

(Posted 2009) [#4]

Body margin.

Set:

margin: 0px;

in your body tag.

Or you could set just the margin-top.

Gabriel

(Posted 2009) [#5]

Aha, I saw that setting margin-top to zero worked, but I wasn't sure if I was supposed to be doing that. Thanks TaskMaster.

D4NM4N

(Posted 2009) [#6]

For centering use

margin: 0 auto;

Gabriel

(Posted 2009) [#7]

I only want it centered horizontally though. Vertically, I want it right at the top.

D4NM4N

(Posted 2009) [#8]

That will do it, it means 0 top/bottom auto left/right.

http://simplebits.com/notebook/2004/09/08/centering.html

Perturbatio

(Posted 2009) [#9]

I would highly recommend a reset CSS, it strips out browser specific layout and saves several hours wrestling with lesser browsers trying to get them to work properly (for instance: Internet Explorer <= 7 and safari <= 2).

The YUI one is my preferred choice:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.7.0/build/reset/reset-min.css">

I would also recommend using em's for font sizes (it will allow older browsers like IE6 to zoom the text for those that can't read the text).
You can use this: http://riddle.pl/emcalc/ to calculate the sizes for each of your elements.

EM's are relative from the containing element's font size, YUI reset sets the base font size across browser's to 16px (rather than whatever the browser might decide is best), allowing you a greater chance of it displaying correctly on all browsers.

Use even numbers for dimensions of block level elements (i.e. your main page), this means that most people (who have their browser full-screen) will not experience rounding error issues (it can crop up when you do things like drop shadow and the content appears to shift slightly to the left or the right).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.7.0/build/reset/reset-min.css"> 
<style type="text/css">
<!--
/* <a href="http://riddle.pl/emcalc/" target="_blank">http://riddle.pl/emcalc/</a> */
html, body {
	background-color: #999999;
	font-size:0.75em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-color: #000; /* set the base colour as well, since this can be set by a browser to be a different value by default */
}

/* Generic Styles */
h1 {
	font-size: 2.6em;
}
h2 {
	font-size: 2.3em;
}
p {
	margin: 0 10px 10px;
	font-size: 1.17em;
}

/* specific styles */

/* 
Margin
when specifying two parameters it is read as top and right, the opposing sides inherit 
when specifying three paramters, it is read as top, right, bottom and the left inherits from the right 
	(i.e. margin: 0 10px 10px; would be top: 0, right: 10px, bottom: 10px and left would inherit 10px)
when all four are specified then it goes clockwise from the top (top, right, bottom, left)
the same thing applies to padding and some other situations.
*/

div#outer {
	width: 680px;
	margin: 0 auto; 
	border: 1px solid #000;
	background-color: #fff;
}

div#header {
	text-align: center;
}
-->
</style>
</head>

<body>
<div id="outer">
	<div id="header">
		<h2>Title</h2>
	</div>
	<div id="content">
		<p>
		Nullam non ligula leo, ac elementum leo. Donec metus quam, tristique at convallis eu, semper quis est. Integer ac auctor erat. Pellentesque pulvinar rhoncus tincidunt. Ut lacinia lorem in metus facilisis sit amet rhoncus nisi facilisis. Duis porttitor ullamcorper orci quis iaculis. In eget enim ante. Phasellus congue porttitor vehicula. Duis sagittis libero nec tortor eleifend fermentum. Sed euismod blandit scelerisque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi sit amet quam a massa interdum imperdiet nec quis ipsum. Morbi convallis, eros vitae dignissim egestas, ligula purus luctus felis, ut pulvinar erat lorem vitae elit. Sed metus enim, fringilla vel commodo aliquam, condimentum id mi. Pellentesque auctor, ante quis scelerisque vulputate, lorem risus interdum erat, ac ultrices nisl urna mollis neque. Nunc odio est, mollis eu lobortis ac, iaculis in leo. Sed in dui massa, non viverra lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu ligula mi.
		</p><p>
		Integer malesuada posuere dignissim. Praesent euismod pretium lorem, ut mattis enim porta sed. Fusce porta ultricies euismod. Ut sit amet lobortis felis. Cras pretium nunc in felis tincidunt facilisis. Sed venenatis tincidunt blandit. Aliquam feugiat augue ac velit consequat ac dapibus diam faucibus. Vestibulum dolor sem, porta nec convallis tristique, tristique sed nulla. Nam sodales diam ac libero elementum sit amet condimentum sem feugiat. Aenean nec massa orci. Praesent pharetra mi eget elit pharetra adipiscing ac ut nisl. In volutpat lobortis turpis at ultricies. Aenean vel dolor nec velit pulvinar tristique a eu tellus. Nunc a metus at elit blandit lacinia. Donec libero odio, pellentesque commodo adipiscing non, rhoncus sit amet erat. Donec nec magna eget nisi auctor consectetur. Vestibulum lectus ante, fringilla nec iaculis in, viverra porttitor massa. Pellentesque ullamcorper urna ac nisi sollicitudin id porttitor quam ultricies. Nunc laoreet, eros sed tincidunt luctus, neque dui scelerisque magna, vel blandit metus turpis sit amet sapien. 
		</p>
	</div>
</div>
</body>
</html>

My recommendation is ALWAYS develop in firefox (which isn't a perfect browser but is pretty damned good (and consistent)).

My favourite firefox add-ons:
firebug
web developer toolbar
colorzilla
yslow
dummy lipsum (not specifically web development but useful for generating text)

D4NM4N

(Posted 2009) [#10]

What he said, web dev toolbar is a real time/headsaver.

You need to develop in both but as pert said make firefox your main one because its more fussy (a good thing!) than IE, probably why its so much faster.

I wish there was an UNASSUMING browser for devs that actually drops out with syntax errors etc if a page's code is not 100% on wc3 spec. Unfortunately there is not such a thing afaik, even firefox has many many error corrections in order to be able to compete (as the majority of web pages are very off spec). -It seems this is the horrid legacy left by netscape etc and further confused and added to by MSIE. They wanted to make web programming easy "for anyone", took shortcuts and now its a pain in the ass for everyone instead :clap:.