Dudas varias para crear mi web!

Buenas!

Llevo desde ayer leyendo las guías de esta web para crear mi página, antes de nada se agradece mucho, me ha sido de muchísima ayuda, si no fuera por esta página creo que habría tardado mucho en animarme a aprender html y mucho más en conseguir crear mi página xD.

Bueno pues ya al lio, tengo varias dudas sobre la página, antes de nada dejo aquí puesto lo que llevo y ahora expongo mis dudas:

<!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="application/xhtml+xml; charset=iso-8859-1" />
<meta name="description" content="Página Web dedicada a Pokémon. Pokédex nacional, ObjetoDex, calculadoras de stats y mucho más aquí! " />
<link rel="StyleSheet" media="screen" type="text/css" href="estilos.css">
<title>PokéInfo</title>
</head>
<div class="margen"> <div class="fondo"><body>
<div class="tablaforo"><table><tr><td>
<img src="imagenes/logo2.png" width="720px" height="180px" alt="Pokémon" /><br />
<img src="imagenes/noticias.png" width="108px" height="38px" alt="Pokémon" />
<img src="imagenes/informacion.png" width="108px" height="38px" alt="Pokémon" />
<img src="imagenes/articulos.png" width="108px" height="38px" alt="Pokémon" />
<img src="imagenes/guias.png" width="108px" height="38px" alt="Pokémon" />
<img src="imagenes/ foro.png" width="108px" height="38px" alt="Pokémon" />
<img src="imagenes/chat.png" width="108px" height="38px" alt="Pokémon" />
<h1>Bienvenidos a PokéInfo</h1><a name="bienvenidos"></a>
<p>Página web dedicada a todo lo relativo a Pokémon, información, noticias, etc.</p>
<a href="http://img805.imageshack.us/img805/9020/facepalm1.jpg" target="_blank" title="hola hijo de puta">FACEPALM</a><br />
<a href="#arriba" title="Ir Arriba">Ir arriba</a><br />
<a href="#bienvenidos" title="Ir a Bienvenidos">IR</a><br />
</td></tr></table></div>
</body> </div> </div>
</html>

Y el css que llevo hecho por ahora:

.fondo { background-color:#f3f3f3; }
body { background-image:url("imagenes/fondocuadros.png"); }
.margen {margin-left:21.6%; margin-right:21.6%;}
p { margin-top:10px ; margin-bottom:10px; margin-left:10px;
margin-right:10px;}
h1 { margin-top:10px ; margin-bottom:10px; margin-left:10px;
margin-right:10px;}
a { margin-top:10px ; margin-bottom:10px; margin-left:10px;
margin-right:10px;}
.tablaforo { border-color:black ; border-width:1px ; border-style:solid ; }

Por cierto, veréis que en el HTML hay un par de gilipolleces puestas por ahí, es que mientras estaba aprendiendo y no sabía qué poner, pues ponia chorradas para hacer pruebas ajaja pero ignorarlas

Vale ahora vamos con las dudas y problemillas xD.

1. A ver, el cuadro blanco que rodea todo lo que es el body, lo pongo como véis en el css con: .fondo { background-color:#f3f3f3; }
De esa forma, aparece por encima del fondo de la página, un cuadro blanco que rodea todo lo que es el html. Pues bien, yo la página la quiero tener centrada. Así que lo que hago es, como no sé otra forma de centrarla (si lo estoy haciendo mal decidme por favor cómo se centra en el css), es poner márgenes a cada lado, y luego los aplico a todo el "body". ¿Problema? Yo quiero que el cuadro blanco que he dicho, aparezca AJUSTADO al logo de la página (a lo ancho), y sin embargo queda más ancho el cuadro blanco, por mucho que yo cambio los márgenes. Pero lo curioso es, que por el lado derecho sí se puede ajustar modificando el margen, pero en el lado izquierdo siempre queda más ancho que el logo, siempre. Y no sé por qué... quiero que quede ajustado por ambos lados. Y da igual lo mucho que aumente el margen, siempre (valga la redundancia xD) queda más ancho por el lado izquierdo.

2. También tengo puesta una talba rodeando todo lo que hay dentro del "body", con su estilo determinado en el css. Pues también está dentro de los márgenes, y ocurre lo mismo que con el cuadro blanco, por el lado izquierdo siempre deja un espacio entre él y el logo!! Pero por el lado derecho se puede ajustar todo lo que quiera, incluso hacerlo menos ancho que el logo... pero nada, en el izquierdo siempre hay la misma distancia entre él y el logo.

3. Bueno esto es una cosa que me gustaría saber cómo hacerla. Lo que quiero ahcer (pero antes quiero solucionar los otros problemas) es que en cada botón del menú, por ejemplo el de noticias, cuando pase el ratón encima (pero sin pulsar la imagen) aparezca una cascada de enlaces, eso ya sé que se puede hacer con listas, pero lo que quiero es que debajo de los enlaces aparezca un imagen gif que yo haya puesto previamente (osea, justo ahí, me da igual si es necesario pulsar con el ratón, peor que aparezca ahí en medio y no en una página distinta).

Bueno pues esas son mis dudas, gracias de antemano!
hola

estás haciendo el curso paso a paso??????

ahi te explica que para centrar tu web debes poner en body {text-align: center} si deseas que body (que es toodo lo que ves en tu pantalla) sea de x color ahi mismo lo debes indicar
body {text-align: center: background-color: el que quieras}

todo, lo que le quieras meter a tu web, debe ser despues de body, no antes.....

por ejemplo tienes esto
<div class="margen"> <div class="fondo"><body>

fuera de body no hay nada, asi que eso no te lo tomará en cuenta
body es el cuerpo total de tu web, ok????

yo te sugiero... que empiezes el curso, pero paso a paso, sin saltarte nada
y se te aclararán tooodas tus duudas, incluso lo del menu desplegable

cualqueir cosa por aqui andamos
saludos y mucha suerte
Okok... gracias por responder, la verdad es que no había visto lo del curso paso a paso, sólo me puse a aprender el curso de html y css xD.

Bueno, lo llevo unos días leyendo, lo estoy siguiendo paso a paso y tal, y a la vez tengo una página por mi cuenta. Y ahora tengo otras dudas... es que en el curso paso a paso se explica como hacer el mismo menú que hay en esta web, pero el que yo quiero hacer para mi página es bastante diferente, me gustaría saber cómo puedo hacer para que quede como yo quiero.

Pues explico, lo que quiero que salga en el menú con varias secciones, eso se hace perfectamente con una lista, pero quiero poner unos botones que he diseñado yo en photoshop en lugar de los enlaces con texto, y que al poner el ratón encima de ellos, se desplegue un cuadro hacia abajo con las subsecciones que que yo ponga. Creo que me he explicado más o menos bien xD, pero para hacer esto no tengo ni idea de qué hacer, a ver si alguien me puede explicar cómo jeje

Saludos!!