[SOLUCIONADO] Esquinas redondas en la tabla

[RaulCDT]

En el ejemplo podeis ver que la tabla termina antes de que aya acabado el texto...

[URL="http://jsbin.com/nekecaqa/1"]http://jsbin.com/nekecaqa/1[/URL]

Quiero empezar la tabla esa con el fondo gris después de gris oscuro y que acabe al final del texto o datos que ayan..

los codigos son estos:

Código HTML:

<div class="izq clubs-perfil">
 
          <div class="detalles">   
          <h1 class="rounded-custom" style="background: #333;"><a style="color:white; text-decoration:none; font-family: Arial, Helvetica;" href="#"><b>Sabado</b>  - Discoteca</a></h1>  
          <div class="img-perfil">
        <img src="murcia/clubs/clubs1.jpg" width="196" height="196" class="profile fromdb rounded-3"  alt="Tu discoteca"/><br>
        <img style="height:73px;width:196px;" src="#" alt="Sabado - Discoteca"/>
    </div>
     <div class="data descripcion"><p style="text-align: justify;">Condiciones de lista: CHICAS: Lista CrazyMurcia gratis hasta las 2.00h. CHICOS: Lista CrazyMurcia gratis hasta la 1.30h. Luego, 10€ 1 copa ó 15€ 2 copas hasta las 3.00h</p>
<p style="text-align: justify;"><b>Dirección</b>: C/ Mayor, 00 - 30000, Murcia</p>
<p style="text-align: justify;"><b>Música</b>: Exitos y comercial</p>    
<p style="text-align: justify;"><b>Público</b>: Gente.... - Mayores de 18 años</p>
</div>
 
<div class="data direccion"><b>apuntarme ahora</b></div>
  </div>
</div>
 

Código CSS:

.clubs-perfil {
    width: 670px;
  
}
 
 
.clubs-perfil {
    padding:0px;
}
.clubs-perfil div.img-perfil {
    text-align: center;
    float:left;
    margin: 0 20px 20px 0;
}
.clubs-perfil div.img-perfil img.perfil {
    display: inline-block;
    width: 200px;
    height: 200px;
}
 
 
.clubs-perfil div.detalles {
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 10px;
  border-radius:15px; 
-moz-border-radius:15px; /* Firefox */ 
-webkit-border-radius:15px; /* Safari y Chrome */ 
  background:#eee;
  
}
.clubs-perfil div.data {
    margin:10px 0;
}
.clubs-perfil div.descripcion {
    font-size: 13px;
    margin:10px 0;
    font-style: arial;
}
 

Tengo que estructurarla de otra forma o donde tengo que poner

Código CSS:

border-radius:15px; 
-moz-border-radius:15px; /* Firefox */ 
-webkit-border-radius:15px; /* Safari y Chrome */
 

Gracias!!!

[heinzy]

hola

he estado mirando tu ejemplo y no veo ningún texto que se salga del cuadro, lo que si he visto es q hay unas imágenes que se salen del cuadro pero esa no es la pregunta verdad?

salu2

[RaulCDT]

Me gustaría que las imágenes quedaran dentro del cuadro.. y solo lo consigo añadiendo varios <br>

Y bueno que también respetaran el margen del texto y las imágenes y no estén tan pegadas a la esquina de dicho cuadro

[RaulCDT]

Lo de los margenes ya lo he resuelto, pero el tema de que las imagenes se queden dentro no..

[heinzy]

podrias ponerle esto..

overflow: hidden a esta clase:

Código CSS:

.clubs-perfil div.detalles {
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 10px;
  border-radius:15px; 
-moz-border-radius:15px; /* Firefox */ 
-webkit-border-radius:15px; /* Safari y Chrome */ 
  background:#eee;
  overflow: hidden;
  
}
 

salu2

[RaulCDT]

Genial muchísimas gracias! Con el overflow: hidden; ha dejado las imágenes dentro del cuadro pero el título lo ha dejado ahora dentro :P jejej aun así esta genial...

Muchisimas gracias

[heinzy]

jeje de nada ;)

ponle un margin-top negativo como esto:

Código CSS:

.clubs-perfil div.detalles {
 
    margin-top: -20px;
    margin-left: 20px;
    margin-right: 10px;
  border-radius:15px; 
-moz-border-radius:15px; /* Firefox */ 
-webkit-border-radius:15px; /* Safari y Chrome */ 
  background:#eee;
  overflow: hidden;
  
}