Alinear Texto e imagen

Vendetta · #1 (**permalink**) 19/07/2010, 07:54

Buenas..

Llevo un rato peleandome con esto pero no consigo sacarlo como quiero. Estoy poniendo una imagen a la izquierda y un numero a la derecha de la imagen. Como es normal, la imagen parece quedar más alta y el numbero queda muy bajo.

La imagen contiene una palabra y el numero normal no sigue la linea de esta y se ve mal. He intentado varias cosas pero no consigo sacarlo como debería. He probado poniendo la imagen el valor "float:left;" pero entonces el numero queda muy arriba y queda aun peor...Tambien le he puesto el valor "display:inline;" y entonces el numero se baja demasiado y queda, de nuevo, aun peor.

Si alguien puede ayudarme a solucionar esto, lo agradeceria (:

TheDark03 · #2 (**permalink**) 19/07/2010, 09:24

Hola.. no siempre basta con explicar.. tienes q reproducir tu error y poner el codigo q usas...

Saludos

Vendetta · #3 (**permalink**) 19/07/2010, 09:40

Cita:

Iniciado por TheDark03

Hola.. no siempre basta con explicar.. tienes q reproducir tu error y poner el codigo q usas...

Saludos

He puesto los dos codigos que he usado y no funcionan...Lo que quiero es que la imagen y el texto quede alineado verticalmente uno al lado del otro en linea...El codigo que uso lo he puesto, los dos que he usado vamos y no se como reproducir mi error xD

TheDark03 · #4 (**permalink**) 19/07/2010, 09:45

jajaja me refiero a que pongas tu css para verlo y tmb tu html q involucre a tu problema... para poder ayudarte mejor

espero tu code o la url de tu pagina

Saludos

TheDark03 · #5 (**permalink**) 19/07/2010, 10:07

no se si deseas esto pero eso llegue a enteder de tu explicacion.. pero esto no es ayuda es ir a ciegas...

<!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>
<style>
.container{float:left;min-width:200px;;min-height:100px;border:1px solid #FF0000;}
.imagen{float:left;border:1px solid #000000;}
.texto{float:left;font-family:"Arial";font-size:50px;margin-top:20px;}
.
</style>
<body>
<div class="container">
<div class="imagen"><img src="calendario.png" /></div>
<div class="texto">19/07/2010</div>
</div>
</body>
</html>

pruebalo derepente te funke y te ayude

Saludos

hybridixstudio · #6 (**permalink**) 19/07/2010, 10:37

lo que te recomiendo es no husar tu CSS dentro de la misma pagina y lo hagas REFerencia a tu pagina web -> <link rel="stylesheet" type="text/css" href="css/estilo.css" />

Mi idea es la siguiente crear dos divs

.divA{ /* Poner del mismo tamaño de la imagen */
float:left;
width:XXXpx;
height:XXXpx;
}

.divB{ /* Manejar Margins Top y Left hasta quedar exactamente como lo quieres */
float:left;
width:XXXpx;
height:100%;
font-family:Arial;
font-size:50px;
marging-top:20px;
}

Para todo esto te recomiendo te bajes el Firebug de Firefox, te ayudara demasiado para poder manejar tu CSS y modificarlo en tiempo real. Saludos y suerte

TheDark03 · #7 (**permalink**) 19/07/2010, 10:43

jajajajaj gracias por el consejo XD! pero eso lo hice en 1 minuto de relajo...
noob

Saludoz

Vendetta · #8 (**permalink**) 19/07/2010, 14:35

Cita:

Iniciado por TheDark03

jajaja me refiero a que pongas tu css para verlo y tmb tu html q involucre a tu problema... para poder ayudarte mejor

espero tu code o la url de tu pagina

Saludos

A ver...pero si he dicho que no tengo css porque los dos codigos que he usado (y que he puesto en el primer post...) no funcionaban como queria, que css quieres que ponga? No tenia css...

Igualmente gracias a los dos. Solo me faltaba ponerle float tambien a la parte del texto y con el margin top lo coloque :P