Foros del Web » Creando para Internet » CSS »

imagen y texto en misma linea

Estas en el tema de imagen y texto en misma linea en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 10/04/2008, 18:43
 
Fecha de Ingreso: marzo-2005
Mensajes: 149
Antigüedad: 19 años
Puntos: 0
imagen y texto en misma linea

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.
  #2 (permalink)  
Antiguo 10/04/2008, 19:07
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 20 años
Puntos: 63
Re: imagen y texto en misma linea

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
__________________
¡ hey, hou, hou, hey !
  #3 (permalink)  
Antiguo 10/04/2008, 20:22
 
Fecha de Ingreso: marzo-2005
Mensajes: 149
Antigüedad: 19 años
Puntos: 0
Re: imagen y texto en misma linea

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.
  #4 (permalink)  
Antiguo 10/04/2008, 23:53
Avatar de pateketrueke
Modernizr
 
Fecha de Ingreso: abril-2008
Ubicación: Mexihco-Tenochtitlan
Mensajes: 26.399
Antigüedad: 15 años, 11 meses
Puntos: 2534
Re: imagen y texto en misma linea

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....
  #5 (permalink)  
Antiguo 11/04/2008, 00:53
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Re: imagen y texto en misma linea

Cita:
Iniciado por etanol Ver Mensaje
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.
  #6 (permalink)  
Antiguo 11/04/2008, 03:46
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 20 años
Puntos: 63
Re: imagen y texto en misma linea

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
__________________
¡ hey, hou, hou, hey !
  #7 (permalink)  
Antiguo 11/04/2008, 04:01
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Re: imagen y texto en misma linea

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.
  #8 (permalink)  
Antiguo 11/04/2008, 06:37
 
Fecha de Ingreso: marzo-2005
Mensajes: 149
Antigüedad: 19 años
Puntos: 0
Re: imagen y texto en misma linea

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.
  #9 (permalink)  
Antiguo 11/04/2008, 06:53
Avatar de andriuch  
Fecha de Ingreso: abril-2004
Mensajes: 65
Antigüedad: 19 años, 10 meses
Puntos: 0
Re: imagen y texto en misma linea

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.
  #10 (permalink)  
Antiguo 11/04/2008, 07:21
 
Fecha de Ingreso: marzo-2005
Mensajes: 149
Antigüedad: 19 años
Puntos: 0
Re: imagen y texto en misma linea

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.
  #11 (permalink)  
Antiguo 11/04/2008, 09:09
Avatar de pateketrueke
Modernizr
 
Fecha de Ingreso: abril-2008
Ubicación: Mexihco-Tenochtitlan
Mensajes: 26.399
Antigüedad: 15 años, 11 meses
Puntos: 2534
Re: imagen y texto en misma linea

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
  #12 (permalink)  
Antiguo 11/04/2008, 09:54
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 16 años
Puntos: 142
Re: imagen y texto en misma linea

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.
  #13 (permalink)  
Antiguo 11/04/2008, 10:40
Avatar de andriuch  
Fecha de Ingreso: abril-2004
Mensajes: 65
Antigüedad: 19 años, 10 meses
Puntos: 0
Re: imagen y texto en misma linea

Cita:
Iniciado por daPhyre Ver Mensaje
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.

Última edición por andriuch; 11/04/2008 a las 10:45
  #14 (permalink)  
Antiguo 11/04/2008, 10:58
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Re: imagen y texto en misma linea

Cita:
Iniciado por andriuch Ver Mensaje
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.
  #15 (permalink)  
Antiguo 11/04/2008, 11:13
Avatar de andriuch  
Fecha de Ingreso: abril-2004
Mensajes: 65
Antigüedad: 19 años, 10 meses
Puntos: 0
Re: imagen y texto en misma linea

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.
  #16 (permalink)  
Antiguo 11/04/2008, 11:21
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Re: imagen y texto en misma linea

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.
  #17 (permalink)  
Antiguo 11/04/2008, 11:24
 
Fecha de Ingreso: marzo-2005
Mensajes: 149
Antigüedad: 19 años
Puntos: 0
Re: imagen y texto en misma linea

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??
  #18 (permalink)  
Antiguo 11/04/2008, 11:32
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Re: imagen y texto en misma linea

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.
  #19 (permalink)  
Antiguo 11/04/2008, 11:38
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Re: imagen y texto en misma linea



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.
  #20 (permalink)  
Antiguo 11/04/2008, 12:29
 
Fecha de Ingreso: marzo-2005
Mensajes: 149
Antigüedad: 19 años
Puntos: 0
De acuerdo Re: imagen y texto en misma linea

Muchas gracias Mikel, eres un GRANDE!!


FUNCIONA perfectamente!!!

MUCHAS GRACIAS !!!
  #21 (permalink)  
Antiguo 11/04/2008, 15:46
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Re: imagen y texto en misma linea

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

Mikel.
  #22 (permalink)  
Antiguo 27/01/2010, 12:53
 
Fecha de Ingreso: enero-2008
Mensajes: 8
Antigüedad: 16 años, 1 mes
Puntos: 0
Respuesta: imagen y texto en misma linea

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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Tema Cerrado




La zona horaria es GMT -6. Ahora son las 05:54.