Position Fixed, no funciona bien.

PabloManuel · #1 (**permalink**) 06/05/2013, 03:11

Hola! gracias por leer....

A ver, esto me tiene loco y seguro que es una tontería.
Todas mis páginas tienen el siguiente continente:

Código CSS:

Ver original#continente {
    width: 950px;
    min-height: 700px;
    margin: 5px auto;
    overflow: auto ;
}

Y en el index quiero fijar arriba del todo un Div para que aparezcan las redes sociales, mensaje de bienvenida, logado, acceso perfil.... etc.... y tiene estas propiedades:

Código CSS:

Ver original.index_barra_acceso{
    width: 100%;
    height: 150px;
    background-color: orange ;
    border: thin gray solid ;
    padding: 10px;
    position: fixed ;
    margin: auto ;
    z-index: 0;
}

Pues vale, me lo fija, pero se sale por la derecha hasta el final, por la izquierda me deja el margen bien. Si le quito el fixed si me lo mete en el div contenedor.

pzin · #2 (**permalink**) 06/05/2013, 03:29

Falta el HTML relativo a ese CSS.

Si .index_barra_acceso está dentro de #continente, entonces a este último le pones:

Código CSS:

Ver original#continente {
  position: relative;
}

Y a la barra que quieres fijar le añades:

Código CSS:

Ver original.index_barra_acceso {
  top: 0;
  left: 0;
}

A falta de más información esa sería la solución a priori.

PabloManuel · #3 (**permalink**) 06/05/2013, 04:02

xhtml estricto css2

Que va, ahora me ocupa el 100% de izquierda a derecha.... :(

pzin · #4 (**permalink**) 06/05/2013, 04:08

Te tiene que ocuparde ancho lo mismo que mide #continente, siempre cuando hayas hecho lo que comentaba.

Con el HTML me refería al código HTML.

PabloManuel · #5 (**permalink**) 06/05/2013, 04:19

Código HTML:

Ver original<div id="continente">
    
        <div class="index_barra_acceso">
 
            <div><%MostrarIconosRedesSociales%></div>
 
            <form method="post" action="<%=Nombre_Pagina%>?proceso=altaboletin">
                <p>
                    Subscríbase a nuestro boletín:<br/>
                    <input type="text" name="email" value="Introduzca su email" size="25"/>
                    <button name="Enviar" type="submit" style="width: 60px; height: 21px" value="Enviar">Enviar</button>
                </p>
            </form> 
 
            <p>
                <span>Perfil</span>
                <span>Panel Admon.</span>
            </p>
 
            <p>
                <span>Acceso (Login)</span>
            </p>
                    
            <p>¡Bienvenido Manolo!</p>
            
            
            
        </div>
          </div>

Perdón, lo he puesto tal cual y ocupa todo el ancho de izq a derecha.

PabloManuel · #6 (**permalink**) 06/05/2013, 04:21

De momento lo he arreglado poniéndole a index_barra_acceso un ancho en píxeles para que no se salga, pero intento evitar trabajar en píxeles para irme a costumbrando, me da un montón de problemas con los móviles. quiero ponerle ancho 100% y que se quede dentro del continente, pero no hay manera.

pzin · #7 (**permalink**) 06/05/2013, 05:24

¿Le pusiste la posición relativa a #continente como dije arriba? Eso hará de #continente de elemento de contención para que .index_barra_acceso no salga de ahí.

PabloManuel · #8 (**permalink**) 06/05/2013, 05:54

sí, sí.... tal cual, es más quité el resto de código de imágenes de fondo y demás. De esta manera index_barra_acceso ocupa el 100% del ancho de izquierda a derecha. Es una tontería y no sé por qué no funciona.... me está extresando.

Lo puedo dejar diciéndole que el ancho de index_barra_acceso sea de 928px, así no se me sale por la izquierda, pero es que me niego trabajar con píxeles, porque después las páginas no se ven bien en los móviles.

pzin · #9 (**permalink**) 06/05/2013, 06:58

Es imposible que salga por fuera de #continente si esta tiene una posición relativa. A menos que haya por ahí alguna unidad de medida negativa.

PabloManuel · #10 (**permalink**) 06/05/2013, 07:55

Voy a ponerte todo el código

PabloManuel · #11 (**permalink**) 06/05/2013, 07:59

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
 
    <head>
 
        <title><%=TituloWeb%></title>
        
        <link href="Estilo.css" rel="stylesheet" type="text/css" />
        <link href="rcarousel/rcarousel.css" type="text/css" rel="stylesheet" />    
        
        <script type="text/javascript" src="rcarousel/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="rcarousel/jquery.ui.core.min.js"></script>
        <script type="text/javascript" src="rcarousel/jquery.ui.widget.min.js"></script>
        <script type="text/javascript" src="rcarousel/jquery.ui.rcarousel.min.js"></script> 
        
                
    
    </head>
 
<body>
 
    <div id="continente">
 
        <div class="index_barra_acceso">
 
            <div><%MostrarIconosRedesSociales%></div>
 
            <form method="post" action="<%=Nombre_Pagina%>?proceso=altaboletin">
                <p>
                    Subscríbase a nuestro boletín:<br/>
                    <input type="text" name="email" value="Introduzca su email" size="25"/>
                    <button name="Enviar" type="submit" style="width: 60px; height: 21px" value="Enviar">Enviar</button>
                </p>
            </form> 
 
            <div >¡Bienvenido Manolo!</div>
            
            <p>
                <img alt="Acceso (Login)" title="Acceso (Login)" src="Images/ico_login.png" />
            </p>
 
            <p>
                <img alt="Perfil de usuario" title="Perfil de usuario" src="Images/ico_perfil.png" />
            </p>
 
            <p>
                <img alt="Gestor de contenido (CMS)" title="Gestor de contenido (CMS)" src="Images/ico_admin.png" />
            </p>
            
        </div>
    </div>
 
<div class="corte"></div>
 
<!-- #include file="include/piepagina.inc"-->
 
</body>
 
</html>
<!-- #include file="include/dboff.inc"-->

PabloManuel · #12 (**permalink**) 06/05/2013, 08:00

y en css:

Código CSS:

Ver original#continente {
    width: 950px;
    min-height: 700px;
    margin: 0px auto;
    overflow: auto ;
}
 
.index_barra_acceso{
    width: 928px;
    height: 30px;
    background-image:url('Images/index1_fondo1.png'); 
    border: 1px #d3d3d3 solid ;
    padding: 10px;
    position: fixed ;
    margin: auto ;
    z-index: 2;
    font-size: 1.2em;
}

ahora mismos me lo cuadra porque le estoy cerrando el ancho a 928px para que con padding y margen se me quede justo en 950px

PabloManuel · #13 (**permalink**) 06/05/2013, 08:05

así es como quiero que quede, fija dentro del continente.

PabloManuel · #14 (**permalink**) 06/05/2013, 10:48

Alguien me echa un cable?

pzin · #15 (**permalink**) 06/05/2013, 13:50

Estaba seguro de que la cosa era poner una posición absoluta, no fija.

Las posiciones fijas no pueden hacerse relativas a su contenedor. Lo que tienes que hacer es ponerle el mismo ancho que a su contenedor.

Si usas pixeles en el contenedor, pues le pones la misma medida al elemento posicionado fijamente. Si no quieres usar pixeles, entonces tampoco le pongas una medida al contenedor.