colacacion resultado form

azaz · #1 (**permalink**) 17/05/2011, 03:29

Como puedo hacer que las imagenes queden a la derecha y el titulo y comentario a la derecha(comentario debajo titulo).

codigo:

Código CSS:

Ver original<div class='imagen'><img src='../archivos/".$row['file_one']."'><img src='../archivos/".$row['file_two']."' >
<a href='resultado.php?id=".$row['id_anuncio']."'>".$row['titulo']."</a><br>".$row['comentario']."</div>";

yonaida · #2 (**permalink**) 17/05/2011, 04:03

si entiendo bien tu pregunta no es mas que aplicarle la classe imagen un text-align:right

o.O

azaz · #3 (**permalink**) 17/05/2011, 04:14

Yonaida gracias por contestar pero eso no es

yo en el codigo muestro en pantalla dentro de una capa dos imagenes y un texto con su comentario lo que quiero es mover el titulo y comentario a la derecha 100px esto es para publicar comentarios osea que los datos de la capa se moveran en cada publicacion me explique me puedes ayudar

yonaida · #4 (**permalink**) 17/05/2011, 04:34

suponiendo que las imagenes se visualizen una debajo de otra (por que no lo dices), tienes que crear un contenedor de las imagenes y el titulo y comentario.

<div id='contenedor>
<div id='imagenes'> mis imagenes </div>
<div id='comentario'> <p class='titulo'> titulo </p> <p class='comentarios'> comentarios </p></div>
</div>

#contenedor
{ width: 300px; }
#imagenes { float:left; width:150px; }
#comentario{ float:right; width 100px; }

a la clase titulo y comentarios pon el estilo que quieras y al resto pues adaptalo,
si tienes mas duda mejor pon el codigo que tienes o una imagen para entenderte mejor y poder ayudarte.
comenta que tal va.

azaz · #5 (**permalink**) 17/05/2011, 04:41

no las imagenes van un alado de otra siento por no expecificar mejor
el codigo no me funciono las si te sirve el total de las imagenes son 100px y van una alado de otra

yonaida · #6 (**permalink**) 17/05/2011, 05:04

pues tiene poca imaginacion.

ponle una clase a cada imagen. img1 float:left img2 float:right
y ponle al div imagenes un ancho de 210 asi tienes un margen entre ellas.

azaz · #7 (**permalink**) 17/05/2011, 05:26

no me funciono lo hice asin:

hoja estilo:

Código CSS:

Ver original#contenedor{
    width: 300px;
    }
#imagenes{
        float:left;width:210px;
    }
#imagen1{
    float:left; 
    }
#imagen2{
    float:right;
}
#comentario{
    float:right; width:100px;
    }

codigo :

Código CSS:

Ver original<div id='contenedor>
          <div id='imagenes'>  <img class='imagen1' src='archivos/".$row['file_one']."'><img class='imagen2' src='archivos/".$row['file_two']."' ></div>
          <div id='comentario'> <p class='titulo'><a href='resultado.php?id=".$row['id_anuncio']."'>".$row['titulo']."</a></p><p class='comentarios'>".$row['comentario']." </p></div>
</div>"

yonaida · #8 (**permalink**) 17/05/2011, 06:18

bueno me he animado y te he echo esto.

Css:

Código:

#contenedor{
			width: 350px;
			border:1px solid blue;
			height:300px;
        }
		#imagenes{
            float:left;
			width:220px;
			border:1px solid red;
			margin:5px;
        }
		.imagen1{
			float:left;
        }
		.imagen2{
			float:right;
		}
		#comentario{
			float:right; 
			width:100px;
			border:1px solid red;
			margin:5px;
        }
		.titulo{
			text-align:center; 
			font-weight:bold;
			font-size:14px;
		}
		.comentarios{
			text-align:left;
			color:red;
			font-size:14px;
			margin:5px;
		}

Html

Código:

<div id='contenedor'>
        <div id='imagenes'>
			<img class='imagen1' src='marine_references.jpg'>
			<img class='imagen2' src='navy_references.jpg' >
		</div>
        <div id='comentario'>
			<p class='titulo'>Titulo 1</p>
			<p class='comentarios'>Hellow world Hellow world
									Hellow world Hellow world Hellow world </p>
		</div>
    </div>

asi es como se ve: http://imageshack.us/photo/my-images/62/pruebak.png

y si no es como quieres sube una imagen de ejemplo.

azaz · #9 (**permalink**) 17/05/2011, 07:37

Gracias por la intencion pero realmente quiero algo asin:

http://www.loquo.com/cs/coches-y-motos/coches/1400#
pero en vez de una imagen dos imagenes una al dado de otra.

podras ayudarme

yonaida · #10 (**permalink**) 17/05/2011, 08:24

si pones ejemplos como ese se te ayuda mas rapido y se pierde menos tiempo.

#contenedor{
width: 1000px;
border:1px solid blue;
text-align:left;
}
#imagenes{
float:left;
width:220px;
border:1px solid red;
margin:5px;

}
.imagen1{
float:left;
}
.imagen2{
float:right;
}
#comentario{
float:left;
width:750px;
border:1px solid red;
margin:5px;
}
.titulo{
margin:5px;
text-align:left;
font-weight:bold;
font-size:14px;
}
.comentarios{
text-align:left;
color:red;
font-size:14px;
margin:5px;
}

azaz · #11 (**permalink**) 17/05/2011, 08:36

no me queda bien esta todo desecho no crees que se tiene que meter en una tabla espero me puedas ayudar

yonaida · #12 (**permalink**) 17/05/2011, 14:18

algo estas haciendo mal y es en tu codigo, si copias ese codigo en limpio junto con el css veras que esta igual como el ejemplo que pusiste. si no se puede ver lo que realmente estas haciendo es imposible ayudarte.

pithon · #13 (**permalink**) 17/05/2011, 15:32

yonaida lo hice como me dijiste pero no funciona bien muestro codigo:

Código CSS:

Ver original#contenedor{
width: 1000px;
border:1px solid blue;
text-align:left;
}
#imagenes{
float:left;
width:220px;
border:1px solid red;
margin:5px;
 
}
.imagen1{
float:left;
}
.imagen2{
float:right;
}
#comentario{
float:left;
width:750px;
border:1px solid red;
margin:5px;
}
.titulo{
margin:5px;
text-align:left;
font-weight:bold;
font-size:14px;
}
.comentarios{
text-align:left;
color:red;
font-size:14px;
margin:5px;
}

Código PHP:

Ver original<div id='contenedor'>
        <div id='imagenes'>
            <img class='imagen1' src='/archivos/".$row['file_one']."'>
            <img class='imagen2' src='/archivos/".$row['file_two']."'>
        </div>
        <div id='comentario'>
            <p class='titulo'><a href='resultados.php?id=".$row['id_anuncio']."'>".$row['titulo']."</a></p>
            <p class='comentarios'>".$row['comentario']." </p>
        </div>
    </div>";

yonaida · #14 (**permalink**) 18/05/2011, 02:31

yo lo visualizo asi: http://alcopractica.zxq.net/pruebas/prueba.html

tu problema es que no puedo ayudarte sin ver realmente lo que estas viendo tu. cuelga la pagina con su base de datos y todo en un servidor donde se pueda ver, y entonces a ver que se hace.
yo solo te pase el codigo html, luego tienes tu que mirar como adaptarlo a lo que tienes ahora.

salu2

pithon · #15 (**permalink**) 18/05/2011, 09:58

a vale ahora me funciona bien solo un ultimo detalla no podria pintar el fonde de un color en una capa pero cuando se inserten datos salga una capa de color y la otra sin color

de todas formas te estoy muy agradecido por el tiempo que me dedicastes eres un gran profesional saludos