Layout con posicion relative - Intento fallido

[DoPeY-BBS]

Que tal foreros, tengo un inconvenientes con las posiciones relativas ya que soy un novato, se dieron cuenta en la competencia de css

Resulta que, quiero hacer un layout con una cabecera, un menu, un contenido y un footer con posiciones relativas. Claro esta. la cabecera y el footer se dejan con la posiciones normales.

Código HTML:

<div id="contenedor"> 
  <div id="header"> 
    <div id="logo"><img src="imagenes/header.jpg" alt="Nombre de tu empresa"/></div>
  </div>
  <div id="menu"> 
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Portafolio</a></li>
      <li><a href="#"> Art&iacute;culos</a></li>
      <li><a href="#">Foro</a></li>
      <li><a href="#">Productos</a></li>
      <li><a href="#">Contacto</a></li>
    </ul>
  </div>
  <div id="contenido">Hola Bienvenidos a mi sitio web.. Esta es solo una peque&ntilde;a 
    muestra de lo que se puede lograr con un poco de ideas... Para empezar haremos 
    un dise&ntilde;o sencillo que contar&aacute; con un header o encabezado, un 
    men&uacute; vertical con 5 v&iacute;nculos o botones, una secci&oacute;n para 
    el contenido y por &uacute;ltimo un pie de p&aacute;gina o footer. Para este 
    tutorial no necesitar&aacute; muchas im&aacute;genes, solamente la del encabezado, 
    la cual tendr&aacute; las medidas siguientes: 600px de ancho y 100px de alto. 
    Y una peque&ntilde;a imagen para el logotipo con las siguientes medidas: 120px 
    de ancho y 90px de alto. 
    <p>Estas im&aacute;genes se pueden crear con cualquier editor gr&aacute;fico. 
      Puede bajar los archivos del ejemplo desde aqu&iacute;. Para ello lo primero 
      que haremos es abrir nuestro editor de HTML y crear un documento nuevo. 
      Este documento lo guardamos con el nombre de <strong>index.html</strong>. 
      Dentro de las etiquetas <strong>&lt;body&gt;&lt;/body&gt;</strong> escribimos 
      todo el contenido del sitio web, o sea lo que se observa al entrar a cualquier 
      sitio web, el texto, las im&aacute;genes&hellip;etc. Lo primero que haremos 
      es crear un contenedor para alojar dentro de este todo el contenido de nuestro 
      sitio. Para ellos tecleamos dentro de la etiqueta <strong>&lt;body&gt;</strong> 
      lo siguiente:</p>
    <p>&nbsp;<strong>&lt;div id=&rdquo;contenedor&rdquo;&gt;&lt;/div&gt;</strong></p>
    <p>Con este c&oacute;digo creamos una capa para alojar dentro de ella las 
      dem&aacute;s capas y as&iacute; poder organizar nuestro sitio mediante CSS 
      de una forma sencilla. Las dem&aacute;s capas son las que tendr&aacute;n 
      el men&uacute;, el contenido&hellip;etc.</p>
  </div>
  <div id="footer">Nombredetuempresa Copyright &reg; 2006 :: Todos los derechos 
    reservados </div> 

Código HTML:

* { margin: 0; padding:0;}

body{
	background-color:#000000;
	font-family:Arial, Helvetica, sans-serif;
	font-size:.99em;
	color:#FFFFFF;
	}

#contenedor{
	position: relative;
	width:800px;
	margin:auto;
	}

#header{
	width:800px;
	text-align:center;
	background-color:#000000;
	}

#logo{
	padding-top:10px;
}

#menu{
	position: relative;
	float: left;
	top:0;
	botton: 0;
	width: 200px
	}

Yo he intentado posicionar el menu y lo que se mueve es el texto del contenido.. tengo un rato en esto y no doy con la respuesta.. he seguido el tutorial que tiene mike pero no logro nada... es que soy algo idioto (ejeje)

PD: Tengo que decir que estoy siguiendo un ligero cursito y eh copiado el xhtml y ando modificando el css

PD: No me vallan a llamar roba codigo

[pitufoweb]

Hola.

Te falto cerrar el div contenedor o fue un error al copiar y pegar el codigo?


Aqui hay otro error:

#menu{
position: relative;
float: left;
top:0;
botton: 0; Seria bottom.
width: 200px
}


Saludos.

[pitufoweb]

No tengo muy claro lo que quieres hacer pero para posicionar el menú donde tu quieras, lo que tienes que hacer el ponerle un posicionamiento absoluto y no relativo. Ten en cuenta que al hacer esto el menú ya no sera parte del flujo del contenido.





Saludos

[DoPeY-BBS]

Gracias por la respuesta..

Si, al copiar y pegar se me escapo el cierre del contenedor y lo del bottom estaba mal escrito.

Lo que pretendo hacer es crear un layout con todas posiciones relativas posibles ya que las absolutas pueden llegar a tener problemas con el explorer o al menos eso es lo que dice el libro que tengo.

[juaniquillo]

pues eso creo que lo entendimos, lo que no entendí es ¿cuál es el layout que quieres hacer? ¿dónde quieres posicionar el menú? ¿necesitas hacer dos columnas?

[DoPeY-BBS]

Algo así

http://www.code-sucks.com/css%20layo...s/fw-18-2-col/

simplemente no quiero copiar y pegar codigo, yo quiero aprender a posicionarla como te digo

[juaniquillo]

Entiendo. Aunque, mas que posicionamiento, en este caso se está usado floats.

Código css:

#leftcolumn { 
 color: #333;
 border: 1px solid #ccc;
 background: #E7DBD5;
 margin: 0px 5px 5px 0px;
 padding: 10px;
 height: 350px;
 width: 195px;
 float: left;
}
#rightcolumn { 
 float: right;
 color: #333;
 border: 1px solid #ccc;
 background: #F2F2E6;
 margin: 0px 0px 5px 0px;
 padding: 10px;
 height: 350px;
 width: 678px;
 display: inline;
}
 

Supongo que yo uso posicionamiento dependiendo del diseño, pero para layouts como este la mayoría de las veces uso floats.

[DoPeY-BBS]

Y como me doy cuenta que me conviene mas.. o sea la cuestion es ir probando pero mira el disparate que hice alla arriba.

Hay un layout en la pagina de mike parecido a ese que puse y tiene posiciones relativa.. mi interes es saber como logro posicionar porque a mi no me resulto como a mike :(

[juaniquillo]

ja, no, no es un disparate lo que hiciste arriba. Es por eso que te pregunté si querías dos columnas. Para eso puedes darle un padding a la columna del contenido:

Código css:

#contenido{padding-left:210px;}
 

Como te dije, todo depende de tu diseño. Puede que mikel haya hecho algo diferente, ya que no he analizado ese layout específico.

[juaniquillo]

aunque acabo de ver que también usas float para el menú. En este caso el posicionamiento no es es necesario.