Foros del Web » Creando para Internet » CSS »

Layout con posicion relative - Intento fallido

Estas en el tema de Layout con posicion relative - Intento fallido en el foro de CSS en Foros del Web. 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, ...
  #1 (permalink)  
Antiguo 11/04/2009, 23:18
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
Layout con posicion relative - Intento fallido

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
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #2 (permalink)  
Antiguo 12/04/2009, 00:07
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 9 años, 11 meses
Puntos: 181
Respuesta: Layout con posicion relative - Intento fallido

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.
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------

Última edición por pitufoweb; 12/04/2009 a las 00:18 Razón: encontre otro fallo
  #3 (permalink)  
Antiguo 12/04/2009, 00:31
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 9 años, 11 meses
Puntos: 181
Respuesta: Layout con posicion relative - Intento fallido

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
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #4 (permalink)  
Antiguo 12/04/2009, 12:56
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Layout con posicion relative - Intento fallido

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.
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #5 (permalink)  
Antiguo 12/04/2009, 13:34
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 12 años
Puntos: 281
Respuesta: Layout con posicion relative - Intento fallido

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?
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
  #6 (permalink)  
Antiguo 12/04/2009, 13:54
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Layout con posicion relative - Intento fallido

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
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #7 (permalink)  
Antiguo 12/04/2009, 14:11
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 12 años
Puntos: 281
Respuesta: Layout con posicion relative - Intento fallido

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

Código css:
Ver original
  1. #leftcolumn {
  2.  color: #333;
  3.  border: 1px solid #ccc;
  4.  background: #E7DBD5;
  5.  margin: 0px 5px 5px 0px;
  6.  padding: 10px;
  7.  height: 350px;
  8.  width: 195px;
  9.  float: left;
  10. }
  11. #rightcolumn {
  12.  float: right;
  13.  color: #333;
  14.  border: 1px solid #ccc;
  15.  background: #F2F2E6;
  16.  margin: 0px 0px 5px 0px;
  17.  padding: 10px;
  18.  height: 350px;
  19.  width: 678px;
  20.  display: inline;
  21. }

Supongo que yo uso posicionamiento dependiendo del diseño, pero para layouts como este la mayoría de las veces uso floats.
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
  #8 (permalink)  
Antiguo 12/04/2009, 14:21
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Layout con posicion relative - Intento fallido

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 :(
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #9 (permalink)  
Antiguo 12/04/2009, 15:28
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 12 años
Puntos: 281
Respuesta: Layout con posicion relative - Intento fallido

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:
Ver original
  1. #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.
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
  #10 (permalink)  
Antiguo 12/04/2009, 15:30
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 12 años
Puntos: 281
Respuesta: Layout con posicion relative - Intento fallido

aunque acabo de ver que también usas float para el menú. En este caso el posicionamiento no es es necesario.
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:42.