Problema con divs

AlePerez92 · #1 (**permalink**) 09/03/2013, 11:00

Hola, hacía tiempo que no pasaba por el foro pero es que tengo un problema y aún no sé cuál es la clave para solucionarlo.

El tema es que estoy diseñando una web para un conocido y todo bien en Chrome hasta que me meto en Firefox y uno de los <div> parece quedarse corto y ocurre lo que se puede apreciar en la imagen: http://imageshack.us/photo/my-images/40/errorweb.jpg/

Así es como debería visualizarse la página (Chrome): http://imageshack.us/photo/my-images/17/errorwebchrome.jpg/

Os proporciono los archivos necesarios para que podáis ver la web y puedan proponerme una solución: http://www.mediafire.com/download.php?ef286xtsh335xjh

¡Les doy las gracias de antemano! Un saludo.

pzin · #2 (**permalink**) 09/03/2013, 11:08

¿Puedes poner el código, el enlace o al menos un jsfiddle? Soy demasiado vago para descargar.

AlePerez92 · #3 (**permalink**) 09/03/2013, 11:12

Pues lo intenté poner, pero tuve un par de problemas con las imagenes y desistí.

Por cierto, ¿eres de Canarias?

pzin · #4 (**permalink**) 09/03/2013, 13:32

Cita:

Iniciado por AlePerez92

Pues lo intenté poner, pero tuve un par de problemas con las imagenes y desistí.

Por cierto, ¿eres de Canarias?

Me refiero a que publiques el código HTML y CSS aquí en el foro —no importa las imágenes, con el código nos da.

Sí soy de Canarias, de Lanzarote. De la metrópolis; Arrecife.

AlePerez92 · #5 (**permalink**) 10/03/2013, 06:09

Bueno, creo que era mejor y más cómodo que descargaras el código, pero bueno, ahí va. Es bastante largo, por eso no quería publicarlo en el foro.

Código HTML:

<html>
<head>
    <title>La Atl&aacute;ntida | Casa Rural</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link href="css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/scripts.js"></script>
    <script type="text/javascript" src="js/jquery.mCustomScrollbar.concat.min.js"></script>
</head>
<body>
    <div id="wrapper" class="clearfix">
        <div class="top bar"></div>
        <div class="bottom bar"></div>
        <!-- Barra lateral -->
        <div id="sidebar">
            <!-- Logo -->
            <img src="images/logo.png" id="logo" width="228" height="90" title="La Atl&aacute;ntida"/>
            <!-- Menu de navegacion lateral -->
            <ul id="nav">
                <!-- Primer nivel del menu -->
                <li><a href="#" id="inicio">Inicio</a></li>
                <li><a href="#" id="servicios">Servicios</a></li>
                <li><a href="#" id="precios">Precios</a></li>
                <li><a href="#" id="disponibilidad">Dispon.</a></li>
                <li><a href="#" id="ocio">Ocio</a></li>
                <li><a href="#" id="galeria">Galer&iacute;a</a></li>
                <li><a href="#" id="ubicacion">Ubicaci&oacute;n</a></li>
                <li><a href="#" id="contacto">Contacto</a></li>
            </ul>
        </div>
        <div id="content">
            <div class="inner-content">
                <h1>Bienvenido a La Atl&aacute;ntida</h1>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a feugiat odio. Nullam scelerisque hendrerit luctus. Pellentesque tellus dui, sagittis rutrum ornare ut, elementum sit amet magna. Nunc ullamcorper, leo vel vestibulum congue, arcu nulla tempus ante, a convallis odio dolor ut mi. Aenean molestie augue in nisl blandit et tempor odio hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non sem erat, euismod rutrum augue. Praesent volutpat neque at nulla facilisis porta. Nunc pharetra pulvinar nisi, a imperdiet purus blandit ut. Fusce congue rutrum dolor, elementum sollicitudin orci porttitor ac. Aenean a odio vel lorem consectetur porttitor ac eu nibh. Aenean pellentesque felis vitae eros aliquam sagittis in ut ligula. Pellentesque lacinia convallis tincidunt. Aenean sed sem leo.
                    </p>
            </div>
        </div>
        <!-- Degradado radial negro en los bordes del fondo -->
        <div id="overlay"></div>
    </div>
</body>
</html>

Código CSS:

Código:

/****** STRUCTURE *************************************************************************************************************************/
body {
    font-family: 'Quicksand', sans-serif;
    font-size: 100%;
    min-width:100%;
    min-height: 100%;
    position: relative;
    background: url('../images/bg.jpg') center center fixed black;
    -webkit-background-size: cover;
    -moz-background-size: cover;
     -o-background-size: cover;
    background-size: cover;
}
a {
    text-decoration: none;
}
#wrapper
{
    width:75%;
    min-height:100%;
    margin:0 auto;
	position:relative;
}
.clearfix:before, .clearfix:after
{
    content: "";
    display: table;
}
.clearfix:after
{
    clear: both;
}
.clearfix
{
    *zoom: 1;
}



#overlay
{
    z-index: 2;
    min-width:100%;
    min-height: 100%;
    position: fixed;
    width:100%;
    height:auto;
    left:0;
    top:0;
    background: rgb(0,0,0);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(20%,rgba(255,255,255,0)), color-stop(100%,rgba(0,0,0,1)));
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 20%,rgba(0,0,0,1) 100%);
    background: -o-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 20%,rgba(0,0,0,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 20%,rgba(0,0,0,1) 100%);
    background: radial-gradient(ellipse at center,  rgba(0,0,0,0) 20%,rgba(0,0,0,1) 100%);
    background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 10%, rgba(0,0,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#000000',GradientType=1 );
}

/****** SIDEBAR *************************************************************************************************************************/
#sidebar
{
    color:#FFF;
    width:15%;
    min-width: 400px;
    min-height:100%;
    background: rgba(0,0,0,.85);
    z-index:3;
    margin-left:50%;
    left:-15%;
    position: relative;
    moz-box-shadow:     0 0 20px 10px rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 20px 10px rgba(0,0,0,.5);
    box-shadow:         0 0 20px 10px rgba(0,0,0,.5);
}
/* Logo */
#logo
{

}
/****** CONTENT *************************************************************************************************************************/
#content
{
    color:#FFF;
    width:60%;
    height:70%;
    background: rgba(0,0,0,.85);
    z-index:7;
    position: absolute;
    top: 15%; /* !! La mitad del resto de su alto, height=70%, top=30/2%=15% */
    right: 0;
    margin-top:-20px; /* La mitad del padding superior e inferior */
    moz-box-shadow:     0 0 20px 10px rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 20px 10px rgba(0,0,0,.5);
    box-shadow:         0 0 20px 10px rgba(0,0,0,.5);
    padding: 20px;
}
.inner-content
{
}
/****** TOP/BOTTOM BARS *****************************************************************************************************************/
.bar
{
    width: 100%;
    height:30px;
    background:#000;
    position: fixed;
    z-index:4;
}
.top
{
    top:0;
    left:0;
}
.bottom
{
    bottom:0;
    left:0;
}
/****** MENU (NAV) **********************************************************************************************************************/
ul#nav
{
    list-style-type: none;
    width: 100%;
    font-size: 3em;
	padding:20px 0 20px 0;
}

ul#nav li
{
    width: 100%;
    list-style-type: none;
    text-shadow:-1px -1px 0 #222;
    display: block;
}

ul#nav:hover a
{
    /*moz-box-shadow:     0 0 20px 10px rgba(0,0,0,.5) inset;
    -webkit-box-shadow: 0 0 20px 10px rgba(0,0,0,.5) inset;
    box-shadow:         0 0 20px 10px rgba(0,0,0,.5) inset;*/
    text-shadow: 0px 0px 5px #fff;
    color: transparent;
}

ul#nav li a
{
    white-space: nowrap;
    color: #AAA;
    display: block;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 0px 0px 1px #000;
    letter-spacing: 1px;
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    -ms-transition: all 0.4s linear;
    transition: all 0.4s linear;
    padding:20px 25px 20px 25px;
}

ul#nav li a:hover
{
    color: #DDD;
    text-shadow: 0px 0px 5px #000;
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
}
ul#nav li a:before, ul#nav li a:after
{
    content:"~";
    color:#ffdb4c;
    display:none;
    text-shadow:1px 1px 5px #000;
}
ul#nav li a:hover:before, ul#nav li a:hover:after
{
    display: inline;
}

Falta el Reset.css y las fuentes personalizadas, así como la imagen de fondo.
Ojalá puedan ayudarme (aunque repito, es más fácil descargar los archivos del link de mediafire que puse arriba y vuelvo a poner: http://www.mediafire.com/download.php?ef286xtsh335xjh - no llega a 1mb y es más fácil en caso de que quieran ayudarme).

¡Un saludo y muchas gracias!
Por cierto, yo soy de Las Palmas...

pzin · #6 (**permalink**) 10/03/2013, 06:43

El problema está en el reset, quitando el fondo a body desaparece el problema.

Código CSS:

Ver originalhtml{
  color: #000;
  background: none;
}

O quitarlo directamente. Lo pongo así para que se vea el fallo.

Lo de poner el código aquí, para mi se me hace más fácil porque lo meto en jsFiddle o alguno de esos y puedo verlo ahí sobre la marcha. Aunque en este caso no me quedaba otra que descargarlo al final porque no veía nada malo en lo que publicaste.

Pinta bien la web. Y da gusto ver un código ordenado.