karlstolley · September 10, 2011 23:35
diff --git a/for-adam.htm b/for-adam.htm
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

 <head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Bullets, Centered Images for Adam</title>
  
  <link rel="stylesheet" type="text/css" media="all" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css" />
  
  <style type="text/css" media="screen">
  /*Show some bullets; ul li is the selector you want.*/
  ul li {
    list-style-type: disc;
    margin-left: 50px; /*Adjust to suit; padding will move text away from bullets*/
  }
  /*Center a simple photo inside of a containing, invisible div:*/
  div.simple-photo {
    text-align: center;
  }
  div.fancy-photo {
    width: 197px; /*Matches size of the bird photo*/
    margin: 0 auto; /*Same as margin-left: auto; margin-right: auto; The 0 is set to -top and -bottom margins*/
  }
  </style>

 </head>
 <body>
 <ul>
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
 </ul>

 <!--Here we're centering the photo just by using its default inline presentation and text-align: center:-->
 <div class="simple-photo">
 <img src="http://farm7.static.flickr.com/6200/6134611986_474ecbf452_m.jpg" alt="A curious bird." />
 </div>

 <!--This is a little fancier; .photo gets sized to specific width to match the photo, and uses margin: 0 auto; to center. (That trick only works if A. there's a specific width on the element being centered and B. the element being centered is smaller than its containing element/the browser window. Caption goes with it:-->

 <div class="fancy-photo">
 <img src="http://farm7.static.flickr.com/6200/6134611986_474ecbf452_m.jpg" alt="A curious bird." />
 <p>A curious-looking bird.</p>

 <!--Photo by Allie_Caulfield, http://www.flickr.com/photos/wm_archiv/6134611986/sizes/s/in/photostream/-->

 </div>
 </body>
 </html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

	<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Bullets, Centered Images for Adam</title>

	<link rel="stylesheet" type="text/css" media="all" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css" />

	<style type="text/css" media="screen">
	/Show some bullets; ul li is the selector you want./
	ul li {
	list-style-type: disc;
	margin-left: 50px; /Adjust to suit; padding will move text away from bullets/
	}
	/Center a simple photo inside of a containing, invisible div:/
	div.simple-photo {
	text-align: center;
	}
	div.fancy-photo {
	width: 197px; /Matches size of the bird photo/
	margin: 0 auto; /Same as margin-left: auto; margin-right: auto; The 0 is set to -top and -bottom margins/
	}
	</style>

	</head>
	<body>
	<ul>
	<li>Item one</li>
	<li>Item two</li>
	<li>Item three</li>
	</ul>

	<!--Here we're centering the photo just by using its default inline presentation and text-align: center:-->
	<div class="simple-photo">
	<img src="http://farm7.static.flickr.com/6200/6134611986_474ecbf452_m.jpg" alt="A curious bird." />
	</div>

	<!--This is a little fancier; .photo gets sized to specific width to match the photo, and uses margin: 0 auto; to center. (That trick only works if A. there's a specific width on the element being centered and B. the element being centered is smaller than its containing element/the browser window. Caption goes with it:-->

	<div class="fancy-photo">
	<img src="http://farm7.static.flickr.com/6200/6134611986_474ecbf452_m.jpg" alt="A curious bird." />
	<p>A curious-looking bird.</p>

	<!--Photo by Allie_Caulfield, http://www.flickr.com/photos/wm_archiv/6134611986/sizes/s/in/photostream/-->

	</div>
	</body>
	</html>