Foros del Web » Creando para Internet » CSS »

Ayuda con css

Estas en el tema de Ayuda con css en el foro de CSS en Foros del Web. Hola estoy haciendo algo asi como una tabla, me gustaria hacerlo con css y con divs en lugar de table, les pongo una imagen de ...
  #1 (permalink)  
Antiguo 30/07/2010, 09:25
 
Fecha de Ingreso: septiembre-2003
Ubicación: Merida, yucatan
Mensajes: 282
Antigüedad: 14 años, 3 meses
Puntos: 1
Ayuda con css

Hola estoy haciendo algo asi como una tabla, me gustaria hacerlo con css y con divs en lugar de table, les pongo una imagen de lo que quisiera


Todo esto lo quisiera colocar en una parte de mi pagina en un div tipo #ttcontenedor, este div, esta dentro de un div que permite que mi pagina se centre en la pantalla.

He hecho lo siguiente:

Código HTML:
<html>
<head>
<title></title>
<style type="text/css">
<!--
#ttcontainer {
  background: #000;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 980px;
  height: 147px;
}

#image
{
  background: #041B7E;
  position: absolute;
  top: 0px;
left: 0px;
  width: 320px;
  height: 147px;
}


#header {
  background: #0f0;
  position: absolute;
  top: 0px;
  left: 320px;
  width: 560px;
  height: 40px;
}
#leftcol {
  background: #f00;
  position: absolute;
  top: 0px;
left: 880px;
  width: 100px;
  height: 40px;
}

#content {
  background: #169136;
  position: absolute;
  top: 40px;
left: 320px;
  width: 660px;
  height: 107px;
}



-->
</style>
</head>
<body>

<div id="ttcontainer">
<div id="image"></div>
<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>


</div>
</body>
</html> 
solo que con pposition absolute no es lo que necesito, creo que es con float, pero aun no encuentro que pueda verse adecuadamente.

Cualquier ayuda se las agradeceré

Atentamente

Jorge
__________________
Jorge Couoh es profesor de Computo. sus sitios son: Cheap Web Hostingl y Cheap web hosting Services

Última edición por jcouoh; 30/07/2010 a las 09:51
  #2 (permalink)  
Antiguo 30/07/2010, 12:01
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Ayuda con css

¿leftcol no será rightcol?, jaja
bueno a lo que vinimos:
Código CSS:
Ver original
  1. <style type="text/css">
  2. <style type="text/css">
  3. <!--
  4. #ttcontainer {
  5.   background: #000;
  6.   position:relative
  7.   top: 0px;
  8.   left: 0px;
  9.   width: 980px;
  10.   height: 147px;
  11. }
  12.  
  13. #image
  14. {
  15.   float:left;
  16.   background: #041B7E;
  17.   width: 320px;
  18.   height: 147px;
  19. }
  20.  
  21.  
  22. #header {
  23.     float:left;
  24.   background: #0f0;
  25.   width: 560px;
  26.   height: 40px;
  27. }
  28. #leftcol {
  29.   background: #f00;
  30.   float:right;
  31.   width: 100px;
  32.   height: 40px;
  33. }
  34.  
  35. #content {
  36.     background: #169136;
  37.     width: 660px;
  38.     height: 107px;
  39.     float: left;
  40. }
  41.  
  42. -->
  43. </style>
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #3 (permalink)  
Antiguo 30/07/2010, 16:28
Avatar de _CIM_  
Fecha de Ingreso: junio-2010
Ubicación: Barranquilla - Colombia
Mensajes: 9
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: Ayuda con css

Prueba este y me avisas como te funciono..se adapta a el tamaño de la ventana..

Código HTML:
<html>
<head>
    <title></title>
    <style type="text/css">
        #ttcontainer
        {
            width: 100%;
            float: left;
        }
        #image
        {
            background: #041B7E;
            float: left;
            top: 0px;
            left: 0px;
            width: 40%;
            height: 147px;
        }
        
        
        #header
        {
            background: #0f0;
            float: left;
            top: 0px;
            left: 320px;
            width: 48%;
            height: 40px;
           
        }
        #leftcol
        {
            background: #f00;
            float: left;
            top: 0px;
            left: 880px;
            width: 10%;
            height: 40px;
        }
        
        #content
        {
            background: #169136;
            float: left;
            top: 40px;
            left: 320px;
            width: 58%;
            height: 107px;
        }
    </style>
</head>
<body>
    <div id="ttcontainer">
        <div id="image">
        </div>
        <div id="header">
            Header Section</div>
        <div id="leftcol">
            Left Section</div>
        <div id="content">
            Content Section</div>
    </div>
</body>
</html> 
  #4 (permalink)  
Antiguo 02/08/2010, 08:04
 
Fecha de Ingreso: septiembre-2003
Ubicación: Merida, yucatan
Mensajes: 282
Antigüedad: 14 años, 3 meses
Puntos: 1
Respuesta: Ayuda con css

Muchas gracias , funciona correctamente, saludos
__________________
Jorge Couoh es profesor de Computo. sus sitios son: Cheap Web Hostingl y Cheap web hosting Services

Etiquetas: Ninguno
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 02:53.