Ayuda CSS con tablas o divs

Nahuel2k10 · #1 (**permalink**) 21/06/2010, 12:01

Hola amigos me gustaría saber si alguien sabría hacer lo que representa la linea en negro de la imagen, ya sea a través de tabla o con divs.. O si no, poder unir las lineas que salen en el circulo rojo porque no consigo que se lleguen a tocar.

Muchas gracias por vuestra colaboración y ayuda.

Imagen de lo que necesito conseguir: http://dl.dropbox.com/u/871321/ayuda.jpg

jomaruro · #2 (**permalink**) 21/06/2010, 14:11

Hola:

Sería interesante que pusieras el código que ya tienes para ver como ayudarte.

Saludos.

Nahuel2k10 · #3 (**permalink**) 21/06/2010, 15:00

Código HTML:

Ver original<head>
<title>Prueba</title>
<style>
#fila  {
    margin:0 auto;
    padding:0;
    width:100%;
    }
#columnai {
    border:medium none;
    float:left;
    margin:0;
    padding:0;
    width:62%;
    }
p.titulo  {
    color:#CC0000;
    text-align:justify;
    padding: 0 0 10px 0;
    border-bottom: 1px #993333 solid;
    border-right: 1px #993333 solid;
    }
#columnai.texto  {
    padding: 10px 0 0 0;
    text-align:justify;
    border-right: 1px #993333 solid;
}
#columnad {
    float:right;
    margin:0;
    padding:0;
    width:35%;
    }
#columnad.imagen {
    border-right: 1px #993333 solid;
    border-top: 1px #993333 solid;
    border-bottom: 1px #993333 solid;
    padding: 4px;
    vertical-align: middle;
    text-align:center;
}
#wrap 
{
    margin:0 auto;
    overflow:hidden;
    width:850px;
}
</style>
</head>
<body>
<div id="wrap">
    <div id="fila">
        <div id="columnai">
            <p class="titulo">Prueba</p>
        </div>
        <div id="columnad" class="imagen">
          <img src="./img/home.png" width="300" height="300 "/>
        </div>
    </div>
        <div id="fila">
        <div id="columnai" class="texto">
          <p>Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba.</p>
          <br />
        </div>  
  </div>
</div>
</body>
</html>

Y en este link se puede ver funcionando una prueba... la verdad que he intentado muchas cosas a lo mejor esta incluso peor que cuando empece. Bueno espero que me puedan ayudar gracias!!

http://dl.dropbox.com/u/871321/prueba.html

alexk · #4 (**permalink**) 21/06/2010, 15:23

te falto el doctype, y las "ID" no se deben repetir deben ser unicas, para eso estan las "class" para repetir.

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<head>
<title>Prueba</title>
<style type="text/css">
*{ margin:0; padding:0;}
.fila  {
    margin:0 auto;
    width:100%; 
    }
#columnai {
    float:left;
    width:538px;
    }
p.titulo  {
    color:#CC0000;
    text-align:justify;
    padding:10px;
    border-bottom: 1px #993333 solid;
    }
#columnai.texto  {
    text-align:justify;
}
#columnai.texto p{
    padding:10px;
}
#columnad {
    float:right;
    width:300px;
    }
#columnad.imagen {
    border: 1px #993333 solid;
    padding: 5px;
    vertical-align: middle;
    text-align:center;
}
#wrap 
{
    margin:0 auto;
    overflow:hidden;
    width:850px;
}
</style>
</head>
<body>
<div id="wrap">
    <div class="fila">
        <div id="columnai">
            <p class="titulo">Prueba</p>
        </div>
        <div id="columnad" class="imagen">
          <img src="https://www.dropbox.com/static/images/psychobox.png" width="300" height="300    "/>
        </div>
    </div>
    <div class="fila">
        <div id="columnai" class="texto">
          <p>Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba Esto es una prueba.</p>
        </div>  
    </div>
</div>
</body>
</html>

prueba con lo anterior y comentas si se acerca a lo que necesitas

Nahuel2k10 · #5 (**permalink**) 21/06/2010, 15:28

Vaya crack! Joder muchas gracias de verdad!! :D

alexk · #6 (**permalink**) 21/06/2010, 15:34

que bueno que te sirva

chao