Foros del Web » Creando para Internet » CSS »

Ayuda mostrando tabla solo con DIV's

Estas en el tema de Ayuda mostrando tabla solo con DIV's en el foro de CSS en Foros del Web. tengo un problema mostrando una tabla con solo divs le puse width fijo a cada columna , pero el problema es cuando el texto de ...
  #1 (permalink)  
Antiguo 07/07/2010, 11:09
Avatar de Farookh_Bulsara  
Fecha de Ingreso: mayo-2004
Mensajes: 1.185
Antigüedad: 13 años, 6 meses
Puntos: 2
Ayuda mostrando tabla solo con DIV's

tengo un problema mostrando una tabla con solo divs

le puse width fijo a cada columna ,
pero el problema es cuando el texto de un div es mas q el ancho q se le dio se oculta, pero lo q yo quiero es q haga un salto de linea y por ende el height de toda la fila crezca
como hago eso?
les dejo el codigo porfa
Código PHP:
 <div class="content">
                <
div class="headerList">
                    <
div class="columnHeaderList1">Trip Number</div>
                    <
div class="columnHeaderList2">Trip Name</div>

                    <
div class="columnHeaderList3">Trip Date</div>
                    <
div class="columnHeaderList4">GPS Location</div>
                    <
div class="columnHeaderList5">Link To Gallery</div>
                    <
div class="columnHeaderList6">Body of Water</div>
                    <
div class="columnHeaderList7">Miles</div>
                    <
div class="columnHeaderList8">State</div>

                    <
div class="columnHeaderList9">Description</div>
                    <
div class="columnHeaderList10">Directions to Launch</div>
                </
div>
            <
br />
           <
div class="rows">
                      <
div class="rowList">
                <
div class="columnRowList1">1</div>

                <
div class="columnRowList2">Travel around Virginia</div>
                   <
div class="columnRowList3">09/09/2010</div>
                   <
div class="columnRowList4">(12 14º)</div>
                <
div class="columnRowList5">(http://www.google.com)</div>
                
<div class="columnRowList6">Something</div>
                <
div class="columnRowList7">100000</div>

                <
div class="columnRowList8">Virginia</div>
                <
div class="columnRowList9">(nada)</div>
                <
div class="columnRowList10">(nose)</div>
                
             </
div><br />
                          <
div class="rowList">
                <
div class="columnRowList1">2</div>
                <
div class="columnRowList2">Enjoy Atlanta</div>

                   <
div class="columnRowList3">10/10/2010</div>
                   <
div class="columnRowList4">12 14º</div>
                <
div class="columnRowList5">http://www.google.com</div>
                
<div class="columnRowList6">Body of water</div>
                <
div class="columnRowList7">100000</div>
                <
div class="columnRowList8">Atlanta</div>

                <
div class="columnRowList9">nada</div>
                <
div class="columnRowList10">empty</div>
                
             </
div><br />
                            </
div></div
CSS:
Código PHP:
.headerList,.rowList{
    
display:block;
    
width:inherit;
    
clear:both;
    
height:auto;
    }
    
.
headerList    div
{
/*    display:inline;
    float:left;
    */
    
floatleft;
    
padding5px;
    
background#464646;
    
color:#CCC;
    
border-color#464646;
    
border-stylesolid;
    
border-right-width0px;
    
border-left-width1px;
    
border-top-width0px;
    
border-bottom-width1px;
    
height:50px;

    }

.
columnHeaderList1:hover,.columnHeaderList2:hover,.columnHeaderList3:hover,.columnHeaderList6:hover,.columnHeaderList8:hover
{
    
background-color:#666;
    
background-image:url(./img/asc.png);
    
background-position:right;
    
background-repeat:no-repeat;
    
cursor:pointer;
    
}
.
columnHeaderList1,.columnRowList1{positionrelative;
width:50px;}
.
columnHeaderList1{    background-image:url(./img/asc.png);
background-position:right;
background-repeat:no-repeat;}
.
columnHeaderList2,.columnRowList2{positionrelative;
width:100px;}
.
columnHeaderList3,.columnRowList3{positionrelative;
width:50px;}
.
columnHeaderList4,.columnRowList4{positionrelative;
width:100px;}
.
columnHeaderList5,.columnRowList5{positionrelative;
width:100px;}
.
columnHeaderList6,.columnRowList6{positionrelative;
width:50px;}
.
columnHeaderList7,.columnRowList7{positionrelative;
width:50px;}
.
columnHeaderList8,.columnRowList8{positionrelative;
width:100px;}
.
columnHeaderList9,.columnRowList9{positionrelative;
width:100px;}
.
columnHeaderList10,.columnRowList10{positionrelative;
width:100px;}

.
rowList div
{
/*    display:inline;
    float:left;*/
    
floatleft;
    
padding5px;
    
border-color#464646;
    
border-stylesolid;
    
border-right-width0px;
    
border-left-width1px;
    
border-top-width0px;
    
border-bottom-width1px;
    
overflow:hidden;
    

    } 
__________________
"Todas las cosas deben mostrarse primero con mascaras tetricas y terrorificas para que puedan inscribirse a si mismas en el corazon de la humanidad"
  #2 (permalink)  
Antiguo 07/07/2010, 11:20
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: Ayuda mostrando tabla solo con DIV's

los datos tabulados deben estar dentro de una tabla, no dentro de DIV´s.
Paremos la fiebre del DIV.
  #3 (permalink)  
Antiguo 07/07/2010, 11:21
Avatar de Farookh_Bulsara  
Fecha de Ingreso: mayo-2004
Mensajes: 1.185
Antigüedad: 13 años, 6 meses
Puntos: 2
Respuesta: Ayuda mostrando tabla solo con DIV's

pero lei q es mucho mejor usar divs para tabular los datos q usar un table
__________________
"Todas las cosas deben mostrarse primero con mascaras tetricas y terrorificas para que puedan inscribirse a si mismas en el corazon de la humanidad"
  #4 (permalink)  
Antiguo 07/07/2010, 11:23
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 9 meses
Puntos: 1314
Respuesta: Ayuda mostrando tabla solo con DIV's

No, leíste mal, es mejor usar DIV's para maquetar, las tablas se dejan para datos tabulados, no solo es usar DIV para todo lo que se te ocurra, tienes que usar las cosas correctamente.

Saludos
__________________
Grupo Telegram Docker en Español
  #5 (permalink)  
Antiguo 07/07/2010, 11:24
Avatar de Farookh_Bulsara  
Fecha de Ingreso: mayo-2004
Mensajes: 1.185
Antigüedad: 13 años, 6 meses
Puntos: 2
Respuesta: Ayuda mostrando tabla solo con DIV's

q lio,entonces lo cambiare a un table
__________________
"Todas las cosas deben mostrarse primero con mascaras tetricas y terrorificas para que puedan inscribirse a si mismas en el corazon de la humanidad"
  #6 (permalink)  
Antiguo 07/07/2010, 11:36
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: Ayuda mostrando tabla solo con DIV's

Cita:
Iniciado por Farookh_Bulsara Ver Mensaje
q lio,entonces lo cambiare a un table
es lo mejor!
  #7 (permalink)  
Antiguo 07/07/2010, 12:02
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.827
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: Ayuda mostrando tabla solo con DIV's

como ya te dijeron es mejor lo hagas con una tabla, aun así tu problema fue porque pusiste overflow:hidden; en esta sección:
Código CSS:
Ver original
  1. .rowList div
  2. {
  3. /*    display:inline;
  4.     float:left;*/
  5.     float: left;
  6.     padding: 5px;
  7.     border-color: #464646;
  8.     border-style: solid;
  9.     border-right-width: 0px;
  10.     border-left-width: 1px;
  11.     border-top-width: 0px;
  12.     border-bottom-width: 1px;
  13.     overflow:hidden;
  14.     }
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #8 (permalink)  
Antiguo 07/07/2010, 12:05
Avatar de Farookh_Bulsara  
Fecha de Ingreso: mayo-2004
Mensajes: 1.185
Antigüedad: 13 años, 6 meses
Puntos: 2
Respuesta: Ayuda mostrando tabla solo con DIV's

si,es q si no ponia eso le contenido de ese div se sobreponia sobre el siguiente
__________________
"Todas las cosas deben mostrarse primero con mascaras tetricas y terrorificas para que puedan inscribirse a si mismas en el corazon de la humanidad"

Etiquetas: tablas
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 12:01.