Barra de desplazamiento

jediap · #1 (**permalink**) 26/03/2013, 09:37

Buenas a todos!! Estoy trabajando con css3 y html5 y estoy realizando mi propia pagina web ( estoy de momento en local)

Tengo un problema que no me habia pasado nunca en el diseño. En mi apartado aplicaciones tengo creadas muchas secciones pero no me sale la barra de desplazamiento para seguir bajando en mi web.

Ya he probado en el archivo csss:

Código:

body {

    overflow: scroll;
    overflow: auto;
    overflow-y: auto;
    overflow-y: scroll;

}

CUndo pongo overflow: scroll; me aparecen pero no funcionan.

¿ Alguna idea? gracias

pzin · #2 (**permalink**) 26/03/2013, 10:12

Algo raro habrás hecho para que no salgan las barras que salen por defecto. Pon algo más de código, o sino sabes donde puede andar el error, un enlace al sitio.

jediap · #3 (**permalink**) 27/03/2013, 11:19

Lo siento por la tardanza pero estado muy ocupado. Te meto el archivo css y el enlaze de la web ( entra en aplicaciones ) aun no esta terminada como podras ver.

Código:

root { 
    display: block;
}

body {
    background-image: url("../Images/fondo.gif");
    background-repeat: repeat;

}

.cuerpo{
    background-image: url("../Images/fondoCuerpo.png");
    opacity: 0.8;
    border-radius: 15px;
    position: fixed;
    min-height:625px;
    left: 50%;
    width: 1000px;
    margin-bottom: 25px;
    margin-left: -500px;
    margin-top: 25px;
}

.body{
    background-color: white ;
    border-radius: 10px; 
    margin: 15px 15px 15px 15px;
    min-height: 515px;
    width: 970px;
}

.menu{
    margin:0 auto; 
    padding:0; 
    height:30px; 
    width:100%; 
    display:block; 
    background:url("../Images/topMenuImages.png") repeat-x;
}
.menu li{
    padding:0; 
    margin:0; 
    list-style:none; 
    display:inline;
}
.menu li a{
    float:left; 
    padding-left:15px; 
    display:block; 
    color:rgb(255,255,255); 
    text-decoration:none; 
    font:12px Verdana, Arial, Helvetica, sans-serif; 
    cursor:pointer; 
    background:url("../images/topMenuImages.png") 0px -30px no-repeat; 
    outline:none;
}
.menu li a span{
    line-height:30px; 
    float:left; 
    display:block; 
    padding-right:15px; 
    background:url("../Images/topMenuImages.png") 100% -30px no-repeat;
}
.menu li a:hover{
    background-position:0px -60px; 
    color:rgb(255,255,255);
}
.menu li a:hover span{
    background-position:100% -60px;
}
.menu li a.active, .menu li a.active:hover{
    line-height:30px; 
    font:12px Verdana, Arial, Helvetica, sans-serif; 
    background:url("../Images/topMenuImages.png") 0px -90px no-repeat;
    color:rgb(245,237,237);
}
.menu li a.active span, .menu li a.active:hover span{
    background:url("../Images/topMenuImages.png") 100% -90px no-repeat;
}

.contenedor{
    position: absolute;
    margin: 10px 10px 10px 10px;
    min-height: 515px;
    width: 950px;
    overflow:hidden;
}

.bodyLeft{
    background: transparent;
    border-right: black solid 2px;
    float: left;
    min-height: 450px;
    width: 200px;
}

.bodyLeft p{
    margin-top:20px;
    margin-left: 10px;
}



.bodyRight{
    background: transparent;
    float: right;
    min-height: 450px;
    width: 748px;
}

Te he puesto la estructura general que tiene la pagina , no todo los metodos.

pzin · #4 (**permalink**) 27/03/2013, 11:36

Tengo alguna sospecha de que el error pueda venir por el clearfix —overflow— que usas en el .contenedor. Iugal lo suyo sería usar el micro-clearfix. De todas formas, sin ver el código HTML —que es realmente la estructura— o al menos el enlace que te faltó, no sabría decirte porque no sé qué clase es aplicada a qué elemento en qué lugar.

jediap · #5 (**permalink**) 27/03/2013, 11:59

Te adjunto la parte (aplicacion) que como veras no tiene casi nada.
No entendido eso del micro-clearfix.
De todos modos no uso la clase contenedor en esta seccion.
Contenedor lo utilizo en perfil y dentro de el creo dos clases la left y right cn el float para dividir ese contenedor.

APLICACION:

Código HTML:

<html>
    <!-- ////////////////////////////////////////////////////////////////// -->
    <!-- CABECERA -->
    <!-- ////////////////////////////////////////////////////////////////// -->
    <!-- ////////////////////////////////////////////////////////////////// -->
    <!-- ////////////////////////////////////////////////////////////////// -->
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="Disenyo/Estilo.css"> 
        <title>Principal</title>
    </head>
    <!-- ////////////////////////////////////////////////////////////////// -->
    <!-- CUERPO -->
    <!-- ////////////////////////////////////////////////////////////////// -->
    <!-- ////////////////////////////////////////////////////////////////// -->
    <!-- ////////////////////////////////////////////////////////////////// -->

    <body>

        <div class="cuerpo">
            <div class="body"> 
                <ul class="menu">
                    <li><a href="Index.php" target="_parent"><span>Perfil</span></a></li>
                    <li><a href="Aplicacion.php" class="active" target="_parent"><span>Aplicaciones</span></a></li>
                    <li><a href="Contacto.php" target="_parent"><span>Contacto</span></a></li>
                    <li><a href="Foro.php" target="_parent"><span>Foro</span></a></li>
                </ul> 
                <div class="section">

                </div> 
                <div class="section">

                </div> 
                <div class="section">

                </div> 
                <div class="section">

                </div>
                <div class="section">

                </div>
                <div class="section">

                </div>
            </div>
            <div class="footer"> 

            </div>
        </div>
    </body>
    <!-- ////////////////////////////////////////////////////////////////// -->
    <!-- PIE DE PAGINA -->
    <!-- ////////////////////////////////////////////////////////////////// -->
    <!-- ////////////////////////////////////////////////////////////////// -->
    <!-- ////////////////////////////////////////////////////////////////// -->
    <footer>
    </footer>
</html>

jediap · #6 (**permalink**) 27/03/2013, 12:01

Clase seccion del css

Código:

.section {
    position: relative;
    background-image: url("../Images/fondoCuerpo.png");
    opacity: 0.3;
    height:100px;
    width: 600px;
    margin: 10px 10px 10px 10px;
    border: 1px solid black;
    -webkit-box-shadow: 0px 10px 15px white;
    border-radius: 10px;
}

.section:hover{
    background-image: url("../Images/fondoCuerpo.png");
    opacity: 0.6;
    border: 4px solid red;

}