Desaparece y aparece.

iEnrique · #1 (**permalink**) 07/05/2013, 12:40

A ver, estoy haciendo una web y tengo un <div></div> que contiene dentro otro <div></div> y que éste último quiero que se agrande a medida que se agrande el primero y que quede unos margenes. Os dejo los códigos:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
    <title>Habbosfera</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
 
<body>
    <header>
        <div id="header"></div>
        <div id="shadow"></div>
    </header>
    <div style="width: 1000px; position: relative; margin-left: auto; margin-right: auto;">
        <div style="width:auto;float:left;">
            <div class="divgeneral"><div class="blue"></div></div>
        </div>
        <div style="width:auto;float:left;margin-left:100px;">
            <div class="divnoticia"><div class="blue"></div><span class="tabletfont">
                <h2>Markku Ignatius, nuevo CEO de Sulake</h2>
                holaaa
            </span>
            </div>
        </div>
    </div>
</body>
</html>

Código CSS:

Ver originalbody{
    background-image: url(background.png);
    font: normal 13px arial,sans-serif;
}
 
#header {
    background-image: url(header.png);
    height: 218px;
    margin: -8px;
    background-repeat: repeat-x;
}
 
#shadow {
    background: white;
    height: 3px;
    background-repeat: repeat-x;
    margin-top: 9px;
    margin-left: -8px;
    margin-right: -8px;
    margin-bottom: 20px;
}
 
.divgeneral {
    background: white;
    width: 370px;
    height: 400px;
    border-radius: 9px;
    box-shadow: 0px 0px 20px #888888;
    -webkit-box-shadow: 6px 1px 10 #888888;
    -moz-box-shadow: 6px 1px 10 #888888;
    padding: 0px 0px 0px 0px;
}
 
.divnoticia {
    background: white;
    width: 528px;
    height: 500px;
    border-radius: 9px;
    overflow: hidden;
    box-shadow: 0px 0px 20px #888888;
    -webkit-box-shadow: 6px 1px 10 #888888;
    -moz-box-shadow: 6px 1px 10 #888888;
}
 
.blue{
    background-image: url(noise-blue.png);
    border-top-left-radius: 9px;
    border-bottom-left-radius: 9px;
    width: 72px;
    height: 99.5%;
    vertical-align: middle;
    background-repeat: repeat-y;
    float: left;
    margin: 1px 0px 1px 1px;
}
 
.tabletfont{
    margin: 4px 0px 0px 15px;
    float: left;
}

Donde quiero que os fijéis es aquí:

Código HTML:

Ver original<div style="width:auto;float:left;margin-left:100px;">
            <div class="divnoticia"><div class="blue"></div><span class="tabletfont">
                <h2>Markku Ignatius, nuevo CEO de Sulake</h2>
                holaaa
            </span>
            </div>

Y sus correspondientes códigos CSS:

Código CSS:

Ver original.divnoticia {
    background: white;
    width: 528px;
    height: 500px;
    border-radius: 9px;
    overflow: hidden;
    box-shadow: 0px 0px 20px #888888;
    -webkit-box-shadow: 6px 1px 10 #888888;
    -moz-box-shadow: 6px 1px 10 #888888;
}
 
.blue{
    background-image: url(noise-blue.png);
    border-top-left-radius: 9px;
    border-bottom-left-radius: 9px;
    width: 72px;
    height: 99.5%;
    vertical-align: middle;
    background-repeat: repeat-y;
    float: left;
    margin: 1px 0px 1px 1px;
}
 
.tabletfont{
    margin: 4px 0px 0px 15px;
    float: left;
}

Y aquí viene mi pregunta, ¿qué error hay para que el elemento ".blue" desaparezca si le pongo un "height" en "auto" y aparezca cuando lo pongo en píxeles?¿cómo lo soluciono para que se quede con su "height:99.5%" y el .divnoticia se quede en "height:auto"?

ArturoGallegos · #2 (**permalink**) 07/05/2013, 12:58

el problema que cuando especificas un tamaño en porcentajes este % es en función del elemento padre... por lo que si el elemento padre no tiene especificada una medida el hijo es incapaz de crecer, auto o dejarlo en blanco es igual a no especificar nada.

pregunteme yo es necesario que agregues un div vació para colocar el fondo? porque no aplicarlo directamente a su antecesor .divnoticia ?

si quieres mantenerlo así tendrás que recurrir a javascript o jquery para detectar el tamaño de div.divnoticia y aplicarlo a div.blue
cosa que de momento yo veo innecesaria.

iEnrique · #3 (**permalink**) 08/05/2013, 08:35

Pero es que ese fondo .blue me gustaría ponerlo de forma que quede con un margen así:

Código CSS:

Ver originalmargin: 1px 0px 1px 1px;

Si yo lo pongo en el div .divnoticia como segundo background no puedo ponerle esos margenes, ni tampoco la forma que yo quiero...

Si hay una forma de dar un segundo fondo y darle atributos, sino, ¿me puedes decir como se haría con javascript?

Mira esto: http://imageshack.us/a/img17/96/escrtosfw.png

En esta imágen el .divnoticia es el que lleva la noticia del nuevo CEO y a la izquierda del texto en el mismo div, tiene un background que es el .blue, que es lo que me gustaría hacer, ¿cómo lo podría hacerlo o no hay forma y hay que hacerlo con javascript?

ArturoGallegos · #4 (**permalink**) 08/05/2013, 14:29

pensando en hacerte un ejemplo, se me ocurrió que con CSS también se puede solo hay que cambiar algunas cosas... prueba con:

Código CSS:

Ver original.divnoticia {
    background: white;
    width: 528px;
    border-radius: 9px;
    overflow: hidden;
    box-shadow: 0px 0px 20px #888888;
    -webkit-box-shadow: 6px 1px 10 #888888;
    -moz-box-shadow: 6px 1px 10 #888888;
position:relative;
z-index:1;
}
 
.blue{
    background:#fe0 url(noise-blue.png);
    border-top-left-radius: 9px;
    border-bottom-left-radius: 9px;
    width: 72px;
    height: 99.5%;
    vertical-align: middle;
    background-repeat: repeat-y;
    margin: 1px 0px 1px 1px;
position:absolute;
z-index:-1;
}

claro que este CSS solo tiene cambios meramente ilustrativos ya te toca re-acomodarlo para que encaje todo.

ahora bien con jquery seria algo como esto
http://jsfiddle.net/Ag666/RaVU7/

iEnrique · #5 (**permalink**) 09/05/2013, 04:06

A ver, muchas gracias por toda la info, me está sirviendo muchisimo, solo que quisiera comentarte una cosa; tengo puesto el código así (en el header porque es ahí donde creo que debe ir, ¿estoy en lo cierto?):

Código Javascript:

Ver original<script>
    jQuery(document).ready(function($) {
    $('.divnoticia>div').addClass('newheight');
    $('.divnoticia').each(function(){
        var highestBox = 0;
        $('div.newheight', this).each(function(){
            if($(this).height() > highestBox)
            highestBox = $(this).height();
        });
        $('div.newheight',this).height(highestBox);
    });
});
    </script>

¿Cómo hago para enviarle la info de la medida al .blue? Porque se me queda el en auto el .divnoticia, pero desaparece sin la medida el .blue.

PD: ¿Está bien escrito el código así?