Tema: Problemas con el posicionamiento.
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 06/07/2010, 11:23
Pikus
 
Fecha de Ingreso: febrero-2010
Mensajes: 22
Antigüedad: 14 años, 2 meses
Puntos: 0
Problemas con el posicionamiento.
Hola a todos.

Llevo bastante tiempo echándole vistazos a CSS, y finalmente me decidí a hacer mi primera maquetación de una web. La maquetación va a ser bastante simple y cutrecilla pero lo importante es ir aprendiendo. El problema que tengo es el siguiente:

Tengo una cabecera, un menú, un lado izquierdo con el contenido y un lado derecho con un menú lateral que no va a cambiar nunca (realmente sólo va a cambiar el contenido y dos botones de los menús dependiendo de si se está conectado como administrador o no).

Tras un buen rato de sufrimiento conseguí colocar unas cuantas cosas pero me encuentro con un problema enorme en el menú lateral, las cosas que le añado salen justo a un nivel inferior que lo que mida el contenido... ¿Podríais ayudarme?

Una imagen para que lo veáis:

http://img249.imageshack.us/img249/2001/maquetado1.jpg

Los códigos HTML y CSS son estos. Cualquier sugerencia es bienvenida, ya que creo que los sistemas que he utilizado para posicionar son excesivamente malos, creo.

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
  4. <head>
  5.   <title>Tu Blog sobre Arch</title>
  6.   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  7.   <link href="css/estilo.css" rel="stylesheet"  type="text/css" />
  8. </head>
  9. <body>
  10.     <div class="ventana">
  11.         <div class="cabecera"><a href="index.php"><img src="imgs/logo.gif" alt="Logo"/></a></div>
  12.         <div class="menu">
  13.             <div class="logout">
  14.                 <a href="index.php" class="botonoff"><img src="imgs/inicio.png" alt="inicio"/></a>
  15.                 <a href="index.php?p=sugerencias" class="botonoff"><img src="imgs/sugerencias.png" alt="sugerencias"/></a>
  16.                 <a href="index.php?p=redactores" class="botonoff"><img src="imgs/redactores.png" alt="redactores" /></a>
  17.                 <a href="index.php?p=log" class="botonoff"><img src="imgs/loguear.png" alt="login"/></a>
  18.             </div>
  19.             <div class="login">
  20.                 <a href="index.php?p=redactar" class="botonons"><img src="imgs/escribir.png" alt="Escribir noticia" /></a>
  21.                 <a href="index.php?p=administrar" class="botonona"><img src="imgs/administrar.png" alt="Administrar blog" /></a>
  22.             </div>
  23.         </div>  
  24.         <div class="contenido">
  25. <p class="warning">Error, la p&aacute;gina que intenta visitar no est&aacute; disponible. <br /><img src="imgs/construccion.gif" alt="En construccion" /></p>
  26.         </div>
  27.         <div class="menulateral">
  28.             <p class="buscador">Buscar: </p>
  29.             <form method="get" action="index.php">
  30.                 <input type="hidden" name="p" value="buscar" />
  31.                 <input type="text" name="buscar" id="buscar" class="inputbuscar" />
  32.             </form>
  33.         </div>
  34.     </div>
  35. </body>
  36. </html>

Y este, es el CSS:

Código CSS: 
Ver original
  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. a{
  6.     border: 0px;
  7. }
  8. body{
  9.     background-image: url('../imgs/fondo.png');
  10.     background-repeat: repeat-x;
  11.     background-color: #1484bd;
  12.     font-family: 'Trebuchet MS', 'Verdana', 'Lucida Sans Unicode';
  13. }
  14. img{
  15.     border: 0;
  16. }
  17. .ventana{
  18.     width: 990px;
  19.     margin: 0 auto 8px auto;
  20.     background-color: #FFFFFF;
  21. }
  22. .cabecera{
  23.     margin-top: 10px;
  24.     margin-left: 1px;
  25.     margin-right: 1px;
  26.     padding-top: 1px;
  27.     padding-bottom: 5px;
  28. }
  29. .menu{
  30.     width: 100&#37;;
  31. }
  32. .login{
  33.     position: relative;
  34. }
  35. .botonoff {
  36.     width: 214px;
  37.     margin: 5px 14px;
  38. }
  39. .botonons{
  40.     width: 214px;
  41.     position: relative;
  42.     left: 135px;
  43.     top: 2px;
  44.     margin: 0 270px 0 0;
  45. }
  46. .botonona{
  47.     width: 214px;
  48.     position: relative;
  49.     left: 135px;
  50.     top: 2px;
  51. }
  52. .warning{
  53.     color: red;
  54.     font-size: 16px;
  55.     font-weight: 900;
  56.     text-align: center;
  57. }
  58. .contenido{
  59.     width: 720px;
  60.     position: relative;
  61.     top: 0;
  62.     left: 17px;
  63.     margin: 7px 0;
  64.     float: left;
  65. }
  66. .menulateral{
  67.     width: 230px;
  68.     background-color: #f5f5f5;
  69.     position: relative;
  70.     left: 750px;
  71.     top: 0;
  72.     margin: 7px 0;
  73. }

Gracias, y siento el código tan enorme (en realidad es pequeño pero es bastante grande para la "tontería" que quiero preguntar, lo que no sé es si el problema viene desde modificaciones css previas)

Un saludo.