Tema: Problema con divs
Ver Mensaje Individual
  #5 (permalink)  
Antiguo 10/03/2013, 06:09
Avatar de AlePerez92
AlePerez92
 
Fecha de Ingreso: noviembre-2009
Ubicación: España
Mensajes: 17
Antigüedad: 14 años, 6 meses
Puntos: 2
Información Respuesta: Problema con divs
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...