Problema con listas de textos e imágenes

arijape · 8 Abr 2009, 03:27 · Solicitar retirada

Me gustaría colocar en mi página una lista en la que cada elemento li tenga primero una imagen a la izquierda (comienzo de la lista) y a continuación hacia la derecha aparezca un texto largo de dos o tres líneas. Si lo hago metiendo entre

la imagen con <a... y luego el texto, me sale la cosa pero el texto comienza a verse a la altura de la base de la imagen. Sin embargo, me gustaría saber si se puede hacer que el texto comience a la derecha de la imagen pero desde la zona alta de la imagen, no desde la base. Tal vez sea una cuestión de estilos con css.
Dejo el html y css para aclararlo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Prueba2</title>
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<link rel="stylesheet" href="estilos.css" type="text/css" media="all">
</head>
<body>

<div id="global">

<div id="cabecera">
<div id="cabecera1">

<script languaje="JavaScript">

var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("Domingo","Lunes","Martes","Miercoles","Jueves","Viernes","Sabado")
var montharray=new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre")
document.write("<font color='#FFFFFF' face='Verdana'>"+dayarray+" "+daym+" de "+montharray+" de "+year+"</font>")

</script>

</div>
<div id="cabecera2">
<CENTER><SCRIPT LANGUAGE="JAVASCRIPT">

</script>

<BODY onLoad="startwatch()">
<form name="timedate" onSubmit="0">
<table cellspacing=0 cellpadding=0>
<tr align=center>
<td><INPUT TYPE="text" NAME="time" SIZE=6 VALUE ="..Starti"></td>
<td><INPUT TYPE="text" NAME="parts" SIZE=12 VALUE ="ng.."></td>
<td colspan=2><INPUT TYPE="text" NAME="date" SIZE=14 VALUE ="........"></td>
</tr>
</table>
</form></CENTER>

</div>
<div id="cabecera3">
<div id="imgcabecera3">[contenido no disponible]
</div>
</div>

<h4>Esta es una página de prueba para ver la imagen animada detrás del texto en el firefox y encima en el IE.
Esta es una página de prueba para ver la imagen animada detrás del texto en el firefox y encima en el IE.
</h4>
<h4>¿Por qué ocurre esto?</h4></p>

</div>

<div id="pie">
<div id="sobre">[contenido no disponible]
</div>
</div>

<div id="texto1">
<ul>

[contenido no disponible]
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
zzzzzzzzzzzzzzzzzzzzzzzzzzzz
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
zzzzzzzzzzzzzzzzzzzzzzzzzzzz
zzzzzzzzzzzzzzzzzzzzzzzzzzzz
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz

</div>

</div>

</body>
</html>

* {text-indent:0px ;margin:0px ; padding:0px ; border:0px;list-style:none}
body {background-color: #FFF8DC ;text-align: center}
#global {width:800px ; margin: 0px auto}
#cabecera {background-color: white;float:left;widht:800px; height:250px; overflow : hidden}
#cabecera1 {background-color: red;float:left;width:260px; height:55px;margin-top:5px; margin-left:4px}
#cabecera2 {background-color: yellow;float:left ;width:260px; height:80px; margin-top:5px; margin-left:4px}
#cabecera3 {background-color: orange;float:left;width:260px ; height:80px; margin-top:5px; margin-left:4px}
#imgcabecera3 {float:left ; padding-top:60px;border: 1px solid black; margin-top:10px}
h4 {color:orange ;font-family: verdana; font-weight: bold ; text-decoration: none ; text-align: left}
#pie {background-color: yellow;float:right ;width:780px; height:40px;overflow : hidden}
#sobre {float:right ;width:30px; height:20px;border: 1px solid black;padding:0px 0px 0px 0px;overflow : hidden}

Raulyure · 8 Abr 2009, 04:58 · Solicitar retirada

arijape escribió:Me gustaría colocar en mi página una lista en la que cada elemento li tenga primero una imagen a la izquierda (comienzo de la lista) y a continuación hacia la derecha aparezca un texto largo de dos o tres líneas. Si lo hago metiendo entre
la imagen con <a... y luego el texto, me sale la cosa pero el texto comienza a verse a la altura de la base de la imagen. Sin embargo, me gustaría saber si se puede hacer que el texto comience a la derecha de la imagen pero desde la zona alta de la imagen, no desde la base. Tal vez sea una cuestión de estilos con css.
Dejo el html y css para aclararlo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Prueba2</title>
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<link rel="stylesheet" href="estilos.css" type="text/css" media="all">
</head>
<body>

<div id="global">

<div id="cabecera">
<div id="cabecera1">

<script languaje="JavaScript">

var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("Domingo","Lunes","Martes","Miercoles","Jueves","Viernes","Sabado")
var montharray=new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre")
document.write("<font color='#FFFFFF' face='Verdana'>"+dayarray+" "+daym+" de "+montharray+" de "+year+"</font>")

</script>

</div>
<div id="cabecera2">
<CENTER><SCRIPT LANGUAGE="JAVASCRIPT">

</script>

<BODY onLoad="startwatch()">
<form name="timedate" onSubmit="0">
<table cellspacing=0 cellpadding=0>
<tr align=center>
<td><INPUT TYPE="text" NAME="time" SIZE=6 VALUE ="..Starti"></td>
<td><INPUT TYPE="text" NAME="parts" SIZE=12 VALUE ="ng.."></td>
<td colspan=2><INPUT TYPE="text" NAME="date" SIZE=14 VALUE ="........"></td>
</tr>
</table>
</form></CENTER>

</div>
<div id="cabecera3">
<div id="imgcabecera3">[contenido no disponible]
</div>
</div>

<h4>Esta es una página de prueba para ver la imagen animada detrás del texto en el firefox y encima en el IE.
Esta es una página de prueba para ver la imagen animada detrás del texto en el firefox y encima en el IE.
</h4>
<h4>¿Por qué ocurre esto?</h4></p>

</div>

<div id="pie">
<div id="sobre">[contenido no disponible]
</div>
</div>

<div id="texto1">
<ul>

[contenido no disponible]
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
zzzzzzzzzzzzzzzzzzzzzzzzzzzz
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
zzzzzzzzzzzzzzzzzzzzzzzzzzzz
zzzzzzzzzzzzzzzzzzzzzzzzzzzz
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz

[contenido no disponible]
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
zzzzzzzzzzzzzzzzzzzzzzzzzzzz
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
zzzzzzzzzzzzzzzzzzzzzzzzzzzz
zzzzzzzzzzzzzzzzzzzzzzzzzzzz
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz

[contenido no disponible]
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
zzzzzzzzzzzzzzzzzzzzzzzzzzzz
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
zzzzzzzzzzzzzzzzzzzzzzzzzzzz
zzzzzzzzzzzzzzzzzzzzzzzzzzzz
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz

</div>

</div>

</body>
</html>

* {text-indent:0px ;margin:0px ; padding:0px ; border:0px;list-style:none}
body {background-color: #FFF8DC ;text-align: center}
#global {width:800px ; margin: 0px auto}
#cabecera {background-color: white;float:left;widht:800px; height:250px; overflow : hidden}
#cabecera1 {background-color: red;float:left;width:260px; height:55px;margin-top:5px; margin-left:4px}
#cabecera2 {background-color: yellow;float:left ;width:260px; height:80px; margin-top:5px; margin-left:4px}
#cabecera3 {background-color: orange;float:left;width:260px ; height:80px; margin-top:5px; margin-left:4px}
#imgcabecera3 {float:left ; padding-top:60px;border: 1px solid black; margin-top:10px}
h4 {color:orange ;font-family: verdana; font-weight: bold ; text-decoration: none ; text-align: left}
#pie {background-color: yellow;float:right ;width:780px; height:40px;overflow : hidden}
#sobre {float:right ;width:30px; height:20px;border: 1px solid black;padding:0px 0px 0px 0px;overflow : hidden}

Hola:
Se suele utilizar para que una imagen se ponga a la izquierda y el texto a la derecha y que comience por la parte superior derecha de la imagen un align="left" en los códigos que le pone a la imagen en la página, por ejemplo

[contenido no disponible]--La lógica indica etc. etc.</p>
.............................................................................
También puede probar con el valor align="top"

por ejemplo
<ul>

[contenido no disponible]Este es el valor align top

Pero para que la frase o texto no se vaya hacia abajo, debería ir a la hoja de estilo que pertenece a esa página, y crear un grupo de aes para esa capa en que va a poner la imagen como enlace y que el texto quede a la derecha en la parte superior y crear esto:

Por ejemplo si la capa se llama texto1
en la hoja de estilo sería más o menos así:

#texto1 a{color:blue;display:inline}
#texto1 a:link{}
#texto1 a:visited{}
#texto1 a:hover{color:red;}
#texto1 a:active{}

Lo importante acá en este grupo, es lo que dice display:inline
.............................................................................
Tiene que ir probándo donde pone en su página el cierre de </a> por si desea que el texto también forme parte, y sea un enlace
Saludos

arijape · 8 Abr 2009, 16:41 · Solicitar retirada

Muchas gracias por la respuesta. Lo he solucionado perfectamente con el align="left". No va del todo bien con el align="top" ya que sólo sale la primera linea de texto arriba a la derecha de la imagen. Y con lo de los enlaces no he probado aún, pero de momento con el align left me va bien.
Ahora me surge otro problema que es el siguiente. Cada elemento de la lista, que incluye una imagen y el texto al lado, aparecen uno debajo del otro pegados, sin espacio. Sin embargo, me gustaría dejar un espacio de unos cuantos pixels para separar los elementos. ¿Cómo se puede hacer?
Saludos y gracias de nuevo. :)

Raulyure · 8 Abr 2009, 21:30 · Solicitar retirada

arijape escribió:Muchas gracias por la respuesta. Lo he solucionado perfectamente con el align="left". No va del todo bien con el align="top" ya que sólo sale la primera linea de texto arriba a la derecha de la imagen. Y con lo de los enlaces no he probado aún, pero de momento con el align left me va bien.
Ahora me surge otro problema que es el siguiente. Cada elemento de la lista, que incluye una imagen y el texto al lado, aparecen uno debajo del otro pegados, sin espacio. Sin embargo, me gustaría dejar un espacio de unos cuantos pixels para separar los elementos. ¿Cómo se puede hacer?
Saludos y gracias de nuevo. :)

Hola:

A lo mejor, si en la línea de abajo pone por ejemplo

Eso producirá un espacio entre lo de arriba y lo de abajo

También pruebe poniéndo solamente

Es que no recuerdo cual da mejor resultado

Saludos