Diseño Web /

[CSS] Problema con capas

Participa en el tema [CSS] Problema con capas en el foro Diseño Web.
Estuve renegando un buen rato y no hay forma de quepueda lograr algo como esto: ...

Buscar en este tema:
1 2 >
 
  •  
    arbusto escribió el 27/02/2007 a las 18:48 hs.
     
    ¿Mensaje inapropiado?
    #1 [CSS] Problema con capas
    Estuve renegando un buen rato y no hay forma de quepueda lograr algo como esto:



    Quiero que quede centrado independientemente de la resolucion de pantalla.
    El encabezado puedo dejarlo centrado.
    Si pongo el encabezado y la capa 2, tambien, me queda todo centrado.
    El problema es cuando quiero agregar la capa 1, me desplaza la capa 2 hacia abajo, no me queda al lado de la otra.
    No puedo usar posicion absoluta, porque no me lo centra en la pantalla.
    Alguna idea de como lo podria hacer???
    +
     
    0
    Me gusta
     
    http://www.psicofxp.com/forums/diseno-web.210/422214-css-problema-con-capas.html
    | Más
  • tux escribió el 27/02/2007 a las 19:34 hs. ¿Mensaje inapropiado?

    #2 Re: Problema con capas

    Creá un Div id contenedor.
    -> Div Header
    -> Div Izq
    -> Div Der
    -> Div Cuerpo
    Cerras el Div Contenedor

    Al CSS
    body {
    margin:auto;
    text-align:center;
    }
    #contenedor {
    text-align:left;
    widthalgún acho fijo);
    }
    #izquierda {
    float:left;
    widthotro ancho, calcula bien los anchos);
    }
    #derecha {
    float:right;
    widthotro ancho fijo);
    }
    #cuerpo {
    (este se auto acomoda)
    }
    }

    Eso deberia funcionarte.. cualquier cosa avisá.
    Me gusta este mensaje
  • arbusto escribió el 28/02/2007 a las 09:49 hs. ¿Mensaje inapropiado?

    #3 Re: Problema con capas

    Gracias tux, despues pruebo.
    Lo del contenedor se me habia ocurrido, pero no supe resolver el tema de los margenes.
    Me gusta este mensaje
  • arbusto escribió el 28/02/2007 a las 16:45 hs. ¿Mensaje inapropiado?

    #4 Re: Problema con capas

    Anda perfecto en explorer 6.0

    Pero en Firefox, produce esto:



    Pongo el codigo:

    Código:
    <style type="text/css">
    <!--
    #Encabezado {
    	width:800px;
    	height:50px;
    	margin-left: auto;
    	margin-right: auto;
    }
    #Contenedor {
    	width:800px;
    	height:600px;
    	margin-left: auto;
    	margin-right: auto;
    }
    #Menu {
    	float:left;
    	width:120px;
    	height:600px;
    }
    #TagBoard {
    	float:right;
    	width:120px;
    	height:600px;
    }
    #Principal {
    	width:520px;
    	height:600px;
    }
    -->
    </style>
    </head>
    
    <body bgcolor="#CCCDB1">
    <div id="Encabezado">Imagen de encabezado</div>
    <div id="Contenedor">
    <div id="Menu">hola</div>
    <div id="TagBoard">hola</div>
    <div id="Principal">hola</div>
    </div>
    </body>
    </html>
    
    Me gusta este mensaje
  • tux escribió el 01/03/2007 a las 08:16 hs. ¿Mensaje inapropiado?

    #5 Re: Problema con capas

    lo tenés colgado en algún lado?
    Me gusta este mensaje
  • arbusto escribió el 02/03/2007 a las 12:09 hs. ¿Mensaje inapropiado?

    #6 Re: Problema con capas

    No, lo pruebo con el dreamweaver, con la vista previa en el explorer se ve bien, pero la vista previa en Firefox, no.
    Queres que lo suba?
    Me gusta este mensaje
  • Harleshinn escribió el 03/03/2007 a las 19:58 hs. ¿Mensaje inapropiado?

    #7 Re: Problema con capas

    Originalmente publicado por tux Ver mensaje
    Creá un Div id contenedor.
    -> Div Header
    -> Div Izq
    -> Div Der
    -> Div Cuerpo
    Cerras el Div Contenedor

    Al CSS
    body {
    margin:auto;
    text-align:center;
    }
    #contenedor {
    text-align:left;
    widthalgún acho fijo);
    }
    #izquierda {
    float:left;
    widthotro ancho, calcula bien los anchos);
    }
    #derecha {
    float:right;
    widthotro ancho fijo);
    }
    #cuerpo {
    (este se auto acomoda)
    }
    }

    Eso deberia funcionarte.. cualquier cosa avisá.
    Buenas :P Estaba buscando consejo ya que estoy empezando a hacer un poco de diseño web por cuenta propia, y me topé con el temita del CSS.

    Yo tengo un problemita similar al del amigo, pero me temo que un poco mas complejo al menos para mi de explicar, aunque de estructura es muy simple. Paso a explicar.

    Estoy haciendo el esqueleto de un site, que va a ser bastante "grande", cuya estructura es bastante simple y lineal [Header - Cuerpo - Footer]. Yo lo tenía armado en tablas muy bonito...pero ya no se usa mas hacer eso y además por otras cuestiones quise agregar el tema de los divs para hacer una barra horizontal que se desplace por la página mientras scrolleamos y siempre este visible (eso lo logré wiii, only firefox -.-).

    Ahora bien, no puedo lograr que el footer me quede donde debería, en realidad dudo estar haciendo las cosas bien porque no se si estoy aplicando bien las propiedades de posicionamiento, margen etc....y se me complica mas aún porque esta página luego voy a tener que pasarla a php manteniendo header y footer iguales, pero cambiando el contenido del cuerpo =/.

    Yo quisiera saber si hay algún lugar donde pueda ver cómo es la correcta aplicación de las propiedades de CSS, o sea...en que casos debe usarse tal o cual propiedad porque a veces leo en paginas muy conocidas y no se si el efecto que busco sirve

    Y otra cosa, si yo hago como dice tux ahi arriba de crear un contenedor único para todas las demás capas....cuando tenga que hacer los distintos php's con sus funciones y demás....no se me va a complicar desarmándose todo?


    Perdonen por lo extenso del post, pero estoy aprendiendo y soy dura si alguien tiene paciencia para explicarme un poquito le pido permiso para agregarlo/a a mi msn


    Saluditos y gracias!
    Me gusta este mensaje
  • daniloef escribió el 05/03/2007 a las 09:29 hs. ¿Mensaje inapropiado?

    #8 Re: Problema con capas

    Código:
    <style type="text/css">
    <!--
    body {
        text-align:center;
    }
    #Encabezado {
        width:800px;
        height:50px;
        margin-left: auto;
        margin-right: auto;
    }
    #Contenedor {
        width:800px;
        height:600px;
        margin-left: auto;
        margin-right: auto;
    }
    #Menu {
        float:left;
        width:120px;
        height:600px;
        border:1px solid black;
    }
    #TagBoard {
        float:right;
        width:120px;
        height:600px;
        border:1px solid black;
    }
    #Principal {
        width:520px;
        height:600px;
        border:1px solid black;
        margin-left: auto;
        margin-right: auto;
    }
    -->
    </style>
    </head>
    
    <body bgcolor="#CCCDB1">
    <div id="Encabezado">Imagen de encabezado</div>
    <div id="Contenedor">
    <div id="Menu">hola</div>
    <div id="TagBoard">hola</div>
    <div id="Principal">hola</div>
    </div>
    </body>
    </html> 
    </html>
    
    Proba eso en ambos navegadores
    Me gusta este mensaje
  • tabarelima escribió el 05/03/2007 a las 15:11 hs. ¿Mensaje inapropiado?

    #9 Re: Problema con capas

    Hola, no se si te va a solucionar algo, pero yo e tenido problemas con movimiento extraños y a veces se me van al borrar las primeras lines que te pone el dreamweaver

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    un saludo

    tabare lima
    Me gusta este mensaje
  • arbusto escribió el 05/03/2007 a las 16:51 hs. ¿Mensaje inapropiado?

    #10 Re: Problema con capas

    Gracias daniloef, eso sí que funcionó!!!!
    Me gusta este mensaje
1 2 >


Estadísticas del tema
  • 11 RESPUESTAS
  • 1720 VISTAS
  • 6 USUARIOS RESPONDIERON
 
Ir arriba
Contacto | Acerca de | Ayuda | Términos Legales | privacidad | Pautas de convivencia | Mapa de los foros | TrabajÁ con nosotros
©2008 Psicofxp.com S.A. - Todos los derechos reservados
Certifica IAB