[SOLUCIONADO] Display table e imágenes dentro

dinoandy0072 · #1 (**permalink**) 29/09/2014, 23:34

¡Buenas!
Soy nuevo y he tratado muchas veces y distintas formas y al parecer sigo siendo novato.

Tengo problemas para colocar una imagen en la celda Logo; ya que se sale del div, lo que busco es que el div se acople al tamaño de la imagen.
También tengo problemas para que las celdas: fecha, top y rep terminen de rellenar la página.

Lo puedo lograr con td y tr pero cuesta mucho con los div representando las tablas.

Problema #1 La imagen se sale

Problema #2 Las celdas no completan la página

Este es mi código:

Código HTML:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
    <title>
      ¡Bienvenidos a Nice Roms!
    </title>
    <style type="text/css">
	.wrapperDiv {
    position: relative;
}
.table {
    display: table;
}
.Tablerow {
    display: table-row;
}
.Tablecell {
    border: 2px solid #54FF93;
    display: table-cell;
}
.Tablecell.empty {
    border: none;
    width: 150px;
}
.Tablecell.rowspanned {
    border: 2px solid #54FE43;
    position: absolute;
    width: 150px;
    top: 0;
    bottom: 0;
}
  </style>
  </head>
  <body>
  <div class="wrapperDiv">
    <div class="table">
        <div class="Tablerow">
            <div class="rowspanned Tablecell"></div>
            <div class="Tablecell">Fecha</div>
        </div>
        <div class="Tablerow">
            <div class="empty Tablecell"></div>
            <div class="Tablecell">Top</div>
        </div>
        <div class="Tablerow">
            <div class="empty Tablecell"></div>
            <div class="Tablecell">Rep</div>
        </div>
    </div>
</div>
    </body>
</html>

dinoandy0072 · #2 (**permalink**) 29/09/2014, 23:46

Aquí está el original por si no logro darme a comprender, se trata de problema real:

Código HTML:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
  <head>
    <meta content='Descripción' name='description'/>
    <meta content='es' name='language'/>
    <b:skin><![CDATA[]]></b:skin>
    <title>
      ¡Bienvenidos!
    </title>
    <link href='https://dl.dropbox.com/s/lvy7350unsv32hv/stylesheet.css' rel='stylesheet' type='text/css'/>
  </head>
  <body>
      <div id='encabezado'>
        <div class='container-table'>
          <div class='table'>
            <div class='row'>
              <div class='cell rowspanned NiceromsLogo'><img class='img-logo'/></div>
              <div class='cell cell-fecha'>
                <div id='mydate'>
                <script type='text/javascript'>
                /*<![CDATA[*/
                                   var mydate=new Date()
                               var year=mydate.getYear()
                                             if (year < 1000)
                                               year+=1900
                               var day=mydate.getDay()
                               var month=mydate.getMonth()
                               var daym=mydate.getDate()
                         
                               if (daym<10)
                               daym="0"+daym
                               var dayarray=new Array("Domingo","Lunes","Martes","Miércoles","Jueves","Viernes","Sábado")
                               var montharray=new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre")
                               document.write(dayarray[day]+" "+daym+" de "+montharray[month]+" del "+year)
                /*]]>*/

                  </script>
                </div>
              </div>
            </div>
            <div class='row'>
              <div class='cell empty'/>
              <div class='cell cell-top'>Top</div>
            </div>
            <div class='row'>
              <div class='cell empty'/>
              <div class='cell cell-rep'>Rep</div>
            </div>
          </div>
        </div>
      </div>

      <div id='contenido'>
        20
      </div>
      <div id='pie de pag'>
        3
      </div>

    </body>
</html>

CSS:

Código HTML:

@font-face
{
	font-family: "Rimouski Sb";
	src:url(https://www.dropbox.com/s/dagfwibvy8mqg4e/rimouski%20sb.ttf) format(‘truetype’);
}

body
{
	color:rgba(255,255,255,1.00);
	font-family: "Rimouski Sb";
	background-attachment:fixed;
	background-repeat:no-repeat;
	background-size:cover;
	/*background-color:rgba(217,217,217,1);*/
	background-image:url(https://lh4.googleusercontent.com/v9rT63UCqO9UPX2s92laSYtFn10J7Qkpp80Gh_cFew=w854-h534-no);	
}

img.img-logo
{
	content:url(https://lh4.googleusercontent.com/-a8vDQRAc7d4/VBIhfRIMWAI/AAAAAAAAABU/Rs1kPDOUk0s/w500-h475-no/Logo-NiceRoms.png);
	vertical-align:bottom;
	max-width: 300px;
	height:auto;
	
}

#encabezado
{
	width: 95%;
	min-width: 800px;
	margin: 0 auto;
	margin-top: 20px;
}

.container-table
{
	position: relative;
}

.table
{
	display: table;
}

.row
{
	display:table-row;
}

.cell
{
	display:table-cell;
	border: 1px solid white;
}

.cell.empty
{
	border: none;
    width: 300px;
}

.cell.rowspanned
{
	position: absolute;
	border: 1px solid white;
	top: 0;
    bottom: 0;
	width: 300px;
	height:auto;
	
}
.cell.NiceromsLogo
{
	background:#FFFFFF;
	border-radius: 5px;
}

.cell.cell-fecha
{
	background: #000F2E;
	border: 1px solid white;
	border-radius: 4px;
	text-align:right;
	padding-right: 20px;
	text-height: 25px;
	vertical-align: middle;
}

.cell.cell-top
{
	background: #000F2E;
	border: 1px solid white;
	border-radius: 4px;	
}

.cell.cell-rep
{
	background: #000F2E;
	border: 1px solid white;
	border-radius: 4px;
}

PORFAVOR SON MI ÚLTIMA OPCIÓN :C

sergiojmdv · #3 (**permalink**) 30/09/2014, 16:02

Hola dinoandy0072 lo que quieres es que se adapte la imagen a la celda?. Algo como esto?

si es así solamente cambia el position de la clase .cell.rowspanned a static o relative y a la imagen dale un max-width del 100%.

dinoandy0072 · #4 (**permalink**) 30/09/2014, 16:52

Sí, pero como lograría que las otras 2 celdas se colocaran al lado...? creo que ambos problemas van enlazados, Gracias por tu respuesta

sergiojmdv · #5 (**permalink**) 30/09/2014, 18:40

Algo así?

Mete estos dos divs dentro de la misma celda que la fecha y ya está

Código HTML:

<div class='cell cell-fecha'>
<div id='mydate'></div>
  <div class="wrap">
     <div class='cell cell-top'>Top</div>
           <div class='cell empty'>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </div>

      <div class='cell cell-rep'>Rep</div>
             <div class='cell empty'>
                 Lorem ipsum dolor sit amet, consectetur adipisicing elit.
             </div>
  </div>
</div>

Luego solo es cuestión de colocarlos un poco dentro de la celda como mejor te convenga y ya está :-).

dinoandy0072 · #6 (**permalink**) 01/10/2014, 15:05

Ah, así se hace...

Creo que así, si se logra solucionar mi problema; ya que, debo poner otro contenedor. Muchísimas gracias.