Foros del Web » Creando para Internet » HTML »

Div Box redondeados

Estas en el tema de Div Box redondeados en el foro de HTML en Foros del Web. Hola a todos los foreros expertos XHTML!, buneo les cuento la verdad lo mio no es el diseño pero trato de arreglarmelas lo mejor q ...
  #1 (permalink)  
Antiguo 19/04/2008, 15:46
 
Fecha de Ingreso: marzo-2006
Mensajes: 2
Antigüedad: 11 años, 8 meses
Puntos: 0
Div Box redondeados

Hola a todos los foreros expertos XHTML!, buneo les cuento la verdad lo mio no es el diseño pero trato de arreglarmelas lo mejor q puedo, estoy trabajando en un sitio en el q hay "cajas" echas con etiquetas <div> y con estilos definidos en la hoja de estilos. Estas cajas tienen los bordes redondeados que lo hice con 4 imagenes una pra cada esquina y ademas necesitaba q sean imagenes por q tienen una sombra por eso las imagenes son png. Bueno le muestro la estructura que use:

Código HTML:
<div id="box">
    <div class="header">
      <div class="left"> </div>
      <div class="middle">
      	<h2> Titulo de Noticia</h2>
      </div>
      <div class="right"> </div>
    </div>
    <div class="content">
      <span class="contenido"> 
           Contenido
      </span>
    </div>
    <div class="footer">
      <div class="left"> </div>
      <div class="middle"> </div>
      <div class="right"> </div>
    </div>
  </div> 
Y su correspondientes estilos:
Código PHP:
#box .header {
    
height87px;
    
width100%;
    
/*background-image: url(img/boxHeaderMiddle.png);
    background-image: url(../img/boxHeaderMiddle.png);
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/boxHeaderMiddle.png',sizingMethod='scale');*/
    
background-repeatrepeat-x;
    
padding0;
    
margin0;
    
border0;

}
#box .header .left {
    
positionrelative;
    
floatleft;
    
background-imageurl(img/boxHeaderLeft.png);
    
/*background-image: url(../img/boxHeaderLeft.png);*/
    
filterprogid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/boxHeaderLeft.png',sizingMethod='scale');
    
background-repeatno-repeat;
    
background-position0px 0px;
    
width110px;
    
height87px;
}
#box .header .middle {
    
positionrelative;
    
floatleft;
    
height87px;
    
background-imageurl(img/boxHeaderMiddle.png);
    
/*background-image: url(../img/boxHeaderMiddle.png);*/
    
filterprogid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/boxHeaderMiddle.png',sizingMethod='scale');
    
background-repeatrepeat-x;
}

#box .header .right {
    
positionrelative;
    
floatright;
    
background-imageurl(img/boxHeaderRight.png);
    
/*background-image: url(../img/boxHeaderRight.png);*/
    
filterprogid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/boxHeaderRight.png',sizingMethod='scale');
    
background-repeatno-repeat;
    
background-position0px 0px;
    
width110px;
    
height87px;
}
#box h1 {
    
font-familycomic Sans MS;
    
font-size24px;
    
color#009900;
    
font-weightbold;
    
padding-top40px;
}
#box h2 {
    
font-familyVerdanaArialHelveticasans-serif;
    
font-size14px;
    
color#009900;
    
font-weightbolder;
    
text-decorationunderline;
    
padding-top40px;
}

#box .content {
    /*background-color: #FFE300;*/
    
background-imageurl(img/boxContent.png);
    
/*background-image: url(../img/boxContent.png);*/
    
filterprogid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/boxContent.png',sizingMethod='scale');
    
background-repeatrepeat-y;
    
widthauto;
    
font-familyArialHelveticasans-serif;
    
color#009900;
    
font-weightbold;
    
border-right-width1px;
    
border-right-stylesolid;
    
border-right-color#006600;
    
padding-left50px;
}

#box .footer .left {
    
positionrelative;
    
floatleft;
    
background-imageurl(img/boxFooterLeft.png);
    
/*background-image: url(../img/boxFooterLeft.png);*/
    
filterprogid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/boxFooterLeft.png',sizingMethod='scale');
    
background-repeatno-repeat;
    
background-position0px 0px;
    
width110px;
    
height101px;
}
#box .footer .middle {
    
positionrelative;
    
floatleft;
    
background-imageurl(img/boxFooterMiddle.png);
    
/*background-image: url(../img/boxFooterMiddle.png);*/
    
filterprogid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/boxFooterMiddle.png',sizingMethod='scale');
    
background-repeatrepeat-x;
    
background-position0px 0px;
    
height101px;
    
widthauto;
}
#box .footer .right {
    
positionrelative;
    
floatright;
    
background-imageurl(img/boxFooterRight.png);
    
/*background-image: url(../img/boxFooterRight.png);*/
    
filterprogid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/boxFooterRight.png',sizingMethod='scale');
    
background-repeatno-repeat;
    
background-position0px 0px;
    
width110px;
    
height101px;

buneo si quieren pueden ver estas BOX amarillas en accion en el sitio de pruebas:
http://www.en25.bollmas.com.ar/ , el problema es q las <div class="middle"> y <div class="content"> no llenan todo el espacio entre <div class="left"> y <div class="right"> por ello, si ven el link q les puse vana ver como los box tienen zonas con fondo blanco. Lo primero q se me ocurria es ponerle un atributo "width:100%;" en los estilos pero esto me desordena toda la caja. Ademas como yo uso estas cajas para informaciones diferentes necesito q sea de tamaño ajustable tanto en ancho como en alto, por eso no puedodefinir un tamaño estatico para el ancho en <div class="middle">,por si no me explico bien, lo que seria ideal para mi es que en la hoja de estilos pueda poner algo como esto:
"#box .header .middle{
width: 100% - .header.left - .header.right;
}"
Lamentablemente esto no se puede. Ya busque y consegui miles de tutoriales de cajas redondeadas, etc. pero no consigo arreglar esto. Bueno muchas gracias!

NAcho
  #2 (permalink)  
Antiguo 20/04/2008, 12:34
Avatar de pateketrueke
Modernizr
 
Fecha de Ingreso: abril-2008
Ubicación: Mexihco-Tenochtitlan
Mensajes: 26.399
Antigüedad: 9 años, 8 meses
Puntos: 2526
Re: Div Box redondeados

busca jQuery ((hay algun plugin para ello))
  #3 (permalink)  
Antiguo 20/04/2008, 14:44
 
Fecha de Ingreso: marzo-2006
Mensajes: 2
Antigüedad: 11 años, 8 meses
Puntos: 0
Re: Div Box redondeados

Gracias ahi encontre algo: http://jrc.meerbox.nl/?page_id=4 esta buneo pero trato de evitar usar javascript en cosas q se que se pueden solucionar sin ello. Creo q puede agilizar la navegacion mas un diseño como este que esta cargadisimo de imagenes buneo gracias de todos modos!;)

NAcho
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:03.