Ayuda con css

jcouoh · #1 (**permalink**) 30/07/2010, 08:25

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

C2am · #2 (**permalink**) 30/07/2010, 11:01

¿leftcol no será rightcol?, jaja
bueno a lo que vinimos:

Código CSS:

Ver original<style type="text/css">
<style type="text/css">
<!--
#ttcontainer {
  background: #000;
  position:relative
  top: 0px;
  left: 0px;
  width: 980px;
  height: 147px;
}
 
#image
{
  float:left;
  background: #041B7E;
  width: 320px;
  height: 147px;
}
 
 
#header {
    float:left;
  background: #0f0; 
  width: 560px;
  height: 40px;
}
#leftcol {
  background: #f00;
  float:right;
  width: 100px;
  height: 40px;
}
 
#content {
    background: #169136;
    width: 660px;
    height: 107px;
    float: left;
}
 
-->
</style>

_CIM_ · #3 (**permalink**) 30/07/2010, 15:28

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>

jcouoh · #4 (**permalink**) 02/08/2010, 07:04

Muchas gracias , funciona correctamente, saludos