imagen y texto en misma linea

etanol · #1 (**permalink**) 10/04/2008, 18:43

Hola a todos:
Mi problema es que me pone en dos líneas diferentes una imagen y un texto.
Es decir, mi idea es poner una imagen que refleje una pagina de inicio y al lado el texto "pagina de inicio" pero me da un salto de línea.

El código css que utilizo es:

Código:

.enlacesfavoritos {    
color: #862101;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:10;
width: 100%
margin: 0px;
padding: 0px 0px 0px 0px;
text-decoration: none;
}

Y en el html tengo:

Código HTML:

<div><img src="imag/iconos/inicio.jpg" width="26" height="2"></div>
<div class="enlacesfavoritos">Pagina de inicio</div>

He probado también con la etiqueta <p> pero no hay forma.

Alguien me puede ayudar??

Muchas gracias.

PatomaS · #2 (**permalink**) 10/04/2008, 19:07

Hola

Los div son elementos de bloque, así que es normal que estén en dos líneas.

Coloca los dos elementos en el mismo div.

Felicidad

etanol · #3 (**permalink**) 10/04/2008, 20:22

Hola PatomaS, gracias por tu respuesta, pero he probado lo que me dices y no funciona

Código HTML:

<div class="enlacesfavoritos" img src="imag/iconos/inicio.jpg" width="26" height="25">Pagina de inicio</div>

...en este caso me desaparece la imagen.

Alguna alternativa??

Gracias.

pateketrueke · #4 (**permalink**) 10/04/2008, 23:53

asi no!!!

<span><img src="icono.gif"/> Aki va el texto</span>

recomiendo ampliamente span para estos casos... hay que estudiar HTML.....
pues han tenido razon en decir que es un elemento de bloque DIV y asi ni na na....

Mikmoro · #5 (**permalink**) 11/04/2008, 00:53

Cita:

Iniciado por etanol

Hola PatomaS, gracias por tu respuesta, pero he probado lo que me dices y no funciona

Código HTML:

<div class="enlacesfavoritos" img src="imag/iconos/inicio.jpg" width="26" height="25">Pagina de inicio</div>

...en este caso me desaparece la imagen.

Alguna alternativa??

Gracias.

Hola, etanol (buen nick

)

Prueba a ponerle a tu selector .enlacesfavoritos un float: left; dejando el código como lo tenías al principio.

Mikel.

PatomaS · #6 (**permalink**) 11/04/2008, 03:46

Hola

El idioma está para ser usado correctamente. Cuando dices "no funciona", quieres decir, "no logro hacerlo bien", o "con el resto de códigos que no les he puesto aquí y que obviamente no conocen porque no son adivinos, se produce algún error". Cosas así.

Aquí te dejo un ejemplo sencillo para que veas el funcionamiento.

Código HTML:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<title>Pruebilla</title>
</head>
<body>
<div id="Base">
	<div><img src="boton_xhtml11.gif">Pagina de inicio</div>
</div>
</body>
</html>

Las imágenes son elementos inline, y el texto sin etiquetas al rededor, es un run-in box, es decir, ambos funcionan como inline; es decir, si pones uno al lado del otro dentro de un contenedor de bloque, ambos estarán lado a lado.

Felicidad

Mikmoro · #7 (**permalink**) 11/04/2008, 04:01

Ah

es que estás poniendo la imagen como parámetro del div:

<div class="enlacesfavoritos" img src="imag/iconos/inicio.jpg" width="26" height="25">Pagina de inicio</div>

Así es natural que te desaparezca la imagen. Haz como te dice PatomaS.

Mikel.

etanol · #8 (**permalink**) 11/04/2008, 06:37

Hola nuevamente, gracias a los dos por responder pero "no logro realizar el comportamiento que deseo"

Con el código del último mensaje de PatomaS si que aparece la imagen y el texto en la misma línea

(enhorabuena) pero sin embargo el estilo del texto no lo conserva.

He probado también la propuesta de Mikmoro [hola]me alegro q te guste el nick

[/hola]

Este es el estilo css:

Código HTML:

.enlacesfavoritos {    
color: #862101;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:10;
width: 100%
margin: 0px;
padding: 0px 0px 0px 0px;
text-decoration: none;
float: left;
}

Y este es el código q empleo:

Código HTML:

<div id="enlacesfavoritos">
	<div><img src="imag/iconos/inicio.jpg">Pagina de inicio</div>
           </div>

¿Cómo puedo unir en la misma línea "imagen y texto" conservando las caracteristicas del texto?

Muchas gracias.

andriuch · #9 (**permalink**) 11/04/2008, 06:53

Haz esto:

Código HTML:

<div style="float:left;"><img src="imag/iconos/inicio.jpg" width="26" height="2"></div>
<div class="enlacesfavoritos">Pagina de inicio</div>

Si te funciona (que debería) metelo en los estilos de la pagina.

Un saludo.

etanol · #10 (**permalink**) 11/04/2008, 07:21

Hola andriuch, muchas gracias,

ahora aparece en la misma línea "imagen y texto"; pero tengo un problema, y es que el texto me aparece alineado verticalmente en la parte superior como muestra la imagen

¿que he de hacer para que aparezca alineado verticalmente en el centro junto a la imagen?

Esta es la idea que necesito:

Muchas gracias.

pateketrueke · #11 (**permalink**) 11/04/2008, 09:09

mmm..... yo pienso que ¿quien hjabra diseñado los estandares?

sigo disiendo ke es mas sencillo con <span>
acerca de lo vertical... prueba con el CSS "vertical-align: middle" (en el estilo del bloke principal)

Pues, no les recomiendo usar div FLOAT's dentro de mas divs... la w3c recomienda usar un <p> o <div> contenedor y los flotantes sean... <img><span>, etc... inline dentro de block

daPhyre · #12 (**permalink**) 11/04/2008, 09:54

Como es clásico, cuando la gente está en el máximo explendor de los CSS, olvidan lo básico de HTML. El error que ocurre es el siguiente: los DIV por default tienen un salto de linea al principio y uno al final. existe una función similar llamada SPAN, que hace lo mismo que el DIV, pero en una misma linea. En otras palabras, a tu código original solo debes sustituir los DIV por los SPAN, y así debería funcionar sin problemas.

Ahora, si necesitas que haga saltos al principio y al final de esta linea, solo encierras TODO este último código dentro de un DIV único, quedando más o menos así:

Código HTML:

<div>
<span><img src="imag/iconos/inicio.jpg" width="26" height="2"></span>
<span class="enlacesfavoritos">Pagina de inicio</span>
</div>

Espero con esto ya soluciones el problema.

andriuch · #13 (**permalink**) 11/04/2008, 10:40

Cita:

Iniciado por daPhyre

Como es clásico, cuando la gente está en el máximo explendor de los CSS, olvidan lo básico de HTML. El error que ocurre es el siguiente: los DIV por default tienen un salto de linea al principio y uno al final. existe una función similar llamada SPAN, que hace lo mismo que el DIV, pero en una misma linea. En otras palabras, a tu código original solo debes sustituir los DIV por los SPAN, y así debería funcionar sin problemas.

Ahora, si necesitas que haga saltos al principio y al final de esta linea, solo encierras TODO este último código dentro de un DIV único, quedando más o menos así:

Código HTML:

<div>
<span><img src="imag/iconos/inicio.jpg" width="26" height="2"></span>
<span class="enlacesfavoritos">Pagina de inicio</span>
</div>

Espero con esto ya soluciones el problema.

Usar TABLES, DIV o SPAN no es por los CSS es por los estándares W3C de XHTML, que no tiene nada que ver con los CSS. Y otra cosa daPhyre los DIV no meten salto de linea antes y despues, eso son los <P>. Sino, comprueba como le ha quedado con mi solucion...

Para solucionar el problema de etanol, creo que se podria solucionar añadiendo un div que englobe a los otros, con un vertical-align:middle, como dice pateketrueke:

Código HTML:

<div style="vertical-align:middle;">
  <div style="float:left;"><img src="imag/iconos/inicio.jpg" width="26" height="2"></div>
  <div class="enlacesfavoritos">Pagina de inicio</div>
</div>

Espero que con ésto des por solucionado tu problema.

Un saludo.

Mikmoro · #14 (**permalink**) 11/04/2008, 10:58

Cita:

Iniciado por andriuch

Para solucionar el problema de etanol, creo que se podria solucionar añadiendo un div que englobe a los otros, con un vertical-align:middle, como dice pateketrueke:

Código HTML:

<div style="vertical-align:middle;">
  <div style="float:left;"><img src="imag/iconos/inicio.jpg" width="26" height="2"></div>
  <div class="enlacesfavoritos">Pagina de inicio</div>
</div>

Espero que con ésto des por solucionado tu problema.

Un saludo.

¿Tú crees que con el vertical-align se va a solucionar lo que busca? Yo creo que no. ¿y con height de 2 pixels? Esto de los 2 px no lo entiendo.

Quizá usando el line-height, de esta manera:

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="es-es">
<head>
<title>Cien por cien de alto</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<style type="text/css">
#enlacesfavoritos {
color: #862101;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:10;
width: 100%
margin: 0px;
padding: 0px 0px 0px 0px;
text-decoration: none;
float: left;
line-height: 20px;
}
</style>
</head>
<div id="enlacesfavoritos"><img src="imag/iconos/inicio.jpg" width="26" height="20"></div>
<div class="enlacesfavoritos">Pagina de inicio</div>
</body>
</html>

Mikel.

andriuch · #15 (**permalink**) 11/04/2008, 11:13

Pues yo creo que si se soluciona con el vertical-align, en teoria si. Pero creo qeu con el line-height tampoco ya que lo que hace es aumentar el alto de la linea, pero por debajo, no??? Tampoco estoy muy seguro de eso, pero no creo que sea la solucion.

Saludos.

Mikmoro · #16 (**permalink**) 11/04/2008, 11:21

Bueno, hay una manera fácil de saberlo: coger el primer código, pegarlo en un html, cambiar la imagen a una propia para que aparezca algo, y ver qué sale en el navegador. Luego hacer lo mismo con el otro código.

http://www.araudi.net/etanol.html

Mikel.

etanol · #17 (**permalink**) 11/04/2008, 11:24

Gracias chicos, pero "no logro realizar el comportamiento que deseo"

La sugerencia de andriuch la he probado pero sigo igual, no me alinea el texto verticalmente.

La sugerencia que propone Mikmoro no me conserva ni la fuente ni su tamaño... aunque la idea es buena la de jugar con el tamaño de la imagen para ajustar el alto de la fuente.

Muchas gracias por vuestro interes, alguna sugerencia más??

Mikmoro · #18 (**permalink**) 11/04/2008, 11:32

Si no te conserva el tamaño es porque he cometido un error al copiar tu código

.

Déjame revisarlo y lo soluconamos, palabra.

Siento haberte liado.

Mikel.

Mikmoro · #19 (**permalink**) 11/04/2008, 11:38

El asunto es que has montado un poco de lio al poner un id enlacesfavoritos en el primer div y una clase enlacesfavoritos en el segundo. Por eso, necesitas usar dos selectores: uno #enlacesfavoritos para el primer div con el float left y eso, y otro .enlacesfavoritos para el texto con su estilo. Prueba esto:

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="es-es">
<head>
<title>Cien por cien de alto</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<style type="text/css">
#enlacesfavoritos {
width: 100%
margin: 0px;
padding: 0px 0px 0px 0px;
float: left;
}
.enlacesfavoritos {
color: #862101;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:10;
text-decoration: none;
line-height: 20px;
}
</style>
</head>
<div id="enlacesfavoritos"><img src="imag/iconos/inicio.jpg" width="26" height="20"></div>
<div class="enlacesfavoritos">Pagina de inicio</div>
</body>
</html>

Hay que procurar usar nombres diferentes, y en la medida de lo posible mi aclaratorios

Mikel.

etanol · #20 (**permalink**) 11/04/2008, 12:29

Muchas gracias Mikel, eres un GRANDE!!

FUNCIONA perfectamente!!!

MUCHAS GRACIAS !!!

Mikmoro · #21 (**permalink**) 11/04/2008, 15:46

Ooéee ooée ooée ooéeeee! oéeeee! oéeeee!!!!

Mikel.

TomasCrespo · #22 (**permalink**) 27/01/2010, 12:53

El codigo está muy bien, tan sólo anotar que también funcionaría sin tanto div, así

Cita:

<img id="enlacesfavoritos" src="img/spainflag.png" width="26" height="20"><a href="" class="enlacesfavoritos">Pagina de inicio</a>

Manteniendo los estilos, claro.

Y otro apunte, hay por ahí un width:100% que sobra, lo que pasa es que funciona el ejemplo porque le falta el punto y coma (;), por lo que el navegador lo ignora

PD: Sí, un poco tarde